• CSS Gap - it's not just for Grid

    Gap for Display: flex While we’ve used the gap property in grids, browser support prevented us from considering using for flexbox. That is changing as most current browsers now support it. It really shines in dynamic layouts that use flex-wrap: wrap; .parent { padding-inline: 2rem; // To keep the container...


  • CSS Aspect Ratios

    Aspect Ratios In the past In the past we relied on the padding hack. We absolute position the children, and have some content inside the container that has a padding that sets the height. (where the padding is a percentage of the width); .ratio-4x3 { position: relative; } .ratio-4x3::before {...


  • No More jQuery

    No More jQuery For around a decade and a half we’ve been using jQuery to make javascript easier, and more consistant. It’s time has come to an end though. For the past few years development on jQuery has slowed, and developers have been moving away from jQuery. A few of...


  • Break Out Of Containers

    Have you ever been working with a CSS framework and needed a full-width block, but where stuck in a container that you couldn’t close? You can break out of that container using the following code .full-width { //or whatever your class is width: 100vw; position: relative; left: 50%; right: 50%;...


  • Faster Page Loading with Preloading

    With the introduction of preload, you can now tell the browser to start loading resources without blocking the document’s onload event. It loads the resource into cache and holds it there until the document requests it. There is also prefetch, which differs from preload in the priority it’s given. Preload...