State-based Design

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