Base

A semantic, lightweight and extensible framework to power the next generation of responsive websites.

Download

Try Base

Start making changes to the layout or grid configuration code below and see how the site reacts.

Create the Layout _layout.less
Configure the Grid

Components

Base includes a lightweight CSS framework to get you started quickly. You can change it, you'll never need to override it.

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

Get Started

Starting to build with Base is easy. Inside the package are the source .less files, jQuery, Modernizr and a boilerplate to kick you off.

The README includes an overview of the framework, compiling LESS, and information for contributors. More documentation is on the GitHub Wiki.

Download v1.0.1 GitHub Repo