Getting Started

This is a basic HTML template to help you get started with Base. Apart from the grid system, Base includes a sensible reset to start styling your site on.


Quick Reference

These quick guides will help you get started. For more detailed instructions check out the documentation.

Grid (_layout.less)

Mixin Usage
.container() Apply to an element wrapping the column structure
.column(@columns, @offset, @padding) .column(8, 0, 0)

Buttons (_buttons.less)



Forms (_forms.less)

All HTML5 form elements are normalized to a set of core styles.

Mixins (_mixins.less)

Base includes LESS mixins for CSS3 properties, animations, gradients and some utility mixins. Check the source to see what's available.

Menus (_menus.less)

Add .menu-primary for a horizontal menu or .menu-secondary for a vertical menu.

.menu-primary

.menu-secondary

Type (_type.less)

Typography is controlled in _type.less. Base provides a clean and sensible reset for heading styles, paragraphs, tables, lists and others.

Variables (_variables.less)

Control colors and fonts across the site. Begins with:

  • Heading font-family - @headingFont
  • Paragraph font-family - @paragraphFont
  • Text color - @textColor
  • Base color - @baseColor
  • Primary color - @primaryColor
  • Secondary color - @secondaryColor