Say no to cookie cutter web layouts

By Chen Hui Jing / @hj_chen

🇲🇾 🏀 👩‍💻 🇸🇬 📝 🎙

The Digital Revolution

The web is unlike anything we've seen before

Blog layout Holy Grail layout
Every startup's template

The “Blog” layout

Example of Blog layout Example of Blog layout Example of Blog layout

The “Holy Grail” layout

Example of the Holy Grail layout Example of the Holy Grail layout Example of the Holy Grail layout

The “Panel” layout

Example of the Panel layout Example of the Panel layout Example of the Panel layout

12 columns

Rectangles

“We need to translate ideas that we find in other places, not transfer them.”
—Jen Simmons

Let's establish a new normal

CSS Layout Toolbox (2017)

Flexbox and Grid

Based on the container-child relationship

Flex/Grid containerFlex/Grid item

Flexbox

Provides “simple and powerful tools for distributing space and aligning content in ways that web apps and complex web pages often need”

Flexbox browser support

Flexbox basics

Pumpkin by Yayoi Kusama

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

Flexbox layouts (1/2)

Flexbox layouts (2/2)

calc() and object-fit browser support

CSS Grid

Defines a two-dimensional grid-based layout system, optimized for user interface design

CSS Grid browser support

CSS grid basics

Define your grid.

Place items in the grid.

Fixed CSS grid

.container {
  display: grid;
  grid-template-columns: repeat(5, 10em);
}

Fluid CSS grid

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

Responsive CSS grid

.container {
  display: grid;
  grid-template-columns: repeat(5, minmax(10em, 1fr));
}

Placing grid items

grid-row and grid-column

Whitespace

Overlap (1/2)

.grid-cont2 { display: grid; grid-template-columns: repeat(9, 1.25em); grid-template-rows: repeat(6, 1.25em); } h2 { grid-row: 3 / 5; grid-column: 1 / 10; } .grid-cont2::before { grid-row: 1 / 7; grid-column: 1 / 7; } .grid-cont2::after { grid-row: 1 / 7; grid-column: 4 / 10; }

Overlap (2/2)

main { display: grid; grid-template-columns: repeat(auto-fill, minmax(8em, 1fr)); grid-auto-rows: 8em; } @media screen and (max-width: 383px) { main { grid-template-rows: 3em repeat(auto-fill, 8em); } } @media screen and (min-aspect-ratio: 1/1) { main { grid-template-columns: repeat(4, minmax(25vw, 5em)); grid-template-rows: repeat(3, calc(100vh / 3)); grid-template-areas: "a b c ." "d e . f" "g . h i"; } }

Firefox Grid Inspector (1/2)

Firefox Grid Inspector (2/2)

Transforms

Allows us to change the shape and position of the affected content without disrupting the normal document flow

2D transform functions

rotate( <angle> ) Performs a 2D rotation by the angle specified around the element's origin
translate( <translation-value> [, <translation-value> ]? ) Performs a 2D translation in the specified X and Y directions
skew( <angle> [, <angle> ]? ) Performs a 2D skew by the angles specified
scale( <number> [, <number> ]? ) Performs a 2D scale operation by the scaling vector specified

Diagonal text with rotate()

.trf2d-cont { display: grid; grid-template-columns: repeat(9, 1fr); grid-template-rows: repeat(3, 2em) repeat(3, minmax(10vmin, 3em)) 2em 2em 50vh; grid-gap: 0.125em; position: relative; } @media screen and (min-width: 480px) { .trf2d-cont { transform: rotate(-30deg) translateX(5vh); } } @media screen and (min-width: 640px) { .trf2d-cont { transform: rotate(-30deg) translateY(-15vh); } }

Perspective text

Rethinking Web Design

Transforms browser support

CSS Shapes

Defines properties to control the geometry of an element’s float area

Basic shapes

Lollipop marshmallow lemon drops jujubes muffin fruitcake bonbon. Muffin carrot cake bear claw sweet roll tiramisu chocolate jelly beans toffee sweet roll. Biscuit candy sweet sweet powder tart bear claw. Tiramisu jelly beans apple pie donut topping dessert lemon drops gummies halvah.

Dessert pie dragée fruitcake chocolate oat cake donut muffin. Chocolate lemon drops cake muffin. Bonbon lemon drops chocolate fruitcake jujubes chupa chups sesame snaps sesame snaps pudding. Pastry chocolate jelly beans cake wafer.

Donut jelly toffee macaroon macaroon. Cookie sesame snaps chupa chups. Lollipop jelly lollipop brownie pastry gummi bears.

Gummi bears apple pie chupa chups jelly pie halvah pastry sweet. Cookie dessert sweet roll icing cheesecake macaroon wafer cheesecake. Toffee lemon drops apple pie fruitcake sweet roll chocolate cake jelly bear claw jelly. Donut tiramisu chocolate cake sesame snaps marshmallow tootsie roll candy canes cheesecake cotton candy.

Cake powder croissant lollipop cotton candy tiramisu lollipop tiramisu. Cookie candy canes gummies jujubes bonbon fruitcake ice cream gingerbread. Marzipan toffee carrot cake marshmallow danish cupcake jelly-o.

Halvah brownie lollipop. Chocolate cake marshmallow croissant muffin macaroon pastry. Gummies danish soufflé muffin gingerbread. Lollipop jelly cake croissant sesame snaps macaroon.

Biscuit gummies tart gingerbread wafer jujubes sweet roll. Wafer oat cake carrot cake liquorice chocolate bar chocolate cake jelly-o. Pastry donut oat cake. Fruitcake candy apple pie cake tootsie roll cotton candy candy canes. Halvah halvah chocolate jelly-o macaroon.

Macaroon dessert sweet roll dragée candy. Sweet cheesecake lemon drops. Sweet tart chocolate cake candy canes powder cotton candy. Apple pie danish chocolate cake danish bonbon. Muffin soufflé topping carrot cake chocolate. Macaroon toffee chupa chups sesame snaps gummi bears.

Shape from image

Beyoncé Giselle Knowles-Carter is an American singer, songwriter, dancer and actress. Born and raised in Houston, Texas, Beyoncé performed in various singing and dancing competitions as a child. She rose to fame in the late 1990s as lead singer of the R&B girl-group Destiny's Child.

Writing-mode

Defines CSS features to support for various international writing modes

Vertical text

Halt and Catch Fire

“Computers aren't the thing. They're the thing that gets us to the thing.”

“How did we all get here today? The choices we made, the sheer force of our will, something like that? Here's another answer... the winds of fate. Random coincidence, some unseen hand just pushing us along. Destiny.”

What are you searching for?

Vertical headers

Vertical tags

Vertical navigation

Feature Queries

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

@supports (property:value) {
  .selector {
    /* Styles for browsers that support the specified property */
  }
}
Wismut Labs site layout on IE11 Wismut Labs site layout on Firefox Wismut Labs site layout on Chrome
“CSS isn't a programming language. It's a stylesheet language. We shouldn't expect it to behave like a programming language. It has its own unique landscape and structures, ones that people with programming language mental maps might not expect.”
—Danielle Huntrods

A long list of references

CSS layout workshop by Rachel Andrew
https://thecssworkshop.com/
Jen Simmons' experimental layout lab
http://labs.jensimmons.com/

Salamat!

Websitehttps://www.chenhuijing.com

Twitter@hj_chen

Medium@hj_chen

Codepen@huijing