web i - 07 - css frameworks

32
EASING INTO WEB DEVELOPMENT DEVELOPMENT 7 CSS FRAMEWORKS 7. CSS FRAMEWORKS

Upload: randy-connolly

Post on 27-Jan-2015

115 views

Category:

Technology


3 download

DESCRIPTION

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

TRANSCRIPT

Page 1: Web I - 07 - CSS Frameworks

EASING INTO WEB DEVELOPMENTDEVELOPMENT7 CSS FRAMEWORKS7. CSS FRAMEWORKS

Page 2: Web I - 07 - CSS Frameworks

INTRODUCTION1HTML2

3 TABLES3FORMS4 FORMS4HTTP5 HTTP5CSS6 CSS6CSS FRAMEWORKS7DIGITAL MEDIA8

2 USABILITY9

Page 3: Web I - 07 - CSS Frameworks

The Problem with CSSThe 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).

Page 4: Web I - 07 - CSS Frameworks

1-D vs 2-D Layouts1 D vs 2 D Layouts

Rachek Andrew & Kevin Yank, Everything you know about CSS is wrong (Sitepoint, 2008).

Page 5: Web I - 07 - CSS Frameworks

CSS Layout TechniquesCSS Layout Techniques

I d t ti l t k f bl k l t i t In order to coerce a vertical stack of block elements into a grid-like layout, designers have used absolute positioning or floating to force blocks to sit alongside each other.

Problems Complex!!

B ibili Browser compatibility Clearing floats Footers Faux columns required Nesting columns is very tricky

S d Source order In other words, CSS layouts are a total hack!

Page 6: Web I - 07 - CSS Frameworks

Layout Using TablesLayout 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.ideabook.com/tutorials/ http://www.savorthesuccess.com

Page 7: Web I - 07 - CSS Frameworks

CSS Table Layout ModeCSS 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).

Page 8: Web I - 07 - CSS Frameworks

CSS Table Layout ModeCSS 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; border‐collapse: collapse; } p p ; }

#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).

Page 9: Web I - 07 - CSS Frameworks

Aren’t Tables for Layout Pure Evil?Aren 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! Using CSS to describe presentation is pure goodness!

Page 10: Web I - 07 - CSS Frameworks

Why aren’t we using this?Why aren t we using this?

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

Page 11: Web I - 07 - CSS Frameworks

CSS 3 GridsCSS 3 Grids

CSS 3 h h bl l l i id l CSS 3 has another table-less solution to grid layout called grid positioning that will be even more powerful.p 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;

Rachek Andrew & Kevin Yank, Everything you know about CSS is wrong (Sitepoint, 2008).

width: 4gr;}

Page 12: Web I - 07 - CSS Frameworks

Why Grids?Why Grids?

Closer in approach to print-design. Grids are an easy way of achieving design y y g g

consistency.

Page 13: Web I - 07 - CSS Frameworks
Page 14: Web I - 07 - CSS Frameworks

http://www.w3.org/TR/css3‐grid

Page 15: Web I - 07 - CSS Frameworks

CSS Frameworks to the RescueCSS 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.

Page 16: Web I - 07 - CSS Frameworks

Common CSS FrameworksCommon CSS Frameworks

960 G id S t 960 Grid System Developers construct layouts using a grid system based on a fixed width

of 960 pixels. 6 There are two variants: 12 and 16 columns.

Blueprint Originally a Google project. g y g p j Uses a grid of 24 columns, 950px fixed width.

YUI Grids A Y h j t D ’t id t h A Yahoo project. Doesn’t use grid metaphor. Supports fluid-width (100%) layouts as well as preset fixed-width

layouts at 750px, 950px, and 974px. S l d h b l k d bd d d Six preset templates, and the ability to stack and nest subdivided regions of two, three, or four columns.

There are dozens of others.

Page 17: Web I - 07 - CSS Frameworks

Drawbacks to CSS FrameworksDrawbacks to CSS Frameworks

Typically limited to fixed sizes provided by framework.

Ultimately, you are adding presentation back into your markup.y p E.g., if fixed width of 960 pixels and you have the

following markup: <div class=“span-4”> then really following markup: div class span 4 then really not much difference from the old table layout (except less markup).p)

Page 18: Web I - 07 - CSS Frameworks

Why 950px, 960px, or 974px?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 many grid possibilities)

http://www.subtraction.com/pics/0703/grids_are_good.pdf

(i.e., many grid possibilities).

Page 19: Web I - 07 - CSS Frameworks

Grid ExamplesGrid Examples

http://www.subtraction.com/pics/0703/grids_are_good.pdf

Page 20: Web I - 07 - CSS Frameworks

Grid ExamplesGrid Examples

http://www.subtraction.com/pics/0703/grids_are_good.pdf

Page 21: Web I - 07 - CSS Frameworks

960 Grids – 12 Columns960 Grids 12 Columns

Page 22: Web I - 07 - CSS Frameworks

960 Grids – 12 Columns960 Grids 12 Columns

Page 23: Web I - 07 - CSS Frameworks

960 Grids – 16 Columns960 Grids 16 Columns

Page 24: Web I - 07 - CSS Frameworks

960 Grids – 16 Columns960 Grids 16 Columns

Page 25: Web I - 07 - CSS Frameworks

ExamplesExamples

<div class="container_12">

<link rel="stylesheet" href="css/reset.css" /><link rel="stylesheet" href="css/text.css" /><link rel="stylesheet" href="css/960.css" />

960 Grid CSS files http://960.gs/

Indicates 12 column grid

<div class="grid_12"><p>940px</p></div><div class="clear"></div>

<div class="grid_6"><p>460px</p></div>  

First row will span 12 grids

Each row must be terminated with this clear !!

Second row contains 2 divs that each span 6 grids<div class="grid_6"><p>460px</p></div><div class="clear"></div>

</div>Each row must be terminated with this clear !!

Page 26: Web I - 07 - CSS Frameworks

How many grid columns?

Page 27: Web I - 07 - CSS Frameworks

How many rows?

Page 28: Web I - 07 - CSS Frameworks

<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>

Page 29: Web I - 07 - CSS Frameworks

How many grid columns?

Notice that content can “spill” into gutters

Page 30: Web I - 07 - CSS Frameworks

How many rows?grid_12

grid_4 grid_5 grid_3

grid_4 grid_8

What about this?

grid_12

Page 31: Web I - 07 - CSS Frameworks

Nested Rows<div class="container_12">

<div class="grid_4"><h3>More Information</h3>…

</div>

grid_4 grid_8<div class="grid_8">

<h2>Welcome to Airfeed</h2>…First grid in nested row marked with alpha

<div class="grid_2 alpha">…

</div><div class="grid_2">

…</div>

# of grids in nested row = # grids in parent2+2+2+2 = 8

Last grid in nested row marked with omega

grid_2 grid_2 grid_2 grid_2

</div><div class="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

grid_12grid_9grid_3

</div>

</div>

</div><div class="grid_9 omega">

…</div>

Page 32: Web I - 07 - CSS Frameworks

grid_4 grid_5 grid_3

grid_4 grid_8

grid_2 grid_2 grid_2 grid_2

grid_4 grid_4

grid_12grid_9grid_3