CSS, LESS, & The New UI

CSS, LESS, & The New UI

A brown bag on using CSS and LESS

Da981fdeee4e1170b90334eac70652d6?s=128

Matthew Osborn

June 29, 2015
Tweet

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