Top ten front-end development frameworks

Original source http://blog.jobbole.com/41950/

Editor's note: considering the length and readability of the original English text, ten front-end development framework will be divided into two parts presented to you. The upper part focuses on the bootstrap family framework, and the second section will share more of the other frameworks with you.

As the internet matures and more and more of us use mobile devices to access the Internet, the work of web designers and Web developers is becoming more complex.

Ten years ago, everything was much simpler. At that time, most of the users were sitting at the table with a large display to browse our pages. 960 pixels is a reasonable page width at the time. Those years our development work is mainly to deal with more than 10 desktop browsers, and by adding a few browser hack, to be compatible with the strange old version of IE browser. Today, with the rapid advances in handheld electronic devices over the past five or six years, everything has changed. We have seen the proliferation of smartphones and tablets of all sizes, e-readers, and browsers on television devices. The diversity of this equipment is increasing.

It is foreseeable that more and more people will use mobile devices to access the Internet in the near future, relative to the use of desktops. In fact, there are already a considerable number of people who surf the internet only through smartphones. This means that we web designers and developers need to know how to present and adapt to our products in the vast mobile realm, which is essential. While writing this article, although we haven't yet fully figured out how to bring the full content of desktop-side rendering to the same effect in handheld devices, the technology and tools used to achieve this are getting better.

The main strategy when you don't know how to browse your device's screen size is to use responsive web design. It is a way to output the corresponding page layout based on the size of the device's Browse window. Most browsers on small mobile devices, such as smartphones and tablets, will default to a Web page to fit their screen size, and the user can navigate through the page by zooming and scrolling. This approach is technically feasible, but it is worse from a user experience perspective. Small screen text is too small to read inconvenient, the link is too small hard to click, zoom and scrolling operation more or less will let people in the reading time distraction.

Responsive web design uses the same HTML document to match all end devices, and the responsive web design loads different styles based on the size of the device screen, thus rendering the optimal page layout on different end-devices. For example, when you view a Web page in a large-screen desktop browser, the content of the page may be divided into columns, and there are common navigation bars. If you look at the same page on a small screen smartphone, you'll find that the content of the page is in the same column, and that the navigation buttons are large enough to make it easy to click. You can see many examples of responsive web design on the media queries website. Open a design case in your browser and change the size of the browser window, and you'll see that the layout of the page changes depending on the size of the window.

So far, we can see that responsive web design can effectively help us cope with the growing diversity of terminal devices. So what are the actual tools and techniques that we can use to implement responsive web design when we design our web pages? Do each of us need to be a Web guru to harness this technology? Or is it enough to take advantage of the basics of the web that we already know? Is there any tool that can help us now?

At this time the front-end development framework gorgeous debut. Responsive web design is not difficult to implement, but it can be a little tricky to make it work on all target devices. The framework can make this work easier. With the framework, you can create responsive and standards-compliant websites with minimal effort, all simple and consistent. There are many benefits to using the framework, such as simple and fast, and consistency between different devices and so on. The biggest advantage of the framework is that it's easy to use, even if you only have a small amount of web knowledge, and you can do it without obstacles.

In short, if you take the current web development work seriously, then developing with the framework is not an option but something that must be done. Your site must be highly flexible to accommodate different browsers, tablets, smartphones, and a variety of other handheld devices.

A front-end development framework is actually a collection of a series of html/css/javascript components that we can use in our design. There are many front-end development frameworks, some of which are well written. For your convenience, here are some of the most powerful front-end development frameworks that are currently most widely used. Keep in mind that these frameworks are not just something like CSS grids, they include a complete front-end development framework.

1. Bootstrap

Boostrap is definitely the most popular framework currently used. It is a beautiful, intuitive and power-giving web design toolkit that can be used to develop cross-browser compatible and aesthetically pleasing pages. It offers a number of popular style-simple UI components, a raster system, and some common JavaScript plugins.

Bootstrap is written in dynamic language less, consisting mainly of four parts:

• Scaffolding --Global style, responsive 12-column grid layout system. Remember that Bootstrap does not include the ability to respond to layouts by default. Therefore, if your design needs to implement a responsive layout, you need to manually turn on this feature.
• Basic CSS--including basic HTML page features such as tables, forms (form), buttons (button), and pictures (image)--basic CSS provides elegant, consistent styles for these features.
• Component -collects a large number of reusable components, such as drop-down menus (dropdowns), button groups, and the navigation panel (navigation control)-including: Tabs,pills,lists tags, breadcrumb navigation (breadcrumbs) and page numbers (pagination), thumbnails (thumbnails), progress bars (progress bars), media Objects (multimedia objects), and more.
• JavaScript-includes a series of jquery plug-ins that enable dynamic page effects for components. Plug-ins mainly include modal windows (modals), cue effects (tool tips), "puff" effect (popovers), scrolling monitoring (Scrollspy), Carousel (carousel), Input hints (typeahead), etc.

Bootstrap is strong enough to implement various forms of WEB interfaces. To make it easier to develop with bootstrap, many tools and resources are available to use, and some of these tools and resources are listed below.

• jquery UI bootstrap--is a great resource for jquery and Bootstrap enthusiasts who can introduce Bootstrap's refreshing interface components into the jquery UI.
• The jquery mobile Bootstrap theme--is similar to the jquery UI topic mentioned above, which is a theme created for jquery Mobile. This resource is easy to use if you want to make the bootstrap development site accessible on the phone.
• Fuel ux--It adds a few lightweight JavaScript controls for Bootstrap. Fuel UI installation, modification, update and optimization are simple and convenient.
• Stylebootstrap.info--bootstrap offers several of its own interface styles, Stylebootstrap offers more color matching options, and you can apply a different color palette to each component.
• bootswatchr--using this tool you can immediately see the effect of the modified theme. For each change, the app generates a unique URL that you can share with others and change your theme at any time.
• bootswatch--offers a large number of free bootstrap themes.
• bootsnipp--Online front-end framework interactive component authoring tool is a free element for designers and developers based on the bootstrap Html/css/javascript architecture.
• layoutit--easily and quickly create bootstrap-based front-end code with the interface drag-and-drop generator. Drag-and-drop action to add bootstrap-style components to your personal design and easily modify their properties for ease of use.

2. Fbootstrapp

Fbootstrapp is based on Bootstrap and offers the same features as Facebook IFrame apps and design. Contains basic CSS and HTML for all standard components, including typography, forms, buttons, tables, grids, navigation, and so on, similar to Facebook's style.

3. Bootmetro

The Bootmetro framework is inspired by Metro UI CSS, built on the bootstrap framework, to create a Metro-style website for Windows 8. It includes all bootstrap features and adds several additional features, such as page tiling, application bar, and more.

4. Kickstrap

Kickstrap is a variant of bootstrap. It is based on bootstrap and adds many apps, themes, and additional features on top of it. This allows the framework to be used solely to build the site without the need for additional installation. All you need to do is just put it on your website and use it.

The APP is a package of JavaScript and CSS files that are loaded and run after some page load is complete. The app loaded by default has Knockout.js, Retina.js, Firebug Lite, and Updater, and you can add more apps yourself.

Choosing a different theme will make your site look different in a number of similar sites built by Bootstrap.

Additional features are attachments that are used to extend the bootstrap UI library, whose syntax is basically the same or similar.

5. Foundation

Foundation is a powerful, feature-rich front-end development framework that supports responsive layouts, and you can quickly create prototypes from Foundation and quickly create Web sites and apps that work on a variety of devices with a large number of layout frameworks, elements, and best practices that it contains. The foundation is built with a mobile-first strategy that has a number of useful semantic features and replaces jquery with the Zepto class library, which leads to a better user experience and speed of operation.

The Foundation has a 12-column, flexible, and nested grid system that you can use to quickly create layouts that adapt to a variety of browsing devices. It has a lot of features. It defines a number of styles, such as typography, buttons, forms, and a variety of navigation controls. It also provides a number of CSS components, such as the operator panel (panels), the price list (tables), the progress bar (progress bars), the table (tables), and the scalable video that can be adapted to different devices (flex videos). At the same time, the foundation also includes a lot of JavaScript plugins, such as drop-down menu (dropdowns), Joyride (website function boot plugin), Magellan (website fixed navigation plugin), Orbit (responsive image Carousel plugin that supports touch) , Reveal (popup box plugin), sections (powerful tab plugin) and ToolTips (tooltips), etc.

The Foundation framework also provides a number of useful extensions.

• All UI elements in the template (stencils)--foundation framework are downloaded in OmniGraffle stencils and vector PDF Two formats, which you can use to easily and quickly draw wireframe and prototype diagrams.
• HTML template--html templates can be easily used to quickly create page layouts. All you have to do is copy the template code and throw it between the tabs on the page.
• Icon Fonts-A Web page font that includes a custom icon.
• SVG Social Network icon (social Icons)-a set of social network icons that do not depend on resolution (scalable vector icons).
• Responsive table The implementation mechanism of the responsive table in the--foundation framework is the first column on the left of the fixed table, and the other columns of the table can be accessed by dragging the scrollbar.
• Turn off canvas layout (Off-canvas Layouts)-These layouts can allow some Web page content or navigation controls to be hidden by default on mobile devices, which appear when the browsing screen becomes larger or when the user is doing the appropriate work. When the user is doing something, the page content or navigation controls will slide.

As you can see, Foundation is like a huge treasure for web developers and designers. When downloading the framework, you can customize the content of the download frame.

6. Groundworkcss

GROUNDWORKCSS is a newly added small fresh frame in the front frame family. It is an advanced responsive html5,css and JavaScript toolkit based on sass and compass that can be used to quickly create prototypes and build websites and apps that work on a variety of browsing devices.

The GROUNDWORKCSS has a flexible, nested streaming grid system that allows you to create any layout. This framework has many impressive features, such as the grid system on the tablet and on the mobile side, when the width of the screen is less than 768 or 480 pixels, the table column (grid column) that was originally juxtaposed in the page automatically becomes a separate row instead of being folded together. Another cool feature is the jquery Responsive text (responsivetext) plugin, which dynamically adjusts the size of the page text to fit the screen size of the browsing device. This plugin is especially useful for scalable headings and for creating responsive tables.

GROUNDWORKCSS contains a number of UI components, such as tabs, responsive data table navigation, buttons, forms, responsive navigation controls, tiles (an elegant set of alternative radio buttons and other default form elements), ToolTips, dialogs, Cycle2 (a powerful, Responsive content Sliders) and many other useful components. It also provides a number of vector social network icons and icon fonts.

You can view the effects of this frame by toggling the navigation buttons at the top of the page to select different browsing devices. In this way, you can test the response layout of various components on different browsing devices.

Groundworkcss's documentation is very well written and contains a lot of examples, and in order to get you started faster, he also offers a variety of responsive templates. The only drawback I can think of with this framework is the inability to customize the frame content to download.

7. Gumby

The Gumby is a simple, flexible and stable front-end development framework based on sass and compass.

Its streaming-fixed layout (fluid-fixed layout) automatically optimizes the content of Web pages to be rendered based on desktop and mobile device resolution. It supports a variety of grid layouts, including multi-column mixed nesting patterns. The Gumby offers two sets of PSD templates that allow you to design on 12-and 16-column grid systems.

Gumby provides a feature-rich UI toolkit that includes buttons, forms, mobile-side navigation, tabs, jump link (skip links), Toggle switches (Toggles and switches, which can quickly and easily switch the class of elements, Without the need for additional JS operation), drawer function (drawers), responsive images and retina images, etc. To keep up with the latest design trends, Gumby's UI elements also include the Metro style flat design, you can also use the pretty style of the gradient design, or according to your ideas to blend two design styles. The framework also offers an outstanding set of responsive, independent resolution ENTYPO icons that you can use in your own Web projects.

Gumby has a very good custom download selector, you can configure the colors of individual components and download them as you want.

8. HTML KickStart

The HTML Kickstart is a toolkit that you can use to easily create a collection of html5,css and jquery for any layout. It provides clean, standards-compliant and cross-browser compatible code.

The framework provides a variety of stylesheets, including grids, typography, forms, buttons, tables, lists, and a number of cross-browser compatible Web components such as JavaScript slideshow features, tabs, breadcrumb navigation, menus with submenus, ToolTips, and more.

You can use the UI components provided by the 99Lime Uikit to build your product wireframes.

9. IVORY

The IVORY is a lightweight, simple but powerful front-end frame that can be used for responsive layouts of 320 to 1200 pixel widths. It is based on a 12-column responsive grid layout that contains tables, buttons, tables, pagination, toggle switches, ToolTips, accordion, tabs, and other commonly used components and styles in websites.

Ivory is the best choice when you need a lightweight, flexible, non-additional feature, and a framework that adapts to different browsing devices.

10.Kube

Finally, if your new project requires a simple enough framework that does not require complex additional functional components, then Kube will be the right choice for you. Kube is a minimal, responsive, front-end framework that does not impose style designs and gives you full freedom to develop your own stylesheets. It provides some basic styles of web elements, such as grids, forms, layouts, tables, buttons, navigation, links, and pictures.

The Kube framework includes a concise CSS file for easy-to-use creation of a responsive layout, plus two JS files to complete the tab and button operation of the page. If you want kube maximum flexibility and customization, you can download the developer version (Developer version), which includes less files (including various variables, mixins, and modules).

Summarize

I hope that after reading this article, when you choose a framework for a new project, you can have a better understanding of the various frameworks. In this article, I try to list some of the front-end development frameworks that I know are the most widely used, most versatile, and structurally optimal. However, as you know, the world is changing rapidly, so if you know the other excellent development frameworks that are not listed in this article, you are welcome to share with us in the comments, which will make this article more helpful, thank you.

Top ten front-end development frameworks (RPM)