Always Learning

You’re never too old to learn. Every time I work on a new website, I’m always finding and trying new things. I should probably document these more (mainly to help me remember them, ahem). So, let’s start now…

Details, just little details

The <details> element. Holy moly, why did I not know about this?! It’s easy to create a show-hide toggle without JavaScript using the <details> and <summary> elements as described here. Admittedly, this gives a relatively simple content toggle but it’s ideal for a FAQs section on a site. The simplicity wins for me.

Flexbox

I did a lot more work with Flexbox on a recent project. It’s great. That and Grid Layout means that the era of floats for layout is over. Hurrah for that!

Shaping up nicely

Yay! for triangle shapes using CSS and pseudo elements. Using a tool like this CSS triangle generator it’s easy to create triangles with CSS. Then, it’s possible to use these as list item bullet points by adding them to pseudo elements such as li a::before or li::before. See also this post.

Grid overlay

I find it really useful to overlay a grid on my layouts when I’m building them. If I’m building a site from a designer’s static visuals, this also helps the designer compare the site build with their designs. This grid overlay article describes how to create a grid with CSS.

Overlapping things

What’s the best way to position one element underneath another when they cannot share the same parent? I needed to positioning a banner image underneath an overlapping header/navigation element. I used position:relative and e.g top: -150px on the banner image. However, it left me wondering if CSS Grid Layout would be a better approach. I know that’s possible and I’ll try that next time.

Tools

• Gradient generator
• Box shadow generator
• Running site speed tests with Lighthouse in non-Chrome browsers using a bookmarklet
• Hero image generator by Sarah Edo

Most of the above were used on a single website project. It was a challenging and rewarding site to work on. I enjoyed it.

One more thing

in recent weeks, I’ve been reading posts from Modern CSS Solutions which is a great site exploring new CSS methods. The site has really re-invigorated my enthusiasm for CSS. Kudos to Stephanie Eckles for creating the site.

Right, that’s it for this post …..

See you next time.