A brown bag on using CSS and LESS
CSS, LESS, & THE NEW UI PART I
View Slide
BOX MODEL
ELEMENTS INLINE BLOCK
ELEMENTS SPAN H[1-‐6] DIV A ARTI CLE SECTION P I HEADE R BUTTON NAV INPUT STRONG OL CODE UL FORM PRE DD TABLE LI
SELECTORS ELEMENT CLASS ID ATTRIBUTE PSEUDO-‐CLASS HIERARCHY
ELEMENT P { background-‐color: #ebebeb; margin: 10px 0 10px 0; } div, Section { background: #fff; padding: 10px 0; } Article { padding: 10px; }
CLASS .foo { background-‐color: #ebebeb; margin: 10px 0 10px 0; } div.foo { background: #fff; padding: 10px 0; } .foo.bar { padding: 10px; }
ID #foo { background-‐color: #ebebeb; margin: 10px 0 10px 0; } div#foo { background: #fff; padding: 10px 0; } #foo.bar { padding: 10px; }
HIERARCHY div .foo { background-‐color: #ebebeb; margin: 10px 0 10px 0; } div > foo { background: #fff; padding: 10px 0; } #foo + .bar { padding: 10px; }
ATTRIBUTE div[required] { background-‐color: #ebebeb; margin: 10px 0 10px 0; } #foo[placeholder=‘bar’] { background: #fff; padding: 10px 0; } .foo[placeholder~=‘bar’] { padding: 10px; }
PSEUDO CLASS div:hover { background-‐color: #ebebeb; margin: 10px 0 10px 0; } #foo:visited { background: #fff; padding: 10px 0; } .foo:last-‐child { padding: 10px; }
SPECIFICITY STYLE ATTRIBUTE ID CLASS, PSEUDO, ATTRIBUTE ELEMENT MOST LEAST
simpleremanticmaller ss
<br/> .rounded { <br/> padding: 10px; <br/> position: relative; <br/> } <br/> <br/> .rounded-‐top-‐left, <br/> .rounded-‐top-‐right, <br/> .rounded-‐bottom-‐left, <br/> .rounded-‐bottom-‐right { <br/> height: 10px; <br/> position: absolute; <br/> width: 10px; <br/> } <br/> <br/> .rounded-‐top-‐left { <br/> background-‐image: url(../images/topleft.gif); <br/> left: 0; <br/> top: 0; <br/> } <br/> <br/> .rounded-‐top-‐right { <br/> background-‐image: url(../images/topright.gif); <br/> right: 0; <br/> top: 0; <br/> } <br/> <br/> .rounded-‐bottom-‐left { <br/> background-‐image: url(../images/bottomleft.gif); <br/> bottom: 0; <br/> left: 0; <br/> } <br/> <br/> .rounded-‐bottom-‐left { <br/> background-‐image: url(../images/bottomright.gif); <br/> bottom: 0; <br/> left: 0; <br/> } <br/> Rounded Corners <br/> .rounded { <br/> border-‐radius: 10px; <br/> } <br/> Rounded corners 47 lines 9 lines
<br/>$(function () { <br/> $("input[type=text]").each(function () { <br/> $(this).val(this.title); <br/> $(this).addClass("placeholder"); <br/> }); <br/> <br/> $("input[type=text]").focus(function () { <br/> if ($(this).val() === this.title) { <br/> $(this).val = ""; <br/> $(this).removeClass("placeholder"); <br/> } <br/> }); <br/> <br/> $("input[type=text]").blur(function () { <br/> if ($(this).val() === "") { <br/> $(this).val(this.title); <br/> $(this).addClass("placeholder"); <br/> } <br/> }); <br/>}); <br/> 1 path 5 paths
Link Link Link Some Content Ad ©
Link Link Link Some Content Ad © fixed
COMP > CODE REVIEW ALL THE COMPS WRITE THE HTML WRITE THE STYLES
COMP > CODE LOOK AT ALL STATES LOOK FOR COMMOM BITS LOOK TRANSITIONS
COMP > CODE PRESEVRE RELATIONSHIPS LESS IS MORE VIEW WITH NO STYLING
COMP > CODE LESS IS MORE AS VAGUE AS POSSIBLE
HANDS ON LAB
CSS, LESS, & THE NEW UI PART II
SPECIFICITY STYLE ATTRIBUTE ID CLASS, PSEUDO, ATTRIBUTE ELEMENT UL
SPECIFICITY STYLE ATTRIBUTE ID CLASS, PSEUDO, ATTRIBUTE ELEMENT UL 1
SPECIFICITY 0001 1 UL
SPECIFICITY STYLE ATTRIBUTE ID CLASS, PSEUDO, ATTRIBUTE ELEMENT .foo
SPECIFICITY STYLE ATTRIBUTE ID CLASS, PSEUDO, ATTRIBUTE ELEMENT .foo 1
SPECIFICITY 0010 1 .foo
SPECIFICITY STYLE ATTRIBUTE ID CLASS, PSEUDO, ATTRIBUTE ELEMENT ul#foo
SPECIFICITY STYLE ATTRIBUTE ID CLASS, PSEUDO, ATTRIBUTE ELEMENT ul#foo 1 1
SPECIFICITY 0101 1 ul#foo 1
SPECIFICITY body div ul#foo li.bar ul#foo li#baz
SPECIFICITY body div ul#foo li.bar ul#foo li#baz 114 212
SPEED ID CLASS TAG UNIVERSAL FAST SLOW
SPEED #main-‐navigaRon body.home #page-‐wrap .main-‐navigaRon ul li a.current ul ul li a * #content [Rtle='home'] ID ID Class Class Tag Tag Universal Universal
SPEED RIGHT TO LEFT
SPEED #main-‐nav > li
SPEED #main-‐nav > li ALL li ELEMENTS DECENDENTS OF #main-‐nav
SPEED #foo #bar ul#baz a
SPEED #foo #bar ul#baz a EXTREMELY SLOW COULD BE HARD TO OVERRIDE
FLOAT & POSITION
FLOAT float: right;
POSITION top: 0; right: 0;
FLOAT VS POSITION
FLOAT
POSITION
LESS SYNTAX VARIBLES FUNCTIONS MIXINS CALCULATIONS NESTING IMPORTS
LESS SYNTAX /* NESTING */ #header { color: red; a { text-‐decoration: none; } } /* GENERATED CSS */ #header { color: red; } #header a { text-‐decoration: none; }
LESS SYNTAX /* NESTING CONT’N */ #header { a { text-‐decoration: none; &:hover { color: blue; } } } /* GENERATED CSS */ #header a { text-‐decoration: none; } #header a:hover { color: blue; }
LESS SYNTAX /* VARIBLES */ @nice-‐blue: #5B83AD; @light-‐blue: @nice-‐blue + #111; #header { color: @light-‐blue; } /* GENERATED CSS */ #header { color: #6c94be; }
LESS SYNTAX /* FUNCTIONS */ .box-‐shadow(@style, @c) when (iscolor(@c)) { -‐webkit-‐box-‐shadow: @style @c; -‐moz-‐box-‐shadow: @style @c; box-‐shadow: @style @c; } #header { .box-‐shadow(0 0 0 5px, #000); } /* GENERATED CSS */ #header { -‐webkit-‐box-‐shadow: 0 0 0 5px #000000; -‐moz-‐box-‐shadow: 0 0 0 5px #000000; box-‐shadow: 0 0 0 5px #000000; }
LESS SYNTAX /* IMPORTS */ @import “foo.less” @import “bar.css” @import “baz.cshtml” /* COMMENT */ * CSS is also valid less * Depending on conversion client can request and file that returns valid less.
LESS SYNTAX lesscss.org less2css.org
osbornm
keio_smilab
yokawasa
.png){kind=icon}
3playmarketing
torounit
tomoaki25
takatsunobuhiro
soudai
cyberarchitect
miyashino
oracle4engineer
.png){kind=icon}
pharma_x_tech
th0x0472
shpigford
lara
cassininazir
geoffreycrofte
destraynor
andyhume
caitiem20
chrislema
danielanewman
marcduiker
csswizardry
chriscoyier