Installation

CSS version

1. Download the normalize.css, put it in your /css folder and reference in your html:

<link rel="stylesheet" type="text/css" href="css/normalize.css">

2. Download the all-in-one css version, put it in your /css folder and reference in your html:

<link rel="stylesheet" type="text/css" href="css/style.css">

SASS version

1. Go to the github repository and download the source code;

2. In the /sass/main.scss file, comment out the style you do not need (you have to keep variables and helpers);

3. In the /sass/variables.scss file, change the variables to your own design such as color, font size, border radius, etc.

4. Install SASS and compile /sass/main.scss into style.css

5. Enjoy your style!

Background Color

Text Color

Font

Grid System

* Note1: add .clear-float if you want to start with a new line.

* Note2: you can nest the grid system and get more column types.

Position Helpers

.pull-left

.pull-right

Buttons

Form

<input type="text" value="input">

<input class="square" type="text" value="input .square">

<textarea cols="45" rows="5"></textarea>

<textarea class="square" cols="45" rows="5"></textarea>

List

Components

.card

.bg-img

.bg-img-fix

.cover

            <div class="full-width height-20 bg-img margin-t1">
              <div class="cover">
                <div class="center-v">
                  <h1 class="white-txt">Hello Hackers!</h1>
                </div>
              </div>
            </div>
            

.bg-video

            <div class="full-width height-40 bg-video">
              <video autoplay loop muted poster="images/bg.jpg" id="bgvid">
                <source src="videos/bg.webm" type="video/webm">
                <source src="videos/bg.mp4" type="video/mp4">
                <source src="videos/bg.ogv" type="video/ogg">
              </video>
              <div class="cover">
                <div class="center-v">
                  <h1 class="white-txt">Hello Hackers!</h1>
                </div>
              </div>
            </div>
            

.flash

Flash with close button: please include "scripts/flash.js" at the end of your body tag.

.nav-bar

.dropdown

.circle

.round

.info-box

<div class="info-box">
  <img class="icon-m" src="images/question.png">
  <div class="box">
    <p>Hello Hackers!</p>
  </div>
</div>
          

.nested-list

.crs (carousel)

Note: please include "scripts/carousel.js" at the end of your body tag.

<div class="crs">
  <div class="crs-img">
    <img src="images/img1.jpg">
  </div>
  <div class="crs-img">
    <img src="images/img2.jpg">
  </div>
  <div class="crs-img">
    <img src="images/img3.jpg">
  </div>
  <button class="left" onclick="slide_left(1)"><</button>
  <button class="right" onclick="slide_right(1)">></button>
</div>
<div class="crs-thumb">
    <img class="thumb active" onclick="select_image(this, 0)" src="images/img1.jpg">
    <img class="thumb" onclick="select_image(this, 1)" src="images/img2.jpg">
    <img class="thumb" onclick="select_image(this, 2)" src="images/img3.jpg">
    <div class="clear-float"></div>
</div>
        

< >

.modal

Note: please include "scripts/modal.js" at the end of your body tag.

<button onclick="open_modal()">Show Modal</button>
<div class="modal">
  <div class="overlay" onclick="close_modal()"></div>
  <div class="content">
    <h4>Hello Hackers!</h4>
    <button class="close" onclick="close_modal()"></button>
  </div>
</div>