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
Delightful Stylesheets - That Conference
Search
Aly Fluckey
August 06, 2018
Technology
0
83
Delightful Stylesheets - That Conference
Aly Fluckey
August 06, 2018
Tweet
Share
More Decks by Aly Fluckey
See All by Aly Fluckey
Delightful Stylesheets
wtfluckey
0
84
Design 101: Tips & Tricks
wtfluckey
0
180
Design Stuffs
wtfluckey
0
220
Risk & Happiness
wtfluckey
0
140
Neo Apprentices
wtfluckey
0
83
Other Decks in Technology
See All in Technology
ビジネス職が分析も担う事業部制組織でのデータ活用の仕組みづくり / Enabling Data Analytics in Business-Led Divisional Organizations
zaimy
1
290
OpenTelemetryセマンティック規約の恩恵とMackerel APMにおける活用例 / SRE NEXT 2025
mackerelio
2
1.3k
CDKTFについてざっくり理解する!!~CloudFormationからCDKTFへ変換するツールも作ってみた~
masakiokuda
1
190
DatabricksにOLTPデータベース『Lakebase』がやってきた!
inoutk
0
150
SRE不在の開発チームが障害対応と 向き合った100日間 / 100 days dealing with issues without SREs
shin1988
1
1.1k
モニタリング統一への道のり - 分散モニタリングツール統合のためのオブザーバビリティプロジェクト
niftycorp
PRO
1
220
VGGT: Visual Geometry Grounded Transformer
peisuke
1
550
【LT会登壇資料】TROCCO新コネクタ「スマレジ」を活用した直営店データの分析
kazari0425
1
140
対話型音声AIアプリケーションの信頼性向上の取り組み
ivry_presentationmaterials
1
600
united airlines ™®️ USA Contact Numbers: Complete 2025 Support Guide
flyunitedhelp
1
470
オーティファイ会社紹介資料 / Autify Company Deck
autifyhq
10
130k
Rethinking Incident Response: Context-Aware AI in Practice
rrreeeyyy
1
230
Featured
See All Featured
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Fireside Chat
paigeccino
37
3.5k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Practical Orchestrator
shlominoach
189
11k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
For a Future-Friendly Web
brad_frost
179
9.8k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Transcript
None
None
DELIGHTFUL STYLESHEETS
''CSS IS HARD'' - ME, MANY TIMES - ALSO, THE
INTERNET
None
None
CSS IS HARD BUT IT DOESN'T HAVE TO BE
THE CASCADE (IT'S A FEATURE, NOT A )
THE CASCADE 1. SOURCE ORDER 2. SPECIFICITY 3. IMPORTANCE
1. SOURCE ORDER p { color: blue; } p {
color: red; }
2. SPECIFICITY
2. SPECIFICITY p.paragraph { color: blue; } p { color:
red; }
3. IMPORTANCE p { color: purple !important; }
!IMPORTANT
CSS IS HARD WHEN YOU IGNORE THE CASCADE
SO WHAT NOW? WHAT CAN WE DO TO SAVE US
FROM OURSELVES?
ORGANIZATION & COMPONENTIZATION
ORGANIZATION WITH ITCSS BY HARRY ROBERTS
INVERTED TRIANGLE CSS
PHILOSOPHY NOT A FRAMEWORK
None
None
VARIABLES CONTAIN FONTS, COLORS, MEASUREMENTS, ETC
TOOLS GLOBALLY USED MIXINS AND FUNCTIONS
GENERAL RESET AND/OR NORMALIZE STYLES, BOX-SIZING DEFINITION
BASE ELEMENTS STYLING FOR HTML ELEMENTS h1, a, p, input
COMPONENTS SPECIFIC COMPONENTS UNIQUE TO THE DESIGN .panel, .form
UTILITIES UTILITIES AND HELPER CLASSES WITH ABILITY TO OVERRIDE .is--hidden
None
WHAT DOES THIS BUY US?
REUSABE & SCALABLE
REDUCE SPECIFICITY
LESS WASTE, SMALLER FILES
MORE DELIGHTFUL
ORGANIZATION & COMPONENTIZATION
DISCRETE SELF-CONTAINED REUSABLE
None
SET UP BASE STYLES FIRST > fonts > colors >
sizing & measurements > layout
None
None
None
None
1. text components > section header > title & subtitle
2. entry components > entry > image > content > featured entry
None
None
Next is the entry components
None
None
None
ALMOST DONE! > Featured entry styling > Responsiveness
None
None
ORGANIZATION & COMPONENTIZATION
None
None
None
None
THANK YOU!
ALY FLUCKEY @WTFLUCKEY
None