Skeleton Sass 3
Skeleton Sass is a highly modular version of Skeleton CSS.
- Ability to seamlessly adjust grids by changing the value of variables
- Easy-to-use mixins and functions
- Install Skeleton Sass with bower or npm! No more clunky scripts!
- Live demo!
- Heavily documented
- Sass 3.3+
Does this work with other Sass compilers?
Yes! Skeleton Sass 3 has been tested with the following compilers and libsass wrappers:
How do I Consume Skeleton Sass?
If you're using a
yarn then install via:
# bower is deprecated bower i --save-dev skeleton-sass bower i --save-dev skeleton-sass-official npm i --save-dev skeleton-sass-official yarn add skeleton-sass-official --dev
Optionally, if you are not using one of these package managers, then you can clone the repo and put in a special directory with the rest of your dependencies.
cd path/to/my_dir git clone https://github.com/atomicpages/skeleton-sass.git
From here, minimal stitching is required to get Skeleton Sass 3 integrated into your project! At a minimum, you need to create a single file:
cd path/to/sass/in/project touch skeleton.scss
cd path/to/sass/in/project echo. 2>skeleton.scss
skeleton.scss we need to add our components:
@import "path/to/bower_components/normalize-scss/sass/normalize/import-now"; // import normalize-scss @import "path/to/bower_components/skeleton-sass/skeleton/core/config"; // Skeleton Sass core loader // import default theme variables @import "path/to/bower_components/skeleton-sass/skeleton/themes/fresh/vars"; // theme variable overrides // import default theme styles @import "path/to/bower_components/skeleton-sass/skeleton/themes/fresh/include_components"; // theme base styles @import "path/to/bower_components/skeleton-sass/skeleton/themes/fresh/grid"; // theme grid styles
skeleton.scss and you now have Skeleton Sass 3 integrated into your project!
But wait! What about my themes?!
Skeleton Sass 3 makes it easy to keep your changes external to the core of Skeleton Sass with the new all-partial approach. We'll outline a sample case where we use a custom theme below:
my_project └── src └── sass ├── skeleton.scss # Skeleton folder to keep file structure clean └── themes ├── _config.scss # Global overrides and applies to all themes ├── _loader.scss # Contains all of the imports └── my_theme ├── _grid.scss # Theme grid, replaces shipped grids ├── _include_components.scss # Includes all of the components in the components folder ├── _vars.scss # Theme-scoped variables and overrides ├── components │ ├── _base.scss # Default html and body styles │ ├── _buttons.scss │ ├── _forms.scss │ ├── _links.scss │ ├── _lists.scss │ ├── _typography.scss │ └── _utils.scss # Utility classes └── mixins ├── _private.scss # Contains all "private" mixins └── _public.scss # Contains all public mixins
Now that we have our sample project outlined, let's see how we can get everything working! Open
_config.scss and add the following:
Note: all relative paths in the examples below fit the file structure above. If you are using a different structure, amend the paths accordingly.
@import "../../../bower_components/skeleton-sass/skeleton/core/config"; // Global var overrides
_loader.scss and add the following:
@import "config"; // import theme, overrides, and extras @import "themes/MyTheme/vars"; @import "themes/MyTheme/include_components"; @import "themes/MyTheme/grid";
skeleton.scss and add the following as the first line of the file:
How do I load third party Sass partials into theme?
Glad you asked! Skeleton Sass 3 makes this super easy as well! Depending where you need these mixins, function, and/or variables, you can load them at the appropriate place in your
For example, let's assume we want to use font-awesome inside of our
skeleton.scss file, we could modify the
_loader.scss file as follows:
@import "config"; // import theme, overrides, and extras @import "themes/MyTheme/vars"; @import "themes/MyTheme/include_components"; @import "themes/MyTheme/grid"; // import extras @import "../../../bower_components/font-awesome/scss/font-awesome";
Note: the position of the import changes which files have access to the loaded data. For example, if you need the data in
themes/MyTheme/grid then you'd need to move the import above the line where you import
For more information on why we made this change, click here.
Upgrading From 2.x
Skeleton Sass 3 is decently compatible to the 2.x series, but requires some manual labor (i.e. copy and pasting multiple files to the 2.x series).
Upgrading From 1.x
Skeleton Sass 2 is not backwards compatible with Skeleton Sass 1.x due to a major change in the file structure. However, we have a wiki article that explains how to upgrade from Skeleton Sass 1 to Skeleton Sass 2.
Looking for older versions of Skeleton Sass?
New to Sass?
Check out our wiki for a more in-depth look at Skeleton Sass, information regarding installing ruby, Sass, and other valuable resources.
Skeleton Sass is a Sass port of Skeleton CSS. Skeleton Sass 3 decouples itself from your project so you can consume it without worrying if your package manager will clobber all of your hard work.
- Decoupled core code
- Decoupled theme files for rapid theme development
skeleton/ # Where all of the magic happens ├── core │ ├── _config.scss # Default global configuration variables │ ├── _dependencies.scss # Default global logic for Skeleton Sass │ ├── _functions.scss # Default global functions for Skeleton Sass │ └── _mixins.scss # Default global mixins for Skeleton Sass └── themes # Where all of the themes live ├── fresh │ ├── _grid.scss │ ├── _include_components.scss # partial to import all of the components │ ├── _vars.scss # Project-scoped configuration options and variables │ ├── components │ │ ├── _base.scss │ │ ├── _buttons.scss │ │ ├── _forms.scss │ │ ├── _links.scss │ │ ├── _lists.scss │ │ ├── _misc.scss │ │ ├── _normalize.scss │ │ ├── _tables.scss │ │ ├── _typography.scss │ │ └── _utils.scss │ └── mixins # Stores all project-level functions and mixins │ └── _mixins.scss ├── original │ ├── _grid.scss │ ├── _include_components.scss # partial to import all of the components │ ├── _vars.scss # Project-scoped configuration options and variables │ ├── components │ │ ├── _base.scss │ │ ├── _buttons.scss │ │ ├── _forms.scss │ │ ├── _links.scss │ │ ├── _lists.scss │ │ ├── _typography.scss │ │ └── _utils.scss │ └── mixins # Stores all project-level functions and mixins │ ├── _private.scss │ └── _public.scss └── wing ├── _grid.scss ├── _include_components.scss # partial to import all of the components ├── _vars.scss # Project-scoped configuration options and variables └── components ├── _base.scss ├── _buttons.scss ├── _forms.scss ├── _links.scss ├── _lists.scss ├── _misc.scss ├── _typography.scss └── _utils.scss
Install Skeleton Sass as a dependency via NPM or Yarn:
npm install --save-dev skeleton-sass-official yarn add skeleton-sass-official --dev
Install Skeleton Sass with bower via command line:
bower install skeleton-sass --save-dev bower install skeleton-sass-official --save-dev
You can also install alpha, beta, release candidate, and previous versions by looking at the releases page and install with the following syntax:
bower install skeleton-sass#[tag] bower install skeleton-sass#3.1.0
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!
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.
This project is released under the MIT license. Who doesn't like free code?
Find a Bug?
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!
I Found a Bug/How Can I Help?
Version 3 Update
After a year of working with build systems like gulp, make, gradle, and maven it became obvious that the structure of Skeleton Sass 2 didn't really promote easy updating. Most build systems have a clean task which deletes entire directories that contains artifacts, target directories, object files, etc. Skeleton Sass 2 strived to be a catch-all solution with the addition of clunky scripts to automate certain things. With the release of 2.5.3, we realized a change was needed.
Skeleton Sass 3 offers a far more portable solution in order to adapt to new ways of development using dependency management systems like
npm. We wanted to truly make updating Skeleton Sass have zero risk of losing all your hard work. Now contributors to your projects can simply install Skeleton Sass as a dependency and all of your changes are 100% decoupled from the core.