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.
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 ...
C S S C A L C ( )
PART 1
•  Ability to do math in CSS
•  Compatible with length, frequency, angle, time, number, and integer
•  Addition: +
•  Subt...
A D V A N T A G E S
•  Can mix units when performing calculations (not possible in Sass)
.thing {
width: 90%; /* fallback ...
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;
ma...
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 {
wi...
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 p...
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...
P E M D A S
.col-3 {
flex: 0 0 calc( 20% * 3 + 4% * 2);
}
•  Please Excuse My Dear Aunt Sally (PEMDAS)
•  Parenthesis
•  Ex...
S U M M A R Y
•  Use calc() anywhere in CSS to perform numeric calculations.
•  Don't forget about whitespace around the o...
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
•  Kind of like variables, but with weird quirks
•  Must declare custom field within a CSS property – just like other
CSS ...
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(--pr...
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...
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/
$p...
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/
:r...
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-
sho...
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:/...
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/oQzxa...
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
R E S O U R C E S
https://codepen.io/jen4web/post/rwd20readinglist
Includes resources for Flexbox, Flexbox grid systems, G...
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: @jen4we...
Modern Layouts with CSS Grid, Flexbox, Calc, AND Custom Properties
Modern Layouts with CSS Grid, Flexbox, Calc, AND Custom Properties
Modern Layouts with CSS Grid, Flexbox, Calc, AND Custom Properties
Upcoming SlideShare
Loading in …5
×

of

Modern Layouts with CSS Grid, Flexbox, Calc, AND Custom Properties Slide 1 Modern Layouts with CSS Grid, Flexbox, Calc, AND Custom Properties Slide 2 Modern Layouts with CSS Grid, Flexbox, Calc, AND Custom Properties Slide 3 Modern Layouts with CSS Grid, Flexbox, Calc, AND Custom Properties Slide 4 Modern Layouts with CSS Grid, Flexbox, Calc, AND Custom Properties Slide 5 Modern Layouts with CSS Grid, Flexbox, Calc, AND Custom Properties Slide 6 Modern Layouts with CSS Grid, Flexbox, Calc, AND Custom Properties Slide 7 Modern Layouts with CSS Grid, Flexbox, Calc, AND Custom Properties Slide 8 Modern Layouts with CSS Grid, Flexbox, Calc, AND Custom Properties Slide 9 Modern Layouts with CSS Grid, Flexbox, Calc, AND Custom Properties Slide 10 Modern Layouts with CSS Grid, Flexbox, Calc, AND Custom Properties Slide 11 Modern Layouts with CSS Grid, Flexbox, Calc, AND Custom Properties Slide 12 Modern Layouts with CSS Grid, Flexbox, Calc, AND Custom Properties Slide 13 Modern Layouts with CSS Grid, Flexbox, Calc, AND Custom Properties Slide 14 Modern Layouts with CSS Grid, Flexbox, Calc, AND Custom Properties Slide 15 Modern Layouts with CSS Grid, Flexbox, Calc, AND Custom Properties Slide 16 Modern Layouts with CSS Grid, Flexbox, Calc, AND Custom Properties Slide 17 Modern Layouts with CSS Grid, Flexbox, Calc, AND Custom Properties Slide 18 Modern Layouts with CSS Grid, Flexbox, Calc, AND Custom Properties Slide 19 Modern Layouts with CSS Grid, Flexbox, Calc, AND Custom Properties Slide 20 Modern Layouts with CSS Grid, Flexbox, Calc, AND Custom Properties Slide 21 Modern Layouts with CSS Grid, Flexbox, Calc, AND Custom Properties Slide 22 Modern Layouts with CSS Grid, Flexbox, Calc, AND Custom Properties Slide 23 Modern Layouts with CSS Grid, Flexbox, Calc, AND Custom Properties Slide 24 Modern Layouts with CSS Grid, Flexbox, Calc, AND Custom Properties Slide 25
Upcoming SlideShare
What to Upload to SlideShare
Next
Download to read offline and view in fullscreen.

0 Likes

Share

Download to read offline

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

Download to read offline

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.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • 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

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.

Views

Total views

686

On Slideshare

0

From embeds

0

Number of embeds

8

Actions

Downloads

9

Shares

0

Comments

0

Likes

0

×