Top 10 Front-End Development Frameworks

Ivaylo Gerchev
This entry is part 1 of 2 in the series Top 10 Front-End Development Frameworks

Top 10 Front-End Development Frameworks

(Editor’s note: purely for reasons of length and readability, this article is the first of two parts. This one focuses on the Bootstrap family, more will be profiled in the second part.)

As the Web matures and the range of mobile devices we use to access it rapidly grows, our jobs as web designers and developers get considerably more complicated.

A decade ago things were much simpler. Then, it was almost certain that most of our users were visiting our sites while sitting at their desk, looking at a large monitor. 960 pixels was more or less considered as a good width for a web page. Our main care was dealing with the dozen or so desktop browsers and jumping through a few extra browser hacks to support quirky old versions of Internet Explorer. But now, with the boom of handheld electronic devices in the last five to six years, everything has changed. We’ve seen the introduction of smartphones and tablets of all different sizes, eReaders, browsers on TVs and many others. The diversity is only going to increase each day.

Soon, more people will be accessing the Web on their mobile and alternate devices than on a desktop computer. In fact, already a significant number of people use their mobile phones as their only access to the Internet. That means it is important for us designers and developers to understand how to deal with this entire mobile world. And although, as of this writing, we haven’t entirely figured out how to make all the content we are accustomed to seeing at our desk provide an equally pleasing experience on our handheld devices, the technologies and tools for doing that get better.

One of the primary strategies we use when we deal with unknown viewport size is the so-called responsive web design. It’s a mechanism for providing custom layouts to devices based on the size of the browser window. By default, most browsers on small devices such as smartphones and tablets shrink a web page down to fit the screen and provide ways for zooming and moving around the page. Although it technically works, it is not such a great experience. The text is too small to read, the links too small to tap, and all that zooming and panning around is more or less distracting.

The technique of responsive web design is to serve a single HTML document to all devices by applying different style sheets based on the screen size in order to provide the most optimized layout for that device. For example, when the page is viewed on a large desktop browser, the content can be placed into multiple columns with normal navigation elements. But when that same page is viewed on a small smartphone screen, it appears in one column with large links for easy tapping. You can see just how responsive web design works at the Media Queries gallery site. Just open a design in your browser and then resize the window very narrow and very wide, and watch as the layout changes based on the window size.

So far we’ve seen that, at least for now, responsive web design is an sufficient solution for fighting with the growing device diversity, but what are the actual tools and technologies to implement it in our designs? Do we have to be web gurus to handle it or will just the essential skills we already have be enough? Are there any tools that can help us?

This is where front-end development frameworks come into play. Responsive web design is not so hard to implement but it can be a little bit tricky to make it all work on all targeted devices. Frameworks make this job easier. They allow you to create responsive, standard-compliant websites with minimum effort while at the same time keeping everything simple and consistent. Frameworks give you a lot of benefits such as speed and simplicity, consistency across different devices, and much  more. One of the most important advantages is that they are so easy to use that even a person with minimal knowledge can utilize them without any problem.

In brief, if you are serious in today’s web development then using frameworks is a must and not an option. Nowadays your site must be extremely flexible in order to satisfy different browsers, tablets, smartphones and a whole bunch of other handheld devices.

A front-end web development framework is simply a collection of production ready HTML/CSS/JavaScript components that we can use in our designs. There are many frameworks out there but some of them stand out from the crowd. For your facilitation below you will find outlined some of the most powerful and popular frameworks available today. Bear in mind that these are not just CSS grids or so, but instead full-featured front-end development frameworks.

1. Bootstrap

Bootstrap is definitely the most popular and widely used framework, nowadays. It’s a beautiful, intuitive and powerful web design kit for creating cross browser, consistent and good looking interfaces. It offers many of the popular UI components with a plain-yet-elegant style, a grid system and JavaScript plugins for common scenarios.

It is built with LESS and consists of four main parts:

  • Scaffolding – global styles, responsive 12-column grids and layouts. Bear in mind that Bootstrap doesn’t include responsive features by default. If your design needs to be responsive you have to enable this functionality manually.
  • Base CSS – this includes fundamental HTML elements like tables, forms, buttons, and images, styled and enhanced with extensible classes.
  • Components – collection of reusable components like dropdowns, button groups, navigation controls (tabs, pills, lists, breadcrumbs, pagination), thumbnails, progress bars, media objects, and more.
  • JavaScript – jQuery plugins which bring the above components to life, plus transitions, modals, tool tips, popovers, scrollspy (for automatically updating nav targets based on scroll position), carousel, typeahead (a fast and fully-featured autocomplete library), affix navigation, and more.

Bootstrap is already powerful enough to empower any web interface. But in order to make more use of it and making the development process easier, you can find plenty of tools and resources that complement it. Some of them are listed below:

  • jQuery UI Bootstrap - an awesome resource for jQuery and Bootstrap fans that combines the power of both. It brings nicely the slickness of Bootstrap to jQuery UI widgets.
  • jQuery Mobile Bootstrap Theme - similar to the jQuery UI theme above, this is a theme built for jQuery Mobile. It is a handy resource if you have a web front-end built with Bootstrap and want to offer a similar look for mobile.
  • Fuel UX - this extends Bootstrap with additional lightweight JavaScript controls. It’s easy to install, customize, update, and optimize.
  • StyleBootstrap.info - Bootstrap has its own customizer but StyleBootstrap is a more detailed one with color pickers and the ability to style each component differently
  • BootSwatchr - a Bootstrap theme roller that shows the immediate results of your changes. For every generated style, the application generates a unique URL in case you want to share it with others or return and edit anytime later.
  • Bootswatch - a nice set of free themes for Bootstrap.
  • Bootsnipp - a good collection of design elements and HTML snippets for Bootstrap. It offers also form and button builders.
  • LayoutIt - drag and drop interface builder based on the elements and components of Bootstrap. It helps you to compose your design visually by placing and arranging different elements into your layout via drag and drop and then allows you to edit their properties. You get the base code and then expand it. Simple and easy.

2. Fbootstrapp

Fbootstrapp is based on Bootstrap and gives you the same functionality for Facebook iframe apps and designs. It includes base CSS and HTML for all standard components like typography, forms, buttons, tables, grids, navigation, and more, styled in the typical Facebook look and feel.

3. BootMetro

BootMetro is a framework inspired by the Metro UI CSS, which is built on top of Bootstrap, for creating Metro/Windows 8-styled websites. It includes all Bootstrap’s features plus some additional extras like tiled pages, an application bar, and more.

4. Kickstrap

Simply put, Kickstrap is a kind of Bootstrap on steroids. It uses Bootstrap as its base and extends it with many apps, themes and extras. This makes the framework a complete kit for building websites without the need to install anything. Just put it in your site and you are ready to go.

Apps are just bundles of JavaScript and CSS files that run together as a package after your page has finished loading. Some of the apps included by default are Knockout.js, Retina.js, Firebug Lite, and Updater. And you can add many more.

Themes give you the ability to differentiate from most Bootstrap websites’ standard look and feel.

Extras are fan-created additions to extend Bootstrap UI library. They usually use the same or similar syntax.

And Next Time…

Here we conclude our journey in the land of Bootstrap related frameworks. Stay tuned for the next part where more frameworks are waiting for you.

Comments on this article are closed. Have a question about CSS frameworks? Why not ask it on our forums?

Top 10 Front-End Development Frameworks

Top 10 Front-End Development Frameworks: Part 2 >>

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Mark Locker

    “In brief, if you are serious in today’s web development then using frameworks is a must and not an option.”

    I really don’t agree with this quote at all. In fact, if you’re really serious about web development then I think you’re less likely to be using one size fits all frameworks.

    Sure, grid systems and pre-made styles for buttons, typography etc. can save time and be good for prototyping too. At the end of the day though, they’re constraints. They come with a lot of bloat and can inhibit creativity.

    Don’t get me wrong, the business case for using them is also large. If you can get work done faster, then that can only be a good thing for the people making the investment.

    Ultimately, though, if budget is not an issue and you simply want the best work – using a framework isn’t desirable in my opinion.

    • Ivaylo Gerchev

      First,
      I don’t constrain YOU or ANYBODY else to use these frameworks. This is entirely YOUR decision.

      Second,
      The above-mentioned statement is just my opinion. And although it may seems a bit far-fetched it’s definitely not meaningless. The existence of so many frameworks out there is not without a reason. Their goal is to help us, and not to limit our creativity. The creativity depends on YOU, and not on whether you are using a framework or not. Moreover you are free to customize a particular framework to meet your needs which will take much less time than writing all needed code from scratch.

      And third,
      My thought is that, on the whole, using a framework is tremendously helpful. I’m not telling you that you must use EXACTLY these frameworks. You may create your own if you wish. But I think that in today’s web development starting every new project from scratch is simply unnecessary.

      • Mark Locker

        Just in case you took my comments the wrong way, I definitely wasn’t attacking your opinions… just putting my own opposing ones forward.

        Of course you’re not forcing me to use anything, but you are suggesting that to take web development seriously, you MUST be using them – which I don’t agree with.

        I do agree that they’re useful, without doubt – it’s just that specific quote I was opposing.

  • http://ggivan,com g

    i guess “Minimum effort for maximum effect!” means only compiling 40% of the this TOP TEN list.

    • http://www.onsman.com Ricky Onsman

      Heh. Can’t win. If we publish long articles, we get complaints. If we split them into two parts, we get ignorant comments like yours. BTW, you should figure out the difference between a comma and a period in your web address. But I suppose you’re above THAT KIND of criticism.

    • Ivaylo Gerchev

      It is clearly stated at the end of the article that there will be a second part which will cover the rest of the frameworks!

      How do you imagine that I will name my article “Top 10 Frameworks” and will include only four of them!? It would be silly, right?

      So please be more careful in your reading before you write such rash comments.

  • Sid

    This is a lazy compilation. It is all basically bootstrap themes. Please do some more research and cover true alternatives like Foundation 4 and Gumby Framework.

    • http://www.onsman.com Ricky Onsman

      Perhaps it’s you that’s being lazy, Sid. If you’d bothered reading to the end, you’d see there’s more to come. FYI, both frameworks you mention come up in the next part.

    • Ivaylo Gerchev

      I’ve always wondered why people are so neglectful and inconsiderate in their pronouncements.

      How can you make a correct conclusion when you see only half of the picture!? It’s simply impossible.

      So please wait to read the whole article before writing such hasty comments.

  • Roberto Ojeda

    Because omitted the Yahoo “YUI Framework pure”?, should be among the best ..
    By, bye see you!!!

    • http://www.onsman.com Ricky Onsman

      You’re entitled to your opinion, Robert. It just doesn’t happen to be the same as this writer’s opinion. You never know, your favorite might come up in the next part.

  • http://mariocisneros.me Mario Cisneros

    @Mark

    Completely agree, leveraging a particular framework depends on the project’s overall scope, budget, resources, timeline, etc. and certainly could prove useful in the right situation. However, I’ve been coding for 15-years and already have an extensive library of snippets that I can re-engineer for a particular project that meets with my high standards.

    I think it’s more prudent to review other frameworks, especially considering the level of expertise and wealth of knowledge one could benefit from, which could better improve one’s own expertise in a particular discipline that leads to a quality product.

  • http://www.olddeveloper.com/ Greg Bulmash

    Just going to say that titling the article “Top 10″ and then leaving off after 4 is deceptive. The title should have included a “Part 1 of 2″ subhead and should have at least contained 5.

    Furthermore, you don’t really quantify if these are the top 4 or bottom 4. Assuming that #1 means best, you’ve limited next week’s readership to those who would make a point of coming back next week to see which 6 didn’t make the cut. And those would be further limited to those who trusted your top 4 were good picks.

    I’m sure this might be a good article when all 10 are taken together, but as a two-parter, it was poorly executed.

    • http://www.onsman.com Ricky Onsman

      That’s a fair point about the ranking, Greg. For the rest, I had thought having the front page summary read “Ivalyo Gerchev has compiled a list of 10 frameworks that will help you build responsive websites. This article focuses on the Bootstrap family, with more coming in a second part” was enough to be clear but a similar opening sentence in the article would have helped. Not everyone comes in via the home page, of course. Thanks.

  • http://steve.deadlycomputer.com lord xeon

    I would have to agree, the title of this post says Top 10 Front End Frameworks. This post only goes up to the number 4.
    This is misleading at best, and down right lazy on the writer’s part.

    Yes, I have read to the end, and all it says is that there are more to come. Not how many more, not when, just hey, in the future maybe I’ll give you the other 60% of this list I promised you.

    The writer could have prevented all this hate by a few lines at the begining of the article:
    “Today I’ll look at the top Bootstrap related frameworks. Stay tuned later this week to see some of the others”.

    The point is, no where in this article does it tell you the Top 10 list is going to be broken up over multiple posts, which is a really bad problem if you ask me.

  • Christian

    Just want to leave a note that I actually read that this article is to be continued. No anger here.

  • http://www.carlosja.com Carlos

    I would have to agree with everyone. I’m not much to post hate comments. As there’s always way too many and discourages the writer.

    But you would’ve titled it to something like “Most Popular Front-End Frameworks Part 1″

    I was going through the article and was like wait there’s only 4 here lol where’s the other 6 LoL!!

    • http://www.onsman.com Ricky Onsman

      Fair enough, Carlos. I think “Most Popular” would attract even more criticism, but lord xeon’s point that a simple sentence at the start would have managed reader expectations better is a good one. That’s my role, rather than the author’s, and I’ll take care of it in future. There are good reasons for not using “Part 1″ in an article title, but there are other solutions. I know you folks are not haters, and I appreciate that you care about what we put up on SitePoint. BTW, the second part should be online today or tomorrow, depending on where in the world you are. Cheers.

  • Ivaylo Gerchev

    I really can’t understand why breaking up this article in two parts have to be such a HUGE problem.

    Instead of focusing on the usefulness of this article you guys just cavil about trivial things.

    Please stop acting childish and comment only if you have something really important and useful to say.

    “Those who know do not speak. Those who speak do not know.”
    - Lao Tzu, Tao Te Ching

  • http://twitter.com/AllThingsSmitty Matt Smith

    These are mainly grid systems/CSS frameworks. I was actually expecting to see more front-end frameworks like Ember, Modernizr, PhoneGap, etc. There’s nothing wrong with CSS frameworks but the the title seemed misleading.

    • Ivaylo Gerchev

      It is clearly stated that “these are not just CSS grids or so, but instead full-featured front-end development frameworks”, and also “A front-end web development framework is simply a collection of production ready HTML/CSS/JavaScript components that we can use in our designs.”

      There is nothing misleading in the title. Just use Google to search for “front end frameworks” and you will see that the frameworks/libraries you mention are not listed at all. Is Google misleading?

      Everyone may have their own definition for front end framework. If yours is different, no problem. But please bear in mind that defining Bootstrap, Foundation, etc. as front end frameworks is widely used and it’s not fabricated by me.

      And lastly I want to point out that Ember, Modernizr and PhoneGap have completely different goals and approaches, and you can’t put them in one category.

  • jazzcat

    All the acrimony would have been avoided if the title had included, “Part 1″. Next time, please include “Part 1″ in the title.

    • Ivaylo Gerchev

      Omitting “Part 1″ from the title is not because of me. It’s because of SitePoint’s rules. In my original title “Part 1″ was included.

      • http://www.onsman.com Ricky Onsman

        I think jazzcat was already talking to me, there, Ivaylo. And I hear you.

  • jazzcat

    This miscommunication is a good example of why there are editors, to filter the techie’s thoughts into a format close to what reader’s of polite and professional journals have come to expect. I believe we all appreciate the techie’s work, it’s just the format that needs a bit of help. There is so much to read, so much information in so many directions, so little time, that we are all in a hurry. Thanks for the 2-part article. I’m open to seeing part-3, part-4 and part-5, if that’s possible. It’s a very good and important topic. Thanks again. (Note, in the old days, at some shops, the techies weren’t allowed to speak to the clients. Too many misunderstandings, don’t speak the same language.)

  • craiger

    Good grief! I’ve never seen such a group of whinning comments before. It says very clearly at the end that there would be more frameworks to come. “Waaa-waaa! You lied. I want them NOW!”

    Ivaylo, THANK YOU for the informative article. I use bootstrap on some projects, and I was not aware of some of the resources you listed.

    • Ivaylo Gerchev

      Thanks craiger,

      I’m happy that my article has been useful to you.

  • http://www.inboundio.com Pushkar Gaikwad

    Thanks Ivaylo, excellent post, the bootstrap topic looks to be very comprehensive.Personally I find Bootswatch themes very basic, so you may want to also link to Damian Sowers (https://github.com/damian-sowers/) site http://www.appraptor.com/open-source/, he has open sourced 3 themes which looks very nice (I am in no way associated with Damian, just saw his post on Reddit some time back)