Faster and lighter than Bootstrap

CSS

Kickstart's CSS is only 80kb and even smaller when you roll your own from the Sass mixins.

JavaScript

Not only is the Kickstart JS smaller than Bootstrap and Foundation, it also doesn't require jQuery--drastically reducing page load times.

How it works

Kickstart has been used in production websites for over three years. Kickstart is a library, not a framework. This means you only use the CSS you need instead of slowing down your site with a complete UI library.

First, let's make a navigation bar for our website.

HTML

<header class="main-nav">
  <nav>
    <ul>
      <li> <a href="/">Home</a> </li>
    </ul>

    <ul>
      <li> <a href="/products">Products</a> </li>
      <li> <a href="/blog">Blog</a> </li>
    </ul>
  </nav>
</header>

<h1>Welcome</h1>

SCSS

.main-nav {
  @include navbar();
}

Great. But it would look better darker.

SCSS

.main-nav {
  @include navbar($background-color: #333);
}

Now let's create a sidebar for news.

HTML

<body>
  <header class="main-nav">...</header>

  <main class="content">
    <aside class="content-news">
      <h1>News</h1>
      <button id="all-news">All News</button>
    </aside>

    <main class="content-articles">
      <h1>Welcome</h1>
    </main>
  </main>

...

SCSS

.main-nav         { @include navbar(); }

.content          { @include row(); }
.content-news     { @include column('third'); }
.content-articles { @include column('twothirds'); }

Let's add a picture. But I don't think I want it to show on small devices

HTML

<body>
  <header class="main-nav">...</header>

  <h1 class="title">Welcome</h1>

  <main class="content">
    <aside class="content-news">
      <h1>News</h1>
      <button id="all-news">All News</button>
    </aside>

    <main class="content-articles">
      <h1>Welcome</h1>
      <img class="hero-img" src="mountains.jpg" />
    </main>

...

SCSS

.hero-img {
  display: none;

  @include gt($tablet) {
    display: block;
  }
}

This page could use a wrapper to create margins on either side.

HTML

<body>
  <header class="main-nav">...</header>

  <div class="wrapper">
    <main class="content">
      ...
    </main>
  </div>

...

SCSS

.wrapper {
  @include wrapper();
}

Let's have that button open a modal

HTML

<body>
  <header class="main-nav">...</header>
  <div class="wrapper">
    <main class="content">

      <aside class="content-news">
        <h1>News</h1>
        <button id="all-news">All News</button>
      </aside>

...

  <!-- This will be our modal -->
  <div class="all-news-modal">
    <header>
      <h1>All News</h1>
    </header>
    <main>...</main>
    <footer>...</footer>
  </div>

...

SCSS

.all-news-modal {
  @include modal();
}

JavaScript

// No jQuery required, but use it if you want.
$('#all-news').click(function() {
  $('.all-news-modal').show();
});

It would be great to make that "News" title smaller

HTML

<body>
  <header class="main-nav">...</header>

  <div class="wrapper">
    <main class="content">

      <aside class="content-news">
        <h1>News</h1>
        <button id="all-news">All News</button>
      </aside>

...

SCSS

.content-news h1 { @include heading_sm;}

If we're using the optional Gulp framework, we can also stream our code to a browser and a remote URL.

Terminal

$ gulp watch
...
[BS] Local URL: http://localhost:3001
[BS] External URL: http://10.0.1.7:3001
[BS] Serving files from: lib

Notice how we've created two servers here. The external server allows us to test the page as a public website. This is great for live mobile testing.

We can also keep our JS modular.

CoffeeScript

KS             = require '../../lib-core/coffee/app'
$              = require './jquery'
datepicker     = require './pikaday'
moment         = require './moment'

And write mocha/phantom JS tests on the fly.

CoffeeScript

assert = require("chai").assert
expect = require("chai").expect

describe 'Kickstart', ->
  it 'is present', ->
    expect(k$).to.not.equal(undefined)

√ Kickstart is present

1 passing (9ms)

Kickstart has a lot of components, but it's also extendible.

Terminal

$ git submodule add git://github.com/adamjgrant/switch.git

SCSS vendor/_index.sass

@import switch/switch

SCSS any of your project's SCSS files.

.switch { @include switch(); }

Optimized for developer happiness

	Kickstart	Bootstrap	Foundation	Bourbon
Open source
Used today in production environments
Native support for Rails
Native support for Gulp
Native support for 3rd party components
Official Component/Theme store
Native support for 3rd party themes
Optional simple CDN-hosted CSS/JS usage
Optional single-mixin components
jQuery Optional JavaScript
Flexbox Grid

Use statically or with mixins

Look how easy it is to create this Navbar. Most components in Kickstart require only one mixin to bring markup to life.

For users preferring a static CSS file, simple CSS classes are available to quickly write up components.

Did you know? The Kickstart documentation can be toggled between static- and mixin-usage.

Static
With Mixins

<!-- Just use a CSS class -->
<div class="navbar">
  <nav>
    <ul>
      <li>
        <a href="#">Home</a>
      </li>
      <li>
        <a href="#">Blog</a>
      </li>
    </ul>
    <ul>
      <li>
        <a class="button button-primary" role="button" href="#">Login</a>
      </li>
    </ul>
  </nav>
</div>

// Just one mixin does the trick!
// Use whatever CSS class you want.
.info-bar { @include navbar(); }
.button { @include button($primary-color); }

<div class="info-bar">
  <nav>
    <ul>
      <li>
        <a href="#">Home</a>
      </li>
      <li>
        <a href="#">Blog</a>
      </li>
    </ul>
    <ul>
      <li>
        <a class="button" role="button" href="#">Login</a>
      </li>
    </ul>
  </nav>
</div>

Loves to be extended

The library is just the core. Kickstart is designed to be extended and themed.

Use in any project

The Kickstart library is available for basic HTML as well as official Gulp and Rails integrations.

Follow Everything for Updates

Tweets from @everythingdotio