$30 off During Our Annual Pro Sale. View Details »

State-based Design

snookca
September 21, 2012

State-based Design

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

snookca

September 21, 2012
Tweet

More Decks by snookca

Other Decks in Programming

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