The web is a fluid thing

Maybe this is a bit abstract, but I strongly believe it is one of the core principles of building good websites, especially when their content comes from a CMS.

It begins with the content first principle: Get your content right and almost everything else false into place. That content, in plain html markup, flows from top to bottom and depending on your language from left to right or the other way around. I kind of see this as water in a river. Now to create a layout in this river it is possible to drag out big containers, fill them up and place them where you want. This takes a lot of effort and equipment.. And when more water comes (it's a river, there will be more) boxes overflow and you have to adjust the container sizes. In html/css this can be compared to the method where you use a lot of fixed dimensions and absloute positioning.

There are a few rules of thumb I have:

• Any amount of content should work. As a test put any amount of content in an element and it should not break
• Fewer nested elements is probably better (but do keep it maintainable)
• Fewer CSS is always better

Any amount of content should work

Solution: Use paddings to create space and avoid placing things absolute. Common examples:

Buttons don't need height

A button is not built with a set height and a top padding to place the text correctly, a button has padding on all sides to create the desired look.

Header visual overlay doesn't need to be placed absolute

But als for the header visuals with text overlay this works: An absolute placed figcaption is not necessary, it blocks the flow of the page. If you put a huge amount of text in there, it breaks the design. A solution is to put the image as background-image on the figure, with background size cover and position 50%, hide the img from view (preferably in an accessible way), and use padding on the figure to create the needed space. Check the .main-header on top of this page for an example implementation. Fill the h1 with a milion Lorem Ipsums and still the page won't break :-)

Cardlist with even heights

Every site needs a cardlist right?! And it's ugly when cards are not even in height, so they need at least min-height right? Not true :-) Flexbox to the rescue! By building a cardlist with flexbox all cards are automagically the same height.

Fewer HTML & CSS

Generally speaking, a characteristic of the "containered river" version of a website is a severe case of diveritus and huge amounts of overlapping css. Try to place and space elements with the least possible attributes. So space items with margin, or padding and avoid using both unless there's a reason to do so. Also always question how you solved something and check if there is no cleaner way to do so. Floats, clearfixes and clear-lefts is a lot of css that can go wrong, while flexbox (again) might be a lot cleaner and is easier to maintain or transport.

Working like this makes debugging, maintaining and refactoring a lot easier and preserves the flow of the page.

...

So, let the content flow, make a beautiful web :-)