CSS and CSS Preprocessors

Some sporty things done with CSS and CSS preprocessors. Frameworks, grid systems, or neat tricks

A Small Guide for Naming Stuff in Front-end Code

How do you figure out how to name things in front-end code? Do you have a convention or a process— or do you just go by what looks right. This is a small but helpful guide for naming things in front-end code, shared by the likes of Brad Frost and even tweeted by An Event Apart.

Blog.FrankMTaylor.com

Typography Baseline

What goes after your normalize or reset, but before you really start working on your layout and content components? What do you call the thing that actually establishes the baseline typography? That's what this is; a baseline for your typography. My blog uses this, as well as this site.

Github Repo

Stylus-Powered Color Palette

What do you do if you're not great at creating a color palette? If you're a developer, you create a configurable color palette in Stylus. This has been used in one or two side projects for creating a color palette that can change on a dime.

Part of the magic of the Stylus Color Palette is the class naming convention. It uses a semantic naming convention rather than a descriptive one. i.e. colors are called .colorWarmerDarkest or .colorCool, whose names can still be applicable even if the colors shift.

Media Manager CSS Tricks

Media Manager is a product owned by SDL. It's a CDN and API that distributes videos and images.

This was part of a submission in an SDL-hosted hackathon. It's a set of CSS classes that can be applied to videos for fun or profit

Github Repo

Stacking Contexts

The term "stacking context" gets thrown-out a lot, but I don't think many folks realize that "stacking context" isn't really about layers or stacks, but paint order. And paint order can affect layout.

It's not fun to look at, But this is a heavily-researched, in-depth explanation of how transform: translate() can change what position:fixed does.

A CSS Pendulum

When CSS3 animations first came out, people experimented with lots of different tricks. This is a pendulum swinging with just CSS