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 while minimizing the amount of CSS you need to unwrite. 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 automatically 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.

Offsets

Place elements inside a grid with an offset

Flex 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

Responsive

Typography

Easy to read, consistent content is the most important part of every website.

Headers

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Helper Classes

.text-left
.text-center
.text-right
.TEXT-LOWER
.text-upper
.text-truncate - here is some really long text that should definitely go over it's container size.
.text-muted
.text-justify

UI Components

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

Forms

We'll never share your email address to a 3rd party

Helper Classes