Open Style Documentation
GitHub Source Download CSS● 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
h1 : Heading 1
h2 : Heading 2
h3 : Heading 3
h4 : Heading 4
h5 : Heading 5
h6 : Heading 6
.extra
.bold
.semi
.normal
.light
p : Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae culpa eaque adipisci in nam necessitatibus voluptates repellendus asperiores quas dolores blanditiis vitae laudantium, nesciunt saepe nobis architecto distinctio harum molestiae!
● 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
.clear-all
.clear-margin .margin-l2
.clear-margin .margin-r2
.clear-margin .margin-t2
.clear-margin .margin-b2
.clear-padding .margin-1
.clear-margin .padding-1
.margin-1 .padding-1
● Buttons
● Form
Code without extra class
<input type="text" value="input">
Use .square for hard corners
<input class="square" type="text" value="input .square">
Text area is easy too
<textarea cols="45" rows="5"></textarea>
Use .square for hard corners
<textarea class="square" cols="45" rows="5"></textarea>
● Components
.card
.bg-img
.bg-img-fix
.cover
<div class="full-width height-20 bg-img margin-t1">
<div class="txt-center 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">
</video>
<div class="txt-center cover">
<div class="center-v">
<h1 class="white-txt">Hello Hackers!</h1>
</div>
</div>
</div>
.flash
.nav-bar
.dropdown
Item 1
Item 2
Item 3
.circle
.round
Created by Yan Hong, 2015