The MAIN element contains the main content of the webpage. This may contain different arrangements of the HEADER, ARTICLE, ASIDE, and FOOTER elements depending on the needs of the spcific page. For example:
...
<main>
<header />
<aside />
<article>
<section/>
</article>
</main>
...
Levels
Depending on the number of HEADER and NAV elements, the MAIN element will need to be offset from the top of the page a different amount. To do this use the 'MAIN.level{x}' classes, e.g. 'MAIN.level2' - basically count the number of elements and that is the level.
Most of the pages in this website only require a 'level2' classname.
<main id='main' class='center responsive_page_width level2'>
However, because the pages under HTML Structure, Main contain an extra navigation menu, they require a 'level3'.
<main id='main' class='center responsive_page_width level3'>
The specific directives that implement the levels are shown below. Obviously, if a user project has different menu heights, it will need to adjust these values accordining.
BODY > MAIN.level0 { padding-top: 40px; }
BODY > MAIN.level1 { padding-top: 80px; }
BODY > MAIN.level2 { padding-top:120px; }
BODY > MAIN.level3 { padding-top:160px; }
BODY > MAIN.level4 { padding-top:200px; }
BODY > MAIN.level5 { padding-top:240px; }
BODY > MAIN.level6 { padding-top:280px; }
Arranging MAIN's child elements
The MAIN element acts as a container for any child ARTICLE and ASIDE elements. Flex layout is used as this is now the most flexible method of arranging child elemnts. Using flex, one element may be constained to a specific width, while the other expands to fill the remaining space within the element.
The reason that row-reverse is used is that the ASIDE element, if present, needs to be placed before the ARTICLE element so that CSS directives related to an ARTICLE are able to determine if an ASIDE is present or not, i.e., ASIDE + ARTICLE. Using row-reverse, by default the ASIDE will still be positioned to the right of the ARTICLE.
Note: therefore, the layout of the ARTICLE AND ASIDE elements may be easily reversed by giving the 'flex-direction' a value of 'row'.
By default, all children of MAIN are given a white background.
BODY > MAIN
{
background:transparent;
display: flex;
flex-direction: row-reverse;
flex-wrap: wrap;
justify-content: flex-start;
align-content: flex-start;
position: relative;
}
BODY > MAIN > *
{
background:white;
}
Styling the MAIN elements children
The following CSS directives provide default styling for the different child types of MAIN. Below HEADERS and FOOTERs are given a grey background and stretch the full width of MAIN. By default HEADER elements are center text-aligned.
BODY > MAIN > HEADER,
BODY > MAIN > FOOTER
{
flex-basis:100%;
background:#f5f5f5;
background:#f0f0f0;
background:#efefef;
min-height: 40px;
line-height:40px;
}
BODY > MAIN > HEADER { text-align:center; }
The following makes an ARTICLE stretch to the full width of the MAIN element, if it is not proceeded by an ASIDE.
BODY > MAIN > ARTICLE
{
box-sizing:border-box;
flex-basis:100%;
}
BODY > MAIN > ARTICLE.form
{
background:#efefef;
}
The following directive makes an ASIDE 30% of the width of MAIN and gives it a grey background.
BODY > MAIN > ASIDE
{
box-sizing:border-box;
flex-basis:30%;
background:#efefef;
border-left:none;
}
The following directive makes an ARTICLE 70% of the width of MAIN if it follows an ASIDE.
BODY > MAIN > ASIDE + ARTICLE
{
flex-basis:70%;
}
The following styles navigation within ASIDE elements.
BODY > MAIN > ASIDE NAV
{
display: flex;
flex-direction: column;
justify-content: flex-start;
}
BODY > MAIN > ASIDE NAV A
{
text-decoration:none;
}
BODY > MAIN > ARTICLE > SECTION + SECTION
{
margin-top:30px;
}
Optional attributes
The following CSS directives define the 'padded', 'bordered', and 'rounded' classes, which when used on main affect any direct child of that MAIN element. Depending on exact composition and arrangement of the children of MAIN some of these need to be selectively removed from sides/corners. These are documented below.
BODY > MAIN.padded > *
{
padding:20px;
}
BODY > MAIN.bordered > *
{
xborder:solid 1px #ddd;
border:solid 1px #C8C9C7;
}
BODY > MAIN.rounded > *
{
border-radius:20px;
}
Example configurations
Refer to the subpages to see examples of the different configurations:
Examples of how these may be used are also provided:
Arrangement dependent stying
The directives below remove the border from edges, and the border radius from corners, where appropriate for each distinct arrangement of child elements.
BODY > MAIN.bordered > HEADER
{}
BODY > MAIN.bordered > HEADER + ASIDE
{
border-top: none;
border-left:none;
}
BODY > MAIN.bordered > HEADER + ARTICLE
{
border-top:none;
}
BODY > MAIN.bordered > HEADER + ASIDE + ARTICLE
{
border-top:none;
}
BODY > MAIN.bordered > HEADER ~ FOOTER,
BODY > MAIN.bordered > ARTICLE ~ FOOTER
{
border-top:none;
}
BODY > MAIN.bordered > ASIDE:first-child + ARTICLE
{
border-right:none;
}
BODY > MAIN.rounded > HEADER
{
border-bottom-left-radius:0;
border-bottom-right-radius:0;
}
BODY > MAIN.rounded > HEADER + ASIDE
{
border-top-left-radius:0;
border-top-right-radius:0;
border-bottom-left-radius:0;
}
BODY > MAIN.rounded > HEADER + ASIDE:nth-last-child(3)
{
border-bottom-right-radius:0;
}
BODY > MAIN.rounded > HEADER + ARTICLE
{
border-top-left-radius:0;
border-top-right-radius:0;
}
BODY > MAIN.rounded > HEADER + ARTICLE:not(:last-child)
{
border-bottom-left-radius:0;
border-bottom-right-radius:0;
}
BODY > MAIN.rounded > HEADER + ASIDE + ARTICLE
{
border-top-left-radius:0;
border-top-right-radius:0;
border-bottom-right-radius:0;
}
BODY > MAIN.rounded > HEADER + ASIDE + ARTICLE:last-child
{
border-top-right-radius:0;
}
BODY > MAIN.rounded > HEADER + ASIDE + ARTICLE:not(:last-child)
{
border-bottom-left-radius:0;
border-bottom-right-radius:0;
}
BODY > MAIN.rounded > HEADER ~ FOOTER,
BODY > MAIN.rounded > ARTICLE ~ FOOTER
{
border-top-left-radius:0;
border-top-right-radius:0;
}
BODY > MAIN.rounded > ASIDE:first-child
{
border-top-left-radius:0;
}
BODY > MAIN.rounded > ASIDE:first-child:nth-last-child(2)
{
border-bottom-left-radius:0;
}
BODY > MAIN.rounded > ASIDE:first-child:nth-last-child(3)
{
border-bottom-left-radius:0;
border-bottom-right-radius:0;
}
BODY > MAIN.rounded > ASIDE:first-child + ARTICLE
{
border-top-right-radius:0;
}
BODY > MAIN.rounded > ASIDE:first-child + ARTICLE:nth-last-child(2)
{
border-bottom-left-radius:0;
border-bottom-right-radius:0;
}
BODY > MAIN.rounded > ASIDE:first-child + ARTICLE:last-child
{
border-bottom-right-radius:0;
}
BODY > MAIN.rounded > ARTICLE:first-child:nth-last-child(2)
{
border-bottom-left-radius:0;
border-bottom-right-radius:0;
}