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

This framework strives to set itself apart by being lighterweight 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 will probably feel familiar to people familiar with other frameworks.

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

The Grid

The grid is 12 column based and is broken up into 4 media breakpoints (similar to bootstrap), with each column prefixed with .os-lg-, .os-md-, .os-sm-, or .os-xs-.

The example below is responsive. Using visible-* classes we can show the breakpoints at each size. lg-2, md-3, sm-4, xs-6. Note that the media breakpoints are considered "-size- or greater than", meaning that -lg- will take priority, but in it's absense -xs- will kick in on any window size.

.os-lg-2.os-md-3.os-sm-4.os-xs-6
.os-lg-2
.os-md-3
.os-sm-4
.os-xs-6
.os-lg-2
.os-md-3
.os-sm-4
.os-xs-6
.os-lg-2
.os-md-3
.os-sm-4
.os-xs-6
.os-lg-2
.os-md-3
.os-sm-4
.os-xs-6
.os-lg-2
.os-md-3
.os-sm-4
.os-xs-6
.os-lg-2
.os-md-3
.os-sm-4
.os-xs-6
.os-md-8
.os-md-4

.os-4
.os-4
.os-4

.os-sm-2
.os-sm-6.bg-primary
.os-sm-4

Offsets

Offsets can be set on all sizes, eg .offset-2, or they can be set size specific, eg .offset-lg-3

.os-lg-6.offset-lg-3
.os-md-8.offset-md-2
.os-sm-10.offset-sm-1

UI

Pagination


Buttons

.btn.block.btn-primary
.btn-primary .btn-info .btn-warning .btn-danger

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