Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Modern Layouts with CSS Grid, Flexbox, Calc, AND Custom Properties

194 Aufrufe

Veröffentlicht am

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 have made a tremendous impact on the industry, providing 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. Attendees will leave with an understanding of creating custom responsive designs with the latest tools for layout, using semantically correct HTML markup and the latest CSS modules.

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Modern Layouts with CSS Grid, Flexbox, Calc, AND Custom Properties

  1. 1. M O D E R N L A Y O U T S W I T H F L E X B O X , G R I D , C A L C , A N D C U S T O M P R O P E R T I E S 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. C S S C A L C ( ) PART 1
  3. 3. •  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
  4. 4. 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/
  5. 5. 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; }
  6. 6. 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); }
  7. 7. S Y N T A X Q U I R K S •  The + and - operators must be surrounded by whitespace. •  calc(50% -8px) will be parsed as a percentage followed by a negative length—an invalid expression—while calc(50% - 8px) is a percentage followed by a subtraction operator and a length. •  Likewise, calc(8px + -50%) is treated as a length followed by an addition operator and a negative percentage. •  The * and / operators do not require whitespace, but adding it for consistency is both allowed and recommended. •  In short: a calc() inside of a calc() is identical to just parentheses. •  https://developer.mozilla.org/en-US/docs/Web/CSS/calc
  8. 8. 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
  9. 9. 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
  10. 10. 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.
  11. 11. 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
  12. 12. •  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
  13. 13. 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); }
  14. 14. 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); }
  15. 15. 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; }
  16. 16. 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); }
  17. 17. 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)
  18. 18. 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
  19. 19. 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)
  20. 20. 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
  21. 21. 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
  22. 22. 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

×