Openskull CSS Framework

You shouldn't have to fight against your CSS framework.

Many popular CSS frameworks apply borders, font styles, border-radius, shadows, and more to their classes. This looks more pleasant out of the box, but it costs time and frustration when developers have to spend time "unstyling" the element.

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 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 developers who've used them will probably openskull.css familiar.

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


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

Grid / Layout

12-columns and 3 media breakpoints.

The Basics

Columns are equally spaced, no matter how many are in the container.

Columns are placed inside of a .row or a .columns container. From there, column classes are all prefixed with .os. This is just to give the framework its own namespace, without interfering with classes you or other libraries may use.

Columns are spaced automatically based on the gutter class of the parent. By default, columns are spaced by 0.75rem; but adding .g0, .g1, .g2, .g3 to the container will change the gutter.

Many CSS libraries offer 4 or more breakpoints, but an increasingly small fraction of websites actually use these additional fringe breakpoints. Breakpoints prefixes are .os-sm-{x}, .os-md-{x}, and .os-lg-{x}


Variable Width

You can size specific columns with number affixes.

.os-6

Offsets

Place elements inside a grid with an offset


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 self.top

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.


Typography

Heading 1

Heading 2.bg-primary

Heading 3.bg-success

Heading 4.bg-info

Heading 5.bg-warning
Heading 6.bg-danger

Text Helpers

.strong.text-capitalize

.em.text-uppercase

.text-left
.text-center
.text-right
code
pre.text-muted
.text-primary
.text-success
.text-info
.text-warning
.text-danger