CSS, LESS, & The New UI

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