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. 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  
  2. 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  
  3. 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  
  4. 8.

    ELEMENT P  {    background-­‐color:  #ebebeb;    margin:  10px  0

     10px  0;   }     div,   Section  {    background:  #fff;    padding:  10px  0;   }     Article  {    padding:  10px;   }  
  5. 9.

    CLASS .foo  {    background-­‐color:  #ebebeb;    margin:  10px  0

     10px  0;   }     div.foo  {    background:  #fff;    padding:  10px  0;   }     .foo.bar  {    padding:  10px;   }  
  6. 10.

    ID #foo  {    background-­‐color:  #ebebeb;    margin:  10px  0

     10px  0;   }     div#foo  {    background:  #fff;    padding:  10px  0;   }     #foo.bar  {    padding:  10px;   }  
  7. 11.

    HIERARCHY div  .foo  {    background-­‐color:  #ebebeb;    margin:  10px

     0  10px  0;   }     div  >  foo  {    background:  #fff;    padding:  10px  0;   }     #foo  +  .bar  {    padding:  10px;   }  
  8. 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;   }  
  9. 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;   }  
  10. 14.

    SPECIFICITY STYLE   ATTRIBUTE   ID   CLASS,   PSEUDO,

      ATTRIBUTE   ELEMENT   MOST   LEAST  
  11. 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
  12. 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
  13. 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>  
  14. 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
  15. 20.
  16. 21.

    COMP  >  CODE LOOK  AT  ALL  STATES   LOOK  FOR

     COMMOM  BITS   LOOK  TRANSITIONS  
  17. 27.

    SPECIFICITY STYLE   ATTRIBUTE   ID   CLASS,   PSEUDO,

      ATTRIBUTE   ELEMENT   MOST   LEAST  
  18. 28.
  19. 29.

    SPECIFICITY STYLE   ATTRIBUTE   ID   CLASS,   PSEUDO,

      ATTRIBUTE   ELEMENT   UL   1  
  20. 31.
  21. 32.

    SPECIFICITY STYLE   ATTRIBUTE   ID   CLASS,   PSEUDO,

      ATTRIBUTE   ELEMENT   .foo   1  
  22. 34.

    SPECIFICITY STYLE   ATTRIBUTE   ID   CLASS,   PSEUDO,

      ATTRIBUTE   ELEMENT   ul#foo  
  23. 35.

    SPECIFICITY STYLE   ATTRIBUTE   ID   CLASS,   PSEUDO,

      ATTRIBUTE   ELEMENT   ul#foo   1   1  
  24. 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  
  25. 50.
  26. 51.
  27. 53.

    LESS  SYNTAX /*  NESTING  */     #header  {  

     color:  red;    a  {      text-­‐decoration:  none;    }   }     /*  GENERATED  CSS  */     #header  {      color:  red;   }     #header  a  {      text-­‐decoration:  none;   }    
  28. 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;   }      
  29. 55.

    LESS  SYNTAX /*  VARIBLES  */     @nice-­‐blue:  #5B83AD;  

    @light-­‐blue:  @nice-­‐blue  +  #111;     #header  {      color:  @light-­‐blue;   }     /*  GENERATED  CSS  */     #header  {      color:  #6c94be;   }  
  30. 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;   }  
  31. 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.