CSS, LESS, & The New UI

1.

CSS, LESS, & THE NEW UI PART I

2.

BOX MODEL

3.

ELEMENTS INLINE BLOCK

4.

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

5.


6.


7.

SELECTORS ELEMENT CLASS ID ATTRIBUTE PSEUDO-‐CLASS
HIERARCHY

8.

ELEMENT P { background-‐color: #ebebeb; margin: 10px 0
10px 0; } div, Section { background: #fff; padding: 10px 0; } Article { padding: 10px; }

9.

CLASS .foo { background-‐color: #ebebeb; margin: 10px 0
10px 0; } div.foo { background: #fff; padding: 10px 0; } .foo.bar { padding: 10px; }

10.

ID #foo { background-‐color: #ebebeb; margin: 10px 0
10px 0; } div#foo { background: #fff; padding: 10px 0; } #foo.bar { padding: 10px; }

11.

HIERARCHY div .foo { background-‐color: #ebebeb; margin: 10px
0 10px 0; } div > foo { background: #fff; padding: 10px 0; } #foo + .bar { padding: 10px; }

12.

ATTRIBUTE div[required] { background-‐color: #ebebeb; margin: 10px 0
10px 0; } #foo[placeholder=‘bar’] { background: #fff; padding: 10px 0; } .foo[placeholder~=‘bar’] { padding: 10px; }

13.

PSEUDO CLASS div:hover { background-‐color: #ebebeb; margin: 10px
0 10px 0; } #foo:visited { background: #fff; padding: 10px 0; } .foo:last-‐child { padding: 10px; }

14.

SPECIFICITY STYLE ATTRIBUTE ID CLASS, PSEUDO,
ATTRIBUTE ELEMENT MOST LEAST

15.

s impler emantic maller s s

16.

<style> .rounded {
padding: 10px; position: relative; } .rounded-‐top-‐left, .rounded-‐top-‐right, .rounded-‐bottom-‐left, .rounded-‐bottom-‐right { height: 10px; position: absolute; width: 10px; } .rounded-‐top-‐left { background-‐image: url(../images/topleft.gif); left: 0; top: 0; } .rounded-‐top-‐right { background-‐image: url(../images/topright.gif); right: 0; top: 0; } .rounded-‐bottom-‐left { background-‐image: url(../images/bottomleft.gif); bottom: 0; left: 0; } .rounded-‐bottom-‐left { background-‐image: url(../images/bottomright.gif); bottom: 0; left: 0; } </style> <div> <div class="rounded-‐top-‐left"></div> <div class="rounded-‐top-‐right"></div> <p>Rounded Corners</p> <div class="rounded-‐bottom-‐left"></div> <div class="rounded-‐bottom-‐right"></div> </div> <style> .rounded { border-‐radius: 10px; } </style> <p class="rounded"> Rounded corners </p> 47 lines 9 lines

17.

<script> $(function () { $("input[type=text]").each(function
() { $(this).val(this.title); $(this).addClass("placeholder"); }); $("input[type=text]").focus(function () { if ($(this).val() === this.title) { $(this).val = ""; $(this).removeClass("placeholder"); } }); $("input[type=text]").blur(function () { if ($(this).val() === "") { $(this).val(this.title); $(this).addClass("placeholder"); } }); }); </script> <form action="/stuff" method="post"> <input type="text" name="value" title="Value" /> <input type="submit" value="Submit" /> </form> <form action="/stuff" method="post"> <input type="text" name="value" placeholder="Value" /> <input type="submit" value="Submit" /> </form> 1 path 5 paths

18.

<div class="header"> <div id="nav">
<ul> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </div> </div> <div class="page-‐body"> <div class="post"> <p>Some Content</p> </div> <div id="ads">Ad</div> </div> <div id="footer"> © </div>

19.

<header> <nav> <ul>
<li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </nav> </header> <section> <article> <p>Some Content</p> </article> <aside>Ad</aside> </section> <footer> © </footer> ﬁxed

20.

COMP > CODE REVIEW ALL THE COMPS WRITE THE
HTML WRITE THE STYLES

21.

COMP > CODE LOOK AT ALL STATES LOOK FOR
COMMOM BITS LOOK TRANSITIONS

22.

COMP > CODE PRESEVRE RELATIONSHIPS LESS IS MORE
VIEW WITH NO STYLING

23.

COMP > CODE LESS IS MORE AS VAGUE AS
POSSIBLE

24.

HANDS ON LAB

25.

CSS, LESS, & THE NEW UI PART II

26.

HANDS ON LAB

27.

ATTRIBUTE ELEMENT MOST LEAST

28.

ATTRIBUTE ELEMENT UL

29.

ATTRIBUTE ELEMENT UL 1

30.

SPECIFICITY 0001 1 UL

31.

ATTRIBUTE ELEMENT .foo

32.

ATTRIBUTE ELEMENT .foo 1

33.

SPECIFICITY 0010 1 .foo

34.

ATTRIBUTE ELEMENT ul#foo

35.

ATTRIBUTE ELEMENT ul#foo 1 1

36.

SPECIFICITY 0101 1 ul#foo 1

37.

SPECIFICITY body div ul#foo li.bar ul#foo li#baz

38.

SPECIFICITY body div ul#foo li.bar ul#foo li#baz
114 212

39.

SPEED ID CLASS TAG UNIVERSAL FAST
SLOW

40.

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

41.

SPEED RIGHT TO LEFT

42.

SPEED #main-‐nav > li

43.

SPEED #main-‐nav > li ALL li ELEMENTS DECENDENTS
OF #main-‐nav

44.

SPEED #foo #bar ul#baz a

45.

SPEED #foo #bar ul#baz a EXTREMELY SLOW COULD
BE HARD TO OVERRIDE

46.

FLOAT & POSITION

47.

FLOAT ﬂoat: right;

48.

POSITION top: 0; right: 0;

49.

FLOAT VS POSITION

50.

FLOAT

51.

POSITION

52.

LESS SYNTAX VARIBLES FUNCTIONS MIXINS CALCULATIONS
NESTING IMPORTS

53.

LESS SYNTAX /* NESTING */ #header {
color: red; a { text-‐decoration: none; } } /* GENERATED CSS */ #header { color: red; } #header a { text-‐decoration: none; }

54.

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

55.

LESS SYNTAX /* VARIBLES */ @nice-‐blue: #5B83AD;
@light-‐blue: @nice-‐blue + #111; #header { color: @light-‐blue; } /* GENERATED CSS */ #header { color: #6c94be; }

56.

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

57.

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.

58.

LESS SYNTAX lesscss.org less2css.org

59.

HANDS ON LAB

CSS, LESS, & The New UI

CSS, LESS, & The New UI

Want more?

Transcript