Introduction

sscaffold is another modern, lightweight css library that builds on the efforts of previous libraries like milligram, skeleton, and normalize.

sscaffold packs into a single file:

...and adds in a handful of updates and other bits and pieces from around the web. The single file is human-readable, commented, includes credits to original authors, and is designed to be easily customized.

Library, not a framework

Frameworks typically require building designs that conform to the framework. They are hugely beneficial to anyone that invests the time in reading documentation and becoming familiar with the framework’s intended way of doing things.

This is more of a library: it provides a few different options for handling layout in your design and takes care of some common browser quirks. Otherwise it stays out of your way, letting you quickly prototype any design you can imagine.

Encourage structured html

sscaffold tries to avoid requiring markup like <div class="container">…</div> and instead encourages the use of bare html5 elements like main, section, and article.

This is meant to be a good starting point for more complex layouts, but well-structured html should look pretty good by default.

Testing

Releases are visually tested with Cross Browser Testing, using screenshots from multiple browsers and mobile devices along with their regression testing features.

Typography

sscaffold uses Open Sans for body text and Montserrat for headings by default, but typography gets its own section in sscaffold's file, so it’s easy to change the typefaces to your liking or build a complete custom theme (coming soon!).

Each font-family rule in the default theme uses a font stack with native fallbacks for most operating systems, so if you don't want to use Google’s web fonts, simply don't link them in your html.

There is still the usual support for super-script, bold, and sub-script. The default heading elements look like this:

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lists

sscaffold includes sensible defaults for the standard list types:

  1. First ordered list item
    • Unordered sub-item a
    • Unordered sub-item b
      Description list item I
      Description item item II
  2. Second ordered list item

Tables

Name Century Field
Elizabeth Garrett Anderson 19th Medicine
Mary Anning 19th Paleontology
Barbara McClintock 20th Genetics

Blockquotes

Blockquotes are unchanged from milligram:

“Lorem ipsum dolor sit amet, consectetur adipiscing elit”, she said.

Code

Code blocks wrapped in <pre><code>…</code></pre> look just like they do in milligram:


10 PRINT HELLO WORLD
20 GOTO 10

...but you can also include any inline code just by adding <code>…</code> inside any <p> tag.

Forms and buttons

Forms are identical to milligram's, but the dropdown arrow has been fixed for <select> fields and the rules for buttons have been adjusted to better support them inside other elements.

Flexbox columns

sscaffold includes milligram's flexbox-based columns so you can update milligram-based projects:

.column
.column
.column
.column
.column
.column column-50 column-offset-25

Column widths

10%
20%
25%
33%
40%
50%
60%
67%
70%
75%
80%
90%
100%

The 12-column grid

sscaffold includes skeleton.css's 12-column grid so you can easily update any skeleton-based project:

One
Eleven
Two
Ten
Three
Nine
Four
Eight
Five
Seven
Six
Six
Seven
Five
Eight
Four
Nine
Three
Ten
Two
Eleven
One