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

State-based Design

D430439bd291dae3d8a43a413ee4ca82?s=47 snookca
September 21, 2012

State-based Design

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

D430439bd291dae3d8a43a413ee4ca82?s=128

snookca

September 21, 2012
Tweet

Transcript

  1. State-based design

  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 {}
  3. #nav-header ul li { float: left; } #nav-content ul li

    { float: left; }
  4. #comments .comment .meta .authorname {} #comments .comment .meta .commentnumber a

    {}
  5. None
  6. None
  7. CSS is easy.

  8. None
  9. None
  10. li { }

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

  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; }
  13. What does it mean?

  14. Shift your thinking

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

    system.
  16. Think Modularly.

  17. Think Modularly.

  18. Scalable and Modular Architecture for CSS

  19. What is SMACSS?

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

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

  22. Categorization Naming Convention

  23. Categorization

  24. Base

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

  27. None
  28. Sidebar Content Header

  29. None
  30. None
  31. None
  32. Module

  33. Customized List Button Tabs

  34. None
  35. None
  36. None
  37. None
  38. None
  39. None
  40. None
  41. Sub-modules

  42. Large Search Dark Small

  43. None
  44. None
  45. Theme

  46. None
  47. None
  48. None
  49. State?

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

    states • Media query states
  51. Class-based State

  52. Active State Default State Disabled State Default State

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

    { opacity: .5; pointer-events: none; }
  54. /* general class-based state */ .is-hidden { }

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

  56. Attribute Selector State

  57. .btn[data-state=default] { color: #333; } .btn[data-state=pressed] { color: #000; }

    .btn[data-state=disabled] { opacity: .5; pointer-events: none; } <!-- HTML --> <button class="btn" data- state="disabled">Disabled</button>
  58. // bind a click handler to each button $(".btn").on("click", function(){

    // change the state to pressed $(this).attr('data-state', 'pressed'); });
  59. Pseudo-class State

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

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

  62. Media Query State

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

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

  67. None
  68. None
  69. None
  70. http://icefox.net/anigma/

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

  72. <div class="card"> <div class="card card-flipped">

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

    ~ .input-option { display: block; }
  74. <input type="checkbox" id="opt"> <label for="opt">Other?</label> <div class="input-option"> <input type="text" id="other">

    <label for="other">Please specify:</ label> </div>
  75. Sprite Animations

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

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

    }
  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; }
  79. var el=document.getElementById('sprite')

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

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

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

  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;
  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;
  85. .enemys:checked{ overflow:hidden; -webkit-animation-name: none; -webkit-pointer-events: none; pointer-events: none; opacity:0; }

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

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

  88. None