Front-end development is not an easy task. You need to know not only HTML, CSS, and JavaScript, but also how to design cross-platform websites for different browser versions and platforms. Nowadays, with the popularity of responsive design, front-end development becomes increasingly difficult and takes a longer time. This article collects 14 responsive front-end development frameworks to help front-end developers greatly simplify the development process. For each framework, the UI components and JavaScript plug-ins contained in the Framework are pointed out. Almost all frameworks adopt responsive grid systems. Using these front-end frameworks has the following benefits:
- Cross-browser. This has been confirmed.
- Consistency. UI components, such as navigation, buttons, labels, forms, drop-down boxes, tables ......, Maintain consistent style in design.
- Quick Development. You can quickly and easily build a layout. These frameworks are provided with detailed instructions.
- Response type. All CSS components and JavaScript plug-ins can well transition from desktop to mobile devices.
InK
Ink is an interface toolkit used to quickly develop Web interfaces. It is easy to use and expand. It can provide a solution for building layout, display common interface elements, and implement content-centric and user-friendly interaction.
- HTML & CSS: layout, navigation, layout, icon, form, prompt box, and table
- JS: Gallery, table, Tree View, sorting list, date selection plug-in, tab, Form Verification and some behavior (dock, collapse, close)
- Others: Sass Mixins
GroundworkCSS Beta
GroundworkCSS is an open-source project based on the Sass Preprocessor. It is mainly used to quickly build responsive Web applications. With a flexible and nested grid system, you can create a layout suitable for multiple browsing devices. GroundworkCSS also provides multiple UI components, such as navigation, buttons, icons, forms, Tabs, dialog boxes, and tooltip.
- HTML & CSS: grid, layout, layout, buttons, titles, forms, icons, Social Icons, responsive text, dialog boxes, and tooltip
- JS: navigation, Tab, prompt box, Cycle2
- Others: Sass Mixins
Ivory
This is a flexible and powerful responsive Web framework, making Web development faster and easier.
- HTML & CSS: grid, layout, form, button, prompt box, page number, breadcrumb, list, and table
- JS: prompt box, Tab, Toggle switch, and fold
ZURB
Foundation is designed by ZURB, a product design company located in Campbell, California. Foundation is the most advanced responsive front-end development framework. It has many layout templates, CSS style sheets, and excellent JavaScript plug-ins developed by itself.
- HTML & CSS: grid, layout template, icon font, Response Table, SVG Social Icons, page numbers, breadcrumbs) side navigation, buttons, layout, tags, prompt box, panel, price list, progress bar, table, thumbnail
- JS: drop-down button, split button, switch, Flex video, lightbox, drop-down, response layout (implemented by converting the image size), travel navigation, Magellan Sticky Nav, Orbit slide plug-ins, etc.
- Others: Customizable skin Forms (Custom Skinned Forms) and SCSS Mixin
Grumby
Gumby 2 is developed based on Sass. Sass is a powerful CSS Preprocessor that can be used to quickly develop Gumby.
- HTML & CSS: grid, form, button, navigation, Tag, Entypo icon
- JS: drop-down, floating window, Tab, Toggles & Switches)
- Others: Customizable skin Forms (Custom Skinned Forms), SASS, and Compass
HTML KickStart
This framework integrates HTML5, CSS, and JavaScript to help developers develop Web products quickly. It covers all the UI components and also contains some useful JavaScript plug-ins.
- HTML & CSS: grid, typographical buttons, lists, tables, icons, breadcrumb navigation, images, and forms
- JS: menu, code highlight plug-in, Tab, slide playback, Form Verification
- Others: CSS help documentation
Maxmertkit
Maxmertkit has complete documentation, contains a large number of instances, and provides the drag and drop function to generate code.
- HTML & CSS: grid, layout, badge, button, form, icon, label, menu, progress bar, table, drop-down, tooltip
- JS: button, carousel, notification, pop-up box, scroll bar, Tab)
- Other languages: Sass and Coffee
Twitter Bootstrap
Everyone is familiar with Twitter Bootstrap. With comprehensive UI components, easy-to-use grids and components, Bootstrap has become a favorite quick development tool for many designers and developers. Currently, many third-party Bootstrap programs and JavaScript plug-ins are available.
- HTML & CSS: grid, layout, layout, encoding, table, form, button, picture, icon, button group, navigation, breadcrumb navigation, page number, Tag, badge, thumbnail, prompt box, progress bar
- JS: Modals, Tool Tips, Popovers, Scrollspy, usel, and Typeahead) and so on.
- Others: Customizer and LESS CSS
Skeleton
Skeleton is a collection of small JS and CSS files. It can help you quickly develop beautiful websites and is suitable for various screen devices, including mobile phones. Skeleton is developed based on 960 Grid and is a UI framework. HTML & CSS: GRid, layout, button, form, and Media Queries)
Kube
Kube is a minimal, responsive front-end framework, including a concise CSS file, for convenient creation of responsive la S, includes two JS files to complete the Tab and page button operations.
- HTML & CSS: layout, grid, form, table, button, navigation, icon
- JS: button, Tab)
- Others: LESS CSS
Helium
Helium is a front-end responsive Web framework that uses HTML5 and CSS3 to quickly create prototypes and develop products. Helium is like Twitter Bootstrap and ZURB Foundation. In fact, Helium uses a lot of code. However, unlike the two frameworks, the Helium design is more lightweight and easier to modify. Helium is only about 30 KB, while Bootstrap has 200 KB, and ZURB has more than KB.
- HTML & CSS: grid, button, layout, Form
- JS: drop-down and Form Verification
- Others: Sass, Compass
Markup is a set of la S, widgets, UI components, and font layout styles. It can serve as the starting point for designing your own website.
- HTML & CSS: layout, grid, layout, form, button, breadcrumb navigation, navigation list, navigation menu
- JS: No JavaScripts, only simple CSS
TopcoatTopCoat is a free open-source UI element class library. The entire class library uses CSS and HTML instead of JavaScript. HTML & CSS: icon, Font, button, bread navigation, form, drop-down, slide switch, selection, scroll bar, switch button JS: No JavaScripts, only simple CSS PureCSS
Pure is a relatively small framework with only 5.7KB after compression and minimization. It does not use any JavaScript, just HTML and CSS. The CSS framework adopts a responsive layout and modular structure. The style of each module can be used independently.
- HTML & CSS: grid, layout, form, buttons, tables, menus
- JS: No JavaScripts, only simple CSS
- Others: Skin Builder and YU database.
Conclusion
Select a framework that matches the design as needed. We should not build a website based on the framework, because it will limit the designer's thinking to a large extent. If the front-end design/layout is not that important, we can choose to use a framework. Original article from: queness.com
