Obsidian.css

A Modular CSS Library

Obsidian.css is a modular CSS library that focuses on code common to most projects. This project is a collection of the CSS patterns that have stuck with me over the last two years and grown with me. Styles are written in an adapted BEM naming convention and organized in an ITCSS-like methodology. It uses cssnext to compile variables, custom selectors and custom media queries.

Rationale

I've put together a lot of websites and a lot of apps, and most of the time I tend to reach for the same set of utility classes and very similar grids systems. As a freelancer, I (foolishly) started from scratch each time or copying and pasting stuff out of old projects and shoehorning into the current one. This was a really ineffecient way to work.

So this project started as an abstraction that CSS. Then at Black Pixel, I spent a lot of time thinking about CSS could be really modular and portable from project to project beyond meaningless boilerplate code.

Design

When you use Obsidian.css you can remove and swap out any of the modules or layers you don’t want or need. Plus you should be able to override certain properties to achieve the design you want.

Components

For the components in Obsidian.css, I went with sensible defaults that should be easy to override by changing variables. This way you start with some initial design to a project but can be adapted for whatever your needs are for your project.

Specs

• 7.7kb Gzip Size
• 824 Selectors
• 824 Rules