Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CSS, LESS, & The New UI

CSS, LESS, & The New UI

A brown bag on using CSS and LESS

Matthew Osborn

June 29, 2015
Tweet

More Decks by Matthew Osborn

Other Decks in Technology

Transcript

  1. CSS,  LESS,  &  THE  NEW  UI
    PART  I  

    View Slide

  2. BOX  MODEL

    View Slide

  3. ELEMENTS
    INLINE  
    BLOCK  

    View Slide

  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  

    View Slide

  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  

    View Slide

  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  

    View Slide

  7. SELECTORS
    ELEMENT  
    CLASS  
    ID  
    ATTRIBUTE  
    PSEUDO-­‐CLASS  
    HIERARCHY  

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  15. s
    impler
    emantic
    maller
     
    s
    s

    View Slide

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

    View Slide

  17.  <br/>$(function  ()  {  <br/>        $("input[type=text]").each(function  ()  {  <br/>                $(this).val(this.title);  <br/>                $(this).addClass("placeholder");  <br/>        });  <br/>  <br/>        $("input[type=text]").focus(function  ()  {  <br/>                if  ($(this).val()  ===  this.title)  {  <br/>                        $(this).val  =  "";  <br/>                        $(this).removeClass("placeholder");  <br/>                }  <br/>        });  <br/>  <br/>        $("input[type=text]").blur(function  ()  {  <br/>                if  ($(this).val()  ===  "")  {  <br/>                        $(this).val(this.title);  <br/>                        $(this).addClass("placeholder");  <br/>                }  <br/>        });  <br/>});  <br/>  
     
     
             
             
     
     
             
             
     
    1  path
    5  paths

    View Slide

  18.  
         
             
               Link  
               Link  
               Link  
             
         
     
     
         
           Some  Content  
         
       Ad  
     
     
       ©  
     

    View Slide

  19.  
         
             
               Link  
               Link  
               Link  
             
         
     
     
         
           Some  Content  
         
       Ad  
     
     
       ©  
     
    fixed

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  23. COMP  >  CODE
    LESS  IS  MORE  
    AS  VAGUE  AS  POSSIBLE  

    View Slide

  24. HANDS  ON  LAB

    View Slide

  25. CSS,  LESS,  &  THE  NEW  UI
    PART  II  

    View Slide

  26. HANDS  ON  LAB

    View Slide

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

    View Slide

  28. SPECIFICITY
    STYLE  
    ATTRIBUTE  
    ID  
    CLASS,  
    PSEUDO,  
    ATTRIBUTE  
    ELEMENT  
    UL  

    View Slide

  29. SPECIFICITY
    STYLE  
    ATTRIBUTE  
    ID  
    CLASS,  
    PSEUDO,  
    ATTRIBUTE  
    ELEMENT  
    UL  
    1  

    View Slide

  30. SPECIFICITY
    0001  
    1  
    UL  

    View Slide

  31. SPECIFICITY
    STYLE  
    ATTRIBUTE  
    ID  
    CLASS,  
    PSEUDO,  
    ATTRIBUTE  
    ELEMENT  
    .foo  

    View Slide

  32. SPECIFICITY
    STYLE  
    ATTRIBUTE  
    ID  
    CLASS,  
    PSEUDO,  
    ATTRIBUTE  
    ELEMENT  
    .foo  
    1  

    View Slide

  33. SPECIFICITY
    0010  
    1  
    .foo  

    View Slide

  34. SPECIFICITY
    STYLE  
    ATTRIBUTE  
    ID  
    CLASS,  
    PSEUDO,  
    ATTRIBUTE  
    ELEMENT  
    ul#foo  

    View Slide

  35. SPECIFICITY
    STYLE  
    ATTRIBUTE  
    ID  
    CLASS,  
    PSEUDO,  
    ATTRIBUTE  
    ELEMENT  
    ul#foo  
    1   1  

    View Slide

  36. SPECIFICITY
    0101  
    1  
    ul#foo  
    1  

    View Slide

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

    View Slide

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

    View Slide

  39. SPEED
    ID  
    CLASS  
    TAG  
    UNIVERSAL  
    FAST  
    SLOW  

    View Slide

  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  

    View Slide

  41. SPEED
    RIGHT  TO  LEFT  

    View Slide

  42. SPEED
    #main-­‐nav  >  li  

    View Slide

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

    View Slide

  44. SPEED
    #foo  #bar  ul#baz  a  

    View Slide

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

    View Slide

  46. FLOAT  &  POSITION

    View Slide

  47. FLOAT
    float:  right;  

    View Slide

  48. POSITION
    top:  0;  right:  0;  

    View Slide

  49. FLOAT  VS  POSITION

    View Slide

  50. FLOAT

    View Slide

  51. POSITION

    View Slide

  52. LESS  SYNTAX
    VARIBLES  
    FUNCTIONS  
    MIXINS  
    CALCULATIONS  
    NESTING  
    IMPORTS  

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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.    

    View Slide

  58. LESS  SYNTAX
    lesscss.org  
    less2css.org  

    View Slide

  59. HANDS  ON  LAB

    View Slide