Building Layouts with Modern CSS

↑

Original image by the amazing Lin Clark

Link to slides:

http://bit.ly/detech-css

@hj_chen

🇲🇾 🏀 👩‍💻 📝 🦊

https://events.mozilla.org/techspeakers

🥑 Developer Advocate 🥑

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

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

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

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!

https://www.chenhuijing.com