ATOMIC CSS@ L U C A S M O U R E L L E

# B A F r o n t e n d

Lucas Mourelle

@ l u c a s m o u r e l l e

* Líder de diseño en OmbuLabs

* Profesor en FADU/UBA y Fundación Gutenberg

d i s e ñ a d o r · f r o n t e n d e r · p r o f e s o r

PROBLEMA

?

FILOSOFÍA TECNOLOGÍA ESTRUCTURA

FILOSOFÍA

OOCSSObject Oriented CSS

DISEÑAR SISTEMAS, NO PÁGINAS

Design systems, not pages

ESTRUCTURA COSMÉTICA

.default-button { display: inline-block; border-radius: 3px; padding: .4em .8em; border: none; text-decoration: none; background: #0f0; color: #000;}.button { display: inline-block; border-radius: 3px; padding: .4em .8em; border: none; text-decoration: none; background: #ddd; color: #000;}

.default-button { display: inline-block; border-radius: 3px; padding: .4em .8em; border: none; text-decoration: none; background: #0f0; color: #000;}.button { display: inline-block; border-radius: 3px; padding: .4em .8em; border: none; text-decoration: none; background: #ddd; color: #000;}

.button { display: inline-block; border-radius: 3px; padding: .4em .8em; border: none; text-decoration: none; background: #ddd; color: #000;}

.button.default { background: #0f0; color: #000;}

.button.big { font-size: 2em;}

.button.small { font-size: .6em;}

C O N T E N E D O R

CONTENIDO

.dialog { border-radius: 5px; background: #fff; box-shadow: rgba(0,0,0,0.3) 0px 2px 6px; overflow: hidden; max-width: 760px; margin: 1em auto 1em; padding: 1em;}.dialog header h1 { font-size: 1.5625em; font-weight: 700; color: #fff; text-align: center; padding: 1em;}

.dialog { border-radius: 5px; background: #fff; box-shadow: rgba(0,0,0,0.3) 0px 2px 6px; overflow: hidden; max-width: 760px; margin: 1em auto 1em; padding: 1em;}.dialog header h1 { font-size: 1.5625em; font-weight: 700; color: #fff; text-align: center; padding: 1em;}

.dialog { border-radius: 5px; background: #fff; box-shadow: rgba(0,0,0,0.3) 0px 2px 6px; overflow: hidden; max-width: 760px; margin: 1em auto 1em; padding: 1em;}.heading { font-size: 1.5625em; font-weight: 700; color: #fff; text-align: center; padding: 1em;}

DRYDON’T REPEAT YOURSELFDON’T REPEAT YOURSELFDON’T REPEAT YOURSELFDON’T REPEAT YOURSELFDON’T REPEAT YOURSELFDON’T REPEAT YOURSELFDON’T REPEAT YOURSELFDON’T REPEAT YOURSELF

TECNOLOGÍA

SASSSyntactically Awesome Style Sheets

SCSS CSS

SASSLESS

VARIABLES

.button { background: #66ffcc; font-size: 1.2em; margin-right: 20px;}.header { color: #66ffcc; font-weight: 700; margin-bottom: 20px;}

.button { background: #66ffcc; font-size: 1.2em; margin-right: 20px;}.header { color: #66ffcc; font-weight: 700; margin-bottom: 20px;}

$brand-color: #66ffcc;$module: 20px;!.button { background: $brand-color; font-size: 1.2em; margin-right: $module;}.header { color: $brand-color; font-weight: 700; margin-bottom: $module;}

CÁLCULOS

$brand-color: #66ffcc;$module: 20px;!.button { background: $brand-color; font-size: 1.2em; margin-right: $module;}.header { color: $brand-color; font-weight: 700; margin-bottom: 40px;}

$brand-color: #66ffcc;$module: 20px;!.button { background: $brand-color; font-size: 1.2em; margin-right: $module;}.header { color: $brand-color; font-weight: 700; margin-bottom: $module*2;}

NESTING

.button { display: inline-block; border-radius: 3px; padding: .4em .8em; border: none; background: #ddd;}.button:hover { background: #fff;}.button:active { background: #bbb;}

.button { display: inline-block; border-radius: 3px; padding: .4em .8em; border: none; background: #ddd;}.button:hover { background: #fff;}.button:active { background: #bbb;}

.button { display: inline-block; border-radius: 3px; padding: .4em .8em; border: none; background: #ddd; &:hover { background: #fff; } &:active { background: #bbb; }}

IMPORT PARTIALS

.main-content { float: left; width: 65%;}.secondary-content { float: right; width: 30%;}

CSS

_layout.scss style.scss style.css

import "layout";!.button { background: #6f0; font-size: 1.2em; padding: .2em;}

.main-content { float: left; width: 65%;}.secondary-content { float: right; width: 30%;}.button { background: #6f0; font-size: 1.2em; padding: .2em;}

MIXINS & HERENCIA

@mixin border-radius($radius) { -webkit-border-radius: $radius; border-radius: $radius;}!.button { @include border-radius(5px);}.dialog { @include border-radius(10px);}

.button { -webkit-border-radius: 5px; border-radius: 5px;}.dialog { -webkit-border-radius: 10px; border-radius: 10px;}

CSSSCSS

%alert-base { display: inline-block; padding: .3em; text-decoration: none;}!.alert-warning { @extend %alert-base; background: #ffffdf; color: #000;}.alert-error { @extend %alert-base; background: #f00; color: #fff;}

.alert-warning, .alert-error { display: inline-block; padding: .3em; text-decoration: none;}!.alert-warning { background: #ffffdf; color: #000;}.alert-error { background: #f00; color: #fff;}

CSSSCSS

COLOR FUNCTIONS

CSS

SCSS

$brand-color: #ff0000;!.alert { border: 1px solid $brand-color; color: darken($brand-color, 20%); background: lighten($brand-color, 40%);}

.alert { border: 1px solid #ff0000; color: #990000; background: #ffcccc;}

You got me at variables!

ESTRUCTURA

ATOMIC

DIVIDE & CONQUER

ATOMIC DESIGNVERSIÓN ORIGINAL

ATOMS MOLECULES ORGANISMS TEMPLATES PAGES

by Brad Frost

Brad Frost@brad_frost

bradfrostweb.com

https://vimeo.com/95626309 =PREALLY COOL ATOMIC DESIGN TALK

patternlab.io

ATOMIC CSS

ATOMS MOLECULES PAGESQUARKSUTILITIES

VERSIÓN ALTERNATIVARobin Rendle y otros

ATOMS MOLECULES PAGESQUARKSUTILITIES

ATOMS MOLECULES PAGESQUARKSUTILITIES

ATOMS MOLECULES PAGESQUARKSUTILITIES

ATOMS MOLECULES PAGESQUARKSUTILITIES

ATOMS MOLECULES PAGESQUARKSUTILITIES

1-util ities

2-quarks

3-atoms

4-molecules

5-pages

SCSS

style.scss

1-util ities

SCSS

style.scss

_variables.scss_mixins.scss_placeholders.scss_grid.scss!_typography.scss_forms.scss!_brand.scss_buttons.scss_errors.scss!_dialog.scss_footer.scss_navbar.scss!_home.scss_features.scss_examples.scss

2-quarks

3-atoms

4-molecules

5-pages

// 1-UTILITIES@import "1-utilities/variables";@import "1-utilities/mixins";@import "1-utilities/placeholders";@import "1-utilities/grid";!// 2-QUARKS@import "2-quarks/typography";@import "2-quarks/forms";!// 3-ATOMS@import "3-atoms/brand";@import "3-atoms/buttons";@import "3-atoms/errors";!// 4-MOLECULES@import "4-molecules/dialog";@import "4-molecules/footer";@import "4-molecules/navbar";!// 5-PAGES@import "5-pages/home";@import "5-pages/features";@import "5-pages/examples";

SCSS style.scss

// Componente.button { display: inline-block; border-radius: $global-radius; padding: .4em .8em; border: none; text-decoration: none; background: $button-background-color; color: $button-text-color; // Modificadores &.default { background: $button-default—background-color; color: $button-default-text-color; } &.big { font-size: 2em; } &.small { font-size: .6em; }}

SCSS _buttons.scss

3-atoms

// Componente.component {!!!!!!! // Modificadores!!!!!!!!!!}

SCSS _component.scss

n-layer

ESTRUCTURAL

COSMÉTICOmodificadores, estados, contextos

ATOMIC CSS

ATOMS MOLECULES PAGESQUARKSUTILITIES

VERSIÓN ALTERNATIVA

FILOSOFÍA TECNOLOGÍA ESTRUCTURA

OOCSS SASS ATOMIC

GRACIAS!L U C A S M O U R E L L E

# B A F r o n t e n d

AT O M I C D E S I G N B r a d F r o s t ( @ b r a d _ f r o s t )h t t p : / / p a t t e r n l a b . i o / h t t p : / / b r a d f r o s t w e b . c o m / b l o g / p o s t / a t o m i c - w e b - d e s i g n /

AT O M I C C S S ( w i t h S A S S ) R o b i n R e n d l e ( @ r o b i n r e n d l e )h t t p : / / w w w. s m a s h i n g m a g a z i n e . c o m / 2 0 1 3 / 0 8 / 0 2 / o t h e r - i n t e r f a c e - a t o m i c -d e s i g n - s a s s /

O O C S S N a t i D e v a l l e ( @ t a l y )h t t p : / / e s . s l i d e s h a r e . n e t / n d e v a l l e / a n - i n t r o d u c t i o n - t o - o b j e c t - o r i e n t e d - c s s

C S S AT Ó M I C O O m b u S h o p B l o gh t t p : / / w w w. o m b u s h o p . c o m / b l o g / d i s e n o - w e b / c s s - a t o m i c o . h t m l

¿PREGUNTAS?

GRACIAS!L U C A S M O U R E L L E

@ l u c a s m o u r e l l e

# B A F r o n t e n d