Learning S2 Complete Style

S2 Complete Style is a pretty huge layout—it's easy to get overwhelmed! [info]s2complete is a complete documentation resource brought to you by [info]tessisamess.

This documentation breaks down S2 Complete Style piece by piece so you can learn just how every piece works. Once you understand the layout dynamics you'll be glad it's such a comprehensive sheet; it makes the possibilities nearly endless!

December 2017

S M T W T F S
     12
3456789
10111213141516
17181920212223
24252627282930
31      

Syndicate

RSS Atom
Powered by InsaneJournal

Posts Tagged: '02.+page+containers:+a.+containers'

Dec. 4th, 2017

02. Page Containers - Containers

An S2 Complete Style layout is wrapped in two containers that hold the entirety of the contents. This is a really useful set of containers to have, because you essentially get two nested body tags inside of your body tag to play with layering, margins, padding, borders, et cetera.

body
#container
#container-inner
#header
#beta
#alpha


The #container div is just inside of the body tag. Its only default style is a background color. This is the ID you'll want to add widths and margins to if you want to resize the entire layout width, including the header.

#container{background:transparent;}

The #container-inner div is right after that and has no default styling. You can leave this out of your stylesheet if you have no plans to use it. You could alternatively resize your layout here if you're playing with background layering using body and #container.

#container-inner{}