-
Notifications
You must be signed in to change notification settings - Fork 28
Creating a theme
- What theme variables/mixins are provided to Themes?
- How do I override Skeleton Sass core and core theme variables in my theme(s)?
- How do I add my own global mixins and/or functions?
- How do I add my own theme-scoped mixins? How about functions?
- How do I add new base styles without disturbing existing base styles?
- How do I create my own base styles?
- How do I use a customized Skeleton Sass grid?
- How do I use another TPL grid with Skeleton Sass base styles?
- How do I additional TPLs into my theme?
- How to Override core mixins/functions?
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:
-
_vars.scss
which will contain all of your custom, theme-scoped variables -
_mixins.scss
which will contain all of your custom, theme-scoped mixins
Skeleton Sass ships with two themes:
Additional documentation:
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:
- Any variables that do not differ between themes should be placed in
_config.scss
- Any new variables to be used across all themes (e.g. Font Awesome font path variable) should be placed in
_config.scss
- Any new variables that differ from theme-to-theme should be place in the theme's respective
_vars.scss
file - Any global or theme-scoped overrides that differ between themes should be place in the theme's respective
_vars.scss
file
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:
_mixins.scss
_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";
// ...
Remember that _mixins.scss
partial we created in app/source/sass/skeleton/themes/my_theme
? Add your theme-scoped mixins here!
This can be done two ways:
-
Create a
_base.scss
file inapp/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";
-
Create a
_base.scss
file inapp/source/sass/skeleton/themes/my_theme
and modify your_loader.scss
file to resemble this:// ... // 4. import default theme styles @import "../../../bower_components/skeleton-sass/skeleton/themes/fresh/base"; @import "themes/my_theme/base"; @import "../../../bower_components/skeleton-sass/skeleton/themes/fresh/skeleton";
Note: This assumes you are not overriding base styles. Although, this would work for overriding styles, it will lead to clutter in your compiled
skeleton.css
file.
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:
-
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.
-
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:
- Override the styles you want to in
skeleton.scss
- Good for trivial changes that can't otherwise be accomplished by editing variable values
- Copy and paste the core theme's
_base.scss
partial intoapp/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
- Override the styles you want to in
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.
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, we'll 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/base";
// @import "../../../bower_components/skeleton-sass/skeleton/themes/fresh/skeleton"; // remove me
From there you can add your grid as you see fit outside of the skeleton/
directory.
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";
Unfortunately, Sass 3.4 provides no way to overload/override mixins or functions. The best we can do is to define our own mixins/functions with a similar name do one of two things:
- Call the underlying mixin/functions you wish to override and append/modify output
- Replicate the logic of the core mixin/function and make changes. Update references to use the new mixin/function in:
-
_base.scss
your base styles and/or -
_skeleton.scss
your grid
-