Setting up Skeleton Sass for first time use

Installing Skeleton Sass as a Dependency

We can install Skeleton Sass three ways:

1. bower bower is deprecated
2. npm
3. git

Already got Skeleton Sass installed? Skip to setup.

Looking for Skeleton Sass 2?

NPM

1. Ensure NPM is installed on your system
2. Issue the following commands from your console window:

cd path/to/my_project
npm install --save-dev skeleton-sass-official

Checking if NPM is Installed

• Windows
  1. Open command line and issue the following command node -v. If you see a version number, then you have node.js installed.
• macOS/Linux
  1. Open a new terminal window or tab and issue the following command: command -v node if you see nothing then node.js is not installed.

Git

1. Using your favorite GUI application (e.g. Github, Sourcetree, Gitkraken, etc.)
2. Via command line:

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

Setup

With Skeleton Sass 3 there are a myriad of ways you can integrate the platform into your project. We'll outline a way to separate your Skeleton Sass dependency from any other preexisting (or future) dependencies you may have in your project. The effort in setting up Skeleton Sass 3 is a bit more than Skeleton Sass 2, but is worth the extensibility!

For the purposes of this guide, we'll assume the following app structure:

• app/
  • source/
    • images/
    • js/
    • sass/
      • skeleton.scss
      • src/
        • _config.scss
        • _loader.scss
        • themes/
          • my_theme/
            • _vars.scss
            • _mixins.scss

Command line guru? Follow the cli guide.

1. Inside of the sass folder create a folder named skeleton and a new file called skeleton.scss
   • The skeleton directory will house all of our Skeleton Sass specific files and folders.
   • The skeleton.scss file will load all of Skeleton Sass partials and bring all the pieces together in a public, compilable file.
2. Inside of skeleton create a themes folder, _config.scss partial, and _loader.scss partial.
   • The themes directory will hold all of our custom themes for the project
   • _config.scss will contain all of our global overrides found in the Skeleton Sass core
   • _loader.scss is the conductor and brings all of the individual pieces together in a single file
3. Inside of themes create a folder with the name of your theme. Inside of this new theme folder, create two files:
   1. _vars.scss which will contain all of your custom, theme-scoped variables
   2. _mixins.scss which will contain all of your custom, theme-scoped mixins

Now we need to populate the files appropriately. We'll begin with _config.scss

config.scss

@import "../../../node_modules/skeleton-sass-official/src/core/config"; // using NPM

This import statement imports the core Skeleton Sass config file where all of the config options live. Now we'll add content to _loader.scss

_loader.scss

// 1. core config and core config overrides
@import "config";

// 2. import theme dependencies
@import "../../../node_modules/normalize-scss/sass/normalize/import-now";

// 3. import default theme variables
@import "../../../node_modules/skeleton-sass-official/src/themes/fresh/vars";

// 4. import default theme overrides
@import "themes/demo/vars";

// 5. import default theme styles
@import "../../../node_modules/skeleton-sass-official/src/themes/fresh/include_components"; // renamed from base in version 3.1
@import "../../../node_modules/skeleton-sass-official/src/themes/fresh/grid"; // renamed from skeleton in version 3.1

// 6. import extras to be used in skeleton.scss
// @import "my/extra/_component.scss";

As mentioned above, this file serves as the conductor for Skeleton Sass. We use the power of variable overrides (not too far off from cascading in regular old CSS) in Sass compilers. Notice how we import all of our components:

1. Import our custom config (which imports the core Skeleton Sass config file).
   • Note: We should encapsulate the core config import to prevent accidental deletion of the import statement. This will cause a compilation error if the core import statement is missing.
2. Import our theme dependencies
   • The only dependency for the fresh theme is normalize.css, your theme may have additional dependencies which should be placed in this section.
3. Most Skeleton Sass themes will be based on core themes. Import default theme variables provides us access to these core theme variables and mixins so we can use them in our own theme.
4. Theme-scoped variable overrides are placed in this section
5. In this section we have some flexibility. Sometimes we want to mix and match components. Maybe we want to use a different grid system. Maybe we want to use different base styles. With Skeleton Sass 3, you have a choice! You can even include the components you want, and exclude the ones you don't starting with Skeleton Sass 3.1!
6. Have other dependencies you want access to in skeleton.scss? Add them here!

skeleton.scss

@import "skeleton/loader";

// Add custom styles here

At least, we reach the main file! So what's the purpose of this file anyway? skeleton.scss groups all of the dependencies into a single file. We can also add our very own custom styles in this file too! You can also leave this file as the entry point to your compiled Skeleton Sass grid and/or base styles while having your custom styles in a separate sass file.

CLI Setup

cd path/to/my_project
mkdir -p source/sass/skeleton/themes/my_theme
touch source/sass/skeleton.scss
touch source/sass/src/_config.scss source/sass/skeleton/_loader.scss
touch source/sass/src/themes/my_theme/_vars.scss
touch source/sass/src/themes/my_theme/_mixins.scss