Getting started

A simple-as-possible responsive Sass starter framework that's been built with Bourbon with just the right amount of features & components to get a project started in minutes.

Install the Kaizen CLI: gem install kaizen-cli

• Run: kzn [directory] -n - Create a new Kaizen project in the specified directory
• Run: kzn [directory] -f - Overwrite files that already exist in the target directory
• Run: kzn [directory] -w - Watch the specified directory for Sass changes and compile them automatically
• Run: kzn [directory] -s - Start serving the specified directory from the built-in web server
• Run: kzn --help for further instructions
• Run: sass --watch scss:css --style compressed & in the directory to compile the CSS

We highly recommend you customize the framework settings to suit your brand in _base.scss, this should take less than a minute to do.

If something does happen to go wrong, you can add the -v argument to enable more verbosity.

Typography

The typography framework has been built to make set up and customization really simple.

All header, paragraph etc. sizes are all calculated with the $body-font-size variable.

Other important settings:

• $size-ratio This will set the sizing ratio between font sizes
• $header-font-stack Font stack for headings
• $body-font-stack Font stack for everything else
• $font-smoothing Will enable font smoothing (this is only needed for *some* fonts).

Typography helpers

.no-style-list

Removes default list styles

.text-dropcap

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Text Alignment

• .text-left
• .text-center
• .text-right

These are also Breakpoint specific using .small-text-center etc.

Spacing Helpers

We've added a spacing helper to keep whitespace consistent easily.

.padds-top-small, .padds-top-medium, .padds-top-large, .padds-bottom-small, .padds-bottom-medium, .padds-bottom-large,

Meta Tags

• <meta name="viewport"> Is used to make the site responsive, DO NOT REMOVE IT.
• <meta charset="utf-8"> The meta charset attribute specifies the character encoding of the current document.
• <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> The X-UA-Compatible meta tag allows web authors to choose what version of Internet Explorer the page should be rendered as.
• <meta http-equiv="x-dns-prefetch-control" content="on"> DNS prefetching is an attempt to resolve domain names before a user tries to follow a link.
• a few Open graph meta tags (og:site_name, og:title, go:type, og:description, og:url, og:image) used by social networks like Facebook.
• <meta http-equiv="cleartype" content="on"> This meta tag allows for activation of ClearType in Mobile IE for smoothing fonts.
• apple-mobile-web-app-capable, apple-mobile-web-app-status-bar-style, apple-mobile-web-app-title Apple specific meta tags, you can see what they do here.
• favicon tags and placeholder favicon files.
• Windows tile style meta tags.

Responsive Flexbox Grid

We've added a 12 column grid for small, medium & large displays. Simply use them with the class
small-[column size] medium-[column size] large-[column size] columns

Auto Width Column

We've also left the best feature of flexbox, add auto width columns using column

Nested Grids

Horizontal Alignment

.row-center

.row-right

.row-justify

Vertical Alignment

By default columns will stretch to the same height

.row-top

.row-middle

.row-bottom

Grid Helpers

.row-reverse

.row-collapse

Removes whitespace from columns

Creating a breakpoint

We have 3 default breakpoints already set called small (0 - 768), medium (768 - 1024) & large (1024 - ), but you can create your own if you wish.

                
  @media (min-width: [size]) {
    @include make-grid([name]-);
  }
                
              

Optional Components

Components are disabled by default, we've purposefully done this to keep the framework small, to enable them uncomment them in main.scss

Buttons

.button

.button-alt

.button-disabled

.button-block

Block button will always fill its container

.button-tiny, .button-small, .button-large

Responsive Tables

Unstyled responsive table that will work on small to large displays. For mobile we use data-heading to apply cell headings, no need for extra classes on JavaScript to make it work.

Forms

Forms are still forms, they just look better.