I recently came across an extremely useful video about CSS tips and tricks made by Una Kravets on the Google Chrome Developers Youtube channel: 10 modern layouts in 1 line of CSS. I think the title speaks by itself. Let’s see how to create 10 single-line layouts! First and foremost, have a look at the video, it is very detailed and nicely explained ;) If you want to give it a try, go to the Glitch demo page: 1linelayouts.glitch.me And if you are lazy, here is a quick recap: 1. Super Centered How to (finally) center an element both horizontally … Continue reading CSS Superpowers: 10 single-line Layouts →

Let’s say you have a list of elements, and you want to elegantly add a bit of space between them so that they don’t appear too clumped together… Well, it’s pretty easy if you have the right tool: the + CSS selector! You don’t need to use a margin or padding on each element and add a first-item or last-item class to remove the extra spacing, the + selector takes care of everything. How does it work ? Let’s take an example: if you have div + p in your CSS, it will select the first <p> element that is … Continue reading Clever CSS Spacing Between Elements with + Selector →