Modern Web Engineerinng

[munem15-4873]

Custom Layout Structure


For extreme size changes, we may want to change the layout altogether,
either through a separate style sheet or, more efficiently, through a CSS
media query. This does not have to be troublesome; most of the styles can
remain the same, while specific style sheets can inherit these styles and
move elements around with floats, widths, heights and so on.

For example, we could have one main style sheet (which would also be the
default) that would define all of the main structural elements, such as
#wrapper, #content, #sidebar, #nav, along with colors, backgrounds
and typography. Default flexible widths and floats could also be defined.

If a style sheet made the layout too narrow, short, wide or tall, we could
then detect that and switch to a new style sheet. This new child style sheet
would adopt everything from the default style sheet and then just redefine
the layout's structure.


Here is the style.css (default) content:

1 /* Default styles that will carry to the child style sheet */
2
3 html,body{
4 background...
Smashing eBook􁴹Modern Web Design and Development 􁴹 16
5 font...
6 color...
7 }
8
9 h1,h2,h3{}
10 p, blockquote, pre, code, ol, ul{}
11
12 /* Structural elements */
13 #wrapper{
14 width: 80%;
15 margin: 0 auto;
16
17 background: #fff;
18 padding: 20px;
19 }
20
21 #content{
22 width: 54%;
23 float: left;
24 margin-right: 3%;
25 }
26
27 #sidebar-left{
28 width: 20%;
29 float: left;
30 margin-right: 3%;
31 }
32
33 #sidebar-right{
34 width: 20%;
35 float: left;
36 }
Smashing eBook􁴹Modern Web Design and Development 􁴹 17
Here is the mobile.css (child) content:
1 #wrapper{
2 width: 90%;
3 }
4
5 #content{
6 width: 100%;
7 }
8
9 #sidebar-left{
10 width: 100%;
11 clear: both;
12
13 /* Additional styling for our new layout */
14 border-top: 1px solid #ccc;
15 margin-top: 20px;
16 }
17
18 #sidebar-right{
19 width: 100%;
20 clear: both;
21
22 /* Additional styling for our new layout */
23 border-top: 1px solid #ccc;
24 margin-top: 20px;
25 }