Top 10 Front-End Development Frameworks: Part 2

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

Top 10 Front-End Development Frameworks

In the first part of this article we’ve seen some nice frameworks all related to Bootstrap. If you are weary of all this Bootstrap, take a deep breath and get ready for something really different. Let’s start with the main competitor of Bootstrap – Foundation.

5. Foundation

Foundation is a powerful, feature-rich, responsive front-end framework. With Foundation you can quickly prototype and build websites or apps that work on any kind of device, with tons of included layout constructs, elements and best practices. It’s built with mobile first in mind, utilitizes semantic features, and uses Zepto instead of jQuery in order to brings better user experience and faster performance.

Foundation has a 12-column flexible, nestable grid powerful enough to let you create rapidly multi-device layouts. In terms of features it provides many. There are styles for typography, buttons, forms, and various navigation controls. Many useful CSS components are provided like panels, pricing tables, progress bars, tables, thumbnails, and flex video that can scale properly your video on any device. And, of course, JavaScript plugins including dropdowns, joyride (a simple and easy website tour), magellan ( a sticky navigation that indicates where you are on the page), orbit (a responsive image slider with touch support), reveal (for creating modal dialogs or pop-up windows),  sections (a powerful replacement for traditional accordions and tabs), and tooltips.

The framework also offers many useful add-ons.

  • Stencils – all UI elements available in Foundation in a form of Omnigraffle stencils and vector PDFs for building wireframes and mock-ups faster and more easily.
  • HTML Templates – handy, ready to go layouts for you to quickly start from and build on. To use them you simply grab the code and drop it between the <body> tags of your page.
  • Icon Fonts – these are custom icon sets of pictographic icons stored in a handy web font.
  • SVG Social Icons – a set of resolution-independent social icons.
  • Responsive Tables -  the mechanism of Foundation’s responsive tables is to take the first column and “pin” it to the left of the table, thus allowing you to scroll the other columns under it.
  • Off-Canvas Layouts – these layouts allows you to keep content or navigation on mobile devices hidden until either a larger screen size allows it to be visible or a user takes action to expose it. And when the last happens the content or navigation slides into view.

As you can see, Foundation is like a treasure-house for web developers/designers. And in order to get only what you need you can use the customizer to build your custom download.

6. GroundworkCSS

GroundworkCSS is a new, fresh addition to the front-end frameworks family. It’s a fully responsive HTML5, CSS and JavaScript toolkit built with the power of Sass and Compass which gives you the ability to rapidly prototype and build websites and apps that work on virtually any device.

It offers an extremely flexible, nestable, fraction-based, fluid grid system that makes creating any layout possible. GroundworkCSS has some really expressive features like tablets and mobile grids which maintain the grid column structure instead of collapsing the grid columns into individual rows when the viewport is below 768 or 480 pixels wide. Another cool feature is a jQuery ResponsiveText plugin which allows you to have dynamically sized text that adapts to the width of the viewport: extremely useful for scalable headlines and building responsive tables.

The framework includes a rich set of UI components like tabs, responsive data tables, buttons, forms, responsive navigation controls, tiles (a beautiful alternative to radio buttons and other boring standard form elements), tooltips, modals, Cycle2 (a powerful, responsive content slider), and many more useful elements and helpers. It also offers a nice set of vector social icons and a full suite of pictographic icons included in FontAwesome.

To see the framework in action you can use the resizer at the top center of the browser window. This way you can test the responsiveness of the components against different sizes and viewports while exploring the framework’s features.

GroundworkCSS is very well documented with many examples, and to get you started quickly the framework also provides you with several responsive templates. The only thing I consider as a weakness is the missing of a way to customize your download.

7. Gumby

Gumby is simple, flexible, and robust front-end framework built with Sass and Compass.

Its fluid-fixed layout self-optimizes the content for desktop and mobile resolutions. It support multiple types of grids, including nested ones, with different column variations . Gumby has two PSD templates that get you started designing on 12 and 16 column grid systems.

The framework offers feature-rich UI Kit which includes buttons, forms, mobile navigation, tabs, skip links, toggles and switches, drawers, responsive images, retina images, and more. Following the latest design trends the UI elements have Metro style flat design but you can use Pretty style with gradient design too, or to mix up both styles as you wish. An awesome set of responsive, resolution independent Entypo icons, for you to use in your web projects, is completely integrated into the Gumby Framework.

Gumby has also a very good customizer with color pickers which helps you to build your custom download with ease.

8. HTML KickStart

HTML KickStart is a HTML5, CSS and jQuery-powered toolkit for easily creating any type of layout. It provides clean, standards-compliant and cross-browser mark-up.

The framework has styles for grids, typography, forms, buttons, tables or lists and cross-browser web elements like a JavaScript slideshow, tabs, breadcrumb navigation, menus with sub-menus, tooltips, and more.

You can use 99Lime UIKIT which has all the UI elements of HTML KickStart ready to be used in your wireframes.

9. IVORY

IVORY is a lightweight, simple and powerful framework that can handle responsive layouts from 320px to 1200px widths. It is packed with 12-column fluid width grid, styles for typography and some essential UI components like buttons, toggle-switches, accordions, tabs, tooltips, and more.

IVORY is a perfect choice when you need a simple and flexible, multi device solution, and your design doesn’t requires extra functionality which other frameworks offer.

10. Kube

Lastly, if you need a solid, yet simple base without needless complexity and extras, for your new project, Kube can be the right choice. Kube is a minimal, responsive and adaptive framework with no imposed styling which gives you the freedom to create. It offers basic styles for grids, forms, typography, tables, buttons, navigation, and other stuff like links or images.

The framework contains one compact CSS file for building responsive layouts with ease and two JS files for implementing tabs and buttons in your designs. If you are looking for maximum flexibility and customization, you can download developer version which includes LESS files, with variables, mixins and modules.

Conclusion

I hope that now, after reading this article, you have a better perspective on the different choices available to you for your next projects. I’ve tried to put here the most popular, feature-rich, well-structured and promising frameworks which I know at the time of this writing. But as you already know things get changed with the speed of the light. So, if you know of some other cool framework not listed here, please share your knowledge in the comments thus making this article even more useful.

Comments on this article are closed. Have a question about front-end development frameworks? Why not ask it on our forums?

Top 10 Front-End Development Frameworks

<< Top 10 Front-End Development Frameworks

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.

  • Syaiful Amri

    Thanks for this article. Up until now I only knew Bootstrap and Foundation

  • Larry

    Where do frameworks like Ember.js fit in?

    • Ivaylo Gerchev

      Ember.js is different kind of framework.
      While Bootstrap, Foundation, etc. are used to build responsive websites with modern look and feel, Ember.js, on other hand, is web application framework used for creation of so-called single-page applications. Its function is to give structure and organization to your web apps by utilizing templates, models, views, controllers, and so on.
      So using one or another depends on what you want to create.

  • Giles Birch

    You might also want to mention http://purecss.io/ from Yahoo. Clean, small yet comprehensive and plays well with others. Has a customizer to carve out modules you don’t need, and a skin builder. All in all, nifty.

  • Alastair

    Here we have 10 almost identical frameworks which really offer nothing different from one another, excepting the default font type and perhaps the colour of the buttons.

    Not sure why all these energies are spent building so many different frameworks when collectively they could all build something amazing together.

    Choice is great and all but when the options are identical, what’s the point?

  • Robert

    It’s a shame that you didn’t mention right-to-left capability of each framework’s grid.
    It would narrow down the group for many.
    It’s also, very important to know this when you (plan to) wrap your strings in gettext functions to make your theme/template/website translatable.

    Also I find that many of these frameworks, although they use CSS pre-processors, still have a fair bit of (annoying) hard-coding. Although the pre-processor offers things like mixins, Interpolation: #{}, specifically for this.
    A quick example is hard-coded Google Font and Font Family names in @import statements. Although the Compass website has examples of how to do this with Interpolation: #{$variable-with-font-family-name-here}.

  • Mani

    Thought i work with raw javascript, jquery and css, will end up creating things of these sort for every project being handled. Pretty useful stuff, you have mentioned. Saved my time and effort.

    Thanks a ton… just went on an overview drive on bootstap and foundation….. cool stuff :)

  • Stuart Gardner-Vauhan

    Very useful articles. As a backed dev who’s used bootstrap successfully, this was a convenient insight into alternatives. Thanks :-)

  • Naqib

    Awesome post man. It helped me a lot.