Skip to content

Creating a theme

Jump to bottom
AtomicPages LLC edited this page Nov 7, 2016 · 7 revisions

Themes in Skeleton Sass 3 enable you to extend and/or override the default behavior of Skeleton Sass without touching Skeleton Sass core code. Skeleton Sass 3 offers endpoints that truly allow you to have Skeleton Sass as a TPL (third-party library) in your project! Below we'll outline how to create a theme in Skeleton Sass 3.

Looking for theme setup in Skeleton Sass 2?

For the purposes of this tutorial, we'll assume you have Skeleton Sass integrated into your project already. Don't have Skeleton Sass setup yet? Learn how!

We'll assume the following app structure:

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

Creating a new theme that extends and/or overrides Skeleton Sass core themes is easier than before. Simply navigate to app/source/sass/skeleton/themes and create a new directory with the name of your theme. Add two new 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

What theme variables/mixins are provided to Themes?

Skeleton Sass ships with two themes:

  1. Fresh
  2. Sphenoid

Additional documentation:

How do I override Skeleton Sass core and core theme variables in my theme(s)?

In your own themes, you can override global variables on a per-theme basis as seen in the fresh theme _vars.scss. Some general guidelines to follow when using variables with Skeleton Sass themes:

  1. Any variables that do not differ between themes should be placed in _config.scss
  2. Any new variables to be used across all themes (e.g. Font Awesome font path variable) should be placed in _config.scss
  3. Any new variables that differ from theme-to-theme should be place in the theme's respective _vars.scss file
  4. Any global or theme-scoped overrides that differ between themes should be place in the theme's respective _vars.scss file

How do I add my own global mixins and/or functions?

Referring to the four rules, ensure you want to create global mixins and/or functions.

Although this is not explicitly addressed in the structure above, we should create some additional files in the skeleton directory:

  1. _mixins.scss
  2. _functions.scss

Once these files are created we need to add them to our _loader.scss

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

// Adding new global mixins/functions
@import "mixins";
@import "functions";

// ...

How do I add my own theme-scoped mixins? How about functions?

Remember that _mixins.scss partial we created in app/source/sass/skeleton/themes/my_theme? Add your theme-scoped mixins here!

How do I add new base styles without disturbing existing base styles?

This can be done two ways:

  1. Create a _base.scss file in app/source/sass/skeleton/themes/my_theme and import the core theme's _base.scss partial. Be sure to update your _loader.scss to reference your _base.scss partial!

    app/source/sass/skeleton/themes/my_theme/_base.scss

    @import "../../../../../../bower_components/skeleton-sass/skeleton/themes/fresh/base"; // '../' galore 👎

    app/source/sass/skeleton/_loader.scss

    // ...
// 4. import default theme styles
@import "themes/my_theme/base";
@import "../../../bower_components/skeleton-sass/skeleton/themes/fresh/skeleton";

How do I create my own base styles?

Base styles are the dressings of a website. The base styles defined in each theme are the set of styles that dress components like navigation bars, body text, preformatted text, etc. Often, we'll want to grid capability of Skeleton Sass, but wish to use our own base styles. This can be done several ways. Let's look at some use cases:

  1. I want to make slight modifications to a core theme's colors

    This can often be done by changing the theme variables. We recommend looking at the core variables and override the ones you need.

  2. I want to make some/many modifications to a core theme's base styles

    Depending on the magnitude of the changes this can be done two ways:

    1. Override the styles you want to in skeleton.scss
      • Good for trivial changes that can't otherwise be accomplished by editing variable values
    2. Copy and paste the core theme's _base.scss partial into app/source/sass/skeleton/themes/my_theme/_base.scss and be sure to update the reference to _base.scss in _loader.scss!
      • Good for big changes

How do I use a customized Skeleton Sass grid?

How do I use another TPL grid with Skeleton Sass base styles? (e.g. Neat, Bootstrap, etc.)

Clone this wiki locally