State-based Design

A look at what it means to create CSS using a state-based approach.

Transcript

1. State-based
   design
   

   View Slide

2. .layout_1_2 #blogList .pageitem .statusBar {}
   .layout_1_2 #blogList .pageitem .statusBar .status,
   #blogList .pageitem .statusBar .status .status1 { }
   .layout_1_2 #blogList .pageitem .statusBar .status { }
   .layout_1_2 #blogList .pageitem .statusBar .status .status1 { }
   .layout_1_2 #blogList .pageitem .statusBar .status .status1 a { }
   .layout_1_2 #blogList .pageitem .statusBar .status .status1 .sep {}
   

   View Slide

3. #nav-header ul li {
   float: left;
   }
   #nav-content ul li {
   float: left;
   }
   

   View Slide

4. #comments .comment .meta .authorname {}
   #comments .comment .meta .commentnumber a {}
   

   View Slide

5. View Slide

6. View Slide

7. CSS is easy.
   

   View Slide

8. View Slide

9. View Slide

10. li { }
    

    View Slide

11. oat: left
    padding: 3px 50px;
    margin: 0;
    

    View Slide

12. .block { display:block !important; }
    .inline { display:inline !important; }
    .hide { display:none !important; }
    .s-none { margin:0 !important; }
    .s { margin:10px !important; }
    .ss { margin:20px !important; }
    .sr { margin-right:10px !important; }
    .p-none { padding:0 !important; }
    .p { padding:10px !important; }
    .pp { padding:20px !important; }
    .pt { padding-top:10px !important; }
    .w-auto { width:auto !important; }
    

    View Slide

13. What does it mean?
    

    View Slide

14. Shift your thinking
    

    View Slide

15. Don’t code CSS for a page.
    Code it for
    a system.
    

    View Slide

16. Think Modularly.
    

    View Slide

17. Think Modularly.
    

    View Slide

18. Scalable and Modular
    Architecture for CSS
    

    View Slide

19. What is SMACSS?
    

    View Slide

20. Have your CSS...
    Do one thing
    and one thing only
    

    View Slide

21. Your code should...
    Be clear regardless
    of context
    

    View Slide

22. Categorization
    Naming Convention
    

    View Slide

23. Categorization
    

    View Slide

24. Base
    

    View Slide

25. html {
    background-color: #FFF;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    }
    body {
    margin: 0;
    padding: 0;
    }
    h1, h2, h3 {
    margin: 1em 0;
    }
    

    View Slide

26. Layout
    

    View Slide

27. View Slide

28. Sidebar Content
    Header
    

    View Slide

29. View Slide

30. View Slide

31. View Slide

32. Module
    

    View Slide

33. Customized List
    Button
    Tabs
    

    View Slide

34. View Slide

35. View Slide

36. View Slide

37. View Slide

38. View Slide

39. View Slide

40. View Slide

41. Sub-modules
    

    View Slide

42. Large
    Search
    Dark
    Small
    

    View Slide

43. View Slide

44. View Slide

45. Theme
    

    View Slide

46. View Slide

47. View Slide

48. View Slide

49. State?
    

    View Slide

50. State-based Design
    • Class-based states
    • Attribute-based states
    • Pseudo-class states
    • Media query states
    

    View Slide

51. Class-based State
    

    View Slide

52. Active State Default State
    Disabled State Default State
    

    View Slide

53. .is-btn-active {
    box-shadow: inset 3px 3px 5px #333;
    }
    .is-btn-disabled {
    opacity: .5;
    pointer-events: none;
    }
    

    View Slide

54. /* general class-based state */
    .is-hidden {
    }
    

    View Slide

55. $('.btn').on('mousedown', function(){
    $(this).addClass('is-btn-pressed');
    });
    $('.btn').on('mouseup', function(){
    $(this).removeClass('is-btn-pressed');
    });
    

    View Slide

56. Attribute Selector
    State
    

    View Slide

57. .btn[data-state=default] { color: #333; }
    .btn[data-state=pressed] { color: #000; }
    .btn[data-state=disabled] {
    opacity: .5; pointer-events: none; }
    
    state="disabled">Disabled
    

    View Slide

58. // bind a click handler to each button
    $(".btn").on("click", function(){
    // change the state to pressed
    $(this).attr('data-state', 'pressed');
    });
    

    View Slide

59. Pseudo-class State
    

    View Slide

60. /* Pseudo-class state */
    .callout:hover {
    }
    .callout:focus {
    }
    

    View Slide

61. :hover
    :focus
    :active
    :checked
    :indeterminate
    :valid
    :invalid
    :in-range
    :out-of-range
    

    View Slide

62. Media Query State
    

    View Slide

63. @media screen and (max-width: 400px) {
    .layout-content { float: none; }
    }
    

    View Slide

64. /* default state for nav items */
    .nav > li {
    float: none;
    }
    /* alternate state for nav items on larger
    screens */
    @media screen and (min-width: 400px) {
    .nav > li { float: left; }
    }
    

    View Slide

65. /* default layout */
    .l-content { float: left; width: 75%; }
    .l-sidebar { float: right; width: 25%; }
    /* alternate state for layout on small
    screens */
    @media screen and (max-width: 400px) {
    .l-content, .l-sidebar {
    float: none;
    width: auto;
    }
    }
    

    View Slide

66. Examples
    

    View Slide

67. View Slide

68. View Slide

69. View Slide

70. http://icefox.net/anigma/
    

    View Slide

71. http://my-html-codes.com/HTML5_tutorials/Dino_pairs2/index.html
    

    View Slide

72. 
    
    

    View Slide

73. .input-option {
    display: none;
    }
    /* Pseudo-class state */
    input:checked ~ .input-option {
    display: block;
    }
    

    View Slide

74. 
    Other?
    
    
    Please specify:
    label>
    
    

    View Slide

75. Sprite Animations
    

    View Slide

76. #sprite {
    width:64px;
    height:64px;
    background:url(sprite.png) 0 0;
    }
    

    View Slide

77. @-webkit-keyframes walking {
    0%! ! { background-position: 448px 0; }
    }
    

    View Slide

78. .is-walking {
    -webkit-animation-duration:600ms;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-timing-function:steps(7,end);
    -webkit-animation-name:walking;
    -webkit-animation-fill-mode: both;
    }
    .is-walking-faster {
    -webkit-animation-duration:400ms;
    }
    .is-walking-backwards {
    -webkit-animation-direction: reverse;
    }
    

    View Slide

79. var el=document.getElementById('sprite')
    

    View Slide

80. el.classList.toggle('is-walking');
    

    View Slide

81. toggle('is-walking');
    toggle('is-walking-faster');
    toggle('is-walking-backwards');
    

    View Slide

82. CSS Panic
    http://snk.ms/15
    

    View Slide

83. .enemys {
    z-index:3;
    position:absolute;
    top:0px;
    left:0;
    width:49px;
    height:93px;
    display:block;
    -webkit-appearance: button;
    -moz-appearance: button;
    background-position:0px 0px;
    background-repeat:no-repeat;
    -webkit-animation-iteration-count:infinite
    cursor:pointer;
    opacity:0.9;
    border:none;
    

    View Slide

84. .enemys {
    z-index:3;
    position:absolute;
    top:0px;
    left:0;
    width:49px;
    height:93px;
    display:block;
    -webkit-appearance: button;
    -moz-appearance: button;
    background-position:0px 0px;
    background-repeat:no-repeat;
    -webkit-animation-iteration-count:infinite
    cursor:pointer;
    opacity:0.9;
    border:none;
    

    View Slide

85. .enemys:checked{
    overflow:hidden;
    -webkit-animation-name: none;
    -webkit-pointer-events: none;
    pointer-events: none;
    opacity:0;
    }
    

    View Slide

86. .enemys:checked{
    overflow:hidden;
    -webkit-animation-name: none;
    -webkit-pointer-events: none;
    pointer-events: none;
    opacity:0;
    }
    

    View Slide

87. GET SMACKED
    http://smacss.com/
    

    View Slide

88. View Slide