Openskull CSS Framework

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

Openskull.css is a small, flexbox, mobile first, and rem based CSS library that aims to make web development fast and easy.

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 good defaults and 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.

View on Github

Download .css 0.0kb

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 find openskull.css familiar.

Using Openskull

Being an SCSS library you can either embed it without variable control with the minified .css file, or you can implement it using a SCSS generator and have full control over the library.

Plain CSS

<link rel="stylesheet" href="openskull.min.css">

SCSS


			@include openskull/_functions.scss;
			@include _variables.scss;
			@include openskull/_reset.scss;
			@include openskull/_colors.scss;
			@include openskull/_buttons.scss;
			@include openskull/_typography.scss;
			@include openskull/_helpers.scss;
			@include openskull/_forms.scss;
			@include openskull/_ui.scss;
			@include openskull/_grid.scss;

Caching

The web should be fast, follow the 100ms rule. If you automatically parse SCSS in your PHP app, you could do something like the following:


			$out_file = "openskull.min.css";

			$sheets = array();
			$sheets[] = "openskull/_functions.scss";
			$sheets[] = "_variables.scss";
			$sheets[] = "openskull/_reset.scss";
			$sheets[] = "openskull/_colors.scss";
			$sheets[] = "openskull/_buttons.scss";
			$sheets[] = "openskull/_typography.scss";
			$sheets[] = "openskull/_helpers.scss";
			$sheets[] = "openskull/_forms.scss";
			$sheets[] = "openskull/_ui.scss";
			$sheets[] = "openskull/_grid.scss";
			$sheets[] = "style.scss";

			// DONT EDIT BELOW
			header('Content-Type: text/css');
			ini_set("display_errors", 1);

			// ONLY UPDATE IF CHANGED
			$update = false;
			$this_mod = filemtime(__FILE__);
			$cache_mod = filemtime($out_file);
			if (! $cache_mod) {
				$fh = fopen($out_file, 'w');
				$cache_mod = filemtime($out_file);
			}
			foreach ($sheets as $sheet) {
				if (filemtime($sheet) > $cache_mod || $this_mod > $cache_mod) {
					$update = true;
					break;
				}
			}

			if ($update) {
				require_once('scssphp/scss.inc.php');

				$scss = new Leafo\ScssPhp\Compiler();
				$scss->setImportPaths('');

				ob_start();
				foreach($sheets as $s) {
					require_once($s);
				}
				$css_all = ob_get_contents();
				ob_end_clean();

				$scss->setFormatter('Leafo\ScssPhp\Formatter\Compressed'); // minify
				$data = $scss->compile($css_all);
				file_put_contents($out_file, $data);
			}

			include($out_file);

Grid Basics

Columns are automatically spaced and affixes change widths.

Structure: Columns are placed inside of a .row. From there, column classes are all prefixed with .os. os[-n] applies to all device sizes. .os-min Takes up only the space of it's content, and leaves the rest for the grid.
Spacing: Columns are spaced automatically based on the gutter class of the .row parent. By default, row columns are not spaced, but adding .g0, .g1, .g2, or .g3 to the container will change the gutter size.
Breakpoints: Many CSS libraries offer 4 or more breakpoints, but an increasingly small fraction of websites actually use these additional fringe breakpoints. We offer only 3 to keep things simple:
- .os[-n] - For all viewport sizes, but with lowest precedence. This is essentially the same as sm- on other frameworks
- .os-md[-n] - For medium viewport sizes (think "medium and up") ~768px
- .os-lg[-n] - For large viewport sizes (think "large and up") ~1024px

Offsets

Good news! We don't do offsets. It's deprecated on a mobile-first web and you can accomplish the same with empty columns or with flexbox content alignments.

Check out the positioning helpers below for more information

Self Alignment

You can align objects inside a .row by simple adding another class to those child elements. There are aliases available to make things a little easier.

To align an element 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

Hint: All of these can be prefixed to be responsive. ex. .lg-seld-middle

Content Alignment

You can also vertical align the entire grid using helper classes. Goodbye vertical align!

To align all content to the top use .content-top
To align all content to the average middle use .content-middle
To align all content to the bottom use .content-bottom

Hint: All of these can be prefixed to be responsive. ex. .lg-content-middle

I'm a different height
because of 2 lines

Content Justification

Grid content can be justified based on the .row helper class.

To center align all grid objects use .content-center
To equally space out all grid objects use .content-space
To offset each item equally .content-justify

Hint: All of these can be prefixed to be responsive. ex. .lg-content-space

DOM-Independent Positioning

You can also change the order of elements with easy helper classes .order-first, .order-last, or .order-[1-6]

I'm first in the DOM, last in display.

I'm last in the dom, 1st in display

Containers

If you don't contain your content then it will hit the screen edges of your mobile devices. There are 2 simple container classes for all cases.

To contain & center with a max width use .container
To contain without a max width use .container-fluid
To give only vertical padding to your content use .section

These make automatically pad the sides of your content for smaller devices. You are free to focus on sub-layouts with everything inside of a container.

.container

.container-fluid

Spacing Helpers

When building a layout, it's incredible important to be able to control spacing. This is where the .pad[n] and marg[n] helpers come in.

Paddings

To control the padding of an element use .pad[0-4] for variable padding.

Top side only: padt[0-1]
Right side only: padr[0-1]
Bottom side only: padb[0-1]
Left side only: padl[0-1]
Both top & bottom side: pady[0-1]
Both left & right side: padx[0-1]

Margin

To control the margin of an element use .marg[0-4] for variable margin.

Top side only: margt[0-1]
Right side only: margr[0-1]
Bottom side only: margb[0-1]
Left side only: margl[0-1]
Both top & bottom side: margy[0-1]
Both left & right side: margx[0-1]

Super padded text content

Next to an image or resource

Visibility Helpers

When building for mobile, sometimes you just can't show the same content as desktop without dramatically changing the HTML. This is where visibility classes come in.

To hide an element on a device size use .hidden[-size] ex. .hidden-lg
To show an element on a device size use .display[-size] ex. .display-lg
To show an element with a display property other than block use .display[-size]-inline-block or .display[-size]-inline

Display on medium and below

Display on small only

Heading 1

This is just some regular text. We can use strong, .strong, or b tags to go bold.

But we can also use em, .em, or i tags to go italic.

Heading 2

We've contained all of this text in a .text-center div.

Truncate long text to a line with .ellipsis[n]. Up to 6 lines.

This text is way too long for it's container. We can keep going but it will be limited by it's .ellipsis lines count

This text is way too long for it's container. We can keep going but it will be limited by it's .ellipsis lines count. Eventually we'll just run out of space and it will trail off.

Heading 3

We've contained all of this text in a .text-right div.

We can use u, or .underline tags to go underline.

We can use s, or .strike tags to go ~~strikethrough~~.

We can use .font-extralight to go extralight if our font face supports it.

We can use .font-light to go light if our font face supports it.

We can use .font-normal to go normal.

We can use .font-light to go bold if our font face supports it.

We can use .font-extrabold to go extrabold if our font face supports it.

Heading 4

There are also helpers like .caps to go capslock.

Here we have a bullet-less ul list by adding .nolist
Or YOU CAN TAKE TEXT THAT COMES IN UPPERCASE AND MAKE IT LOWERCASE using .text-lower.
Want to capitalize instead? Use .capitalize to automatically capitalize all words inside of the container.

Heading 5

Justify text with .text-justify

Lorem isum dolar sit amet isum dolar sit amet lorem alur dolar sit amet lorem alur lorem isum dolar sit amet isum dolar sit amet lorem alur dolar sit amet sit amet sit amet lorem alurasd asdasdasd Lorem isum dolar sit amet isum dolar sit amet lorem alur dolar sit amet lorem alur Lorem isum dolar sit amet isum dolar sit amet lorem alur dolar sit amet lorem alur

Heading 6

But of course you can denote your text with all kinds of inline helpers:

kbd creates keyboard annoatations
sup makes ^super
small makes your text smaller
mark helps highlight text
sub makes _subtext
.mute calms the text (or element) you apply it to down Making it have a lower opacity

Blockquotes

Blockquotes are simplified, and embeddable. Just use the blockquote tag as you would normally.

An embedded blockquote can be useful for comments or forums where users quote one another.

Maybe someone else already answered this question?.

– Cite the Author with cite

Typeography Source Code:

Suffice it to say that the point of the typography section in openskull is so that you don't have to think about it whatsoever. Just do what you always do, this should format the intended way.

You can always change spacing and sizing variables inside of the _variables.scss. When starting a project you should only have to do this once so that you can get straight to building.

Forms should work out of the box. They don't do much, but if you need very specific or advanced formatting then anything extra would get in the way. We try and keep our forms as baseline as possible, while still offering the best possible user experience.

Forms marked with [required] will style based on their validation state. If it's :invalid but not :focus then it displays the warning color. If it's :invalid and :focus then it displays the error color.

Lastly, if a :required element is :valid then it displays the success color. User interactions like this make filling out forms satisfying and easy.

Form Example

We'll never share your email address to a 3rd party. (demo text, we're not collecting your information)

First Name *

Last Name *

Email Address *

Checkboxes Option 1 * Option 2 Option 3

Radios * Option 1 Option 2 Option 3

Select Box *

Multi-Select Box *

File upload *

Range Input

Number Input

Date Input

Datetime-local Input

Color Input

Textarea *

Forms Source Code:

Tables

Add .odd or .even to table to give it alternating line colors
Add .bordered to table to contain all cells in a border
Add .noborder to table to remove all border

Default table display. No classes, just plain HTML.

Header 1	Header 2	Header 3
data entry 1	data entry 1	data entry 1
data entry 1	data entry 1	data entry 1
data entry 1	data entry 1	data entry 1

With .bordered

Header 1	Header 2	Header 3
data entry 1	data entry 1	data entry 1
data entry 1	data entry 1	data entry 1
data entry 1	data entry 1	data entry 1

With .odd

Header 1	Header 2	Header 3
data entry 1	data entry 1	data entry 1
data entry 1	data entry 1	data entry 1
data entry 1	data entry 1	data entry 1

Now that we're through all of the layouts and typography, It's important to understand how to theme and use the colors in this library.

Default Colors

$primary

$secondary

$grey

$black

$success

$info

$warning

$error

Color Classes

Once you know the colors, you can prefix any of them with a helper class to modify your content. For instance with -primary:

.message-[color] Creates a message display for the text

.text-[color] Changes the color of the text

.bg-[color] Changes the background of the text

.btn Creates the Default Button but .btn-[color] Creates a Styled Button

Customizing

Generally the colors should be able to be left alone, with most developers only changing $primary to their brand primary, and $secondary to their brands secondary.

From there you may opt to tweak the $white and $black to meet your needs.

It's generally recommended you leave the $success, $info, $warning, and $error colors at their defaults for a consistent user experience.

If you are looking for a library that gives you all of the UI elements you could ever possible want, this is probably not the framework for you.

There are few UI elements that are important for the user experience. Here's our take on those elements.

Buttons

Buttons are diverse, sometimes you want them to display inline, other times as fat blocks. For that reason we try and leave the default buttons similar to how the browser intended. You can still make buttons full with with .block or add padding with the .pad[n] helpers outlines in Layouts.

Tooltips

Purely HTML tooltips are good way to show additional information on hover or activate states for users. [tooltip=""] will show a default tooltip on top of the element.

[tooltip="tooltip example"] Populates the tooltip text and display it on top of
the object
.
Adding [tooltip-right] Displays the tooltip on the right of
the object
.
Adding [tooltip-bottom] Displays the tooltip on the bottom of
the object
.
Adding [tooltip-left] Displays the tooltip on the left of
the object
.

Modals

Modals are one of the only parts of this library that are not pure CSS. They can be made to be pure CSS, but you would need to have all of it's content inside of the HTML and hidden and you limit the ability for ajax-loaded content. We do a hybrid installment instead. You can still do pure css / html modals, but in order to expand their functionality you'll need openskull.js as well.

Pure CSS: Any element who's href links to the [id] of a modal window will display the modal window.
Javascript: Elements marked with the [modal] attribute will be picked up by the javascript and create/populate the modal window with the [href] target.

Pure CSS Modal Link

Tabs

Tab 1 Tab 2 Tab 3

Tab 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sagittis urna mi, nec scelerisque lacus tempor in. Sed congue lacus quis diam condimentum malesuada. Duis finibus volutpat neque, a tincidunt dui sagittis eget. Aenean in purus dignissim dui gravida vulputate. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent consectetur sit amet arcu vitae efficitur. Nullam varius mi at tellus scelerisque efficitur. Nam in dui dui. Cras maximus urna vitae dolor auctor tincidunt. Aliquam in semper sem. Pellentesque dignissim venenatis ullamcorper. Integer ac dolor consectetur, aliquet nulla a, rhoncus arcu.

Fusce quis posuere est, sed tempus nisl. Duis finibus ullamcorper aliquam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas imperdiet lobortis magna vel volutpat. Cras augue dui, tempor eget eleifend eget, tempor vitae enim. Mauris nulla sapien, viverra quis nisi eget, tempus ultricies libero. Donec non tristique nisi, sed accumsan mi. Etiam quis nisi metus. Proin volutpat eu odio maximus efficitur. Quisque sagittis rutrum velit, sit amet accumsan quam consectetur ac. Donec non nisl vel tellus lacinia pellentesque vel ac sapien. Nam iaculis porta posuere. i

Tab 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sagittis urna mi, nec scelerisque lacus tempor in. Sed congue lacus quis diam condimentum malesuada. Duis finibus volutpat neque, a tincidunt dui sagittis eget. Aenean in purus dignissim dui gravida vulputate. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent consectetur sit amet arcu vitae efficitur. Nullam varius mi at tellus scelerisque efficitur. Nam in dui dui. Cras maximus urna vitae dolor auctor tincidunt. Aliquam in semper sem. Pellentesque dignissim venenatis ullamcorper. Integer ac dolor consectetur, aliquet nulla a, rhoncus arcu.

Fusce quis posuere est, sed tempus nisl. Duis finibus ullamcorper aliquam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas imperdiet lobortis magna vel volutpat. Cras augue dui, tempor eget eleifend eget, tempor vitae enim. Mauris nulla sapien, viverra quis nisi eget, tempus ultricies libero. Donec non tristique nisi, sed accumsan mi. Etiam quis nisi metus. Proin volutpat eu odio maximus efficitur. Quisque sagittis rutrum velit, sit amet accumsan quam consectetur ac. Donec non nisl vel tellus lacinia pellentesque vel ac sapien. Nam iaculis porta posuere. i

Tab 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sagittis urna mi, nec scelerisque lacus tempor in. Sed congue lacus quis diam condimentum malesuada. Duis finibus volutpat neque, a tincidunt dui sagittis eget. Aenean in purus dignissim dui gravida vulputate. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent consectetur sit amet arcu vitae efficitur. Nullam varius mi at tellus scelerisque efficitur. Nam in dui dui. Cras maximus urna vitae dolor auctor tincidunt. Aliquam in semper sem. Pellentesque dignissim venenatis ullamcorper. Integer ac dolor consectetur, aliquet nulla a, rhoncus arcu.

Fusce quis posuere est, sed tempus nisl. Duis finibus ullamcorper aliquam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas imperdiet lobortis magna vel volutpat. Cras augue dui, tempor eget eleifend eget, tempor vitae enim. Mauris nulla sapien, viverra quis nisi eget, tempus ultricies libero. Donec non tristique nisi, sed accumsan mi. Etiam quis nisi metus. Proin volutpat eu odio maximus efficitur. Quisque sagittis rutrum velit, sit amet accumsan quam consectetur ac. Donec non nisl vel tellus lacinia pellentesque vel ac sapien. Nam iaculis porta posuere. i

Pagination

A .pagination parent will apply the pagination treatment to all children.

Prev 1 2 3 4 Next

Messages

Simply add the .message[-color] class to give a user a hinted message.

.message-success

.message-warning

.message-info

.message-error

Openskull CSS Framework

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

Using Openskull

Plain CSS

SCSS

Caching

Grid / Layout

Grid Basics

Columns are automatically spaced and affixes change widths.

Offsets

Self Alignment

Content Alignment

Content Justification

DOM-Independent Positioning

Layout

Containers

Spacing Helpers

Paddings

Margin

Visibility Helpers

Typography

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Blockquotes

Forms

Form Example

Tables

Tables

Colors

Default Colors

Color Classes

Customizing

UI Elements

Buttons

Tooltips

Modals

Example Modal Window

Tabs

Tab 1

Tab 2

Tab 3

Pagination

Messages