Nietzsche's Preposterous Moustache
Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

skeleton-sass-official

3.1.5 • Public • Published

Skeleton Sass 3

Skeleton Sass is a highly modular version of Skeleton CSS.

Key Features

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

Dependencies

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 bower, npm, or 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: skeleton.scss

From *nix:

cd path/to/sass/in/project
touch skeleton.scss

From Windows:

cd path/to/sass/in/project
echo. 2>skeleton.scss

Inside of 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

Compile 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

Now open _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";

Finally, open skeleton.scss and add the following as the first line of the file:

@import "skeleton/loader";

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 _loader.scss file!

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 themes/MyTheme/grid.

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.

TL;DR

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.

Features

  1. Modular
  2. Decoupled core code
  3. Decoupled theme files for rapid theme development
  4. Extensible

File Overview

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

Note: bower is deprecated and we encourage you to adopt modern workflows like rollup and webpack.

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

Learn how to set up Skeleton Sass for the first time here.

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!

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.

Resources
Documentation

License

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 bower and 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.

Authors

Contributors

install

npm i skeleton-sass-official

Downloadsweekly downloads

26

version

3.1.5

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability