Shulou(Shulou.com)06/02 Report--

This article focuses on "what are the web front-end development frameworks", interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn what are the web front-end development frameworks.

1. Bootstrap

Boostrap is definitely the most popular and widely used framework at present. It is a beautiful, intuitive and powerful Web design kit that can be used to develop cross-browser compatible and beautiful pages. It provides many popular and concise UI components, grid systems, and some commonly used JavaScript plug-ins.

Bootstrap is written in dynamic language LESS and consists of four parts:

Scaffolding-Global style, responsive 12-column grid layout system. Keep in mind that Bootstrap does not include responsive layouts by default. Therefore, if your design needs to implement a responsive layout, you need to turn on this feature manually.

The basic CSS-- includes basic HTML page elements, such as table, form, button, and image, for which the basic CSS provides an elegant and consistent variety of styles.

Components-A large collection of reusable components, such as pull menus (dropdowns), button groups (button groups), navigation panels (navigation control)-including: tabs,pills,lists tags, breadcrumb navigation (breadcrumbs) and page numbers (pagination), thumbnails (thumbnails), progress bars (progress bars), media objects (media objects), and so on.

JavaScript-- includes a series of jQuery plug-ins that can achieve the dynamic page effect of the component. Plug-ins mainly include modal window (modals), prompt effect (tool tips), "puff" effect (popovers), scroll monitor (scrollspy), merry-go-round (carousel), input prompt (typeahead), and so on.

Bootstrap is powerful enough to implement various forms of Web interfaces. To make it easier to develop with Bootstrap, there are many tools and resources that can be used together, some of which are listed below.

JQuery UI Bootstrap-this is a great resource for jQuery and Bootstrap enthusiasts to introduce Bootstrap's refreshing interface components into jQuery UI.

JQuery Mobile Bootstrap Theme-similar to the jQuery UI theme mentioned above, this is a theme created for jQuery Mobile. If you want websites developed in Bootstrap to be elegantly accessible on the mobile side, then this resource is easy for you to use.

Fuel UX-it adds some lightweight JavaScript controls to Bootstrap. Fuel UI installation, modification, update and optimization are very simple and convenient.

StyleBootstrap.info-Bootstrap provides several interface styles of its own, StyleBootstrap provides more color matching options, and you can apply different color matching to each component.

BootSwatchr-with this tool you can immediately see the effect of the modified theme. For the effect of each change, the app generates a unique URL for you to share with others, and you can modify your theme at any time.

Bootswatch-A large number of free Bootstrap themes are available.

Bootsnipp, an interaction authoring tool for online front-end frameworks, is a free element based on Bootstrap HTML/CSS/JavaScript architecture for designers and developers.

LayoutIt-- quickly and easily create Bootstrap-based front-end code through the interface drag-and-drop generator. Add Bootstrap-style components to your personal design through drag-and-drop actions and easily modify their properties.

II. Fbootstrapp

Fbootstrapp is based on Bootstrap and provides the same functionality as Facebook iframe apps and design. Contains basic CSS and HTML for all standard components, including typesetting, forms, buttons, tables, grids, navigation, and so on, in a style similar to Facebook.

III. BootMetro

The BootMetro framework is inspired by Metro UI CSS, which is based on the Bootstrap framework and is used to create Windows 8 Metro-style websites. It includes all the functions of Bootstrap, and adds several additional features, such as page tiling, application bar, and so on.

IV. Kickstrap

Kickstrap is a variant of Bootstrap. It is based on Bootstrap and adds a lot of app, themes and additional features to it. This allows the framework to be used alone to build a Web site without the need for additional installation. All you have to do is put it on your website and use it.

App is a packaged JavaScript and CSS file that loads and runs after some pages have been loaded. The app loaded by default are Knockout.js, Retina.js, Firebug Lite, and Updater, and you can add more app yourself.

Choosing a different theme can make your site stand out among the many similar sites built by Bootstrap.

Additional features are attachments used to extend the Bootstrap UI library, and their syntax is basically the same or similar.

5. Foundation

Foundation is a powerful, feature-rich and responsive layout front-end development framework, you can quickly create prototypes through Foundation, using it contains a large number of layout frameworks, elements and best examples to quickly create websites and app that can work on a variety of devices. Foundation is built with the strategy of mobility first, it has a large number of practical semantic functions, and uses the Zepto class library to replace jQuery, which can bring a better user experience and improve the speed of operation.

Foundation has a 12-column flexible and nested grid system that you can use to quickly create layouts suitable for a variety of browsing devices. It has many functions. It defines many styles, such as font typesetting, buttons, forms, and a variety of navigation controls. It also provides many CSS components, such as operator panel (panels), price list (price tables), progress bar (progress bars), table (tables) and scalable video (flex video) that can adapt to different devices. At the same time, Foundation also includes many JavaScript plug-ins, such as pull menu (dropdowns), joyride (website function guide plug-in), magellan (website fixed navigation plug-in), orbit (touch-enabled responsive photo carousel plug-in), reveal (pop-up box plug-in), sections (powerful tab plug-in) and tooltips (tooltip).

The Foundation framework also provides many useful extensions.

Templates (Stencils)-all UI elements in the Foundation framework are available for download in both Omnigraffle stencils and vector PDF formats, which you can use to easily and quickly draw wireframes and prototypes.

HTML templates-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 tags on the page.

Icon font (Icon Fonts)-A web font that contains custom icons.

SVG social networking icons (Social Icons)-A set of social networking icons (scalable vector icons) that do not depend on resolution.

Responsive tables-the implementation mechanism for responsive tables in the Foundation framework is to fix the first column on the left of the table, and then the other columns of the table can be accessed by dragging the scroll bar.

Turn off canvas layouts (Off-Canvas Layouts)-these layouts allow some web content or navigation controls to be hidden by default on the mobile device and reappear when the browsing screen becomes larger or the user acts accordingly. When the user takes relevant actions, the web content or navigation controls will slide and appear.

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

VI. GroundworkCSS

GroundworkCSS is a small refreshing framework added to the front-end framework 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 app that work on a variety of browsing devices.

GroundworkCSS has a flexible, nested streaming grid system that makes it easy for you to create any layout. The framework has many impressive features, such as grid systems on tablets and mobile devices. When the width of the screen is less than 768 or 480 pixels, the grid column on the page will automatically become separate rows instead of folding together. Another cool feature is jQuery's responsive text (ResponsiveText) plugin, which dynamically resizes the text on the page to fit the screen size of the browsing device. This plug-in is especially useful for scalable headings and when creating responsive tables.

GroundworkCSS contains a large number of UI components, such as tabs, responsive spreadsheet navigation, buttons, forms, responsive navigation controls, tiles (an elegant set of replacement for radio buttons and other default form elements), tooltips, dialog boxes, Cycle2 (a powerful, responsive content slider), and many other useful components. It also provides a lot of vector social network icons and icon fonts.

You can view the effect of this frame by switching between the navigation buttons at the top of the page and selecting different browsing devices. In this way, you can test the responsive layout of various components on different browsing devices.

GroundworkCSS's documentation is very well written and contains a lot of examples, and he also provides a variety of responsive templates to get you started faster. The only drawback I can think of about this framework is that I can't customize the content of the framework to download.

7. Gumby

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 web content to be rendered based on the resolution of the desktop and mobile devices. It supports a variety of grid layouts, including nested modes with mixed columns. Gumby provides two sets of PSD templates to facilitate your design on 12-column and 16-column grid systems.

Gumby provides a feature-rich UI toolkit, including buttons, forms, mobile navigation, tabs, jump link (skip links), toggle switch (toggles and switches, you can easily and quickly switch elements of class without the need for additional js operations), drawer function (drawers), responsive images and retina images and so on. To keep up with the latest design trends, Gumby's UI elements also include Metro-style flat designs. You can also use Pretty-style gradients, or mix the two styles as you want. The framework also provides an excellent set of responsive Entypo icons with independent resolution that you can use in your own Web projects.

Gumby has a good custom download selector, you can configure the color of each component and download it easily according to your own needs.

VIII. HTML KickStart

HTML Kickstart is a toolkit that can be used to easily create collections 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, typesetting, forms, buttons, tables, lists and cross-browser compatible Web components such as JavaScript slideshow, tabs, breadcrumb navigation, menus with submenus and tooltips.

You can use the UI components provided by 99Lime UIKIT to build your product line diagram.

IX. IVORY

IVORY is a lightweight, simple but powerful front-end framework that can be used for responsive layouts with a width of 320 to 1200 pixels. It is based on a 12-column responsive grid layout, including tables, buttons, tables, paging, toggle switches, tooltips, accordions, tabs and other components and styles commonly used in websites.

When you need a lightweight and flexible framework that does not require additional features and adapts to different browsing devices, IVORY is your best choice.

10. Kube

Finally, if your new project needs a simple enough framework that doesn't require complex extra features, then Kube will be the right choice for you. Kube is a minimized, responsive front-end framework that has no imposed styling, so gives you full freedom to develop your own stylesheets. It provides some basic styles of Web elements, such as grids, forms, typesetting, tables, buttons, navigation, links, images, and so on.

The Kube framework includes a concise CSS file for easily creating responsive layouts, as well as two JS files to complete tab and button operations on the page. If you want maximum flexibility and customization of Kube, you can download the developer version (developer version), which includes LESS files (including variables, mixins, and modules).

At this point, I believe you have a deeper understanding of "what is the web front-end development framework?" you might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.