Lesson 11

Layout

When Tim Berners-Lee created the World Wide Web  he thought that HTML would be mainly used to form simple index pages with a list of links to static documents. Soon, however, www became a global phenomenon and people wanted to publish beautiful websites with advanced layouts. They were inspired by the print magazines and influenced by graphic designers.

For many years neither HTML and CSS specifications nor browser vendors could catch up with the fast growing appetite for the beautiful looking websites. So designers and developers came up with some hacks. Most common were spacer GIF’s and table layouts (popularised by David Siegel) and later also floating contents (still commonly used today). These hacks were doing their job at the time – but in consequence they’ve created a huge amount of junk code – just to make things look good on the screen.

It’s not all milk and honey today – but with an introduction and wide adaptation of web standards things are much better when it comes to layout, then they used to be a few years ago.

So, how do we do it in 2017?

Flexbox

Flexbox (CSS3 Flexible Box) is one of the greatest enhancements to the CSS Box model in recent history. And it is finally widely supported by most major browsers.

When and how to use Flexbox?

Often we want to have one element next to another element on the web. Thanks to flexbox we just need to wrap these elements with another (parent) HTML element and set it’s display property to flex (display: flex):

See the Pen Flex Box Intro by HackingHeroes.org (@hackingheroes) on CodePen.dark

And as you can see above the div elements keep all their properties of block elements – we can set their padding, margin and they behave predictably. And predictability is very desirable in programming.

By default element with display: flex makes all it’s children to align in one row (flex-direction: row). We can change that, if we want to, by setting flex-direction: column. We can also make elements to display in reverse order – flex-direction: column-reverse or flex-direction: row-reverse

See the Pen Flex-direction by HackingHeroes.org (@hackingheroes) on CodePen.dark

Now let’s try to create very popular layout with wide main content and narrow sidebar using flexbox:

See the Pen holy grail layout by HackingHeroes.org (@hackingheroes) on CodePen.dark

Be flexible

One of the great features of Flexbox is it’s ability to respond to different screen sizes. Flexbox container can change the width of it’s children to fit them all in one row, regardless of what width we set them initially. Below is an example of 14 green boxes. In CSS we set them all to bee width:100px, height: 100px; – so they should be squares – however, they would not fit all onto the screen, so flexbox parent adapted their widths so we can see them all without scrolling right and left;

See the Pen Flex width by HackingHeroes.org (@hackingheroes) on CodePen.dark

But what if we want to make sure that squares are really squares – no matter how many of them are there? No problem – we just tell flexbox parent to wrap all it’s children:

See the Pen Flex wrap by HackingHeroes.org (@hackingheroes) on CodePen.dark

Controlling alignment

Flexbox gives us control over the vertical and horizontal alignment of the children elements:

See the Pen Alignment by HackingHeroes.org (@hackingheroes) on CodePen.dark

The options for vertical alignment (align-items) are:

You can play with them all here: https://www.w3schools.com/cssref/css3_pr_align-items.asp

The options for horizontal alignment (justify-content) are:

You can play with them all here: https://www.w3schools.com/cssref/css3_pr_justify-content.asp

Media queries

To make our elements even more responsive we can use media queries. These give us the ability to set specific CSS rules based on screen sizes. In the example below we change the flex-direction from default row, to be column on small screen (narrower than 560px) devices (i.e. smartphones) 

 

« Lesson 10 Index Lesson 12 »