Please note

You have indicated you are not using Semantic Sass for your project. This means you will not be able to edit theme files, as they will be baked into the CSS file.

How to select a theme

Kickstart only requires you to import one single sass file to use the library (The CSS portion, anyway.) This one file is your chosen theme!

To switch themes, you'll need to find this @import and make it point to the theme you'd like to use.

If using a clone of the repository, you can find this in style.sass. If using Rails, this can be found in application.css.sass. See shimming for Rails for more information

// Change "default" to the theme you wish to use. This must be
// In your themes directory.
@import themes/default/theme

Anatomy of a theme

Theming is design to be very straightforward in Kickstart as every component works like an extensible class.

The easiest way to get started is to simply make a copy of lib/themes/default/theme.sass and rename it as your own.

You'll notice default/theme.sass has a very repetitive structure like this:

=some-component($args...)
  +some-component-default($args...)

This allows you to style some-component by either leaning on the styles already provided...

=some-component($args...)
  +some-component-default($args...)
  background-color: red
  font-family: courier, monospace

...or completely replace it with your own.

=some-component($args...)
  background-color: red
  font-family: courier, monospoace
  padding: 20px
  margin-bottom: 15px

Why do it this way?

By decoupling the default styling from the final component name, you get the following benefits:

Keep the Kickstart core library up-to-date

Updates to the core styles of Kickstart don't get overwritten when extending the component.

End-user entry points remain untouched

End users don't need to use any custom name that belongs only to the theme. They can flip through theme libraries and keep their library names the same.

That's really all there is to writing a Kickstart theme. Enjoy!