News:

Skill.jobs Forum is an open platform (a board of discussions) where all sorts of knowledge-based news, topics, articles on Career, Job Industry, employment and Entrepreneurship skills enhancement related issues for all groups of individual/people such as learners, students, jobseekers, employers, recruiters, self-employed professionals and for business-forum/professional-associations.  It intents of empowering people with SKILLS for creating opportunities, which ultimately pursue the motto of Skill.jobs 'Be Skilled, Get Hired'

Acceptable and Appropriate topics would be posted by the Moderator of Skill.jobs Forum.

Main Menu

Modern Web Engineerinng

Started by munem15-4873, September 27, 2018, 12:09:31 AM

Previous topic - Next topic

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 }