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

Technical Details

Skeleton Sass 3 has an intuitive file structure that allows for greater customization and the ability to seamlessly upgrade the Skeleton Sass TPL.

  • 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 all shipped themes of Skleton Sass
      • original/ – the classic Skeleton Sass 1 look
        • components/ – contains sass partials for each component
          • _base.scss – contains all foundation styles for the theme
          • _buttons.scss – contains all button styles
          • _forms.scss – contains form styles (e.g. form, input, etc.)
          • _links.scss – contains anchor styles
          • _lists.scss – contains ul, ol, etc. styles
          • _misc.scss – contains styles for misc elements like <code>
          • _tables.scss – contains table styles
          • _typography.scss – contains typography rules for elements like p, h1-h6, and more...
          • _utils.scss – contains various helper selectors for setting widths, hiding elements, etc.
        • mixins/ – contains mixins used in all themes
          • _private.scss – contains private project-scoped logic
          • _public.scss – contains public-facing project-scoped mixins, functions, etc.
        • _grid.scss – contains all grid styles and mixin calls
        • _include_components.scss – contains all selectively enabled/disabled components for the theme
        • _vars.scss – project-scoped overrides
      • fresh/ – the default look of Skeleton Sass
      • wing/ – a Skeleton Sass port of the Wing theme

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;