Say no to cookie cutter web layouts

Extended

By Chen Hui Jing / @hj_chen

🇲🇾 🏀 👩‍💻 🇸🇬 📝 🎙

The Digital Revolution

The web is unlike anything we've seen before

The “Blog” layout

Back in my day, every angsty teenager had their own blog where they would express their innermost thoughts and feelings in a lot more than 140 characters.

The web had started to take off and not everybody wanted to spend a lot of time building their own websites from scratch. So a lot of these blogs were hosted on blogging platforms, like Blogspot. LiveJournal was a thing back then too. You could theme your blogs, and some people did, but most people picked from a pool of available options.

This was around the time when screen sizes started to get bigger than 640 pixels. But we can't have extra space lying around, right? That space must be filled! So we started to have sidebars. Sidebars with links to other blogs or sites, or contact information, if you were entrepreneurial you could chuck an ad or 2 in there.

The “Holy Grail” layout

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

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

But it's 2017 now, and things have been stable for a couple of years already. Support is really quite good now, but even so, I think we haven't pushed it to its maximum potential yet. I don't deny that Flexbox is not as straight-forward as color or text-decoration, but that's because it can do a lot more than those properties.

Flexbox basics

Pumpkin by Yayoi Kusama

The most basic use-case for Flexbox is centring stuff. When I first learnt Flexbox, I hadn't fully grasped box alignment yet. I used to centre items by applying align-items: center and justify-content: center to the parent container because all the blog posts said so.

This technique works just fine, but I only found out much later that if there's only 1 flex child, margin: auto; does the same thing.

When you have more than 1 item, an understanding of box alignment makes things much easier. Say we want to centre both these children. Setting justify-content: center aligns them along the inline-axis, while setting align-items: center aligns them along the block-axis. Flexbox by default lays out all its children in one line without wrapping, so change that to wrap. Wrap only kicks in when the content is longer than the container, so make the width of one of the children 100%.

There's a difference between align-content and align-items, where content controls alignment of the box's content within its content box, and items specifies the behaviour for each individual child.

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)

A common issue I hear is that it's difficult to create a grid system with Flexbox. The thing about Flexbox is, even though you can make a grid system with it, it isn't the best idea to do so.

Flexbox is suited for laying out items in a single dimension. Where there isn't a relationship between the rows and columns. Think of it more like a daisy chain of flex children.

Here, I have a list of images. Once I apply display: flex, all the items are shrunk and laid out in a single row. If I turn on wrap, they all revert to their original size because now there is no limit to how much space they need to take up, if there is no space, the image will just drop down to the next row.

I'll turn on the border so you can see how each flex child behaves. Now instead of the initial behaviour of can shrink no grow, I'll change it to can grow no shrink and make the images take up the width of the child container. Now, there are a lot of options we can play with in terms of designing the whole layout.

I can do an align-items: center and create this jagged look, which is kinda interesting. Sometimes I find neat grids a bit monotonous. But if we want neat, we can also standardise the height of the flex children. Yeah, this makes the aspect ratio screwed up, so we compromise by cropping off the taller images with the object-fit property.

Flexbox layouts (2/2)

I can also change the direction of the layout by setting flex-direction to column and giving the container a defined height. Now I've got this horizontal scroll going on.

Again, we can go with the funky, jagged look by adjusting the flex children's alignment. Now that the flex direction has changed, the block and inline axes has also changed. justify-content shifts along the vertical axis, while align-items shifts along the horizontal axis.

Or we could go neat, and do the cropping thing again. Remove the alignment code, make the flex children totally flexible and images fill up their containers' heights. calc() is an indispensable function I use when creating layouts. Here, calc() let's me account for the margins of each image with respect to their container heights. I can fix the widths of the images to get something like this.

And these layouts are a demonstration of what Flexbox can do out-of-the-box. They are not hacks. These are native options that we have when it comes to designing our layouts.

calc() and object-fit browser support

So I used some supplementary CSS features in the earlier examples, namely calc() and object-fit. Support for these properties is pretty decent. And they will only continue to get better in the near future. Honestly, the evergreen browser is one of the best things to happen to the web.

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);
}

With Grid, we can do all the things we're used to doing, except more easily. Like this fixed grid. The repeat() function really comes in handy when your columns or rows follow a similar pattern. In this case, I'm telling the browser to give me five 10em wide columns. It's fixed, so no size changes here.

Fluid CSS grid

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

Grid also introduces the fr unit, which represents a fraction of the free space in the grid container. In this example, I'm telling the browser I want each of my five columns to take up equal proportions of free space available. And so, they shrink and grow together with container.

Responsive CSS grid

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

Now this is something new we've never been able to do before. The minmax() function lets me tell the browser that I want to cap the shrink at 10ems but if there's extra space, grow all my columns equally. Because of the cap, once there isn't enough space to fit 5 columns, the number of columns will decrease until everything fits. Didn't need a single media query for that.

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 has the best Grid Inspector tool in any browser, and the team is constantly working on adding more features to it to make our lives easier when using CSS grid. To toggle it, click on the waffle-like icon next to display:grid on your grid container element. It will then show all the grid lines and you can see where your grid items have been placed on the grid.

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

So the CSS module that let's us do this is called CSS shapes. For now, we can only let text flow around shapes and images with the shape-outside property. When you apply this property to a floated element, text will flow on the opposite side of the float.

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.

Viewport-percentage lengths

Viewport-percentage lengths are relative to the size of the viewport's initial containing block.

When the height or width of the viewport is changed, they are scaled accordingly.

Viewport units

the `vw` unit	Equal to 1% of the width of the viewport's initial containing block
the `vh` unit	Equal to 1% of the height of the viewport's initial containing block
the `vmin` unit	Equal to the smaller of `vw` or `vh`.
the `vmax` unit	Equal to the larger of `vw` or `vh`.

Fluid typography with locks

Fluid typography (with Sass)

$min-width: 320; $max-width: 960; $min-font: 18; $max-font: 22; :root { font-size: #{$min-font}px; } @media (min-width: #{$min-width}px) and (max-width: #{$max-width}px) { :root { font-size: calc( #{$min-font}px + (#{$max-font} - #{$min-font}) * ( (100vw - #{$min-width}px) / ( #{$max-width} - #{$min-width}))); } } @media (min-width: #{$max-width}px) { :root { font-size: #{$max-font}px; } }

Responsive image gallery

https://www.chenhuijing.com/demos/css-slider/

.container { display: flex; justify-content: center; } .thumbnails { display: flex; flex-direction: column; line-height: 0; li { flex: auto; } a { display: block; } img { width: 30vmin; height: 20vmin; object-fit: cover; object-position: top; } } .slides { overflow: hidden; } .slides, .slides li { width: 75vmin; height: 100vmin; } .slides img { height: 100vmin; object-fit: cover; object-position: top; }

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?

This is a basic example of the writing-mode property's different values. There's vertical-rl in red, and vertical-lr in blue. We can apply a rotate to make the text face the opposite direction as well, like the green example. So how can we use this in the context of a Latin-based writing system?

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 */
  }
}

“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/

Thank you!

https://www.chenhuijing.com

@hj_chen

@huijing