1A. Barebones

Head code

In order to serve your site responsively, and with good SEO practice, I recommend adding the following to your <head>

See this article for more information on building a responsive HTML meta tag.

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    ...

JS/CSS

Just use the CSS/JS file via a CDN.

Or download kickstart.css and kickstart.js and include in your html file.

kickstart.css  kickstart.js

  ...
    <link rel="stylesheet" href="//cdn.getkickstart.com/css/kickstart.min.css" />
  </head>
  <body>
    ...
    <script type="text/javascript" src="//cdn.getkickstart.com/js/kickstart.min.js"></script>
  </body>

Make sure any JavaScript code that uses k$ goes after the script tag inclusion of kickstart.js.

Notice that using this method will obviously not allow for using the semantic version of the docs.

<script type="text/javascript" src="//cdn.getkickstart.com/js/kickstart.min.js"></script>
<script>
  k$.tabs('.tabs');
</script>

Coffeescript/Sass

Using the source Sass and Coffeescript files in a project is easy. Simply clone the repo

$(~) git clone git@github.com:adamjgrant/kickstart.git --depth 1

In Kickstart, the main Sass file to compile is just the theme you are using. This can be found in lib-core/sass/themes

If you wish to use your own theme, you can place this wherever you like in your project. You'll just need to make sure your Sass loadPaths include the repo you just cloned. Otherwise, you'll get an error that some of the core libraries can't be found.

1B. Rails

Install the Kickstart gem

Rails integration is Sass-only. This means you will need to use the mixins instead of things like .col-6.

Some of this is practical, some is philosophical, but if you really need the regular css despite the fact you're running a full sass-compilation environment, linking to kickstart.css directly is still an option.

You can either import kickstart into application.css or into individual files.

gem install "kickstart_rails"

Sample Gemfile

In your Gemfile, it's important to use Sass 3.4 or above. This means you should remove sass-rails as it uses an earlier version of Sass at the time of this writing.

# Do not use sass-rails
# gem 'sass-rails'

# Use Sass 3.4 and above.
gem 'sass', '~> 3.4'

# Add the kickstart_rails gem
gem 'kickstart_rails', '~> 3'

# Add autoprefixer
gem 'autoprefixer-rails'

Import in application.css

application.css must first be converted into .scss/.sass and not use any /* require statements. This is because sprockets does not see the sass variables. It will merely concatenate the compiled files together.

You can change this to use @import statements with an import to kickstart_rails at the top.

@import kickstart_rails;
@import mysassfile1.sass;
@import mysassfile2.sass;

JavaScript

Fortunately, adding the JavaScript is easier. Just add //= require kickstart_rails to the top of application.js

//= require kickstart_rails
//= require_tree .

Firing on ready

Some of your JavaScript will need to run once the DOM is ready. In Rails, this can be a little mysterious, especially when using jquery-ujs. Here's one way to ensure this code fires at the right time.

var ready = function() {
  // Your code
}
$(document).ready(ready);
$(document).on("page:load", ready);


function ready(fn) {
  if (document.readyState!='loading') {
    fn();
  }
  else {
    document.addEventListener('DOMContentLoaded', fn);
  }
}

ready(function() {
  // Your code
});

Autoprefixing

The gem uses autoprefixer to automatically prefix styles. If you want to specify your own autoprefixing rule, you'll just need to add a .yml file

See the instructions at the Autoprefixer docs

1C. Gulp

My tool of choice for building all of Kickstart is gulp, plus a ton of extras. The easiest way to get started with a gulp implementation of kickstart is to simply clone the repo.

Setup instructions are in the README.md file at the repo.

Once you have your environment up and running, you should empty the jade folder and use kickstart-semantic.sass. This was designed specifically as an empty file with everything imported in.

Rename it to whatever you like and link to the resulting .css file in your html/jade

$(~) git clone git@github.com:adamjgrant/kickstart.git mywebsite

# Install the dependencies
$(~) cd mywebsite
$(mywebsite) make setup

# If all goes well, this should launch your project.
$(mywebsite) gulp