Day 24: Fluid Typography & Layout
What I’ve done today
Today I experimented with fluid layout. I’m going to build a site that basically consists of sliders.
So the requirements are:
- The Layout of a slide has to be as free as possible.
- That means elements can be placed freely and can overlap each other.
- The plan is to make the whole thing responsible.
Soooo… I started by experimenting in a codepen.
Feel free to check out the first results
This is what happens:
- I place elements by
leftandtopCSS Values. - In addition to that I implemented fluid typography.
- If the viewport width is under a certain limit, I just place the elements per
display: block;andposition: relative;which means they take the full window with.
This way it’s possible to do ‘gridless’ layouts with all freedom possible but also have them work responsive.
Nice :-)
What I’m planning to do next
Refine my work
Learnings today:
- CSS can really do a lot of interesting stuff that looks like Javascript would be involved