Do you Box Model?

Building Layouts with Modern CSS

#TeamWeb

Original image by the amazing Lin Clark

Link to slides:

http://bit.ly/detech-css

Chen Hui Jing
Jing
@hj_chen
🇲🇾 🏀 👩‍💻 📝 🦊
Mozilla TechSpeakers

https://events.mozilla.org/techspeakers

Nexmo Developer Relations

🥑 Developer Advocate 🥑

Nexmo

General agenda

  • Introduction and set up
  • Pre-grid techniques and concepts
  • Flexbox basics
    • Flex syntax
    • Aligning flex items
  • Real-world application: Image gallery
  • Grid basics
    • Auto-placement
    • Flexible sizing
    • Manual placement
  • Real-world application: Responsive dashboard
Firefox Nightly Text editor Pencil and paper

Evolution of browsers

Evolution of browser layout capabilities

Pre-grid techniques

See the Pen #0: Pre-Grid layout techniques by Chen Hui Jing (@huijing) on CodePen.

https://codepen.io/huijing/pen/KGOmLZ/

The flex syntax

Flex syntax explained

Flexbox basics

See the Pen Flexbox basics by Chen Hui Jing (@huijing) on CodePen.

https://codepen.io/huijing/pen/NEPwoj/

Flex shorthand

flex: initial flex: 0 1 auto, cannot grow but can shrink when there isn't enough space
flex: auto flex: 1 1 auto, can grow and shrink to fit available space
flex: none flex: 0 0 auto, cannot grow or shrink, AKA inflexible
flex: <positive-number> flex: <positive-number> 1 0, can grow and shrink, extent of growth depends on flex factor

Authors are encouraged to control flexibility using the flex shorthand rather than with its longhand properties directly, as the shorthand correctly resets any unspecified components to accommodate common uses.


CSS Flexible Box Layout Module Level 1

Flex lines

Single flex line, nowrap
nowrap
Multiple flex lines, wrap
wrap
Multiple flex lines, wrap-reverse
wrap-reverse

Auto-margins with Flexbox

See the Pen Auto-margins in Flexbox by Chen Hui Jing (@huijing) on CodePen.

https://codepen.io/huijing/pen/EOWedx/

Aligning flex items

See the Pen Aligning flex items by Chen Hui Jing (@huijing) on CodePen.

https://codepen.io/huijing/pen/zMNqOo/

Image gallery

See the Pen Image gallery by Chen Hui Jing (@huijing) on CodePen.

https://codepen.io/huijing/pen/dQPZmL/

Defining a grid

See the Pen #1: Defining a grid by Chen Hui Jing (@huijing) on CodePen.

https://codepen.io/huijing/pen/mzKoNj/

The repeat() function

See the Pen #2.1: The repeat() function by Chen Hui Jing (@huijing) on CodePen.

https://codepen.io/huijing/pen/XxveJe/

auto-fill versus auto-fit

See the Pen #2.2: auto-fill versus auto-fit by Chen Hui Jing (@huijing) on CodePen.

https://codepen.io/huijing/pen/GYVyMX/

grid-auto-row and grid-auto-column

See the Pen #2.3: grid-auto-row and grid-auto-column by Chen Hui Jing (@huijing) on CodePen.

https://codepen.io/huijing/pen/ePqyMz/

The grid-auto-flow property

See the Pen #2.4: The grid-auto-flow property by Chen Hui Jing (@huijing) on CodePen.

https://codepen.io/huijing/pen/LgwegQ/

The fr unit

See the Pen #3.1: The fr unit by Chen Hui Jing (@huijing) on CodePen.

https://codepen.io/huijing/pen/WaVdLN/

The minmax() function

See the Pen #3.2: The minmax() function by Chen Hui Jing (@huijing) on CodePen.

https://codepen.io/huijing/pen/jegYob/

Content-based sizing

See the Pen #3.3: Content-based sizing by Chen Hui Jing (@huijing) on CodePen.

https://codepen.io/huijing/pen/bmXLpd/

Image gallery (part 2)

See the Pen Image gallery by Chen Hui Jing (@huijing) on CodePen.

https://codepen.io/huijing/pen/dQPZmL/

Line-based placement

See the Pen #4.1: Line-based placement by Chen Hui Jing (@huijing) on CodePen.

https://codepen.io/huijing/pen/pxMaYp/

grid-column and grid-row

See the Pen #4.2: grid-column and grid-row by Chen Hui Jing (@huijing) on CodePen.

https://codepen.io/huijing/pen/zmgRgM/

The span keyword

See the Pen #4.3: The span keyword by Chen Hui Jing (@huijing) on CodePen.

https://codepen.io/huijing/pen/NOQYMM/

Using the grid-area shorthand

See the Pen #4.4: Using the grid-area shorthand by Chen Hui Jing (@huijing) on CodePen.

https://codepen.io/huijing/pen/vVoRzx/

Naming grid lines

See the Pen #5.1: Naming grid lines by Chen Hui Jing (@huijing) on CodePen.

https://codepen.io/huijing/pen/xyvWBZ/

Naming grid areas

See the Pen #5.2: Naming grid areas by Chen Hui Jing (@huijing) on CodePen.

https://codepen.io/huijing/pen/EdqLxP/

Responsive dashboard

See the Pen Responsive dashboard by Chen Hui Jing (@huijing) on CodePen.

https://codepen.io/huijing/pen/xQbXKO/

Do we have enough time?

Feature queries

.selector {
  /* Styles that are supported in old browsers */
}

@supports (property:value) {
  .selector {
    /* Styles for browsers that support the specified property */
  }
}

Card-based layout

See the Pen Card-based layout by Chen Hui Jing (@huijing) on CodePen.

https://codepen.io/huijing/pen/VVPjBL/

Useful references

Thank you!

Websitehttps://www.chenhuijing.com

Twitter@hj_chen

Medium@hj_chen

Codepen@huijing

Font used is ABeeZee, by Anja Meiners