State-based Design

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

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 {}
7. CSS is easy.
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
28. Sidebar Content Header
32. Module
33. Customized List Button Tabs
41. Sub-modules
42. Large Search Dark Small
45. Theme
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
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/