Blog Posts tagged with "CSS"

RSS Feed

« back to all blog posts

Eleventy Style Guide Generator – Step by Step guide adding to an existing site

Step by Step guide to adding the Eleventy Style Guide Generator to an existing site. Details on how to avoid needing WebC or Design Tokens included.

Eleventy Style Guide Generator with WebC Component Support

The simplicity and speed of Eleventy with the organization of a self documenting design system. Style guide generator that incorporates design tokens, fluid typography, and WebC components.

Solving Animation Layout Flickering Caused by CSS Transitions

Solving layout flickering (or animation flashing) happening on browser resize caused by CSS transitions, with live before and after examples!

Implementing Dark Mode

Details of how I implemented dark mode on Be Inclusive, including some issues I encountered along the way.

Alternatives for object-fit in IE11

A background image compromise to support IE11 while also giving modern browsers the best experience using CSS object-fit. Presented with detailed problem, solution, examples, and alternatives.

What the Font are Vertical Rhythm and Modular Scale?

Why you should care about vertical rhythm and modular scale, defines them, and a demonstration on how to integrate them into your next project.

Managing Multi-Tenant Component Styles

Tracing the path we took to accomplish a unique, cohesive design system for multiple sites within a single Content Management System (CMS) platform installation.

Off-canvas Menu + Fixed Navbar = Buggy iOS Safari

While working on a responsive refresh of the Upshot website I came across some buggy behavior when mixing an off-canvas menu with a fixed position element on the page. I realize that fixed elements have had a history of bugginess in iOS and detailed articles have already been written. However, I hadn’t seen what was occurring for me […]