KISS.CSS

Keep it stupid simple .css and .sass framework using modular pure Vanilla.js library without dependency of jQuery.

Getting Started

Learn how to easily start using KISS.CSS in your website.

Download

KISS.CSS comes in two different forms. You can select which version you want depending on your preference and expertise. To start using KISS.CSS, all you have to do is download one of the options below.

CSS

This is the standard version that comes with both the minified and unminified CSS and JavaScript files. This option requires little to no setup. Use this if you are unfamiliar with SASS.

SASS

This version contains the source SASS files. By choosing this version you have more control over which components to include. You will need a SASS compiler if you choose this option.

Setup

Project Structure

After downloading, extract the files into the directory where your website is located. Your directory will look something like this.

You'll notice that there are two sets of the files. The min means that the file is "compressed" to reduce load times. These minified files are usually used in production while it is better to use the unminified files during development.

MyWebsite/

|--css/
|  |--kiss.min.css
|  |--kiss.css
|
|--js/
|  |--kiss.min.js
|  |--kiss.js
|
|--index.html

HTML5 doctype

Next you just have to make sure you link the files properly in your webpage. Generally it is wise to import javascript files at the end of the body to reduce page load time. Follow the example below on how to import KISS.CSS into your webpage.

<!DOCTYPE html>
<html>
  <head>
    <!-- MOBILE -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- GOOGLE FONT -->
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400" rel="stylesheet">
    <!-- GOOGLE MATERIAL ICON -->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!-- KISS.CSS -->
    <link rel="stylesheet" href="css/kiss.min.css">
  </head>
  <body>
    <header></header>
    <main>
      <aside></aside>
      <section>
        <article></article>
      </section>
    </main>
    <footer></footer>
  <!-- KISS.JS -->
  <script src="js/kiss.min.js"></script>
  </body>
</html>

Grid

Fully customizable and responsive CSS and SASS grids.

Variable columns

Use any number of columns you like. 12 columns is set by default but you can set any number, simply edit value @grid-columns in kiss.SASS.

Mobile first

Overwriting or undoing styles for mobile devices feels unnatural so KISS.CSS puts mobile first.

Fluid layout

Liquid or percentage based layout has quickly become the standard way of creating responsive web sites.

Markup

Each set of columns is wrapped with .row and can contain any number of columns. Columns now use the border-box box model for increased convenience. This means less HTML to write.

Remember to wrap nested columns with its own .row block.

<div class="row">
  <div class="col-8 col-mb-4 col-md-offset-0">
    <div class="row">
      <div class="col-6"> … </div>
      <div class="col-6"> … </div>
    </div>
  </div>
  <aside class="col-4 col-mb-8"> … </aside>
</div>