What is it?
Fraction.less is a HTML5/CSS3 Framework for rapid development. Fraction.less is well integrated with the LESS stylesheet language but you're free to choose regular CSS if you wish. The grid system is perfect for web design newbies as well as experienced pros, allowing anyone to quickly build deploy page layouts within minutes.Why use it?
Do we really need yet another boilerplate? Eh, sure, why not? Fraction.less lets you develop sites quickly. It's different from other frameworks in that it attempts to cut down on the amount of boilerplate code it comes with and emphasizes modularity and choice. It's incredibly simple with almost no learning curve.Custom workflows
Fraction.less incorporates the best parts of several development tools in one easy to use package. Use the tools you already know and love, there's no need to adapt to a new workflow, and benefit from the easiest, least convoluted, LESS-based grid system in the history of the entire universe. Fraction.less is everything you need without any extra bloat.from http://fractionless.info/
------------------------------------
Fraction.less Boilerplate
Fraction.less is an HTML/CSS quick-start kit to get your website or app front-end up and running quickly. It's HTML5 ready, utilizes backwards compatible CSS3, comes with a bunch of useful and common JavaScript functionality, and it has LESS and SASS support if you want it.
Why use it?
Unlike most other frameworks, you'll spend most of your time building on top of Fraction.less rather than undoing the defaults. Also, unlike some other frameworks, sites built using Fraction.less won't look like they were built using Fraction.less. The framework gives you a great set of minimal defaults and allows you to build sites that are your own without having to unravel a lot of complicated, hard to customize code.
Features
- Common styles for
- Site-wide color scheme
- Forms
- Responsive grid
- Helper classes (think image replacement, hidden elements, etc.)
- Helful LESS and SASS mixins
- Media query starting points
- Comprehensive CSS reset thanks to Normalize.css
- Optimized print styles
- Baseline typographic grid
- Common JavaScript functions (accordions, tabs, etc.)
- The latest jQuery
- HTML5 starting point
- Icon font (latest Font-Awesome)
- Various optimizations and goodies (robots.txt, humans.txt, .htaccess, crossdomain policy, etc.)
Components
Fraction.less Boilerplate uses code from the following projects:- jQuery 1.9.1
- Normalize.css CSS 'reset'
- LESS support
- SASS support
- Parsley.js for client side form validation
- Vanity JS for common JS effects
- Test Suite references original projects within the Usage document
Usage
Setup is pretty easy and Fraction.less comes with some tools to help you test your development environment.Initial Setup
- Download and extract the files to where you want to start developing or do a git clone git://github.com/billpatrianakos/Fractionless-Boilerplate.git
- Set your favorite LESS or SASS compiler to watch the project folder (or use
less.jsclient side) - Open up the folder in your favorite editor and start editing!
The Grid
The Fraction.less grid is based on the 1140 Grid System. It works out of the box but you have the option of being able to change the widths of each class by modifying a few LESS variables.Grid Usage
Basically, its like creating a layout with tables except without any tables. Your<body> is the canvas on which you create your grid。
