Skip to content

Creating a theme

Jump to bottom
Dennis Thompson edited this page Mar 27, 2021 · 7 revisions

Sections:

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 3.1+ 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 three:

  1. Fresh
  2. Original
  3. Wing

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 where identifiers do not differ between themes, but are consumed by most 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 new partial _include_components.scss in app/source/sass/skeleton/themes/my_theme
  2. Create a directory called components in app/source/sass/skeleton/themes/my_theme
  3. Add your new components in the components directory
  4. Import an existing theme's components or _include_components.scss partial.

Including All Components from a Single Theme

@import "path/to/bower_components/skeleton-sass-official/themes/fresh/include_components";

// Adding my custom components
@import "components/_custom_component.scss";

Mixing Components from Various Themes

@import "path/to/bower_components/skeleton-sass/themes/fresh/components/base";
@import "path/to/bower_components/skeleton-sass/themes/fresh/components/buttons";
@import "path/to/bower_components/skeleton-sass/themes/fresh/components/typography";

@import "path/to/bower_components/skeleton-sass/themes/original/components/lists";

@import "path/to/bower_components/skeleton-sass/themes/wing/components/forms";

@import "components/_custom_component.scss";

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. We have two cases:

    1. Some big-ish changes

      If overriding a particular component is require (e.g. changing link styles or changing how forms look) then we can include all other components we wish to use from a core theme and implement a custom component. Here's an example in your _include_components.scss:

      @import "path/to/bower_components/skeleton-sass/themes/fresh/components/normalize";
@import "path/to/bower_components/skeleton-sass/themes/fresh/components/base";
@import "path/to/bower_components/skeleton-sass/themes/fresh/components/buttons";
@import "path/to/bower_components/skeleton-sass/themes/fresh/components/typography";
@import "path/to/bower_components/skeleton-sass/themes/fresh/components/utils";
@import "path/to/bower_components/skeleton-sass/themes/fresh/components/misc";
@import "path/to/bower_components/skeleton-sass/themes/fresh/components/forms";
@import "path/to/bower_components/skeleton-sass/themes/fresh/components/tables";

@import "components/links"; // my custom links component

    2. Many big-ish changes/Complete overhaul

      Changes of this magnitude can be done much the same way aforementioned, but with one major difference: copy core components into your own components folder. Here's a simple shell script to illustrate:

      cp -R path/to/bower_components/skeleton-sass/themes/fresh/components/* path/to/my_theme/components/.

      As in your _include_components.scss partial, import all of the components (or copy over this file from the core theme too).

How do I use a customized Skeleton Sass grid?

Using a customized Skeleton Sass grid is often as simple as changing the variables either in _config.scss or your theme's _vars.scss. See the Mixins API for additional documentation on using the @grid mixin.

In the event the core Skeleton Sass grid is lacking something you need, the best path to take can vary dramatically. This can range from encapsulating the shipped @grid mixin into your own global or theme-scoped mixin1 to a complete rewrite. These issues are often need to be handled on a case-by-case basis. Feel free to open an issue with a question tag.

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

Skeleton Sass lacking something that another TPL has? First and foremost, feel free to implement the feature in Skeleton Sass and submit a pull request!

Don't feel like it's a good fit for Skeleton Sass? No worries, trust your instincts! Integrating TPLs into Skeleton Sass 3 is easy. Simply include the TPL in the _loader.scss file if you plan to use within your Skeleton Sass theme. If it's something totally separate like a different grid system then you can remove the grid reference in _loader.scss:

// 5. import default theme styles
@import "../../../bower_components/skeleton-sass/skeleton/themes/fresh/include_components";
// @import "../../../bower_components/skeleton-sass/skeleton/themes/fresh/grid"; // remove me

From there you can add your grid as you see fit outside of the skeleton/ directory.

How do I additional TPLs into my theme?

Common things we might want to add to our themes are things like font awesome, extra base styles for JS components, etc. All of these things can be added very easily in your _loader.scss partial.

// 6. import extras to be used in skeleton.scss
@import "../../../bower_components/font-awesome/scss/font-awesome";

From there, we have access to these items inside of app/source/sass/skeleton/skeleton.scss. Need this stuff inside of your theme? Add it as a theme dependency!

// 1. import theme dependencies
@import "../../../bower_components/normalize-scss/sass/normalize/import-now";
@import "../../../bower_components/font-awesome/scss/font-awesome";

How to Override core mixins/functions?

Unfortunately, Sass 3.4 provides no way to overload/override mixins or functions, but not all is lost! We can:

  1. Call the underlying mixin/functions you wish to override and append/modify output
  2. Replicate the logic of the core mixin/function and make changes. Update references to use the new mixin/function in:
    1. _include_components.scss your base styles and/or
    2. _grid.scss your grid
  3. Copy and paste core theme mixins/functions into our own mixins folder in our theme, and make amendments
    • Note: make sure references to the old theme mixins/functions have been removed
Clone this wiki locally