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
420
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
600
A Modern Sass Artchitecture
sturobson
11
1.9k
Cutting Edge Sass - Sass Summit 2014
sturobson
5
340
100% Pure Sass
sturobson
1
270
Make Your Code Delicious - From the Front, Italy 2014
sturobson
4
1.1k
Freelancing: One year done.
sturobson
0
1.2k
Sass: a whistle stop tour
sturobson
1
750
Sass: An Introduction
sturobson
0
200
make your code delicious
sturobson
2
630
Other Decks in Design
See All in Design
スマートバンクのプロダクトデザイン
putchomsmartbank
6
2.3k
accfes2024_torque_yamasaki
yuuyamasakiyuu
2
770
Cхематизация процессов и пользовательского опыта с Картой процесса-опыта
ashapiro
0
240
0-1に挑むデザイナーが 知っておきたい2つの前提
swaaan
3
970
ホワイト化するこの世界の片隅に
hisayosky
0
240
RIDLEY JONES - Ridley's Christmas Carol
serenascipio
1
150
情報サービスユニット UXUIチーム紹介/btobuxui
nikkei_engineer_recruiting
2
190
アフォーダンスとシグニファイア
ryokanakai
0
250
Findy - デザイナー向け会社紹介 / Hiring Findy's Designers
findyinc
5
39k
AIイラスト生成・編集テクニック紹介
piyo7
2
210
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
12
5.5k
マルチプロダクトの価値と開発をスケールさせる、パターンレベルのデザインシステム
fkady
3
900
Featured
See All Featured
GitHub's CSS Performance
jonrohan
1030
450k
Adopting Sorbet at Scale
ufuk
73
8.9k
Gamification - CAS2011
davidbonilla
79
5k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
How GitHub (no longer) Works
holman
310
140k
Building a Scalable Design System with Sketch
lauravandoore
459
32k
Designing for Performance
lara
604
68k
Building Adaptive Systems
keathley
36
2.1k
Embracing the Ebb and Flow
colly
83
4.4k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.2k
Bootstrapping a Software Product
garrettdimon
PRO
304
110k
What the flash - Photography Introduction
edds
67
11k
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