Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Responsive Design 2.0: Flexbox, Grid, Calc, Custom Properties, and Sass

49 vues

Publié le

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 Properties 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.

Publié dans : Technologie
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Responsive Design 2.0: Flexbox, Grid, Calc, Custom Properties, and Sass

  1. 1. R E S P O N S I V E D E S I G N 2 . 0 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 ( ) ? https://developer.mozilla.org/en-US/docs/Web/CSS/calc
  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?) • https://css-tricks.com/a-couple-of-use-cases-for-calc/
  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. • https://developer.mozilla.org/en-US/docs/Web/CSS/calc
  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; } https://codepen.io/thebabydino/pen/hgFno
  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 ? https://developer.mozilla.org/en-US/docs/Web/CSS/calc
  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 https://css-tricks.com/difference-between-types-of-css-variables/ $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 https://css-tricks.com/difference-between-types-of-css-variables/ :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: https://codepen.io/jen4web/pen/rQMVKr?editors=1100 • Variables: https://codepen.io/jen4web/pen/RqGPxw?editors=1100
  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 https://codepen.io/jen4web/pen/oQzxar?editors=1100 (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 https://developers.google.com/web/updates/2016/02/css-variables-why- 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 http://bit.ly/rwd2019
  24. 24. R E S O U R C E S https://codepen.io/jen4web/post/rwd20readinglist 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 jen@jenkramer.org www.jenkramer.org Twitter: @jen4web Facebook: facebook.com/webdesignjen

×