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.
- 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'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
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
- 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
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 & 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
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
- 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 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
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 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 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,
- HTML & CSS: icons, fonts, buttons, breadcrumbs, button bar, forms, Dropdown, Split-action, Slide switch, Tabs, Toggle buttons, Select, Slider, Spinners
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
- Other: Skin builder, YU Library
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.