Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

460 views

Published on

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.

Published in: Technology
  • Get the best essay, research papers or dissertations. from ⇒ www.HelpWriting.net ⇐ A team of professional authors with huge experience will give u a result that will overcome your expectations.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • If you’re looking for a great essay service then you should check out ⇒ www.HelpWriting.net ⇐. A friend of mine asked them to write a whole dissertation for him and he said it turned out great! Afterwards I also ordered an essay from them and I was very happy with the work I got too.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download Full EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download Full doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THIS can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THIS is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THIS Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THIS the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THIS Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

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

×