skeleton-sass-official
v4.0.0
Published
Skeleton Sass is a highly modular version of Skeleton CSS
Downloads
117
Maintainers
Readme
Skeleton Sass 3
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
- Skeleton Sass 2
- Skeleton Sass
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
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!