The content blocks
<div class="col">
740px wide on large screen
This page is for information only, to illustrate the structure of blocks that can make up the web pages if so desired. Everything is thrown in so does not represent a typical page! 'col' is the default 740 pixel-wide content column and in reality would be interrupted only for 'flexcontainer 1' and 'flexcontainer 2'. The additional 'blocks' illustrated are optional.
The #content div is light grey, max-width 1280px, so reduces with screen width.
This text is in the default 'col' div (with a white background), max-width only (740px).
Temporarily end 'col' to see what happens.
</div>
<main id="content">
1280px wide on large screen
This text is in the #content div only, by putting a temporary break in 'col'. To do this, close 'col', write the content, then re-open 'col'. Remember to re-open 'col' immediately after. #content is essentially a container div for other blocks and is not intended for content. #wrap also exists as a wrapper for #content. You could theoretically close #content and 'col' at the top (in that order), put content in #wrap, then re-open 'col and #content at the bottom (in that order), but that seems stupid because the content in #wrap only would be as wide as the screen.
Start 'col' again.
<div class="col">
<div class="w1200">
This is <div class="w1200">: 4 widths depending on screen width: 1200px, 1024px, 860px, and 740px. Less than 740px switches to mobile styles.
<section>
This is the 'section' div in 'w1200' with a fixed width of 600px;
</div>
'col' continues ...
<section>
This is the 'section' div in 'col' with a fixed width of 600px;
'col' continues ...
Now end 'col' temporarily for 'flexcontainer1'.
</div>
<div class="flexcontainer1">
This requires a temporary break in 'col'. Width is 'auto' up to a maximum of 1240px.
It is designed for an image next to a text box on wider screens. The image can be left or right of the text box. This is done with the class 'row' or 'rowreverse'. Caption optional.
This image is 640px wide (the maximum). A wider image will still show as 640px wide.
Start 'col' again.
<div class="col">
The next block is 'flexcontainer2' with a pink background. It is designed to contain a series of white boxes as 'flexitems'. That is all. Dont' put anything else in because it won't work.
Now end 'col' temporarily for 'flexcontainer2'.
</div>
<div class="flexcontainer2">
Start 'col' again.
<div class="col">
Everything works if these rules are followed.
