Upgrade from 2 to 3

Upgrading from Skelton Sass 3 is far more trivial than upgrading to Skeleton Sass 2, thankfully. In this guide, we'll outline the process of migrating all your code to use Skeleton Sass 3. Below is a brief outline of this guide:

1. Requirements
2. Goals of Skeleton Sass 3
3. Using bower or npm
4. Cloning the repo

Requirements

• Must be using Skeleton Sass 2.5 or greater (beta builds are fine)
• Helpful if you're using bower or npm to manage your dependencies

Goals of Skeleton Sass 3

The main goal of Skeleton Sass 3 is to completely decouple itself from your changes and other third party libraries that can be used in conjunction with Skeleton Sass 3. That being said, the mostly automated process introduced in Skeleton Sass 2 has been removed in favor of a more manual process at the cost of zero-risk updating.

Using bower or npm

If you use a package manager, then the process will be a bit easier than cloning the repo and handling updates that way. Regardless of project structure, however, the process is more or less the same.

First and foremost, if any edits were made to the core of Skeleton Sass 2, these changes will be lost with the update. Fork and request your changes to be merged if they seem significant enough to benefit the entire community!

Porting Themes to Skeleton Sass 3

Any themes created with Skeleton Sass 2 can easily be moved over to Skeleton Sass 3! Back up the following:

• _MYProjectConfig.scss
• skeleton.scss
• skeleton/themes/MyTheme1
• skeleton/themes/_loader.scss

Replacing _MYProjectConfig and MyTheme1 respectively.

Change your Skeleton Sass version in bower as follows:

...
"dependencies": {
     "skeleton-sass": "latest",
     ...
}
...

and then from command line run:

cd path/to/project/
bower update

Once Skeleton Sass 3 has been installed, we're ready to migrate our files to a separate directory. For the purposes of this we'll be following this file structure:

.
├── bower.json
├── bower_components
│   ├── normalize.scss
│   └── skeleton-sass
├── source
│   └── sass
│       ├── skeleton
│       │   ├── _config.scss
│       │   ├── _loader.scss
│       │   └── themes
│       │       └── MY_THEME/
│       └── skeleton.scss
└

Inside of your source directory create a sass directory. Inside of the source/sass directory create the following:

• skeleton.scss copy and paste your old skeleton.scss contents into this file
• skeleton/ this is the new home of all your skeleton changes

Note: run this script as an alternative

# Use on Unix/Linux Systems or Windows with a terminal emulator (e.g. Cygwin, etc.)
mkdir -p source/sass/skeleton/themes/MY_THEME # change MY_THEME accordingly
cd source/sass
touch skeleton.scss skeleton/_config.scss skeleton/_loader.scss

Inside of source/sass/skeleton/ directory, create two files and the following directory:

• _config.scss

  • Add this as the first line of the file

  @import "../../../bower_components/skeleton-sass/skeleton/core/config"; // change path accordingly

  • Copy and paste the contents of _MYProjectConfig.scss below the first line (excluding any extra imports)

• _loader.scss

  • Import the config partial we just created as the first line of the new loader partial

  @import "config"; // importing config override

  • The rest of the importing will need to wait until we've migrated the theme changes over

• themes/ this is where your themes will live

Inside of source/sass/skeleton/themes copy and paste the themes files here as they were in Skeleton Sass 2. At the end we should have something like this:

.
├── bower.json
├── bower_components
│   ├── normalize.scss
│   └── skeleton-sass
├── source
│   └── sass
│       ├── skeleton
│       │   ├── _config.scss
│       │   ├── _loader.scss
│       │   └── themes
│       │       └── MY_THEME/ // theme files are truncated
│       └── skeleton.scss
└

where MY_THEME is the name of your theme directory

Now, we need to come back and modify the loader partial to include the remainder of our theme imports. Here's a better look at what we need to do:

@import "config"; // importing config override

// import theme overrides and extras
@import "themes/MY_THEME/vars";
@import "themes/MY_THEME/base";
@import "themes/MY_THEME/skeleton";

But wait! I'm using one of the default grids!

Skeleton Sass 3 makes this easy as well! We can refactor our loader partial to use a shipped grid instead:

@import "config"; // importing config override

// import default theme variables for grid or declare all grid changes in your own vars partial and remove this import
@import "../../../bower_components/skeleton-sass/skeleton/themes/fresh/vars";

// import theme overrides and extras
@import "themes/MY_THEME/vars";
@import "themes/MY_THEME/base";

// import default grid
@import "../../../bower_components/skeleton-sass/skeleton/themes/fresh/skeleton";