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
A Modern Sass Architecture
Search
Stuart Robson
May 06, 2015
Design
7
450
A Modern Sass Architecture
A short talk I gave at the inaugural SassXSW in Bath on MAy 6th 2015
Stuart Robson
May 06, 2015
Tweet
Share
More Decks by Stuart Robson
See All by Stuart Robson
L-I-V-I-N
sturobson
2
650
A Modern Sass Artchitecture
sturobson
11
2.1k
Cutting Edge Sass - Sass Summit 2014
sturobson
5
390
100% Pure Sass
sturobson
1
300
Make Your Code Delicious - From the Front, Italy 2014
sturobson
4
1.2k
Freelancing: One year done.
sturobson
0
1.2k
Sass: a whistle stop tour
sturobson
1
810
Sass: An Introduction
sturobson
0
230
make your code delicious
sturobson
2
680
Other Decks in Design
See All in Design
【最新】マズロー安達の弟子実績(1期-4期の26人分)
maslow_akkun
0
370
新年あけおめWSの実施スキルをみんなで振り返りタイムのススメ
sugiyama_sukedachi
0
140
札幌の雪を観光資源に変える:デザインプログラムSESSAの挑戦
ittyann
0
260
共通認識のためのユーザビリティテスト by AIエージェント - Accelerating Value Delivery
gakuoya
1
690
The Golden Whitney
ohtristanart
PRO
0
550
Haley's adventure chase
ivettetwin
0
240
児童相談所における養育里親委託時の親権者同意に向けたコミュニケーションの実態
trivia
0
480
Hybrid NW Infra Design Review: Classic Pattern including Outposts & Route 53 Profile
ichichi
2
680
Liquid Iron
mcduckyart
1
110
誰もがAIエージェントを"操作"したがる〜AIエージェントに求められるUX〜
ikeyatsu
2
1.8k
ブランドパーソナリティ言語化における生成AI活用の実際
h0sa
0
170
How to get a Tiger to Tulsa
mcduckyart
0
110
Featured
See All Featured
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Building Adaptive Systems
keathley
43
2.7k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
How STYLIGHT went responsive
nonsquared
100
5.6k
The World Runs on Bad Software
bkeepers
PRO
69
11k
Done Done
chrislema
184
16k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Into the Great Unknown - MozCon
thekraken
40
1.9k
Adopting Sorbet at Scale
ufuk
77
9.5k
Become a Pro
speakerdeck
PRO
29
5.4k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Transcript
Modern Architecture
[email protected]
None
[email protected]
None
None
None
None
None
None
None
None
None
None
None
None
None
None
None
None
None
None
None
None
What is a page?
We’re not building mom & pop shops anymore
OOCSS
BEM
SMACSS
ITCSS
None
Folders & Files - ageddon
7 folders, to rule them all
None
base/
base/ • where you put rudimentary defaults • a reset
file • basic typography settings • code for common HTML elements
None
layouts/
layouts/ • code that lays out the site • code
for the main ‘parts’ of your site • header • footer • main • aside
None
components/
components/ • smaller parts of the site • a carousel
(if they’re not evil, are they evil?) • accordian • tabs
None
pages/
pages/ • for ‘page specific’ code • files named after
the ‘page’ e.g. • _front-page.scss
None
themes/
themes/ • ‘big sites’ might need slight differences for different
states or themes
None
config/
config/ • code that doesn’t output CSS • tools and
helpers • mixins • variables • functions
None
vendor/
vendor/ • a good store for ‘not my code’ •
CSS from external libraries • jquery-ui.scss • bootstrap.scss
None
config/
|– config/ | |– _variables.scss | |– _functions.scss | |–
_mixins.scss | |– _helpers.scss
None
_variables.scss
866 lines of variables
None
// Default Variables // -------------------- $brand-color--primary: #C69; $brand-color--secondary: #699; $brand-color--tertiary:
#F2ECE4; ...
// Tabs Pattern // ------------------- $tabs-navigation-border-color: $brand-color--secondary; $tabs-navigation-text-color: $brand-color--tertiary; $tabs-main-background-color:
$white; ...
None
None
_shame.scss • somewhere to put something you’re not sure of
• should still have comments • should be emptied routinely, and quickly
None
file naming convention _b-reset.scss base files begin with _b- _c-tabs.scss
components begin with _c- _l-header.scss layout files begin with _l- _p-contact.scss page files begin with _p- _t-admin.scss theme files begin with _t- _v-neat.scss vendor files begin with _v-
@import - irasation
// config/ @import "config/_variables"; … // base/ @import "base/_reset"; ...
// components/ @import "components/_buttons"; ... // layout/ @import "layout/_navigation"; ... // pages/ @import "pages/_home"; ... // themes/ @import “themes/_logged-in“; ... // vendors/ @import "config/_jquery-ui"; ...
How To Write Your Sass?
.component { // extends // includes // variables // CSS
// parent selector items // media queries }
https://speakerdeck.com/onishiweb/taking-the-pain-out-of-refactoring-secwed-march
Never go four levels deep
http://sass-guidelin.es/
Modern Architecture
wrapping up • keep your Sass sane • use specific
folders for specific elements of a site • refactor when you can • add comments like a mad person