Don't waste time fighting your framework.

Build out a unique site fast

What is it and why use it?
Fraction.less is a HTML/CSS quick-start kit that'll get your site or app's front-end built in no time. Unlike other frameworks you won't spend the first half hour un-setting the defaults. Instead you'll be presented with a minimal yet comprehensive set of baseline defaults that'll get you started faster than you thought. With Fraction.less, less really is more.

  HTML5 Ready

Fraction.less comes with boilerplate code that encourages you take advantage of HTML5, CSS3, and responsive web design today - even in older browsers.

  True Customization

Unlike some other frameworks we know of Fraction.less gives you a very simple yet powerful set of defaults that you can truly build on, not fight against.

  Just Enough Goodies

You won't get floating navs or other UI elements in this framework but you will find the scaffolding to build out any front-end.

Quick Start

<div class="container">
  <div class="row">
    <div class="col-4">
      <!-- 4 Column Bucket-->
    <div class="col-4">
      <!-- 4 Column Bucket-->
    <div class="col-4">
      <!-- 4 Column Bucket-->

Step1. Create a container
Your markup needs at least one container to hold the rows that'll hold your columns.

Step2. Create a row
Inside your container you can put as many .row's as you'd like. Rows hold up to a maximum of 12 columns.

Step3. Create your columns
Using the grid classes, create any number of column elements whose class names add up to twelve.

Who's Using It?

Fraction.less isn't the most popular front-end starter kit out there but
it's being used on a fair number of websites

  • Bill Patrinakos
  • Clever Web Design
  • MoonWeather

What else should I know?

  • Comes with both traditional float-based and flexbox grid systems
  • Responsive grid is ready for mobile from the start
  • Uses LESS as it's CSS preprocessor
  • Comes ready to rock with a local server, watch task, LESS compilation, and JS linting Grunt tasks
  • Use as much or as little of the project as you like. No Bootstrap style lock-in here

 Read the Docs View Source