Skeleton Sass

Skeleton Sass is a highly modular version of Skeleton CSS build on top of the popular CSS metalanguage, Sass.

Key Features

• Ability to seamlessly adjust grids by changing the value of variables
• Themes
• Easy-to-use mixins and functions
• Install Skeleton Sass with npm! No more clunky scripts!
• Live demo!
• Heavily documented

Getting Started

Skeleton Sass has two dependencies:

• node-sass >=3.5.0/dart sass >=1.0.0 (your choice)
• normalize-scss

Skeleton Sass is available as a node module and can be installed and updated via npm or yarn.

npm i skeleton-sass-official normalize-scss -D
yarn add skeleton-sass-official normalize-scss --dev

Alternatively, you can clone the repo and build from source:

cd path/to/my_dir
git clone https://github.com/atomicpages/skeleton-sass.git

# create a blank file
touch skeleton.scss

Open your skeleton.scss file in your text editor and copy these lines:

@import "path/to/node_modules/normalize-scss/sass/normalize/import-now"; // import normalize-scss
@import "path/to/node_modules/skeleton-sass-official/src/core/config"; // Skeleton Sass core loader

// import default theme variables
@import "path/to/node_modules/skeleton-sass-official/src/themes/fresh/vars"; // theme variable overrides

// import default theme styles
@import "path/to/node_modules/skeleton-sass-official/src/themes/fresh/include_components"; // theme base styles
@import "path/to/node_modules/skeleton-sass-official/src/themes/fresh/grid"; // theme grid styles

We're ready to build:

npx sass skeleton.scss skeleton.css

Documentation

Skeleton Sass is heavily documented. If you're looking for a detailed description (or just want more info) you can view all the wiki pages here. Popular articles:

• Introduction to Skeleton Sass
• Function API
• Core Variable API
• Mixin API
• Learn how to set up Skeleton Sass for the first time here.

Themes

Since v2, themes have been supported. Updates (and subsequent pulls from the repo) will not clobber your themes. For more information on how to create a theme of your own, head over to the wiki.

Legacy Versions

• Skeleton Sass 3
  • Version 3 branch
• Skeleton Sass 2
  • Version 2 branch
  • Version 2 docs
• Skeleton Sass
  • Version 1 branch
  • Version 1 docs

Demo

You can see Skeleton Sass in action here: https://atomicpages.github.io/skeleton-sass. Be sure to resize your browser window and see the responsive goodness in action!

Resources

• Installing Sass
• Setting up Skeleton Sass for first time use
• Creating a theme

License

This project is released under the MIT license. Who doesn't like free code?

Contributing

Skeleton Sass is community driven. We will gladly review any issues that you find. If you wish to contribute you'll land a spot in the contributions section of this document!

• Create an Issue
• Fork

Contributors

Roberto Sobachi 🐛 💻	Thomas van Dongen 🐛 💻	Seshal Jain 🐛	Paul Bulai 🐛	Dirk Olbrich 🐛 💻	Bryson Reece 🐛
Edward Compton 🐛 💻	if2527 💻	k-snow 🐛