Useful Front-end Frameworks with Responsive Support

Few years ago, there is no front-end development. As web technologies evolving, HTML, CSS and Javascript have became more and more complicated. It separates front-end from backend developer's job description. Nowadays, we can see may companies are hiring front-end developers.

Front-end development is not easy, you need to know HTML, CSS and Javascript. Moreover, with different versions of browsers and platforms, you need to know how to make a cross-browser websites. With the latest trend - responsive design, it's not only make a web project harder but also induces more development times.

Well, we have some good stuff for you. We have found 14 responsive front-end frameworks for you. We listed out its UI components and Javascript plugins. Almost all of them come with responsive Grid system too. Personally, I have used Skeleton and Twitter Bootstrap. Depend on the nature of my project, sometimes, I use Skeleton because it's fast and lightweight. And sometimes, I choose Twitter Bootstrap because of its comprehensive collection of UI component and Javascript plugins..

These front-end frameworks give you the following benefits:

• Cross browsers. Front-end framework is well-tested across different browsers.
• Uniformity. UI components such as nav, buttons, labels, forms, dropdowns, tables... they are all styled to compliment each other.
• Rapid development. You can build a layout quick and easily. They usually have snippets and good documentation.
• Responsive. All CSS components and Javascript plugins are made to scale from Desktop to Mobile.

InK

Ink is an interface kit for quick development of web interfaces, simple to use and expand on. It uses a combination of HTML, CSS and JavaScript to offer modern solutions for building layouts, display common interface elements and implement interactive features that are content-centric and user friendly for both your audience and your designers & developers.

• HTML & CSS: layout, navigation, typography, icons, forms, alerts, tables
• JS: Gallery, Modal, Table, Tree View, Sortable List Date Picker, Tabs, Form Validator, Behaviors (Dockable, Collapsible, Close)
• Other: Sass Mixins

 

GroundworkCSS Beta

GroundworkCSS's flexible grid system enables you to do rapid development and scales to fit any screen size, from handheld devices to large format televisions. GroundworkCSS has been built from the ground up with the incredibly powerful CSS preprocessor, Sass. Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more. It’s translated to well-formatted, standard CSS using the command line tool or a web-framework plugin.

• HTML & CSS: grids, layout, typography, buttons, tiles, forms, tables, icons, social icons, responsive text, messages, alerts
• JS: Navigation, Tabs, Modals, Tooltips, Cycle2
• Other: Sass Mixins

 

Ivory

Flexible, & Powerful responsive web framework, Makes your web development faster and easier. It takes you all the way from 1200px on down to 320px.

• HTML & CSS: grids, typography, forms, buttons, alerts, paginations, breadcrumb, lists, tables
• JS: Tooltip, Tabs, Toggle switch, accordion

 

Zurb

Foundation is made by Zurb, a product design company in Campbell, California. FOundation is the most advanced responsive front-end framework, it has many template layouts, css style for UI components and also good collection of their own Javascript plugins.

• HTML & CSS: grids, layout templates, icon fonts, responsive tables, SVG social icons, pagination, breadcrumbs, side nav, buttons, typography, labels, alert boxes, panels, pricing tables, progress bars, tables, thumbnails
• JS: Dropdown buttons, split buttons, switches, flex video, lightbox, drop down, Interchange (switch image sizes for responsive layout), Joyride Tour guide, Magellan sticky nav, Orbit image slider, Reveal modal window, Tabs, tooltips
• Other: Custom skinned forms, SCSS Mixin

 

Grumby

Gumby 2 is built with the power of Sass. Sass is a powerful CSS preprocessor which allows us to develop Gumby itself with much more speed — and gives you new tools to quickly customize and build on top of the Gumby Framework.

• HTML & CSS: grids, forms, buttons, navigation, labels, entypo Icons
• JS: Toggles & Switches, Dropdowns, tabs, Drawer Modal windows
• Other: Custom skinned forms, SASS & Compass

 

HTML KickStart

Ultra–Lean HTML5, CSS, & JS Building Blocks for Rapid Website Production. It has a comprehensive coverage of UI components and also a few useful Javascript plugins. It's aiming to be designer friendly.

• HTML & CSS: grids, typography, buttons, button bars, lists, tables, icons, breadcrumbs, images, forms
• JS: Menu, Tooltips, Syntax Hightlighter, Tabs, Slidedhow, Form validations
• Other: Extra CSS Helpers

 

Maxmertkit

This framework was created Vetrenko Maxim Sergeevich, to make programmer's lives much easier.axmerkit is a CSS framework based on widget-modifier coding style.

• HTML & CSS: grids, layouts, typograpghy, badges, buttons, carets, forms, icons, labels, menu, progressbar, tables, dropdown, tooltips
• JS: Affix, buttons, Carousel, Modal, Notify, Popup, Scrollspy, Tabs
• Other: Sass, Coffee Script

 

Twitter Bootstrap

Twitter Bootstrap has been with us for quite a while, with its comprehensive UI components and easy to use grid and components, bootstrap has become many designer/developer favourite tools for rapid development. There are many third party Bootstrap goodies and Javascript plugins available too.

• HTML & CSS: grids, layouts, typography, code, tables, forms, buttons, images, icons, buttons groups, navs, breadcrumbs, pagination, labels, badges, thumbnails, alerts, progressbars
• JS: Transitions, Modals, Dropdowns, Scrollspy, Tabs, Tooltips, Popovers, Alerts, Buttons, Collapges, Carousels, Typeaheads, Affixes
• Other: Customizer, LESS CSS

 

Skeleton

Skeleton is a small collection of CSS files that can help you rapidly develop sites that look beautiful at any size, be it a 17" laptop screen or an iPhone. Skeleton is built on three core principles: Responsive Grid Down to Mobile, Fast to Start and Style Agnostic. Skeleton is quite a popular choice for most developer because it's lightweight and easy to use.

• HTML & CSS: GRids, Typography, Buttons, Forms, Media Queries

 

Kube

From the creator of Redactor editor, imperavi has also released a front-end framework to make designer/developer's life easier. Minimalistic and sufficient for everything, adaptive and responsive. Revolutionary flexible grid and beautiful typography. Absolute freedom with no imposed styling.

• HTML & CSS: Typography, grids, forms, tables, buttons, navs, icons
• JS: buttons, tabs, pills
• Other: LESS CSS

 

Helium

Helium is a frontend responsive web framework for rapid prototyping and production-ready development using HTML5 and CSS3. In many ways it is similar to both Twitter Bootstrap and ZURB Foundation - in fact, it uses bits of their code. Unlike either of these two frameworks, however, Helium is designed to be much more lightweight and easier to tinker with. Think of it as a classic car where you can pop open the hood and easily work on the engine. The compiled default CSS file weighs in at a comparatively tiny 30k, versus approximately 100k for Bootstrap and almost 200k for Foundation.

• HTML & CSS: grids, buttons, pills, typography, forms
• JS: Dropdowns, Form validation, Modal windows
• Other: Sass & Compass

 

The Markup Framework

The Markup Framework is a collection of layouts, widgets, typographic styles and other UI componenets to use as a starting point for your own Web designs.

• HTML & CSS: layouts, grids, typography, forms, buttons, heading, box, breadcrumbs, message, navlist, nav menu,
• JS: No Javascripts, pure CSS

 

Topcoat

Topcoat is a collection of CSS for clean and fast web apps. It is an open source library of user interface elements that are built without any JavaScript.

• HTML & CSS: icons, fonts, buttons, breadcrumbs, button bar, forms, Dropdown, Split-action, Slide switch, Tabs, Toggle buttons, Select, Slider, Spinners
• JS: No Javascripts, pure CSS

 

PureCSS

Pure is ridiculously tiny. The entire set of modules clocks in at 5.7KB minified and gzipped, without forgoing responsive styles, design, or ease of use. Crafted with mobile devices in mind, it was important to us to keep our file sizes small, and every line of CSS was carefully considered. If you decide to only use a subset of these modules, you'll save even more bytes.

• HTML & CSS: grids, typography, forms, buttons, tables, menus
• JS: No Javascripts, pure CSS
• Other: Skin builder, YU Library

 

Conclusion

Depend on your requirement, I must say, most of the time, you will need to tweak the framework to match your design. We shouldn't build a website according to the framework, because this will greatly restrict the full potential of a designer.

If the front-end design or layout is not important, Yes, we can use the framework. I did it with queness CMS, by using Twitter Bootstrap it saves 60% of the development times.

Sometimes, I only use Twitter Bootstrap's Grid system, and I removed anything else that's not needed. As a result, there is no perfect front-end frameworks.

• TAGS:
• CSS
• CSS3
• Framework
• HTML
• HTML5
• Javascript
• jQuery
• Responsive
• Tools