Setting up Skeleton Sass with Bower

Skeleton Sass requires minimal changes to ensure your local configurations, mixins, functions, etc are not modified when upgrading Skeleton Sass with bower.

Installing Skeleton Sass with Bower

Installing Skeleton Sass with bower is as easy as running a simple terminal command:

Note: Click here to learn how to install bower

bower install skeleton-sass

Additionally, as of version 1.6.3, you can now install difference versions from 1.6.3 and beyond by using the following syntax:

bower install skeleton-sass#1.6.3

Preserving Local Configurations and Changes

In order to preserve local changes and configurations an additional file needs to be created once inside of the skeleton-sass folder in bower_compontents. If you are performing these tasks via command line, then run the following command from your project root directory (where bower_components is)

cd bower_components/skeleton-sass

Once we are here, there are options. We need to decide if we wish to use bourbon, compass, or sass flavors of Skeleton Sass.

• bourbon uses the bourbon library to handle some of the operations
• compass is a ruby gem that has many useful mixins and functions built in. Skeleton Sass heavily relies on compass in this implementation and cannot work without compass.
• sass has no dependencies beyond Sass 3.2.x and all files included in this directory

Choose the flavor you wish and then create a new partial file. At this point we should have the following inside any of our flavors:

• _dependencies.scss
• _functions.scss
• _mixins.scss
• _vars.scss
• base.scss
• skeleton.scss
• layout.scss
• _MYLOCALCONFIG.scss

Inside of the _config.scss file we have the following changes:

$backgroundColor: #222; // override background color
$fontSize: 1rem; // override font size

We also need to modify these three files:

• base.scss
• layout.scss
• skeleton.scss

We need to import our changes after the default configuration has been loaded but before the mixins have actually run. Many of the mixins use variables created in _vars.scss so we need to be sure our changes persist after the default configuration has been loaded.

@import "vars"; // import _vars
@import "config";
@import "mixins"; // import _mixins

When we compile our code from this point, everything should run smoothly and our changes should reflect in our files. For the case of this demo, we can see that everything worked:

body {
	background: #222222;
	font-size: 1rem;
	font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: normal;
	font-style: normal;
	line-height: 1.5rem;
	color: #444444;
	-webkit-font-smoothing: antialiased;
	/* Fix for webkit rendering */
	-webkit-text-size-adjust: 100%;
}