Tatami the CSS boilerplate for fly-kicking websites

A lightweight, beautiful, responsive-ready and style-agnostic CSS boilerplate.

Written in LESS.

View on Github Download

Tatami is composed from three main components:

The N-Grid

N-Grid is a fluid and nestable grid build around two main classes .grid and .unit.

A Base Stylesheet

A set of rules to make beautiful the main elements of an HTML page.

Variables and Mixins

Tatami defines a set powerful set of LESS mixins and variables to help you to customize and build on top of it.

The N-Grid.

N-Grid is a set of two less Mixins which can be mixed to empower your responsive site.

In your main less file try: 

.grid {
  .center-block();
  max-width: 1170px;
}

#grid > .n_grid(25px);

@media only screen and (max-width: 767px) {
  #grid > .mobile_ngrid(15px);
}
Once compiled the powerfulness of the .grid and .unit class will be available.

Wiew the source of this page for details.

1/2
1/2
1/3
2/3
1/3
1/3
1/3
2/5
3/5
1/6
5/6
Golden Ratio Big
Golden Ratio Small
Golden Ratio Big without gutters
Golden Ratio Small without gutters

The Base Stylesheet

A paragraph with style

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur id est eu sem commodo pulvinar. Duis urna tellus, ullamcorper eu tempor sit amet, tristique at turpis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed vel porta diam. Quisque at velit vel ante aliquet ornare. Nam facilisis lobortis sapien, eget pulvinar justo porta eu. Nullam faucibus nisl non risus convallis id imperdiet lacus convallis. Cras venenatis gravida placerat. Duis ac lectus quis lectus gravida condimentum viverra quis ligula.

A blockquote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris condimentum.

Unknown Author - Text

A pre

function myFunction()
{
alert("Hello World!");
}

A Button

Click Me For Action

A form

LESS Variables and Mixins

For a complete list of the embeded mixin check on github.

Default Variables

Tatami is highly customizable trough the following LESS variables:

@fontSize: 14px; //Controls root font size

@baselineSize: 20px; ////Controls root base line and element margins

@lateralSize: 30px; //Controls ul lateral size

@backgroundColor: #fff; //background color

@textColor: #444; //root text color

//hr and blockquote border colors 
@bordersColor: darken(spin(@textColor, 5), 10%);
@formsBorderColor: lighten(spin(@textColor, -10), 20%);
@formsFocusBorderColor: darken(spin(@textColor, 10), 20%);

@titlesColor: darken(spin(@textColor, 5), 10%); //titles color

//link and link:hover colors
@linkColor: lighten(spin(@textColor, -5), 10%);
@linkHoverColor: darken(spin(@textColor, 5), 10%);

//button colors
@buttonColor: #ddd;
@buttonHoverColor: #bbb;

//base font stack and titles font stack
@baseFontStack: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
@titlesFontStack: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
@codeFontStack: Consolas, monaco, monospace;