Fraction.less 2.0 Beta

In 2011 I started my very first open source project, Fraction.less Boilerplate. At the time it was called Boilerplate Redux or some nonsense and it was basically HTML5 Boilerplate plus some really lame stylesheet I came up with. Since 2011 a lot of people have picked up and used the project much to my surprise! It’s my most popular GitHub repo even though not a single person has contributed yet, sadly. When I last left off, I had just begun working at my current employer. I added Font-Awesome 3 and made some minor tweaks and really haven’t touched the project since. Today I’m announcing that Fraction.less 2.0 is now available. If you check out the GitHub repo you’ll notice a new branch called “Development”. That’s where the 2.0.x dev magic is happening right now and the master branch has the latest stable code.

Project goals

The goals of Fraction.less were to give people a lot of power, give them most common modules and elements created by default, but at the same time still give people a totally blank canvas to work off of. If Fraction.less succeeded in these goals then anyone who picks up the framework should be able to

  • Override any and all defaults within seconds
  • Design a site that’s uniquely theirs, that looks nothing like the framework because the framework is blank!
  • Implement a number of common design patterns and layouts quickly but without having to fight against the framework’s defaults

Other front-end frameworks try to be all things to all people. They come with defaults that are far too opinionated and hard to override or customize. I don’t like to name names but I feel I have to call out Bootstrap for being far too opinionated and complex than it needs to be. Rather than giving people the minimum, blank canvas they need, Bootstrap gives you an already-built site. All you need to do is give your elements classes. Now, I don’t hold anything against Bootstrap nor do I believe they are wrong. I think the Bootstrap creators and maintainers are far smarter and more talented than I am and I can only hope to become as skilled as they are. What I do believe is that many people using Bootstrap currently could actually benefit more from a project like Fraction.less. Bootstrap was born from Twitter’s own internal need for a quick way to build up parts of their front-end and it does its job extremely well. If you wanted to recreate Twitter’s front end you could do it in just a few minutes with Bootstrap and a minimal amount of new code. But for those of us who want to start a new project with enough code to get started, with opinionated but easily override able defaults, yet still be left with a blank canvas, Fraction.less is here.

A Bootstrap site is recognizable a mile away. If you’re a non-designer who needs this sort of help then that’s great. But if you aren’t then why fight against and have to reverse engineer your framework to create the website you want. Fraction.less includes a lot of common UI elements and design patterns but it also lacks a lot of them too! If you want to implement a floating side nav you can code your own or use someone else’s. Fraction.less’ job isn’t to create that for you. It’s to get you to a point where you can create these things without having to worry about all the code that comes right before you get to that point. A framework should help you create, not create for you. Like I said earlier, there’s no such thing as a Fraction.less site, there’s only your website designed with the help of Fraction.less.

New Features and Improvements

The most requested feature so far has been for SASS support. The project is called Fraction.less, emphasis on the less part, because it was made to be styled with LESS but due to popular demand I’ve added (experimental) SASS support to the project.

New features in version 2 include:

  • Full support for Font Awesome 3
  • All-New CSS/LESS/SASS organization (like Bootstrap but way more friendly)
  • Improvements to the grid
  • More sane defaults
  • More customization without adding any complexity – in fact, I think despite the significant changes you’ll feel it’s easier to work with
  • Improved typography baseline
  • Upgraded to the latest versions of jQuery, RespondJS, VanityJS, and most other JS
  • Removed deprecated projects (LoadJS, old jQuery fallback)
  • Removed a lot of extra files and components that were either dead or unnecessary or poorly integrated
  • Replaced ValidateJS with ParsleyJS

Notable changes

I’m not going to go into every bit of the update here, just the parts that are worth mentioning.

All new sylesheet organization

Previously, Fraction.less imported a number of files at the top of the main stylesheet and had a bunch of minified code at the bottom including media queries. In version 2 I’ve moved every component that could be easily customized or replaced into its own stylesheet. This means more files but it also means simplicity. All you need to know is that your styles go in style.less (or .css or .scss depending on your stylesheet language preference) where it says they go. Once you open up the main style.xxx file you’ll know exactly what to do from there. Here’s the basics of what the main stylesheet looks like:

Main Stylesheet default contents
1
2
3
4
5
6
7
8
/* Import all components - Colors, type, grid, etc. */
@import url('imports_go_here');
/* More imports */

/* YOUR STYLES HERE */

/* Helper styles and media query imports */
@import url('helpers');

There are about seven or eight imports I believe. Yes, there are more files but now when you start a new Fraction.less project you automatically have a working front end (albeit a blank one) and the function of the stylesheets are obvious. I’ve moved and unmagnified the helper and media query code so it’s much easier to read, understand, and modify.

Now with more SASS!

A lot of people have asked me to include SASS support in Fraction.less. Now it’s here but to be clear, this is an experimental feature! I know SASS well enough and it’s not too dissimilar from LESS considering the recent updates to LESS but there are still some areas where I have trouble getting myself out of the LESS mindset and into the SASS mindset. That said, SASS support should work but is untested and experimental. I simply converted my LESS files to SASS using a lot of find and replace magic and did no testing.

If anyone would like to take over the development of a SASS branch please fork the repo and submit a pull request! I’d love a SASS expert to come on board and help maintain the SASS part of this project. I’m not sure if it requires a separate SASS branch or not but I would welcome a SASS person happily. My gut is that the SASS, LESS, and CSS can stay mixed together for now. People who don’t like LESS or don’t like SASS can just remove the directory and nothing changes.

Plain CSS is now a first class citizen

In previous versions I had run all my LESS through a compiler and just dumped it all out into the CSS folder. It was a minified mess. Now I’m happy to announce that by default the CSS directory has the same structure and readability as both the SASS and LESS directories. This means that those who use neither LESS or SASS can just as easily start using Fraction.less. WARNING: The plain CSS style.css file has almost the exact same number of import statements as the LESS and SASS style.xxx files. When working with LESS or SASS this is not an issue as the compiler will automatically concatenate them into a single file. However with plain CSS, all those imports mean a separate HTTP request for each file. You don’t want that! Instead you’ll want to go through and customize each imported CSS file on its own and then copy and paste them into the style.css file manually. The only reason I separated them out like that was so you could easily organize and replace parts of the stylesheet like you could with the LESS/SASS counterparts.

Dead files deleted

There were a bunch of old files that were no longer in use and I killed them. I also updated jQuery in both minified and unmagnified forms. Previously I had accidentally had jQuery 1.8.4 minified as a fallback but the uncompressed version was still at 1.6! This is now fixed and all jQuery files are at v1.9.1. Any optional JS library that was included but is no longer updated has been removed completely. You can find some of the old files inside of the temp/ directory.

Tests

Holmes.css is still in the test directory but implementing it is up to you. A new typography test has been added as well. It’s basically a plain CSS version of the baseline typography Fraction.less uses. If you open up /tests/type in your browser you’ll be presented with the default typography that the framework comes with. Simply modify /test/type/type.css to test any changes you’d like to make before transferring them over to the type.* file that you’ll be using in development or production.

Client-side Form Validation Made Easy

I replaced validate.js with ParsleyJS. Parsley is far easier to implement and can be used with or without jQuery. It works beautifully with HTML5 too. Here’s a quick demo of how to use Parsley to validate required fields and data types in your forms, check out the official docs for more details:

Implementing ParsleyJs
1
2
3
4
5
6
7
<form method="POST" action="whatevs" data-validate="parsley">
  <input type="text" data-required="true" />
  <input type="email" data-type="email" data-required="true" />
</form>
<!-- Include jQuery then Parsley (jQuery is already included in Fraction.less) -->
<script src="js/libs/jquery1.9.1.min.js"></script>
<script src="js/parsley.min.js"> <!-- Or copy/paste into your plugins.js -->

And that’s it! There’s a lot more Parsley can do but that code alone is enough to make sure users enter required fields and correct data types in your forms – and it’s all included in Fraction.less by default. ValidateJS was very nice and powerful but hard to implement and required a lot of code. I respect the project and author very much but I believe Parsley is a better choice for Fraction.less users right now.

Docs

Yes, I am finally getting around to writing documentation. The framework is pretty straightforward but I know that if you don’t write the docs no one will use your project. So with that, I’m off to start writing the docs and launch the new website. Go fork Fraction.less on GitHub. Enjoy!

Projects, Web design, Web development

« Pushing Too Hard Too Fast Russian Doll Git Repositories »

Comments