Creating a theme in Skeleton Sass 2

Skeleton Sass 2 introduces something that is new to Skeleton Sass altogether. Themes, like those in WordPress, are a way to skin what the user sees as well as extend the framework. Theme in Skeleton Sass act the same way.

Themes: What they are and what they aren't

Before we dive into themes, we need to establish some parameters regarding what Skeleton Sass themes are and what they are not.

At the core, Skeleton Sass 2 has globally scopes variables, functions, and mixins as well as theme-scoped variables, functions and mixins. Themes are a way to separate the global layer and your hard work. The global layer exists as a backbone to your work by doing the heavy lifting such as generating grids, setting default colors, fonts, and more.

Themes contain three files that are imported by the theme _loader.scss partial. Here's the theme that is loaded out of the box:

// Sphenoid is the default theme bundled with Skeleton Sass. Add your theme here!

@import "sphenoid/vars";
@import "sphenoid/base";
@import "sphenoid/skeleton"; // Override manually if you wish to create your own grid

sphenoid/_vars.scss

If a file that bridges our theme-scoped mixins, functions, and variables in addition to our global configuration variables, mixins, and functions.

@import "marrow/private";
@import "marrow/public";
@import "../../core/config"; // default dependencies

$prefix-for-webkit:    true !default;
$prefix-for-mozilla:   true !default;
$prefix-for-microsoft: true !default;
$prefix-for-opera:     true !default;
$prefix-for-spec:      true !default;

The first two import statements

@import "marrow/private";
@import "marrow/public";

imports our local mixins and functions so they are available for our theme. private contains the logic layer of our functions and a mixins. public contains the public facing mixins and functions that combine the logic layer and some other goodies.

Note: the marrow folder can be called whatever you want in your own theme. We decided to keep the "skeleton" naming convention going for fun.

@import "../../core/config"; // default dependencies

Is our third import statement. This imports our global variables, mixins, and functions so they are available to our theme.

Lastly, we have a few theme variables:

$prefix-for-webkit:    true !default;
$prefix-for-mozilla:   true !default;
$prefix-for-microsoft: true !default;
$prefix-for-opera:     true !default;
$prefix-for-spec:      true !default; // set all prefixes to false EXCEPT spec to disable all vendor prefixes

These variables set the default vendor prefixes for our prefixr mixin. We intentionally left these settings for the theme because you, the theme author, may choose a different solution and want to easily turn all vendor prefixes off at the theme level rather than for all themes.

sphenoid/_base.scss

The base file is the same as before. If you are new to Skeleton Sass then allow us to explain. The _base.scss partial contains the main styles (e.g. buttons, input fields, preformatted text, block quotes, etc). Most of a theme edits and additions will happen in this file.

Note: this file is not meant to serve to store all specific styles for your website. This file should serve as a starting point for your project(s). In most cases, you might override background colors, font families, font sizes, and maybe a few additional selectors. This file needs to be general enough so it would apply to multiple websites that used this theme but specific enough that the entire site identity would change if your theme was not used.

sphenoid/_skeleton.scss

The _skeleton.scss partial is the same as before. If you are new to Skeleton Sass, this handles the grid portion of the framework. Skeleton Sass can exist without the base styles; however, the framework is incomplete without the grid.

Note: it should be very rare that you need to change this file. All of the grid adjustments can be done in your global configuration file. If you are resolving an issue with the grid, be sure to submit a pull request.

Creating a Theme

We can create a theme two ways:

• Automated creation
• Manual creation

Automated Creation

Similar to the initial setup process, we have created a friendly ruby file that will aid you in creating a theme. Simply launch bin/theme_setup.rb from your console window and follow the prompts.

A special note to Windows users

If you have Ruby installed on your system then simply navigate to the bin directory and double click on setup.rb. Windows will automatically run the script for you and it will exit upon completion.

Upon completion, the script created a new folder with the name of your theme, copied some files over for you, and connected your theme to the rest of the script by editing the theme loader file. We still have some work to do though.

1. The script assumes that you don't want to override the grid. If you do, then see step 3 and 5 when they are relevant to the _skeleton.scss file.
2. The theme setup script assumes you wish to use the project-level mixins and functions. If you wish you use third party scripts (e.g. Bourbon), you need to add those manually.
3. We need to add our imports to

Manual Creation

Unlike the setup process, the manual theme creation process is a little more arduous.

1. Navigate to skeleton/themes/ and create a new folder as the name of your new theme
2. Open your newly create theme folder and create a new folder called something along the lines of assets or includes. Install any third party Sass scripts (e.g. Bourbon), import the default mixins, or begin writing your own custom mixins/functions in this newly created directory.
   Note: if you wish to use the mixins and functions bundled by default, import the following into a Sass partial file in the includes directory:
   

   @import "../../sphenoid/marrow/private";
   @import "../../sphenoid/marrow/public";

3. Navigate back to the themes directory and open the demo folder. At minimum, we need to copy _vars.scss and _base.scss into our theme (Copy _skeleton.scss if you intend on adding functionality to the grid).
4. Once copied, navigate back to our theme and open _vars.scss. Import any dependencies we have for our theme that we set in step 2 by replacing the following line with the appropriate imports
   

   // @import "my_folder/_foo.scss"; // import dependencies from a custom folder

5. Navigate to the themes directory once more and open _loader.scss with your favorite text editor. We will see the following:
   

   @import "sphenoid/vars";
   @import "sphenoid/base";
   @import "sphenoid/skeleton"; // Override manually if you wish to create your own grid

   Replace sphenoid in the first two import statements with the name of your theme.
   Note: if you imported _skeleton.scss be sure you change sphenoid in the last import as well.

Congrats! You've created your first theme in Skeleton Sass! Start customizing away!