Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Responsive Design 2.0: The Death of Bootstrap

278 visualizaciones

Publicado el

For the first time in the history of the web, CSS is graced with tools for laying out web pages without hacks. Flexbox and Grid provide methods for creating responsive websites with designs not previously possible. CSS Calc and CSS Custom Fields give us a first chance to use math and variables within CSS itself, without requiring compiling. Together, these four new CSS modules work together to revolutionize CSS in modern evergreen browsers.

Publicado en: Tecnología
  • Sé el primero en comentar

Responsive Design 2.0: The Death of Bootstrap

  1. 1. R E S P O N S I V E D E S I G N 2 . 0 : T H E D E A T H O F B O O T S T R A P J E N K R A M E R Ÿ H A R V A R D U N I V E R S I T Y E X T E N S I O N S C H O O L @ J E N 4 W E B
  2. 2. R W D 2 . 0 •  CSS calc( ) •  CSS custom properties (variables) •  Flexbox and/or Grid •  And sometimes Sass
  3. 3. C S S C A L C ( ) PART 1
  4. 4. •  Ability to do math in CSS •  Compatible with length, frequency, angle, time, number, and integer •  Addition: + •  Subtraction: - •  Multiplication: * •  Division: / •  width: calc(100% - 80px); W H A T I S C S S C A L C ( ) ?
  5. 5. A D V A N T A G E S •  Can mix units when performing calculations (not possible in Sass) .thing { width: 90%; /* fallback if needed */ width: calc(100% - 3em); } •  Documentation of math (how do you derive a number?) •
  6. 6. A D V A N T A G E S : M I X I N G U N I T S , C A L C U L A T I N G B O X S I Z E S .area-one { width: 40%; float: left; margin-right: 1em; } .area-two { width: calc(60% - 1em); float: right; }
  7. 7. A D V A N T A G E S : M A K E M A T H E A S I E R T O U N D E R S T A N D .column-1-7 { width: 14.2857% } .column-2-7 { width: 28.5714% } .column-3-7 { width: 42.8571% } .column-1-7 { width: calc(100% / 7); } .column-2-7 { width: calc(100% / 7 * 2); } .column-3-7 { width: calc(100% / 7 * 3); }
  8. 8. S Y N T A X Q U I R K S •  The + and - operators must be surrounded by whitespace. •  Valid: calc(50% - 8px) •  Invalid: calc(50% -8px) •  Valid: calc(8px + -50%) •  The * and / operators do not require whitespace, but adding it for consistency is both allowed and recommended. •  Nested calc() OK, or use parenthesis. •
  9. 9. C A L C C A N B E U S E D W I T H S A S S $a: 4em; div { height: calc(#{$a} + 7px); background: #e53b2c; }
  10. 10. S A S S M A T H V S . C A L C M A T H •  Sass is bad at math with different units •  Calc handles different units with ease
  11. 11. P E M D A S .col-3 { flex: 0 0 calc( 20% * 3 + 4% * 2); } •  Please Excuse My Dear Aunt Sally (PEMDAS) •  Parenthesis •  Exponents •  Multiplication/Division, left to right •  Addition/Subtraction, left to right
  12. 12. S U M M A R Y •  Use calc() anywhere in CSS to perform numeric calculations. •  Don't forget about whitespace around the operator. •  You can mix and match your units. •  You can use parentheses or nest calc() statements. •  PEMDAS applies. •  Well-supported by most browsers in use.
  13. 13. C S S C U S T O M P R O P E R T I E S ( V A R I A B L E S ) PART 2
  14. 14. •  Kind of like variables, but with weird quirks •  Must declare custom field within a CSS property – just like other CSS declarations •  Values inherit – just like elsewhere in CSS •  Can be used in JavaScript W H A T I S C S S C U S T O M P R O P E R T I E S ?
  15. 15. D E C L A R I N G A V A R I A B L E :root { --primary-color: blue; --gap: 1.75rem; } .wrapper { background-color: var(--primary-color); } h1 { color: var(--primary-color); margin-bottom: calc(var(--gap) * 5px); }
  16. 16. D E C L A R I N G A V A R I A B L E :root { --primary-color: blue; --default-size: 1rem; --bkgd-img: url(..img/myimage.jpg); --center-margin: 0 auto; --bezier: cubic-bezier(.17,.67,.83,.67); }
  17. 17. C S S V A R I A B L E S V S S A S S V A R I A B L E S $primary-color: #123456; h1 { color: $primary-color; } article { border: 1px solid $primary-color; } After compiling: h1 { color: #123456; } article { border: 1px solid #123456; }
  18. 18. C S S V A R I A B L E S V S S A S S V A R I A B L E S :root { --primary-color: #123456; } h1 { color: var(--primary-color); } article { border: 1px solid var(--primary-color); }
  19. 19. C S S V A R I A B L E S H A V E I N H E R I T A N C E B U T I T ' S W E I R D E R T H A N Y O U T H I N K •  Sass: •  Variables:
  20. 20. W H E N S H O U L D I U S E S A S S V S . C U S T O M P R O P E R T I E S ? •  Sass is for global values that don't change: color, font family, etc. •  Custom properties are for values that change in media queries: font size, margin, padding, widths, flex basis, etc. •  Outside the media query, establish the logic for layout •  Change the values of the custom properties inside the media query. •  Result is no duplicated code with different values.
  21. 21. U S I N G I N H E R I T A N C E I N M E D I A Q U E R I E S W I T H V A R I A B L E S (also rudimentary type scaling)
  22. 22. C S S V A R I A B L E S A N D J A V A S C R I P T should-you-care (scroll down halfway)
  23. 23. C O M B I N I N G V A R I A B L E S , C A L C A N D F L E X B O X PART 3 Follow with CodePen at
  24. 24. R E S O U R C E S Includes resources for Flexbox, Flexbox grid systems, Grid, calc(), and custom properties
  25. 25. Q U E S T I O N S ? Jen Kramer Watertown, MA, USA Phone: 802-257-2657 Twitter: @jen4web Facebook: