smacss your up @minamarkham I need two demo sites And I need them - PowerPoint PPT Presentation

smacss your up

@minamarkham

“I need two demo sites” “And I need them in two days”

CSS is easy.

hard CSS is easy.

CSS is bullshit.

Modular CSS

Focusing on creating healthy “ front-end modules instead of complete pages can help break complex page layouts into reusable solutions .” - Dave Rupert

small pieces independent portable

Navigation, Tabs, Tables, Accordions, Lists, Dropdowns Pagination, Buttons, Labels, Inputs, Breadcrumbs, etc.

“Tiny Bootstraps”

Module, Pattern, Component, etc.

MVCSS, BEM, OOCSS, Suit, intuit.css

SMACSS

S calable & M odular A rchitecture for CSS

Framework

categorization naming conventions depth of applicability

Categorization

base layout modules states themes

Base CSS resets, default styles (ex. html, body, h1, ul, etc)

Layout grid, major components ex. header, sidebar, nav

header content footer

header sidebar main content

Modules content patterns (ex. search-box, navigation, content-box)

navigation hero promo promo promo promo footer-text link-list

States module in various states

Themes module in various contexts

jessicahische.is

Naming Conventions

Base h1, h2, p, a, etc.

Layout .layout-*, .l-*

Module .<name>

Module .button

Sub-module .<name>-<state>

Sub-module .button-secondary

State .is-*

Theme .theme-*

Theme .theme-*

Depth of Applicability

header#top-menu > nav > ul > li a + div > ul > li > ul li:hover > a {…}

10 generations!

, , , Specificity = 0,1,1,11 http://specificity.keegan.st/

header#top-menu > nav > ul > li a + div > ul > li > ul li:hover > a {…}

header#top-menu > nav > ul > li a + div > ul > li > ul li:hover > a {…}

.nav-subitem

, , , Specificity = 0,0,1,0 http://specificity.keegan.st/

.nav-subitem > a

, , , Specificity = 0,0,1,1 http://specificity.keegan.st/

child selectors class selectors naming conventions

Recap

categorize css rules meaningful names shallow selectors

add some

not SASS

Namespacing

the almighty ampersand

.btn { &:hover {…} }

.btn:hover {…}

.btn { form & {…} }

form .btn {…}

&- or &_

.btn { .btn &-secondary {…} &_secondary {…} }

.btn-secondary {…} .btn_secondary {…}

nesting

inception rule

< 3 levels deep

.btn { .btn &-secondary { secondary &-icon {…} } }

.btn-secondary {…} .btn-secondary-icon {…}

.btn {…} .btn-large {…} � <div class=“btn btn-large”>

@ extend all the things!

.btn {…} .btn-large {@extend .btn;} � <div class=“btn-large”>

%btn {…} .btn-large {@extend %btn;} � <div class=“btn-large”>

don’t @extend between modules

File Structure

@import

01. ¡Utilities ¡ utilities/_index.scss Variables, mixins, functions, etc. @import ¡'global'; ¡ @import ¡'functions'; ¡ Basically anything that doesn’t @import ¡'mixins'; ¡ output CSS by itself. @import ¡'helpers';

01. ¡Utilities ¡ 02. ¡Libraries ¡ utilities/_lib.scss Third-party libraries such @import ¡"lib/susy"; ¡ @import ¡"lib/font-­‑awesome"; ¡ as Susy, Font Awesome, @import ¡"lib/pesticide"; Pesticide, and other plugins.

01. ¡Utilities ¡ 02. ¡Libraries ¡ 03. ¡Base ¡ base/_index.scss @import ¡‘normalize'; ¡ CSS resets, Normalize, @import ¡'base'; element styles

01. ¡Utilities ¡ 02. ¡Libraries ¡ 03. ¡Base ¡ 04. ¡Layout ¡ layout/_index.scss Grid styles, major layout @import ¡'global'; ¡ @import ¡'functions'; ¡ components (e.g. header, footer, @import ¡'mixins'; ¡ sidebar, etc) @import ¡'helpers';

01. ¡Utilities ¡ 02. ¡Libraries ¡ 03. ¡Base ¡ 04. ¡Layout ¡ 05. ¡Modules ¡ modules/_index.scss Individual modules, such as @import ¡'btn'; ¡ @import ¡'table'; ¡ buttons, navigation, menus, etc. @import ¡'nav';

01. ¡Utilities ¡ 02. ¡Libraries ¡ 03. ¡Base ¡ 04. ¡Layout ¡ 05. ¡Modules ¡ 06. ¡States ¡ states/_index.scss @import ¡'states'; ¡ Describe states of being, ex: @import ¡'touch'; active, collapsed or hidden

01. ¡Utilities ¡ 02. ¡Libraries ¡ 03. ¡Base ¡ 04. ¡Layout ¡ 05. ¡Modules ¡ 06. ¡States ¡ 07. ¡@font-­‑face Web fonts imports & declarations utilities/_fonts.scss

01. ¡Utilities ¡ 02. ¡Libraries ¡ 03. ¡Base ¡ 04. ¡Layout ¡ 05. ¡Modules ¡ 06. ¡States ¡ 07. ¡@font-­‑face ¡ 08. ¡Print ¡ Print styles states/_print.scss

!important

shame.css

_shame.scss

01. ¡Utilities ¡ 02. ¡Libraries ¡ 03. ¡Base ¡ 04. ¡Layout ¡ 05. ¡Modules ¡ 06. ¡States ¡ 07. ¡@font-­‑face ¡ 08. ¡Print ¡ 09. ¡Shame because hacks happen _shame.scss

small and readable

mina.so/sassyStarter

Theming