Front-End Frameworks

Front-End Frameworks are increasingly common in web development in the last few years.  They provide basic components for building a web presence in a standard way that can improve both the quality of experience of people’s interactions and the speed of development.  These are some projects that I’ve found useful.

Screen Shot 2013-11-21 at 10.38.32 AM

Foundation is probably the first front-end framework that supported building websites that were responsive to the device used to access them.  I used it in a project a few years ago and was very pleased with my experience.  Foundation 5 is planned for release imminently and continues to push the edge forward.  They offer, among other improvements, the ability to selectively include content based on media queries.

Screen Shot 2013-11-21 at 10.43.59 AMBootstrap is another great project that has really exploded in popularity.  Built by Twitter, this framework is ubiquitous across the web recently.  Bootstrap 3 offers an improved grid system and some semantic improvements.  I’ve built a number of projects using this framework and highly recommend it.

Screen Shot 2013-11-21 at 10.45.28 AMSemantic UI is another framework that has been gaining traction recently.  Semantic is structured around natural language conventions to make development more intuitive.  The code samples feel really intuitive and elegant.  This framework looks really promising and I’m excited to try it out in a project soon.

Twitter Tools: Bootstrap, Bower, and Recess

I’ve been excited about some of the tools coming out of the Twitter engineering team.

Their front-end framework, Bootstrap, has been getting acclaim all over the web for quite a while now.  And rightly so.  It’s a great package providing sane design starting points, including nice typography, a responsive grid, buttons, icons, menus, alerts, modal dialogs, carousels, and more.  There’s been a lot of interesting work done around the Bootstrap framework as well.  For instance, check out Font Awesome, a set of beautiful icons.

Bootstrap uses the LESS framework, a dynamic stylesheet language, extending CSS with dynamic behavior such as variables, mixins, operations and functions.  I’ve been using LESS with other projects and it’s really nice.  But once you’ve got all your LESS files, you will want to convert them to plain CSS and maybe even compress them.  I’ve found Twitter’s Recess to be a great tool for this.

Another great tool for managing projects with a lot of dependencies is Twitter’s Bower.  A front-end package manager, it can automatically install and upgrade dependencies.  You can install jquery, bootstrap, and just about anything else you might want with a single command.  Makes life just a bit simpler…