• Grid Stacking for Backgrounds and Overlays

    Grid Stacking for BG images and Overlays If you have worked with css for any length of time you probably have had to do something like this div { position: relative; } div:before { content:''; position: absolute; background-image: url('/someimage.jpg'); top: 0; left: 0; width: 100%; height: 100%; background-size: cover; }...


  • CSS Variable

    CSS Variables These have been around for a few years and while they where interesting, lack of browser support haven’t made them all that interesting. Between the lack of browser support and preprocessors having variables, we never really explored the power of CSS variables. With IE dropping out of the...


  • 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...