April 2018

Exploring Blend Modes in CSS

Two properties allow us to blend colors together in CSS: mix-blend-mode and background-blend-mode. With mix-blend-mode, we define the blending between the element and the element(s) that are behind it. With background-blend-mode, we define the blending between the element’s background image and its background color. The available blend mode values for both properties are the following …
Read more

Styling Form Inputs in CSS With :required, :optional, :valid and invalid

When it comes to validating the content of input fields on the frontend, things are much easier now than they they used to be. We can use the :required, :optional, :valid and :invalid pseudo-classes coupled with HTML5 form validation attributes like required or pattern to create very visually engaging results. These pseudo-classes work for input, …
Read more

CSS Grid: Justification and Alignment

With CSS grid layout, the grid itself within its container as well as grid items can be positioned with the following 6 properties: justify-items, align-items, justify-content, align-content, justify-self and align-self. These properties are part of the CSS box alignment module and they define a standard way to position elements with either flexbox or CSS grid. …
Read more

Running TypeScript Scripts With Ease with ts-node

While not for everybody, TypeScript, as well as other strongly typed languages, have been gaining in popularity. With TypeScript being a superset of JavaScript, using it means transpiling your *.ts files down to pure JavaScript before the V8 engine can understand them. You could watch for file changes and automate the transpiling but sometimes you …
Read more

Say Goodbye to the Clearfix Hack With display: flow-root

The clearfix hack has been around for a long time now, and patches a problem that can happen with floating elements that are larger than their container. Here’s an example of the problem: .box { padding: 1rem; background: rgba(255, 213, 70, 0.1); border-bottom: 2px solid rgba(236, 198, 48, 0.2); } .box img { float: left; …
Read more

CSS Grid: grid-gap

Instead of creating empty grid tracks or trying to hack things up with margins, grid-gap is a property available on grid containers that makes it easy to create gutters in your CSS Grid layouts. grid-gap itself is a shorthand for grid-row-gap and grid-column-gap, and it’s very straightforward to use. Note that you should enable the …
Read more