← Back

Springboard

Springboard is a collection of extremely lightweight CSS defaults and utility classes, easily extendable for your website, that will help jumpstart front-end design. Using it is simple; all you need is one line of code, like so:

<link rel="stylesheet" type="text/css" href="/path/to/springboard.min.css" />

Springboard requires a HTML5 doctype at the top of the page:

<!DOCTYPE html>

Since Springboard changes the defaults of a webpage, you can simply include the CSS file and watch as the browser styles are transformed. Also, different page widths are supported with responsive design, so your site will work on tablets and smartphones. Check out this webpage, built completely using Springboard, as an example. Don't believe me? Look at the source! Springboard is currently hosted on GitHub.

Features

Cross-Browser

Springboard works across all browsers, even Internet Explorer 7. No more spending hours getting your design to look the same for every rendering engine.

HTML5- and CSS3-Compliant

Take advantage of the modern features of the web with pretty CSS styles and HTML5 elements. Moreover, those not supported in earlier browsers are handled automatically.

Simple, Beautiful, and Expandable

Springboard was carefully crafted to be clean and simple in its design. If you don't like an element, it's easy to change it in the source. And, since Springboard was designed to be modified, you can also change its default styles to your liking, or add new ones.

Utility Classes

Want your text left-aligned, or your button to be larger? Just add the class to the corresponding HTML element. Springboard contains preset classes commonly used in web development so that you won't have to code them yourself.

Documentation

Utility Classes

These are not CSS defaults, but classes that are often found in web development. They are easily extendable, but still work well without edits.

Class	Description	Code
Container	A collapsible, centered container class with a max width of 960 pixels	`<div class="container">`
Clearfix	Your typical clearfix class	`<div class="clearfix">`
Text Alignment	Left-justify, right-justify, or center text within a container	`<div class="leftText">` (or `rightText` or `centerText`)
Float Alignment	Left-align or right-align elements as needed	`<div class="floatLeft">` (or `floatRight`)
Border	Adds a rounded-corner border to an element	`<div class="border">`
Large Text	Increases the font size, also increasing the size of elements like buttons	`<div class="large">`
Small Text	Decreases the font size, also decreasing the size of elements like buttons	`<div class="small">`
Small Textfield	Decreases the size of a textfield	`<input type="text" class="smallField" />`
Section	Used for positioning `div` elements side-by-side in a container. Be sure to add the `clear` class after every two sections to fix formatting.	`<div class="section floatLeft">` `<div class="section floatRight">`
Footer	Check the bottom of the page!	`<div class="footer">`

Styles by Type

Headings

h1. Heading 1

h2. Heading 2

h3. Heading 3

h4. Heading 4

h5. Heading 5

h6. Heading 6

Block-Level Elements

Earlier browsers do not support HTML5 items such as aside and footer, so they are simply rendered as block elements.

Address

Apple
1 Infinite Loop
Cupertino, CA 95014
(408) 996 1010

Be sure to add a <br /> to each line ending.

Blockquote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vel urna quis nisi cursus egestas lacinia sit amet odio. Morbi dapibus purus in nibh mollis dictum. Sed ultricies condimentum auctor.

Fieldset

Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vel urna quis nisi cursus egestas lacinia sit amet odio. Morbi dapibus purus in nibh mollis dictum. Sed ultricies condimentum auctor.

Pre

In addition to pre-formatted text, you may use a <pre> for multiline code snippets if you do not wish to add a linebreak after each semicolon with the normal <code> element.

Lorem ipsum dolor sit amet, consectetur adipiscing 
elit. Cras vel urna quis nisi cursus egestas lacinia
sit amet odio. Morbi dapibus purus in nibh mollis 
dictum. Sed ultricies condimentum auctor.

<html>

    <head>
        <title>My website</title>
    </head>
    
    <body>
        <p>
            My content
        </p>
    </body>
    
</html>

Table

Cities by Population:
Rank	City	State	Population
1.	New York	New York	8,175,133
2.	Los Angeles	California	3,792,621
3.	Chicago	Illinois	2,695,598
4.	Houston	Texas	2,100,263

Add the alternating class to a table to give it a striped color, like so:

Rank	City	State	Population
1.	New York	New York	8,175,133
2.	Los Angeles	California	3,792,621
3.	Chicago	Illinois	2,695,598
4.	Houston	Texas	2,100,263

Buttons

Apply the large or small class to a button to change its size.

You can also change the color of buttons by adding one of the classes below.

Button Type	Button	Disabled	Class
Normal Button			None
White Button			`white`
Orange Button			`orange`
Red Button			`red`
Green Button			`green`
Yellow Button			`yellow`

Inset Buttons

Button Type	Button	Disabled	Class
Normal Inset Button			`inset`
White Inset Button			`inset inset-white`
Orange Inset Button			`inset inset-orange`
Red Inset Button			`inset inset-red`
Green Inset Button			`inset inset-green`
Yellow Inset Button			`inset inset-yellow`

Sizes

Other Input Elements

Apply the smallField class to a textfield to make it smaller.

Text Input
Small Text Input
Password Input
Text Area
Select Menu
Checkbox
Radio Button

Anchor (link)

This is an anchor.

Inline Elements

Abbreviation

HTML actually stands for Hypertext Markup Language.

Code

Use <pre> for multiline code snippets; otherwise use <code>, <kbd>, <samp> or <output>. For smaller inline code snippets, add the small class to your HTML tag.

Emphasis Elements

Here is bold text.

Here is italicized text.

Here is underlined text.

Here is text with a ~~strikethrough~~.

You may also highlight text like this (not supported in IE 8 and below).

Small Text, Superscript, and Subscript

Here is small text. Here is superscript: 10⁷. Here is subscript: K_b.

Lists

Ordered List

January
February
March
April
May

Unordered List

Apple
Google
Microsoft
Facebook

Description List

Canada: A country in North America
Italy: A country in Europe
Kenya: A country in Africa

And last but not least, you may have noticed that horizontal rules have been used throughout this site. Add the <hr> tag for a horizontal rule.

License

Springboard is licensed under an MIT license. Credit is by no means required, but if you do use Springboard feel free to shoot me an email. I'd love to see it in action.

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.