Front-End development Framework UI components and JavaScript plug-ins

Article Introduction: a popular front-end development framework that supports responsive design.

A few years ago, there was no real sense of front-end development. With the development of network technology, Web sites and Web applications become more and more complex, the front-end part of the work of the independent gradually become the front-end development. Today, we can see a growing number of companies recruiting front-end development positions.

Front-End development is not easy, in addition to mastering basic HTML, CSS and Javascript, because of different versions of browsers and platforms, you need to know how to do a Cross-browser Web site. The latest development trend-responsive design-not only makes WEB project development more difficult, it also takes more development time.

However, there are a lot of good frameworks that can help you, this article picks up 14 responsive front-end frameworks that list the UI components and Javascript plug-ins for each framework, and almost all use a responsive grid system. Personally, I prefer Twitter boostrap, which one do you like best?

These front-end frameworks can provide you with the following benefits:

Cross-browser: front-end frames are tested in different browsers.

Consistency: UI components such as navigation, buttons, tags, forms, drop-down menus, tables ... Their style is all in harmony with each other.

Rapid development: You can easily and quickly build a layout. They usually have code snippets and excellent documentation.

Response: All CSS components and Javascript Plug-ins can be extended from the desktop to the mobile side.

InK

Ink is a UI suite for fast development of the Web interface, easy to use and. It integrates HTML,CSS and JavaScript to provide modern solutions, build layouts, display common interface elements, and achieve content-centric and user-friendly interactions for your users.

HTML & CSS components: layout, navigation, typography, icons, tables, reminders, forms.

JavaScript components: Galleries, modal windows, tables, sortable date selectors, tabs, form validation, behavior (docking, folding, closing).

Other features: Support Sass mixing.

Groundworkcss

GROUNDWORKCSS's flexible grid system allows you to quickly develop and adapt to any screen size, from handheld devices to large size displays. GROUNDWORKCSS is built on the basis of a powerful CSS preprocessor Sass. Sass is an extension of the CSS3, adding nested rules, variables, mixing, selector inheritance, and many other features. Use command-line tools or Web frame plug-ins to convert to standard CSS code.

HTML & CSS components: grids, layouts, typography, buttons, tiles, tables, tables, diagrams, social icons, response text, messages, alerts.

JavaScript components: Navigation, tags, tooltips.

Other features: Support Sass mixing.

Ivory

Flexible, powerful responsive web framework that makes web development faster and easier. Supports a 1200-pixel to 320px-range response layout.

HTML & CSS Components: grids, typography, forms, buttons, reminders, pagination, breadcrumbs, lists, tables.

JavaScript components: ToolTips, tabs, toggle switches, accordion.

Foundation

Foundation was launched by California State's product design company Zurb. This is the most advanced responsive front-end framework, with many template layouts, CSS styles for UI components, and a lot of their own JavaScript plug-ins.

HTML & CSS Components: Grid layout templates, icons, fonts, responsive tables, SVG social icons, pagination, breadcrumbs, sidebar navigation, buttons, fonts, tags, reminders, panels, price lists, progress bars, tables, thumbnails.

JavaScript components: Drop-down buttons, split buttons, switches, adaptive video, light boxes, drop-down lists, navigation, display modal windows, tabs, tooltips.

Other features: Customized skin forms, scss mixed.

Grumby

Gumby 2 is built on a powerful Sass, Sass is a powerful CSS preprocessor that enables us to quickly develop our own Gumby and provide you with new tools to quickly customize your Gumby framework.

HTML & CSS components: Grids, forms, buttons, navigation, tags, entypo icons.

JavaScript components: Toggle switch, dropdown box, tab, modal window.

Other Features: Custom skin forms, SASS & Compass.

HTML KickStart

Ultra-Lean Html5,css & JS module for fast Web site production. It has a comprehensive UI component and some useful JavaScript plug-ins, and its goal is to become a friend of the designer.

HTML & CSS Components: Grids, typography, buttons, button bars, lists, tables, icons, breadcrumbs, images, tables.

JavaScript: Menus, ToolTips, syntax highlighting, tabs, slides, form validation.

Other Features: additional CSS tools.

Maxmertkit

This framework was created by Vetrenko Maxim Sergeevich, making life easier for programmers. Maxmerkit is a CSS framework based on the coding style of the part modifier.

HTML & CSS Components: Grid layout, Typograpghy, badges, buttons, inserts, tables, icons, tags, menus, schedules, pull-down menus, tooltips.

JavaScript components: Buttons, turntable, modal windows, notifications, pop-up layers, tabs, scrolling detection.

Other features: Support Sass, Coffee Script.

Twitter Bootstrap

Bootstrap is a concise and flexible Popular Front-end framework based on HTML,CSS and JavaScript, and a set of interactive components, pioneered by Weibo's pioneer Twitter solution in August 2011. Bootstrap has a very comprehensive and detailed development documentation, WEB developers can easily build a refreshing style of the interface and achieve good interactive results.

HTML & CSS components: grids, layouts, typography, code, tables, forms, buttons, images, icons, button groups, navigation, breadcrumbs, pagination, tabs, badges, thumbnails, reminders, progress strips.

JavaScript components: Transitions, modal windows, drop-down boxes, scrolling detection, tags, tooltips, pop-up layers, alarms, buttons, accordion, merry-go-round, automatically padded.

Other features: Support customization, less CSS.

Skeleton

Skeleton is a small collection of CSS files that can help you quickly develop any size and look like a nice web site, for example for a 17-inch laptop screen or an iPhone screen. Skeleton is built on three core principles: a responsive grid of compatible mobile terminals, quick start, and style independent. Skeleton is a pretty good choice for most developers because it's lightweight and easy to use.

HTML & CSS Components: Grids, typography, buttons, forms, media inquiries.

Kube

Kube is a front-end framework released by Imperavi (who is also the author of the famous Redactor editor) to make life easier for designers/developers. Simplicity but not simplicity, adaptability and responsiveness can use a variety of requirements. Revolutionary flexible grids and beautifully printed fonts, without any imposing style.

HTML & CSS Components: Typography, forms, grids, tables, buttons, navigation, icons.

JavaScript components: Buttons, labels.

Other features: Support less CSS.

Helium

Helium is a front-end responsive WEB development framework for rapid prototyping and practical development of HTML5 and CSS3 projects. It is similar to Twitter Bootstrap and Zurb Foundation in many ways. However, unlike these two frameworks, helium is designed to be lighter and easier to change. Think of it as a typical car, where you can open the hood and easily refit the engine.

HTML & CSS components: grids, buttons, typography, tables.

JavaScript components: Drop-down box, form validation, modal window.

Other Features: Support SASS & Compass.

Markup

The Markup framework is a collection of layouts, widgets, typography styles, and other UI components that can be consolidated according to your needs.

HTML & CSS Components: layouts, grids, typography, tables, buttons, titles, breadcrumbs, messages, navigation lists, navigation menus.

JavaScript components: No JavaScript, pure CSS.

Topcoat

Topcoat is a collection of CSS for simple and fast WEB application development. It is an open source library that does not require any JavaScript-built user interface elements.

HTML & CSS Components: Icons, fonts, buttons, breadcrumbs, button bars, tables, drop-down lists, slide switches, tags, toggle buttons, selection, sliders

JavaScript components: No JavaScript, pure CSS

Purecss

Pure is a lightweight, responsive CSS module that you can use in any Web project. Fully consider the use of mobile devices, keep the file size as small as possible, each line of CSS has been carefully considered. Pure builds on NORMALIZE.CSS and provides the style of layout and native HTML elements, plus the most common UI components. Believe that this is all you need.

HTML & CSS Components: grids, typography, tables, buttons, tables, menus.

JavaScript components: No JavaScript, pure CSS.

Other features: Skin maker, YU library.

Summarize

I have to say that, depending on the requirements of the project, most of the time you need to adjust the framework used to fit your design. We should not use the framework entirely to build a website, because it will greatly limit the potential of designers.

If the design or layout of the front end is not important, we can use the framework. For example, in the Web Site Admin system using Twitter Bootstrap, it can help you save 60% of development time.

Sometimes, you may just need to use a part of the framework, such as a grid system, so that you can delete anything you don't need. All in all, there is no perfect front-end framework to make the framework your assistant rather than an obstacle, depending on the needs of the project and the actual use of the scenario.