A lightweight, beautiful, responsive-ready and style-agnostic CSS boilerplate.
Written in LESS.
View on Github DownloadTatami is composed from three main components:
N-Grid is a fluid and nestable grid build around two main classes .grid
and .unit
.
A set of rules to make beautiful the main elements of an HTML page.
Tatami defines a set powerful set of LESS mixins and variables to help you to customize and build on top of it.
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.
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.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris condimentum.
Unknown Author - Text
function myFunction() { alert("Hello World!"); }
For a complete list of the embeded mixin check on github.
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;