Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
State-based Design
Search
snookca
September 21, 2012
Programming
11
3.5k
State-based Design
A look at what it means to create CSS using a state-based approach.
snookca
September 21, 2012
Tweet
Share
More Decks by snookca
See All by snookca
Responsive Web Applications
snookca
0
1.6k
Responsive Web Applications
snookca
4
900
Responsive Web Applications
snookca
0
140
Responsive Web Applications with Container Queries
snookca
3
630
Responsive Web Applications
snookca
0
87
The Future is In Pieces
snookca
1
140
Becoming a Deep Generalist
snookca
1
480
Your CSS is a Mess from ShropGeek's Revolution Conf
snookca
4
170
Your CSS is a Mess from SmartWeb
snookca
0
220
Other Decks in Programming
See All in Programming
めざせ!WKWebViewマスター! / WKWebView Master
marcy731
3
480
『ドメイン駆動設計をはじめよう』中核の業務領域
masuda220
PRO
5
840
1人で挑むSwiftコンパイラ 〜型システム入門編〜
s_shimotori
0
310
connect-go で面倒くささと戦う / 2024-08-27 #newmo_layerx_go
izumin5210
2
580
LangGraphでのHuman-in-the-Loopの実装
os1ma
3
550
Rubyとクリエイティブコーディングの輪の広がり / The Growing Circle of Ruby and Creative Coding
chobishiba
1
220
仮想ファイルシステムを導入して開発環境のストレージ課題を解消する
segadevtech
2
390
Using Livebook to build and deploy internal tools @ ElixirConf 2024
hugobarauna
0
210
Playwrightから始めるVisual Regression Testingのススメ by とっと
totto2727
2
1.8k
Go Code Generation at newmo / 2024-08-27 #newmo_layerx_go
genkey6
0
510
Meet BrowserEngineKit
swiftty
0
190
Amebaチョイス立ち上げの裏側 ~依存システムとの闘い~
daichi_igarashi
0
220
Featured
See All Featured
Fantastic passwords and where to find them - at NoRuKo
philnash
47
2.7k
The Power of CSS Pseudo Elements
geoffreycrofte
71
5.2k
Scaling GitHub
holman
458
140k
Why Our Code Smells
bkeepers
PRO
333
56k
StorybookのUI Testing Handbookを読んだ
zakiyama
25
5k
Building Flexible Design Systems
yeseniaperezcruz
324
37k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
325
21k
YesSQL, Process and Tooling at Scale
rocio
167
14k
A better future with KSS
kneath
235
17k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
122
18k
Facilitating Awesome Meetings
lara
49
5.9k
What the flash - Photography Introduction
edds
67
11k
Transcript
State-based design
.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 {}
#nav-header ul li { float: left; } #nav-content ul li
{ float: left; }
#comments .comment .meta .authorname {} #comments .comment .meta .commentnumber a
{}
None
None
CSS is easy.
None
None
li { }
oat: left padding: 3px 50px; margin: 0;
.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; }
What does it mean?
Shift your thinking
Don’t code CSS for a page. Code it for a
system.
Think Modularly.
Think Modularly.
Scalable and Modular Architecture for CSS
What is SMACSS?
Have your CSS... Do one thing and one thing only
Your code should... Be clear regardless of context
Categorization Naming Convention
Categorization
Base
html { background-color: #FFF; font-family: Arial, Helvetica, sans-serif; font-size: 14px;
} body { margin: 0; padding: 0; } h1, h2, h3 { margin: 1em 0; }
Layout
None
Sidebar Content Header
None
None
None
Module
Customized List Button Tabs
None
None
None
None
None
None
None
Sub-modules
Large Search Dark Small
None
None
Theme
None
None
None
State?
State-based Design • Class-based states • Attribute-based states • Pseudo-class
states • Media query states
Class-based State
Active State Default State Disabled State Default State
.is-btn-active { box-shadow: inset 3px 3px 5px #333; } .is-btn-disabled
{ opacity: .5; pointer-events: none; }
/* general class-based state */ .is-hidden { }
$('.btn').on('mousedown', function(){ $(this).addClass('is-btn-pressed'); }); $('.btn').on('mouseup', function(){ $(this).removeClass('is-btn-pressed'); });
Attribute Selector State
.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>
// bind a click handler to each button $(".btn").on("click", function(){
// change the state to pressed $(this).attr('data-state', 'pressed'); });
Pseudo-class State
/* Pseudo-class state */ .callout:hover { } .callout:focus { }
:hover :focus :active :checked :indeterminate :valid :invalid :in-range :out-of-range
Media Query State
@media screen and (max-width: 400px) { .layout-content { float: none;
} }
/* 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; } }
/* 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; } }
Examples
None
None
None
http://icefox.net/anigma/
http://my-html-codes.com/HTML5_tutorials/Dino_pairs2/index.html
<div class="card"> <div class="card card-flipped">
.input-option { display: none; } /* Pseudo-class state */ input:checked
~ .input-option { display: block; }
<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>
Sprite Animations
#sprite { width:64px; height:64px; background:url(sprite.png) 0 0; }
@-webkit-keyframes walking { 0%! ! { background-position: 448px 0; }
}
.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; }
var el=document.getElementById('sprite')
el.classList.toggle('is-walking');
toggle('is-walking'); toggle('is-walking-faster'); toggle('is-walking-backwards');
CSS Panic http://snk.ms/15
.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;
.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;
.enemys:checked{ overflow:hidden; -webkit-animation-name: none; -webkit-pointer-events: none; pointer-events: none; opacity:0; }
.enemys:checked{ overflow:hidden; -webkit-animation-name: none; -webkit-pointer-events: none; pointer-events: none; opacity:0; }
GET SMACKED http://smacss.com/
None