css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.

Posts tagged css variables

How To Use CSS Variables

Hey! Today we are going to go over CSS variables. This post will be broken down into two sections. One for how to create CSS variables and one for how to use CSS variables.

I also have a...

Dynamic number of rows and columns with CSS Grid Layout and CSS variables

Creating responsive layouts back then, without the help of SCSS, was a pain in the ass. SCSS helped a lot. I always write my CSS framework from scratch instead of using Bootstrap, so I would...

Getting Dynamic with CSS Variables & Media Queries

Getting Dynamic with CSS Variables & Media Queries

I have clung with all but a death grip to my years-long love and use of Sass. But with rapidly advancing browser capabilities, React, and...

Super-powered layouts with CSS Variables + CSS Grid

We’ve been using CSS Grid in production at Mud for a few months now and I absolutely love the flexibility it’s giving me when coding layout. For so long we've got along without a true layout...

Responsive Typography, SCSS vs. CSS Custom Properties (CSS Variables)

This article explains how to create responsive typography on the web, taking different approaches comparing SCSS and CSS Custom Properties (CSS Variables) to do the job.

TL;DR: Summary of the...

Aspect Ratio Cells with CSS Grid Layout

I found myself recently building a layout in CSS Grid that would have previously needed JavaScript in order to work. It’s a layout based on equal sized square grid cells, where grid items could...

Practical tips for working with CSS variables

I’ve been playing around with CSS variables (or custom properties) quite a lot recently and thought I’d share a few tips as I develop a practical strategy for integrating them into my workflow.

...