Teerian Framework

A responsive CSS Framework built with LESS

View on GitHub

Last updated: May 31, 2014.

Browser Support - Teerian Framework works in all modern browsers on desktops and mobile devices: latest Chrome, Firefox, Safari, Opera and IE8+.

License - Licensed under the MIT license. This means that Teerian Framework is free for commercial and non-profit use.


Get Started

Basic Template

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    
    <title>Basic Template</title>
    <link href="css/teerian.min.css" rel="stylesheet">
    
    <!--[if lt IE 9]>
    <script src="js/html5shiv.min.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->
</head>

<body>
    
<div id="header">
    <div class="content"><img src="img/logo.png" alt="" /></div>
</div>

<nav class="clearfix">
    <ul class="content clearfix"> 
        <li><a href="#" class="active">Disabled Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
    </ul>
    <a href="#" id="pull">Menu text</a>
</nav>

<div class="content">
    <h1>Basic Template</h1>
    <p>Content...</p>
</div>

<div id="footer-extra">
    <div class="content">
        <p>Content...</p>
    </div>
</div>
         
<div id="footer">
    <div class="content">
        <p class="text-center">Teerian Framework</p>
    </div>
</div>

<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/teerian.js"></script>

</body>
</html>

View Demo


Basic Styles

Variables.less

Wrapper

// Content
@page-width:		1000px;
@page-padding:		2.8%;

Media Queries

// Media Queries
@small-devices:		~"(max-width: 480px)";
@medium-devices:	~"(max-width: 768px)";
@large-devices:		~"(max-width: 992px)";

Header

// Header
@header-breakpoint:	@medium-devices;

Navigation

// Navigation
@nav-height:		40px;
@nav-font-weight:	700;
@nav-breakpoint:	@medium-devices;
@nav-pull-icon:		url('../img/nav-icon.png');
@nav-pull-padding:	@page-padding;

Footer

// Footer
@footer-padding:	20px 0;
@footer-extra-margin:	40px 0 0 0;

Header and Navigation

<div id="header">
    <div class="content"><img src="img/logo.png" alt="" /></div>
</div>

<nav class="clearfix">
    <ul class="content clearfix"> 
        <li><a href="#" class="active">Disabled Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
    </ul>
    <a href="#" id="pull">Menu text</a>
</nav>

Footer

<div id="footer-extra">
    <div class="content">   
    	<p>...</p>
    </div>
</div>
    
<div id="footer">
    <div class="content">    
    	<p>...</p>
    </div>
</div>

Grid System

Variables.less

@row-width:             100%;
@grid-columns:          12;
@col-margin-horizontal: 1.4%;
@col-margin-vertical:   1.0%;
@grid-breakpoint:       @small-devices;

12-column-grid.less

.col-1 {.col(1)}
.col-2 {.col(2)}
.col-3 {.col(3)}
.col-4 {.col(4)}
.col-5 {.col(5)}
.col-6 {.col(6)}
.col-7 {.col(7)}
.col-8 {.col(8)}
.col-9 {.col(9)}
.col-10 {.col(10)}
.col-11 {.col(11)}
.col-12 {.col(12)}

Examples

Twelve Columns

.col(1)

.col(1)

.col(1)

.col(1)

.col(1)

.col(1)

.col(1)

.col(1)

.col(1)

.col(1)

.col(1)

.col(1)

<div class="row clearfix">
    <div class="col-1"><p>.col(1)</p></div>
    <div class="col-1"><p>.col(1)</p></div>
    <div class="col-1"><p>.col(1)</p></div>
    <div class="col-1"><p>.col(1)</p></div>
    <div class="col-1"><p>.col(1)</p></div>
    <div class="col-1"><p>.col(1)</p></div>
    <div class="col-1"><p>.col(1)</p></div>
    <div class="col-1"><p>.col(1)</p></div>
    <div class="col-1"><p>.col(1)</p></div>
    <div class="col-1"><p>.col(1)</p></div>
    <div class="col-1"><p>.col(1)</p></div>
    <div class="col-1"><p>.col(1)</p></div>
</div>

Three Columns

.col(4)

.col(4)

.col(4)

<div class="row clearfix">
    <div class="col-4"><p>.col(4)</p></div>
    <div class="col-4"><p>.col(4)</p></div>
    <div class="col-4"><p>.col(4)</p></div>
</div>

Two Columns

.col(8)

.col(4)

<div class="row clearfix">
    <div class="col-8"><p>.col(8)</p></div>
    <div class="col-4"><p>.col(4)</p></div>
</div>

Nesting columns

.col(6)

.col(6)

.col(6)

.col(6)

.col(6)

.col(6)

<div class="row clearfix">
    <div class="col-6">
    <p>.col(6)</p>
        <div class="row clearfix">
            <div class="col-6"><p>.col(6)</p></div>
            <div class="col-6"><p>.col(6)</p></div>
        </div>
    </div>
    <div class="col-6">
    <p>.col(6)</p>
        <div class="row clearfix">
            <div class="col-6"><p>.col(6)</p></div>
            <div class="col-6"><p>.col(6)</p></div>
        </div>
    </div>
</div>

Colors

Default Colors

 
@color-black
 
@color-white
 
@color-light-gray
 
@color-gray
 
@color-dark-gray
 
@color-light-blue
 
@color-dark-blue
 
@color-light-orange
 
@color-dark-orange

Social Media Colors

 
@color-facebook
 
@color-twitter
 
@color-youtube
 
@color-google-plus
 
@color-github
 
 

Variables.less

@color-black:		rgba(0,0,0,1);
@color-white:		rgba(255,255,255,1);

@color-light-gray:	rgba(236,240,241,1);
@color-gray:		darken(@color-light-gray, 10%);
@color-dark-gray:	darken(@color-light-gray, 20%);

@color-light-blue:	rgba(72,105,214,1);
@color-dark-blue:	rgba(6,31,112,1);

@color-light-orange:	rgba(255,176,0,1);
@color-dark-orange:	darken(@color-light-orange, 10%);
    
@color-facebook:	rgba(59,89,152,1);
@color-twitter:		rgba(0,172,237,1);
@color-youtube:		rgba(187,0,0,1);
@color-google-plus:	rgba(221,75,57,1);
@color-github:		rgba(23,21,21,1);

Body and Headings

// Body and Headings
@body-font-color:	lighten(@color-black, 20%);
@heading-font-color:	lighten(@color-black, 10%);

Header

// Header
@header-background:	@color-dark-blue;

Footer

// Footer
@footer-extra-bg:	@color-light-gray;
@footer-background:	@color-dark-blue;
@footer-text-color:	@color-white;
@footer-link-color:	@color-light-orange;
@footer-visited-link:	@footer-link-color;
@footer-hover-link:	darken(@footer-link-color, 10%);

Navigation

// Navbar
@nav-background:	@color-light-blue;
@nav-link-color:	@color-white;
@nav-visited-link:	@color-white;
@nav-hover-link:	@color-light-orange;
@nav-hover-bg:		@color-dark-blue;
@nav-pull-bg:		@color-dark-blue;
@nav-pull-color:	@color-white;

Links

// Links
@link-color:		@color-light-blue;
@visited-link-color:	@color-light-blue;
@hover-link-color:	darken(@link-color, 10%);

Buttons

// Buttons
@button-default-bg:	@color-light-blue;
@button-default-hover:	darken(@button-default-bg, 10%);
@button-gray-bg:	@color-dark-gray;
@button-gray-hover:	darken(@button-gray-bg, 10%);
@button-orange-bg:	@color-light-orange;
@button-orange-hover:	darken(@button-orange-bg, 10%);

Social Media Icons

// Social Media Icons
@icon-facebook-link:	@color-facebook;
@icon-facebook-hover:	darken(@icon-facebook-link, 10%);
@icon-twitter-link:	@color-twitter;
@icon-twitter-hover:	darken(@icon-twitter-link, 10%);
@icon-youtube-link:	@color-youtube;
@icon-youtube-hover:	darken(@icon-youtube-link, 10%);
@icon-google-plus-link:	@color-google-plus;
@icon-google-plus-hover:darken(@icon-google-plus-link, 10%);
@icon-github-link:	@color-github;
@icon-github-hover:	darken(@icon-github-link, 10%);

Forms

// Forms
@form-styled-border:	@color-gray;
@form-styled-focus:	@color-light-blue;

Panels

// Panels
@panel-background:	@color-light-gray;
@panel-border-color:	@color-dark-gray;

Typography

Variables.less

Import Fonts

// Fonts
@import url(http://fonts.googleapis.com/css?family=Ubuntu);
@import url(http://fonts.googleapis.com/css?family=Open+Sans);
@import url(http://fonts.googleapis.com/css?family=Inconsolata);

Base Font

// Base Font
@base-font:	        'Open Sans', sans-serif;
@base-font-size:	14px;
@base-line-height:	1.7;
@base-font-weight:	400;
@large-font-size:	125%;
@small-font-size:	90%;

Heading Font

// Heading Font
@heading-font:		'Ubuntu', sans-serif;
@h1-font-size:		38px;
@h2-font-size:		32px;
@h3-font-size:		26px;
@h4-font-size:		20px;
@h5-font-size:		16px;
@h6-font-size:		14px;
@heading-line-height:	1.1;
@heading-font-weight:	400;
@heading-margin-bottom:	10px;

Monospaced Font

// Monospaced Font
@monospace-font:	'Inconsolata', monospace;

Examples

Headings

This is heading 1

This is heading 2

This is heading 3

This is heading 4

This is heading 5
This is heading 6
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

Paragraphs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse consectetur magna feugiat congue convallis. Donec ac dui quam. Donec a accumsan nulla, non dignissim purus. In turpis arcu, ornare condimentum convallis sed, mattis consequat sapien. Aenean rhoncus turpis dolor, ac suscipit dolor pulvinar in.

<p>Lorem ipsum dolor sit amet...</p>

Pellentesque eu est ultrices, accumsan tortor non, varius velit. Ut non vehicula dui. Proin lobortis eu mi eget hendrerit. Vivamus molestie venenatis egestas. Fusce convallis, nisl aliquet rutrum tempor, nibh libero consequat sapien, in lacinia massa nisi id metus. In posuere leo massa. Sed quis feugiat lorem, ut consequat magna.

<p class="large-font">Pellentesque eu est ultrices...</p>

Emphasis

This is small text.

<small>This is small text.</small>

This is strong text.

<strong>This is strong text.</strong>

This is emphasized text.

<em>This is emphasized text.</em>

Miscellaneous

Variables.less

Buttons

// Buttons
@button-padding:	10px 20px;
@button-margin:		5px 0;

Icons

// Icons
@icon-size-medium:	24px;
@icon-size-large:	32px;

Forms

// Forms
@form-breakpoint:		@medium-devices;
@form-small-breakpoint:		@small-devices;
@form-margin:			5px 0;
@input-padding:			5px;
@input-max-width:		200px;
@textarea-max-width:		300px;
@textarea-height:		100px;

Horizontal Rule

// Horizontal Rule
@hr-margin:		20px 0;

Panels

// Panels
@panel-padding:		10px;
@panel-border:		1px solid;
@panel-content-padding:	5px;
@panel-content-margin:	0;

Buttons

<button type="button" class="button button-default">Default Button</button>
<button type="button" class="button button-orange">Orange Button</button>
<button type="button" class="button button-gray">Gray Button</button>

Icons

icon-call
icon-youtube
icon-email
icon-facebook
icon-twitter-bird
icon-googleplus
icon-github
icon-desktop
icon-cogs
icon-person
icon-linkedin
icon-wrench
<i class="icon-name"></i>

(This webfont is generated by http://fontello.com open source project. Read FONT-LICENSE.txt.)

Medium Icons

<i class="icon-name medium-icon"></i>

Large Icons

<i class="icon-name large-icon"></i>

Social Media Links

<a href="http://www.youtube.com" class="link-youtube" target="_blank">
    <i class="icon-youtube medium-icon"></i></a>
<a href="http://www.facebook.com" class="link-facebook" target="_blank">
    <i class="icon-facebook medium-icon"></i></a>
<a href="http://www.twitter.com" class="link-twitter" target="_blank">
    <i class="icon-twitter-bird medium-icon"></i></a>
<a href="http://plus.google.com" class="link-google-plus" target="_blank">
    <i class="icon-googleplus medium-icon"></i></a>
<a href="https://github.com" class="link-github" target="_blank">
    <i class="icon-github medium-icon"></i></a>

Images

Responsive images

<img src="image.jpg" alt="" />

Full Screen Background Image

<div id="full-bg-image">
  <img src="background-image.jpg" alt="">
</div>

Forms

Basic Form

<form>
    <label for="email-example">
    <input type="email" id="email-example" placeholder="Email" />
    </label>
        
    <label for="password-example">
    <input type="password" id="password-example" placeholder="Password" />
    </label>
        
    <label for="checkbox-example">
    <input type="checkbox" id="checkbox-example" /> Remember me
    </label>
        
    <button class="button button-default" type="submit">Sign In</button>
</form>

Stacked Form

<form class="stacked-form">
    <label for="name-example-stacked">Name:
    <input type="text" name="name" id="name-example-stacked" placeholder="Enter your name"  />
    </label>
        
    <label for="email-example-stacked">Email:
    <input type="email" name="email" id="email-example-stacked" />
    </label>
        
    <label for="message-example-stacked">Message:
    <textarea name="message" id="message-example-stacked"></textarea>
    </label>
        
    <label for="checkbox-example-stacked">
    <input type="checkbox" id="checkbox-example-stacked" /> Checkbox
    </label>
        
    <label for="radio-button" class="inline-element">
    <input type="radio" name="radio-example" id="radio-button" value="option1" checked /> Checked radio button
    </label>
        
    <label for="radio-button-2" class="inline-element">
    <input type="radio" name="radio-example" id="radio-button-2" value="option2" /> Radio button
    </label>
        
    <p><button class="button button-default" type="submit">Submit</button></p>
</form>

Floating Labels

<form class="float-labels">
    <p><label for="name-example-float">Name:</label>
    <input type="text" name="name" id="name-example-float" placeholder="Enter your name"  /></p>
        
    <p><label for="email-example-float">Email:</label>
    <input type="email" name="email" id="email-example-float" /></p>
        
    <p><label for="message-example-float">Message:</label>
    <textarea name="message" id="message-example-float"></textarea></p>
        
    <p class="float-submit"><button class="button button-default" type="submit">Submit</button></p>
</form>

Styled Form

<form class="styled-form">...</form>
Examples
<input>
<input type="text">
<input type="email">
<input type="password">
<input type="checkbox">
<input type="radio">
<select>
    <option>Option 1</option>
</select>
<input disabled>
<textarea"></textarea">

Panels

Regular panel

This is regular panel.

<div class="panel">
    <h4>Regular panel</h4>
    <p>This is regular panel.</p>
</div>

Useful CSS Classes

.text-center
text-align: center

.text-right
text-align: right

.right
float: right;

.left
float: left;

.space
margin: 10px

.top
margin-top: 10px

.last
margin-right: 0

.clearfix
micro clearfix