Skeleton Sass

Skeleton Sass is a sass-based translation of Dave Gamache's Skeleton CSS.

Faster

Skeleton Sass 3 reduced in size by 100% from Skeleton Sass 2 and is faster than ever before!

Customizable

With decoupled modules in Skeleton Sass 3, your hard work is safe from your favorite package managers!

Simpler

Skeleton Sass 3 is still the same, but more flexible than ever!

  Free!

Skeleton Sass is completely free to use. Check out the license.

  No JavaScript

Skeleton Sass has no dependency on JavaScript. Skeleton Sass is built with Sass which compiles down to CSS. Learn more about sass.

  Responsive

Skeleton Sass scales to your device whether it is a desktop, laptop, tablet, or mobile phone

  Github

Skeleton Sass is on Github! Fork and contribute! Found a bug? Let us know!

  Tested

Skeleton Sass 3 is tested against Sass, Libsass, Wellington, and other Libsass wrappers. We also use gulp-sass for this site!

  CSS3

Skeleton Sass 3 adds some necessary CSS3 features such as global border-box and many other mixins that make dealing with CSS easy and fun again.

Requirements

Skeleton Sass 3 has only a single requirement: Sass 3.3 or similar compiler

Structure

Skeleton Sass 3 has an intuitive file structure that allows for greater customization.

  • skeleton/ – contains all core code and core themes
    • core/ – contains the core code
      • _config.scss – contains the global, default configuration variables and values
      • _dependencies.scss – contains logic that goes into creating core public-facing functions and mixins
      • _functions.scss – contains global public functions
      • _mixins.scss – contains global public mixins
    • themes/ – contains default themes of Skleton Sass: sphenoid and fresh
      • sphenoid/ – the old look of Skeleton Sass that's still identical to Skeleton Sass 1
        • marrow/ – holds project-scoped logic, functions, mixins, etc. shared across both themes
          • _private.scss – contains private project-scoped logic
          • _public.scss – contains public-facing project-scoped mixins, functions, etc.
        • _base.scss – base styles to give sphenoid some life
        • _skeleton.scss – styles that generate the grid
        • _vars.scss – project-scoped overrides
      • fresh/ – the new look of Skeleton Sass that's still identical to Skeleton Sass 2
        • marrow/ – holds project-scoped logic, functions, mixins, etc. (imported from sphenoid)
          • _private.scss – contains private project-scoped logic
          • _public.scss – contains public-facing project-scoped mixins, functions, etc.
        • _base.scss – base styles to give fresh some life
        • _skeleton.scss – styles that generate the grid
        • _vars.scss – project-scoped overrides

Documentation

Skeleton Sass is heavily documented for your convenience. No one likes to use software that has little to no documentation!

Resources

Below are a few resources for you to learn more about Sass, Bower, Sache, Sass compilers, and other Sass libraries:

Learn Sass
Compile Sass
Extend Sass

There are plenty of ruby gems, libraries, and frameworks that extend Sass. Below are three ways you can easily download/find Skeleton Sass:

Generate a Grid

940px
960px
 
// Copy and paste these in your global config file to override the grid
$base-col-width: 40px;
$base-gutter-width: 20px;
$base-col-count: 16;