Hi folks,
Hope you find this small tutorial useful.
I am now working on a web app prototype and need a panel-like full-screen layout for it.
— Oleg GROMOV (@oleggromov) January 20, 2021
My first intention was to look into React component libraries but that's actually an overkill.
Let's see how to create a simple layout like that with pure CSS and flex-box.
1/ pic.twitter.com/agTGAX1dmr
First, let's do basic HTML. We'll keep it as simple as possible and also use semantic HTML5 elements.
— Oleg GROMOV (@oleggromov) January 20, 2021
Although completely irrelevant when you make a web app and not a content site to be indexed by search engines, it's still good practice to add semantics to your markup.
2/ pic.twitter.com/VsqVxjM6uF
Let's go over the need for each element.
— Oleg GROMOV (@oleggromov) January 20, 2021
Layout is needed to fill viewport vertically.
<header> and <main> designate corresponding layout areas.
<aside> and <section>s all mean columns, although aside gets additional touch of exclusivity.
Ignore contents though 😜
3/
With only background styling it looks something like this.
— Oleg GROMOV (@oleggromov) January 20, 2021
Let's continue with CSS step-by-step.
4/ pic.twitter.com/5OpAsBFYhS
We need to stretch our outermost body and html elements to 100% of height initially with the according property . Note that it won't make elements cut content if you go over the height limit.
— Oleg GROMOV (@oleggromov) January 20, 2021
Also let's set margin: 0 so that we don't have any annoying paddings at the edges.
5/ pic.twitter.com/0VBQSdAhWP
Now let's nudge our div.layout into being a good container for the future columns.
— Oleg GROMOV (@oleggromov) January 20, 2021
For that, we'll make it display: flex, set flex-direction and 100% height.
You see that the annoying green flooded entire screen, meaning that layout has stretched but not the columns yet.
6/ pic.twitter.com/a7FsYYyA1m
Remember `panel` classes I set to header, aside, and section-s? This was no mistake. Panel is an important UI concept I want to have in my vocabulary. Let's make all panels have equal padding of 12px.
— Oleg GROMOV (@oleggromov) January 20, 2021
It's not the best for a11y to use pixels, but we're playing here, right?
7/ pic.twitter.com/cLxjstP2m2
Next let's make them stretch. For that, we need to add `flex: 1` rule to .panel. It's a shorthand, check out this tutorial to learn more https://t.co/LaFqABmLlU
— Oleg GROMOV (@oleggromov) January 20, 2021
Meanwhile, panels stretched to fill the screen but not in the way I wanted. Fixing it next step.
8/ pic.twitter.com/L9dT2YhkIR
There's flex-grow and flex-shrink in addition to usual width, min-, and max-width properties to control size of flex-ed boxes.
— Oleg GROMOV (@oleggromov) January 20, 2021
Using flex-grow (its shorthand flex) and setting .columns { flex: 100 } we make them attempt take 100x more space than another flex child.
9/
Another child, <header>, inherited its flex: 1 from .panel that I conveniently set in one of the previous steps.
— Oleg GROMOV (@oleggromov) January 20, 2021
At this point we have almost entirely working layout without one simple thing: width restriction for the aside.
To have it, let's add max-width: 16em to it.
10/ pic.twitter.com/fovYEft1R7
So now we have a layout that:
— Oleg GROMOV (@oleggromov) January 20, 2021
- fills entire viewport
- accommodates as many columns as needed
- is super simple, pure CSS
You can grab the code and play with it here: https://t.co/O4W1CxuBEO
Was this useful? Let me know in comments. Good luck hacking your CSS! 🤘
11/ pic.twitter.com/dxkrRNDQ1k
Top comments (0)