Twitter Bootstrap has really brought the idea of using front end frameworks to ease your web design chores. There have been others before it, but none quite caught the mass attention that Twitter Bootstrap has. Before these frameworks, you had to do everything by hand. You know what, there are some benefits to doing things that way – but in this day and age, we need to get work done yesterday. This is where Front End Frameworks can save us all time and effort, while still getting amazing results for ourselves or our clients. The front end is so important when you learn how to code. Enjoy this collection of Awesome Front End Frameworks, and maybe try a new one you haven’t seen yet in your next project.
Check out these great Front End Frameworks.
Foundation
Foundation is a heavyweight player in the front end framework space and has been around since 2011. Use it to quickly create robust production ready code for your websites and applications which will be compatible with any device.
Bootstrap
What else can we really say about Twitter Bootstrap? It has taken the world by storm and continues to be the de facto standard for creating mobile friendly and responsive applications for the web by using a front end framework. Did we mention it’s the most popular front end framework?
Semantic UI
Semantic takes the idea of markup and puts a new natural language spin on it. Instead of just tag names in your markup, semantic becomes tag agnostic by allowing you to use any html tags with UI elements in the framework. It’s an interesting approach to a front end framework, and one to keep an eye on.
Unsemantic
This fluid css grid based framework is the follow up to the original 960.gs. Unsemantic makes use of percentages instead of numbers of columns which is an interesting idea. By making use of Sass, Unsemantic is extensible, meaning you can use your own class names and customize as needed.
Bourbon Neat
A semantic grid based front end framework which makes use of Sass and Bourbon (Not the drinkable kind). In the quest to find the ultimate in clean syntax along with semantic power, Bourbon Neat makes use of Sass mixins thus eliminating the need for excessive use of presentation classes and overuse of div containers.
Jeet
All this grid markup may be making your head spin. With Jeet, you can describe your web markup the way a human might describe it. After all, none of us are the Google Bot, able to read machine friendly markup with ease. Try out Jeet to see if you can get things done faster with less code.
Pure
Pure is a collection of css modules that can be used in your next web application. It has a very small footprint at only 4.4kb. Like most popular frameworks, it has a penchant for mobile devices. If you’re a minimalist and enjoy taking a minimalist approach to your design, try out the lightweight Pure Framework and see how you like it.
UIkit
Making use of LESS, jQuery, normalize.css, and FontAwesome, the UIKit front end framework is really a fantastic piece of open source software. It is component based, so you can pick and choose how to assemble your layouts together. If you like, you can easily customize the basic style with themes. Lastly, it is fully responsive for phones and tablets.
Gumby
Remember Gumby? That flexible green character from some time ago? Yeah? Well this is not that Gumby. This is the ultra flexible, sytatactically awesome, and insanely simple front end framework built with the power of Sass. Gumby features a Grid, Toggles and Switches, Fancy Tiles, Shuffle, and Responsive Images.
Ink Interface Kit
Are you looking to build awesome responsive websites with ease and finesse? Of course you are. Ink is responsive with a grid system that is also percentage based instead of column numbered. The markup is easy to read and aims to be human friendly. Ink is also highly customizable, so you can be sure your own unique flair will still shine through.
Susy
Maybe you’re not a math genius, let’s face it – it’s tricky for some people. With Susy, your designs don’t need to rely on math, just your opinions and inspiration. Leave the math calculations up to Susy, it’s easy that way. Susy aims to fight css bloat, which seems to be a bit of an issue at times as developer search for the holy grail of UI design.
Kube
A very flexible and advanced framework, Kube will have you smiling like you used to when you were playing the Legend of Zelda on your trusty Nintendo Game Cube. As like most UI frameworks, the goal is to reduce the time it takes to complete trivial and common tasks so you can focus on the meat of your application and process.
Blueprint
Blueprint had been around for a little while now and is still a popular solution for many developers. There was some talk that it may become included by default in the popular Yii PHP Framework, however this was not to be. You can still take advantage of the Blueprint Front End Framework with its nice typography, flexible grid, and solid plugins.
Skeleton
More of a development kit than a UI Framework, Skeleton makes use of a collection of CSS files to help you quickly build awesome websites which will adapt responsively to any device used to view it. Skeleton has support for media queries, forms, buttons, typography, and more. Check them out to learn more.
YAML
YAML takes a modular approach to frameworks and UI Design. Think of it like building blocks, not unlike the Sophisticated Interlocking Brick System Lego’s you’re so used to. YAML dates back to 2005 and is still in widespread use today so you don’t have to worry about learning the nuts and bolts, then being hung out to dry when the creators decide they no longer want to maintain the project. YAML is mature, stable, may be just the framework you need for your next project.
Responsive.gs
Built by Denis Leblanc of hexcolortool.com and cssfontstack.com fame, http://responsive.gs is a very slick framework for lightning fast web design. It boasts a minuscule 1kb footprint when compressed, is mobile friendly, has support for 12 through 24 columns, gutters, clearfix, and box sizing polyfills. You need to check this framework out.
Responsive Grid System
Is it a framework? According to their website, it is not. Turns out boilerplate is also not the correct way to describe this software. Responsive Grid System is rather an infectiously easy way to construct a responsive website. Got It? RGS takes care of the math for you, provides the ability to scale to any width, and puts your content first.
Base
This front end framework is built by Matthew Hartman who is from Australia. Did you ever notice that Australians seem to have an incredibly good grip on internet design practices? Base is no different and powers some really awesome designs. It is fully cross browser compatible, responsive for mobile, and is built on a strong foundation of normalize.css.
Less Framework
Less Framework makes use of 4 layouts to power a CSS grid system that will help you to build websites which scale to any device. LF also has 3 different sets of typography so you can easily switch between styles to best match whatever your current project calls for. It is intuitive and easy to learn, and also powers many popular websites online today.
Mueller Grid System
If you like modules and modular development, then the Mueller Grid System is for you. It is based on Compass and provides a system for adaptive design which provides complete control over gutters, columns, the grid, and media queries. MGS also provides a unique feature in it’s fractional approach which allows you to specify fractions to your grid layouts.
Golden Grid System
The Golden Grid System uses an approach that divides a screen into 18 total columns. Only 16 columns are used for the actual design and content as the outer most columns are reserved for margin space. This makes for a very pleasing design with comfortable spacing when reading a site. It’s a really slick framework and is maintained by Joni Korpi in Finland.
960 Grid System
The 960 Grid System was around before all of this mobile first responsive design crazy hysteria gripped us all. It was one of the first to make use of a grid which divided a webpage into equal portions to ease the pain of layouts with tables or divs. It was originally used strictly for rapid prototyping, but many found success in production with 960.
Responsive Aeon
Simple. Fast. Intuitive. All of these describe this take on the CSS grid. Some of these frameworks can be a bit of a bloated monster and difficult to debug when things go wrong. Are you not up for that challenge? If you want minimalism and more control, maybe Responsive Aeon is worth a look. It focuses on convention over configuration and has only a 1kb footprint.
Conclusion
So there it is friends – A collection of 23 Awesome Front End Frameworks. Which ones do you use or plan to make use of? We’d love to hear, tweet us at @vegibit and share these frameworks with a friend using the buttons below! 🙂
