Atomic CSS - Lucas Mourelle

1,968 views
1,836 views

Published on

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.

Published in: Design
1 Comment
0 Likes
Statistics
Notes
  • Be the first to like this

No Downloads
Views
Total views
1,968
On SlideShare
0
From Embeds
0
Number of Embeds
1,264
Actions
Shares
0
Downloads
5
Comments
1
Likes
0
Embeds 0
No embeds

No notes for slide

Atomic CSS - Lucas Mourelle

  1. 1. 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
  2. 2. 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
  3. 3. PROBLEMA
  4. 4. ?
  5. 5. FILOSOFÍA TECNOLOGÍA ESTRUCTURA
  6. 6. FILOSOFÍA OOCSS Object Oriented CSS
  7. 7. DISEÑAR SISTEMAS, NO PÁGINAS Design systems, not pages
  8. 8. ESTRUCTURA COSMÉTICA
  9. 9. .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; }
  10. 10. .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; }
  11. 11. .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; }
  12. 12. C O N T E N E D O R CONTENIDO
  13. 13. .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; }
  14. 14. .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; }
  15. 15. .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; }
  16. 16. DRY DON’T REPEAT YOURSELF DON’T REPEAT YOURSELF DON’T REPEAT YOURSELF DON’T REPEAT YOURSELF DON’T REPEAT YOURSELF DON’T REPEAT YOURSELF DON’T REPEAT YOURSELF
  17. 17. TECNOLOGÍA SASS Syntactically Awesome Style Sheets
  18. 18. SCSS CSS SASS LESS
  19. 19. VARIABLES
  20. 20. .button { background: #66ffcc; font-size: 1.2em; margin-right: 20px; } .header { color: #66ffcc; font-weight: 700; margin-bottom: 20px; }
  21. 21. .button { background: #66ffcc; font-size: 1.2em; margin-right: 20px; } .header { color: #66ffcc; font-weight: 700; margin-bottom: 20px; }
  22. 22. $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; }
  23. 23. CÁLCULOS
  24. 24. $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; }
  25. 25. $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; }
  26. 26. NESTING
  27. 27. .button { display: inline-block; border-radius: 3px; padding: .4em .8em; border: none; background: #ddd; } .button:hover { background: #fff; } .button:active { background: #bbb; }
  28. 28. .button { display: inline-block; border-radius: 3px; padding: .4em .8em; border: none; background: #ddd; } .button:hover { background: #fff; } .button:active { background: #bbb; }
  29. 29. .button { display: inline-block; border-radius: 3px; padding: .4em .8em; border: none; background: #ddd; &:hover { background: #fff; } &:active { background: #bbb; } }
  30. 30. IMPORT PARTIALS
  31. 31. .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; }
  32. 32. MIXINS & HERENCIA
  33. 33. @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
  34. 34. %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
  35. 35. COLOR FUNCTIONS
  36. 36. 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; }
  37. 37. You got me at variables!
  38. 38. ESTRUCTURA ATOMIC
  39. 39. DIVIDE & CONQUER
  40. 40. ATOMIC DESIGN VERSIÓN ORIGINAL ATOMS MOLECULES ORGANISMS TEMPLATES PAGES by Brad Frost
  41. 41. Brad Frost @brad_frost bradfrostweb.com https://vimeo.com/95626309 =P REALLY COOL ATOMIC DESIGN TALK patternlab.io
  42. 42. ATOMIC CSS ATOMS MOLECULES PAGESQUARKSUTILITIES VERSIÓN ALTERNATIVA Robin Rendle y otros
  43. 43. ATOMS MOLECULES PAGESQUARKSUTILITIES
  44. 44. ATOMS MOLECULES PAGESQUARKSUTILITIES
  45. 45. ATOMS MOLECULES PAGESQUARKSUTILITIES
  46. 46. ATOMS MOLECULES PAGESQUARKSUTILITIES
  47. 47. ATOMS MOLECULES PAGESQUARKSUTILITIES
  48. 48. 1-utilities 2-quarks 3-atoms 4-molecules 5-pages SCSS style.scss
  49. 49. 1-utilities 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
  50. 50. // 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
  51. 51. // 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
  52. 52. // Componente .component { ! ! ! ! ! ! ! // Modificadores ! ! ! ! ! ! ! ! ! ! } SCSS _component.scss n-layer ESTRUCTURAL COSMÉTICO modificadores, estados, contextos
  53. 53. ATOMIC CSS ATOMS MOLECULES PAGESQUARKSUTILITIES VERSIÓN ALTERNATIVA
  54. 54. FILOSOFÍA TECNOLOGÍA ESTRUCTURA OOCSS SASS ATOMIC
  55. 55. GRACIAS! L U C A S M O U R E L L E # B A F r o n t e n d
  56. 56. 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 g h 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
  57. 57. ¿PREGUNTAS?
  58. 58. 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

×