CSS, LESS, & The New UI

A brown bag on using CSS and LESS

Transcript

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. 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  
6. 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  
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">      &copy;   </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>      &copy;   </footer>   fixed
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. SPECIFICITY STYLE   ATTRIBUTE   ID   CLASS,   PSEUDO,   ATTRIBUTE   ELEMENT   MOST   LEAST  
28. SPECIFICITY STYLE   ATTRIBUTE   ID   CLASS,   PSEUDO,   ATTRIBUTE   ELEMENT   UL  
29. SPECIFICITY STYLE   ATTRIBUTE   ID   CLASS,   PSEUDO,   ATTRIBUTE   ELEMENT   UL   1  
30. SPECIFICITY 0001   1   UL  
31. SPECIFICITY STYLE   ATTRIBUTE   ID   CLASS,   PSEUDO,   ATTRIBUTE   ELEMENT   .foo  
32. SPECIFICITY STYLE   ATTRIBUTE   ID   CLASS,   PSEUDO,   ATTRIBUTE   ELEMENT   .foo   1  
33. SPECIFICITY 0010   1   .foo  
34. SPECIFICITY STYLE   ATTRIBUTE   ID   CLASS,   PSEUDO,   ATTRIBUTE   ELEMENT   ul#foo  
35. SPECIFICITY STYLE   ATTRIBUTE   ID   CLASS,   PSEUDO,   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 float:  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