The OpenSkull framework is a flexbox CSS boilerplate that aims to provide non-intrusive classes that help structure a site and save time.

This page was built entirely with openskull.css. There are no additional demo css rules.

This framework strives to set itself apart by being more lightweight than its alternatives without sacrificing useful functionality. Openskull.css tries to follow some of the standards that major libraries such as bootstrap have set forward, and it will probably feel familiar to such libraries.

The Philosophy

The framework is build on the principle that something should never be "styled" outside of it's intended use. A good example are frameworks that apply borders, font style, and border-radius to their buttons. This looks more pleasant, but if a developer has different design requirement then they have to spend time "unstyling" the element. More specific styles are only applied to elements that are often not modified any further than their default and we apply "best practice" design.

Instead, this framework is a collection of helper classes that you can combine to get your desired style without needing to write or unwrite CSS. This can help save a lot of time in development.

This website is still very much a work in progress, as is the framework.


The Grid

The grid is 12-column and has 3 media breakpoints. Many CSS libraries offer 4 or more breakpoints, but an increasingly small fraction of websites actually use these additional fringe breakpoints. Our breakpoints prefixes are .os-sm-{x}, .os-md-{x}, and .os-lg-{x}

Equal width Auto-Columns

Variable + Exact-Width Columns

Offsets in Grid


Variable Self-Positioning

You can align objects within a .row by simple adding the correct class to them. There are aliases available to make things a little easier.

To align an element first or top, add .self-start or

To align an element center or middle, add .self-center or self.middle

To align an element last or bottom, add .self-end or self.bottom

UI Elements

The included UI design elements are intended to quickly take care of common UI elements, mostly minimum style is applied.


Heading 1





Text Helpers