Skeleton Sass is a sass-based translation of Dave Gamache's Skeleton CSS.
Skeleton Sass 3 reduced in size by 100% from Skeleton Sass 2 and is faster than ever before!
With decoupled modules in Skeleton Sass 3, your hard work is safe from your favorite package managers!
Skeleton Sass 3 is still the same, but more flexible than ever!
Skeleton Sass is completely free to use. Check out the license.
Skeleton Sass scales to your device whether it is a desktop, laptop, tablet, or mobile phone
Skeleton Sass is on Github! Fork and contribute! Found a bug? Let us know!
Skeleton Sass 3 is tested against Sass, Libsass, Wellington, and other Libsass wrappers. We also use gulp-sass for this site!
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.
Skeleton Sass 3 has only a single requirement: Sass 3.3 or similar compiler
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.
_links.scss– contains anchor styles
ol, etc. styles
_misc.scss– contains styles for misc elements like
_tables.scss– contains table styles
_typography.scss– contains typography rules for elements like
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
Skeleton Sass is heavily documented for your convenience. No one likes to use software that has little to no documentation!
Below are a few resources for you to learn more about Sass, Bower, Sache, Sass compilers, and other Sass libraries:
There are plenty of ruby gems, libraries, and frameworks that extend Sass. Below are three ways you can easily download/find Skeleton Sass:
// 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;