EASINGINTO WEBDEVELOPMENT7.7 CSS FRAMEWORKS
1   INTRODUCTION    2   HTML    3   TABLES    4   FORMS    5   HTTP    6   CSS    7   CSS FRAMEWORKS    8   DIGITAL MEDIA2...
The Problem with CSS    Most web design is based around two-dimensional     (2D) grids.       Unfortunately,            ...
1D 2D1-D vs 2-D LayoutsRachek Andrew & Kevin Yank, Everything you know about CSS is wrong   (Sitepoint, 2008).
CSS Layout Techniques   In d t    I order to coerce a vertical stack of block elements into a                            ...
Layout Using Tables   That is why HTML tables seem to be such a    “natural” way of doing layout.     It is similar to t...
CSS Table Layout Mode   We can achieve 2D layouts without the complexity    of positioning and floats using CSS Table Lay...
CSS Table Layout Mode<div id= wrapper > <div id="wrapper">  <div id="header">       ⋮ header content…  </div>   <div id="m...
Aren tAren’t Tables for Layout Pure Evil?   Using HTML tables for layout is wrong   Here we are using CSS table display ...
Why aren’t we using this?    aren t    Still too many people using IE7 and below.      Perhaps        by 2013 we will al...
CSS 3 Grids    CSS 3 h another table-less solution to grid layout            has     h      bl l       l i       id l    ...
Why Grids?   Closer in approach to print-design.   Grids are an easy way of achieving design                    y y     ...
http://www.w3.org/TR/css3‐grid
CSS Frameworks to the Rescue   While IE 6+7 still has a non-trivial marketshare, we    can use CSS Frameworks as a way to...
Common CSS Frameworks   960 G id System        Grid S t       Developers construct layouts using a grid system based on ...
Drawbacks to CSS Frameworks   Typically limited to fixed sizes provided by    framework.   Ultimately, you are adding pr...
Why 950px, 960px, or 974px?960 is evenly divisible by 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30,32, 40, 48, 60, 64, 80,...
Grid Exampleshttp://www.subtraction.com/pics/0703/grids_are_good.pdf
Grid Exampleshttp://www.subtraction.com/pics/0703/grids_are_good.pdf
960 Grids – 12 Columns
960 Grids – 12 Columns
960 Grids – 16 Columns
960 Grids – 16 Columns
Examples<link rel="stylesheet" href="css/reset.css" /><link rel="stylesheet" href="css/text.css" />    960 Grid CSS files ...
How many grid columns?
How many rows?
<div class="container_12">    <div class="grid_12"><p>grid_12</p></div>    <div class="clear"></div>     di   l    " id 12...
How many grid columns?Notice that content can “spill” into gutters
grid_12                         How many rows?grid_4        grid_5            grid_3grid_4                 grid_8         ...
Nested Rows                                                                                        <div class="container_1...
grid_4                 grid_5                              grid_3    grid_4                               grid_8          ...
Web I - 07 - CSS Frameworks
Upcoming SlideShare
Loading in …5
×

Web I - 07 - CSS Frameworks

2,710 views

Published on

CSS Frameworks for Web Development 1 Course suitable for degree following CIT/CIS/CS ACM model curriculum.

Published in: Technology, Education
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,710
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
52
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Web I - 07 - CSS Frameworks

  1. 1. EASINGINTO WEBDEVELOPMENT7.7 CSS FRAMEWORKS
  2. 2. 1 INTRODUCTION 2 HTML 3 TABLES 4 FORMS 5 HTTP 6 CSS 7 CSS FRAMEWORKS 8 DIGITAL MEDIA2 9 USABILITY
  3. 3. The Problem with CSS Most web design is based around two-dimensional (2D) grids.  Unfortunately, CSS was not designed to describe 2D grids.  Rather, CSS assumes that every page will be made up of a vertical stack of blocks, piled one on top of another. Rachek Andrew & Kevin Yank, Everything you know about CSS is wrong (Sitepoint, 2008).
  4. 4. 1D 2D1-D vs 2-D LayoutsRachek Andrew & Kevin Yank, Everything you know about CSS is wrong (Sitepoint, 2008).
  5. 5. CSS Layout Techniques In d t I order to coerce a vertical stack of block elements into a ti l t k f bl k l t i t grid-like layout, designers have used absolute positioning or floating to force blocks to sit alongside each other. Problems  Complex!!  Browser compatibility B ibili  Clearing floats  Footers  Faux columns required  Nesting columns is very tricky  Source order S d  In other words, CSS layouts are a total hack!
  6. 6. Layout Using Tables That is why HTML tables seem to be such a “natural” way of doing layout.  It is similar to the way traditional print design works (i.e., using grids) http://www.savorthesuccess.com http://www.ideabook.com/tutorials/
  7. 7. CSS Table Layout Mode We can achieve 2D layouts without the complexity of positioning and floats using CSS Table Layout Mode.  Only works in modern browsers that support CSS 2.1 (IE8, FF 3, Safari 4, Chrome).
  8. 8. CSS Table Layout Mode<div id= wrapper > <div id="wrapper"> <div id="header"> ⋮ header content… </div>  <div id="main">  <div id="nav">  ⋮ navigation column content… navigation column content…  </div>  <div id="extras"> ⋮ news headlines column content…  </div>  <div id="content">  ⋮ main article content…  </div>  </div> </div> #main { display: table;  p p ; } border‐collapse: collapse; }  #nav { display: table‐cell;  width: 180px;  background‐color: #e7dbcd; }  #extras { display: table‐cell;  width: 180px;  padding‐left: 10px;  padding left: 10px; border‐right: 1px dotted #d7ad7b; }  #content { display: table‐cell;  width: 380px;  padding‐left: 10px; }  Rachek Andrew & Kevin Yank, Everything you know about CSS is wrong (Sitepoint, 2008).
  9. 9. Aren tAren’t Tables for Layout Pure Evil? Using HTML tables for layout is wrong Here we are using CSS table display mode to g p y describe how to display/present content.  Using CSS to describe presentation is pure goodness!
  10. 10. Why aren’t we using this? aren t Still too many people using IE7 and below.  Perhaps by 2013 we will all be able to use CSS table layout. http://stats.wikimedia.org/wikimedia/squids/SquidReportClients.htm
  11. 11. CSS 3 Grids CSS 3 h another table-less solution to grid layout has h bl l l i id l called grid positioning that will be even more p powerful.  Currently only support in FF 3.5, Safari 4, Chrome body {  grid‐columns: 10em,1em,10em,1em,10em,1em,10em,1em,10em,1em,10em, 1em,10em; } #promo {  position: absolute;  left: 1gr;  width: 4gr; width: 4gr; } Rachek Andrew & Kevin Yank, Everything you know about CSS is wrong (Sitepoint, 2008).
  12. 12. Why Grids? Closer in approach to print-design. Grids are an easy way of achieving design y y g g consistency.
  13. 13. http://www.w3.org/TR/css3‐grid
  14. 14. CSS Frameworks to the Rescue While IE 6+7 still has a non-trivial marketshare, we can use CSS Frameworks as a way to more easily create complex CSS-based layouts.  Still use the hacks of floats and positioning, but  someone else has done all the hard work for you.
  15. 15. Common CSS Frameworks 960 G id System Grid S t  Developers construct layouts using a grid system based on a fixed width of 960 pixels.  There are two variants: 12 and 16 columns. 6 Blueprint  Originally a Google project. g y g p j  Uses a grid of 24 columns, 950px fixed width. YUI Grids  A Y h project. D Yahoo j t Doesn’t use grid metaphor. ’t id t h  Supports fluid-width (100%) layouts as well as preset fixed-width layouts at 750px, 950px, and 974px.  Six S preset templates, and the ability to stack and nest subdivided l d h bl k d bd d d regions of two, three, or four columns. There are dozens of others.
  16. 16. Drawbacks to CSS Frameworks Typically limited to fixed sizes provided by framework. Ultimately, you are adding presentation back into y your markup.p  E.g.,if fixed width of 960 pixels and you have the following markup: <div class span 4 then really div class=“span-4”> not much difference from the old table layout (except p) less markup).
  17. 17. Why 950px, 960px, or 974px?960 is evenly divisible by 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30,32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 and 480.(i.e.,(i e many grid possibilities) possibilities).http://www.subtraction.com/pics/0703/grids_are_good.pdf
  18. 18. Grid Exampleshttp://www.subtraction.com/pics/0703/grids_are_good.pdf
  19. 19. Grid Exampleshttp://www.subtraction.com/pics/0703/grids_are_good.pdf
  20. 20. 960 Grids – 12 Columns
  21. 21. 960 Grids – 12 Columns
  22. 22. 960 Grids – 16 Columns
  23. 23. 960 Grids – 16 Columns
  24. 24. Examples<link rel="stylesheet" href="css/reset.css" /><link rel="stylesheet" href="css/text.css" /> 960 Grid CSS files http://960.gs/<link rel="stylesheet" href="css/960.css" /><div class="container_12"> Indicates 12 column grid <div class="grid_12"><p>940px</p></div> First row will span 12 grids <div class="clear"></div> Each row must be terminated with this clear !! <div class="grid_6"><p>460px</p></div>   Second row contains 2 divs that each span 6 grids <div class="grid_6"><p>460px</p></div> <div class="clear"></div> Each row must be terminated with this clear !!</div>
  25. 25. How many grid columns?
  26. 26. How many rows?
  27. 27. <div class="container_12"> <div class="grid_12"><p>grid_12</p></div> <div class="clear"></div> di l " id 12" id 12 / /di <div class="grid_12"><p>grid_12</p></div> <div class="clear"></div> <div class="grid_7"><p>grid_7</p></div> <div class="grid_5"><p>grid_5</p></div> <div class="clear"></div> <div class="grid_12"><p>grid_12</p></div> <div class="clear"></div> <div class="grid_3"><p>grid_3</p></div> <div class="grid_3"><p>grid_3</p></div> <div class="grid_3"><p>grid_3</p></div> <div class="grid_3"><p>grid_3</p></div> <div class="clear"></div> <div class="grid_12"><p>grid_12</p></div> g p g /p / <div class="clear"></div> <div class="grid_4"><p>grid_4</p></div> <div class="grid_4"><p>grid_4</p></div> <div class="grid_4"><p>grid_4</p></div> <div class="clear"></div></div>
  28. 28. How many grid columns?Notice that content can “spill” into gutters
  29. 29. grid_12 How many rows?grid_4 grid_5 grid_3grid_4 grid_8 What about this? grid_12
  30. 30. Nested Rows <div class="container_12"> … <div class="grid_4"> <h3>More Information</h3> … </div> <div class="grid_8"> grid_4 grid_8 <h2>Welcome to Airfeed</h2> … First grid in nested row marked with alpha Last grid in nested row marked with omega <div class="grid_2 alpha"> … </div> # of grids in nested row = # grids in parent <div class="grid_2"> 2+2+2+2 = 8 … </div> <div class="grid_2"> grid_2 grid_2 grid_2 grid_2 … </div> <div class="grid_2 omega"> … </div> grid_4 grid_4 <div class="grid_4 alpha"> … </div> <div class="grid_4 omega"> … </div> </div> <div class="grid_12"> <div class="grid_3 alpha"> … /di </div> <div class="grid_9 omega"> grid_12grid_3 grid_9 … </div> </div> </div>
  31. 31. grid_4 grid_5 grid_3 grid_4 grid_8 grid_2 grid_2 grid_2 grid_2 grid_4 grid_4 grid_12grid_3 grid_9

×