Slide 1

Slide 1 text

CSS,  LESS,  &  THE  NEW  UI PART  I  

Slide 2

Slide 2 text

BOX  MODEL

Slide 3

Slide 3 text

ELEMENTS INLINE   BLOCK  

Slide 4

Slide 4 text

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  

Slide 5

Slide 5 text

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  

Slide 6

Slide 6 text

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  

Slide 7

Slide 7 text

SELECTORS ELEMENT   CLASS   ID   ATTRIBUTE   PSEUDO-­‐CLASS   HIERARCHY  

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

ATTRIBUTE div[required]  {    background-­‐color:  #ebebeb;    margin:  10px  0  10px  0;   }     #foo[placeholder=‘bar’]  {    background:  #fff;    padding:  10px  0;   }     .foo[placeholder~=‘bar’]  {    padding:  10px;   }  

Slide 13

Slide 13 text

PSEUDO  CLASS div:hover  {    background-­‐color:  #ebebeb;    margin:  10px  0  10px  0;   }     #foo:visited  {    background:  #fff;    padding:  10px  0;   }     .foo:last-­‐child  {    padding:  10px;   }  

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

s impler emantic maller   s s

Slide 16

Slide 16 text

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

Rounded  Corners

         
         
 
           .rounded  {                  border-­‐radius:  10px;          }      

         Rounded  corners  

  47  lines 9  lines

Slide 17

Slide 17 text

  $(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");                  }          });   });                                                       1  path 5  paths

Slide 18

Slide 18 text

     
         
                 
  • Link
  •              
  • Link
  •              
  • Link
  •          
     
 
 
     
         

Some  Content

     
     
Ad
 
 
     ©  
 

Slide 19

Slide 19 text

               
                 
  • Link
  •              
  • Link
  •              
  • Link
  •          
                         

Some  Content

           Ad          ©     fixed

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

COMP  >  CODE LESS  IS  MORE   AS  VAGUE  AS  POSSIBLE  

Slide 24

Slide 24 text

HANDS  ON  LAB

Slide 25

Slide 25 text

CSS,  LESS,  &  THE  NEW  UI PART  II  

Slide 26

Slide 26 text

HANDS  ON  LAB

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

SPECIFICITY STYLE   ATTRIBUTE   ID   CLASS,   PSEUDO,   ATTRIBUTE   ELEMENT   UL  

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

SPECIFICITY 0001   1   UL  

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

SPECIFICITY 0010   1   .foo  

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

SPECIFICITY 0101   1   ul#foo   1  

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

SPEED ID   CLASS   TAG   UNIVERSAL   FAST   SLOW  

Slide 40

Slide 40 text

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  

Slide 41

Slide 41 text

SPEED RIGHT  TO  LEFT  

Slide 42

Slide 42 text

SPEED #main-­‐nav  >  li  

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

SPEED #foo  #bar  ul#baz  a  

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

FLOAT  &  POSITION

Slide 47

Slide 47 text

FLOAT float:  right;  

Slide 48

Slide 48 text

POSITION top:  0;  right:  0;  

Slide 49

Slide 49 text

FLOAT  VS  POSITION

Slide 50

Slide 50 text

FLOAT

Slide 51

Slide 51 text

POSITION

Slide 52

Slide 52 text

LESS  SYNTAX VARIBLES   FUNCTIONS   MIXINS   CALCULATIONS   NESTING   IMPORTS  

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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.    

Slide 58

Slide 58 text

LESS  SYNTAX lesscss.org   less2css.org  

Slide 59

Slide 59 text

HANDS  ON  LAB