Css for nondesigners

CSS for non-designers
What did you break, and how to fix it

Definition of success
Hero : knows everything about CSS.
Hacker : understands CSS – mostly.
Newbie : example-driven guy that keeps throwing random shit around until something sticks.
← I used to live here

Who am I?
Nacho Coloma has been working with Java and HTML for the last 10 years
He is CTO at Extrema Sistemas
He hates talking about himself in the third person.

The browsers
Chrome, Safari, Firefox 3.6+, IE 7+

The Box Model
size display position float

Size
width, height
padding
border
margin

box-sizing: border-box
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

box-sizing: border-box
Source: http://css-tricks.com/

Min and max
min-width, min-height
max-width, max-height

The box model
size
display
position
float

display
display: block | inline | inline-block | none
p, div, h1 { display: block; } a, span, strong, em { display: inline; } .hide { display: none; }

display: block <div>A</div> <div>B</div> <div>C</div>

display: inline-block div { display: inline-block; }

The box model
size
display
position
float

Position
position: static | relative | absolute | fixed

position: static
The default
<div>A</div> <div>B</div> <div>C</div>

position: relative
Relative coords to its default position
<div>A</div> <div style=” position: relative; left: 15px; top: 10px ” > B </div> <div>C</div>

position: absolute
Absolute position from the first parent element that has a position other than static
<div>A</div> <div style=” position: absolute; left: 15px; top: 10px ” > B </div> <div>C</div>

position: fixed
Fixed position relative to window, unaware of scrolling canvas
<div>A</div> <div style=” position: fixed; right: 10px; top: 10px ” > B </div> <div>C</div>

The box model
size
display
position
float

float
float: left | right
clear: left | right | both
Gets the element out of the box model

float: left NO FLOAT <div>A</div> <div>B</div> <div>C</div> FLOAT LEFT <div style=”float: left” >A</div> <div>B</div> <div>C</div> FLOAT AND CLEAR <div style=”float: left” >A</div> <div>B</div> <div style=”clear: left” >C</div>

Overflow
overflow: visible | hidden | auto

That's all
size
display
position
float

Good news, everyone!
You don't have to deal with this
most of the time

Eric Meyer's reset.css /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; }

CSS frameworks: 960gs <div class=” container_12 ”> <div class=” grid_12 ”> Header contents </div> <div class=” grid_6 ”> Column 1 contents </div> <div class=” grid_6 ”> Column 2 contents </div> </div>

960 Grid System

Twitter Bootstrap 2

Responsive design

More smartphones than PCs in 2012
Source: IDC. Graph by LukeW

That's it!
Any questions?

Where to continue from here
Come to our course!
http://extrema-sistemas.com/training
http://del.icio.us/html5css3
http://github.com/html5css3
http://html5boilerplate.com/
http://html5please.us

Thanks! ( ) Futurama is a trademark from Twentieth Century Fox Film Corporation We honestly think the rest is ours. twitter.com/nachocoloma [email_address]

http://icoloma.blogspot.com	1053
http://icoloma.blogspot.com.es	166
http://icoloma.blogspot.in	47
http://icoloma.blogspot.fr	38
http://icoloma.blogspot.com.au	34
http://extrema-sistemas.iextrema.net	23
http://icoloma.blogspot.de	10
http://icoloma.blogspot.ca	10
http://extrema-sistemas.com	8
http://icoloma.blogspot.co.uk	8
http://icoloma.blogspot.com.ar	4
https://wiki.blueglue.com.au	4
http://icoloma.blogspot.se	2
http://icoloma.blogspot.mx	2
http://translate.googleusercontent.com	2
http://icoloma.blogspot.co.nz	2
http://icoloma.blogspot.it	2
http://extrema-sistemas.es	1
http://icoloma.blogspot.com.br	1
http://icoloma.blogspot.pt	1

Css for nondesigners

by Ignacio Coloma on Oct 11, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

20 Embeds 1,418

Statistics

Css for nondesigners — Presentation Transcript