Hellyer Bootstrap Image Abstract ARTICLES
<p>Apr 06, 2016 07:11 PM <b>THIS IS ESSENTIAL DESIGN INFO for my image-abstract divs</b> !!!!!</p>
<p>
This was a huge struggle for me to get right on my own. As usual RH shows the way
(in his original project as follows...</p>
<p>
my folder ARTICLES shows in smallest form (taken from <b>bobblum.combootstrapv2</b> ...)
how RH = Rich Hellyer does his image-abstract pairs. There is NOTHING in his
main.css that helps this. It's all in the html.</p>
<p>
1) <b>NO container-fluid </b>...</p>
<p>
ONLY <div class="container"> </div> at the top level in the <body></p>
<p>
2) he then immediately INSERTS a</p>
<p>
GRID with a single row and two columns </p>
<p>
the first column is where all the article (banners) go...</p>
<p>
<div class="row"></p>
<p>
<div class="col-sm-9">... (why only 9 rather than 12...
it is because he uses the other col-sm-3 (the rightward 3 columns for a sidebar menu
which I have eliminated.)</p>
<p>
BUT NOTE: I experiment with this....
KEEP that RIGHTWARD sidebar of 3 columns THERE even though it is BLANK!!!!
Without the 12 column main class is too BIG and the text stretches across
the entire monitor.... that is BAD!!!! I really WANT that 3 column right side offset...
otherise the article text is spread out over too large a width!!!</p>
<p>
and keep this at col-sm-9 for the main div below that includes all the article divs.</p>
<p>
(the empty col-sm-3 with no content... follows the entire main div )</p>
<p>
<div class ="main"> note: main is his class that contains ALL the image-abstract divs</p>
<p>
and then</p>
<p>
<div class ="article"> .... </div> each of these may or may not include a headline div.
<div class ="article"> .... </div>
<div class ="article"> .... </div></p>
<p>
that headline div he handles as follows...</p>
<p>
<div class="row"></p>
<p>
<<b>div class="col-sm-8 col-sm-offset-4"</b>></p>
<p>
<h3> New (February 2016): <a href="ESSAYS/ORIGINALS/Future-of-Humanity.html">AI and the Future of Humanity </a> </h3></p>
<p>
</div>
</div></p>
<p>
(the effect of the col-sm-offset-4 is to ALIGN the headline with the abstract below it
(since the IMAGE that follows, also occupies a column of 4 (in the BS 12 column system)</p>
<p>
this works even though the col-sm-offset-4 follows the col-sm-8 in class order here...</p>
<p>
<div class="col-sm-8 col-sm-offset-4"> ...............</p>
<p>
tested by me.... yes... the order does NOT matter... the offset pushes it to the RIGHT
no matter where it is in the code.</p>
<p>
Now, does sm or md or lg matter... and what is the effect?
YES... it IS affected by the media queries that are invoked by lg versus small...
ie it ONLY has the correct 4 column offset when in the LARGE screen mode...
that is NOT what is wanted. we want the offset to ONLY stop taking effect when
at xs width.</p>
<p>
the slider in DW does work to reduce the width of the offset...
ie the offset only comes into effect when ABOVE sm... which launches
the media query. (I see that when I set it to xs... then nothing happens, ie
the offset is ALWAYS in effect.)
So, sm is the correct value!!!</p>
<p>
Finally, if you do NOT want a headline... just get rid of that div...
but I DO ALWAYS want a headline... it bears the main link to the article!!!!</p>
<p>
</p>
<p>
On to the image-abstract piece of it..... (the guts of it!)</p>
<p>
This is very easy!!! He just inserts</p>
<p>
a single BS row with two columns...as follows...</p>
<p>
<div class="row"></p>
<p>
<div class="col-sm-4"></p>
<p>
<img class="img img-responsive" src="images/future_eye.jpg" alt=""></div></p>
<p>
<div class="col-sm-8"></p>
<p>
<p> The prospect of <strong>horrific AI taking over soon </strong> has been prominent in recent news
as Elon Musk and Stephen Hawking have posted warnings. Elon wasn't born yet when
I began studying AI and neuroscience. The above essay is my take on this. In brief ... </p>
*</p>
<p>
4 small columns for the image and 8 columns for the abstract... which can be of any length...</p>
<p>
the image... he does as</p>
<p>
INSERT image and brose to it... then qualify it with
class="img img-responsive" to make it responsive....
no centering... no vert alignment... nothing... it's fine as it is!!! simple.</p>
<p>
I see something is cutting is down in size to be 158px by 98 px high
to fit inside the 4 columns.</p>
<p>
Iinspect in google... yes the native image seems to be 284 by 177... so is actually be
re-sized by BOOTSTRAP!!!! (I see that by inspecting it inside DW and then sliding
the right side slider to resize the Live view window.</p>
<p>
OR, you can inspect the image insdie Google Chrome dev tools as you are in responsive mode
and use the slider... it DOES dynamically resize !!!!</p>
<p>
The abstract itself... is super simple!!!!</p>
<p>
just lay the paras right into the rightside column which is the</p>
<p>
<div class="col-sm-8"> ... (note: the image is located inside the leftmost <div class="col-sm-4"> </p>
<p>
are those floated? NO!!! they cannot be... cuz BS is setting everything by default
except the WIDTH.... do "show set" in DW to see that.</p>
<p>
as an expt, I reset the columns to col-sm-3 for the image and col-sm-9 for the abstract...</p>
<p>
I see that the image is now in a 25% width div which is 3/12s = 25%
and the abstract colun is now at 75%...</p>
<p>
as another expt, I reset the columns to col-sm-6 for the image and col-sm-6 for the abstract...</p>
<p>
I see that the image is now in a 50% width div which is 6/12s = 50%
and the abstract colun is now at 50%...also...</p>
<p>
The correct setting should be exactly as RH = Richard laid it out</p>
<p>
3 columns for the image and 9 columns for the abstract...</p>
<p>
</p>
<p>
Also note: NO SEPARATE DIV is required for the IMAGE
you just insert it directly into the leftmost BS col-sm-3 ....</p>
<p>
and NO SEP. DIV is required for the ABSTRACT...
you just lay the para directly into the rightmost BS col-sm-9...</p>
<p>
also note: the image does not need to have center-block
and does not need any special treatment in the CSS...
the CSS is entirely empty !!!! nothing requried!!! EASY!!!</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>