View
1.139
Download
1
Category
Preview:
DESCRIPTION
Charla en el marco del a tercera Buenos Aires Front-end Meetup. Miles de líneas de código CSS pueden significar la locura en proyectos grandes. Mostraremos una metodología para lograr código fácil de mantener: CSS Atómico con la ayuda de OOCSS y SASS.
Citation preview
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
Recommended