A front-end development framework is a collection of productized HTML/CSS/JavaScript components that we can use in our design. There are many front-end development frameworks, and some of them are well written. To make this clear, here are some of the most widely used front-end frameworks today. Remember, these frameworks aren’t just CSS grids, they’re whole front-end frameworks.
A, the Bootstrap
Boostrap is definitely one of the most popular and widely used frameworks. It is a beautiful, intuitive, and powerful Web design toolkit that can be used to develop cross-browser compatible and elegant pages. It provides many popular and concise UI components, a raster system, and some commonly used JavaScript plug-ins.
Bootstrap is written in the dynamic language LESS and consists of four parts:
Scaffolding – Global style, responsive 12 – column grid layout system. Remember that Bootstrap does not include responsive layout functionality by default. Therefore, if your design requires responsive layout, you will need to manually enable this feature.
Basic CSS – Includes basic HTML page elements such as tables, forms, buttons, and images. Basic CSS provides elegant, consistent styles for these elements.
Components — a large collection of reusable components, dropdowns, button groups, navigation control — including: Tabs,pills, Lists labels, breadcrumbs as well as Pagination, Thumbnails, Progress bars, media Objects and more.
JavaScript – includes a set of jQuery plug-ins that can implement dynamic page effects for components. Plug-ins mainly include modal Windows (Modals), Tooltips (Tooltips), “Puff” effects (popovers), scrollSpy (ScrollSpy), carousel (Carousel), TypeAhead (TypeAhead), and more.
Bootstrap is powerful enough to implement various forms of Web interfaces. Many tools and resources can be used together to facilitate Bootstrap development. The following lists some of them.
JQuery UI Bootstrap – this is a great resource for jQuery and Bootstrap enthusiasts to bring the clean interface components of Bootstrap into the 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 to make your Bootstrap site accessible on mobile, this resource is easy to use.
Fuel UX – This adds some lightweight JavaScript controls to Bootstrap. Fuel UI is easy to install, modify, update, and optimize.
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 theme changes. For each change, the app generates a unique URL that you can share with others, and you can change your theme at any time.
Bootswatch – Provides a large number of Bootstrap themes for free.
Bootsnipp — an online front-end framework interactive component creation tool, is a free Bootstrap HTML/CSS/JavaScript architecture for designers and developers.
LayoutIt – Create bootstrap-based front-end code quickly and easily with an interface drag-and-drop generator. Drag and drop bootstrap-style components into your personal design and modify their properties easily and easily.
Second, the 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 typography, forms, buttons, tables, grids, navigation, and so on, in a facebook-like style.
Third, BootMetro
The BootMetro framework is inspired by Metro UI CSS, built on the Bootstrap framework, for creating Metro style websites for Windows 8. It includes all the functionality of Bootstrap and adds several additional features such as page tiling, application bar, and so on.
Four, Kickstrap
Kickstrap is a variation of Bootstrap. It is based on Bootstrap and adds many apps, themes, and additional features to it. This allows the framework to be used to build websites alone, with no additional installation required. All you have to do is put it on your website and use it.
Apps are packages of JavaScript and CSS that are loaded and run after the page is loaded. The default apps loaded are knockout. js, Retina.js, Firebug Lite, and Updater, and you can add more on your own.
Choosing a different theme can make your site stand out from the many similar sites Bootstrap builds.
Additional features are accessories that extend the Bootstrap UI library and have the same or similar syntax.
Five, the Foundation.
Foundation is a powerful, rich, and responsive front-end development framework that allows you to quickly prototype and use the extensive layout frameworks, elements, and best practices it contains to quickly create websites and apps that work on a variety of devices. Foundation was built with a mobile-first approach, has a lot of useful semantic functionality, and uses the Zepto library instead of jQuery for a better user experience and faster execution.
Foundation has a flexible, nested grid system of 12 columns that you can use to quickly create layouts for multiple browsing devices. It has many functions. It defines many styles, such as typography, buttons, forms, and various navigation controls. It also provides many CSS components such as panels, Price tables, progress bars, tables, and Flex Video that can be adapted to different devices. At the same time, Foundation includes many JavaScript plugins, such as Dropdowns, Joyride, Magellan, Orbit, and Touch responsive image rotation. Reveal (popup plug-in), sections(powerful TAB plug-in), tooltips(tooltips), and more.
The Foundation framework also provides many useful extensions.
Stencils – All UI elements in the Foundation framework are available as Omnigraffle Stencils and vector PDF downloads, which you can use to quickly and easily draw wireframes and prototypes.
HTML Templates – HTML templates are easy to use to quickly create page layouts. All you have to do is copy the template code and drop it between the tags on the page.
Icon Fonts — a web font that contains custom ICONS.
SVG Social Icons — A set of Social Icons (scalable vector Icons) that do not depend on resolution.
Reactive tables – Reactive tables in the Foundation framework are implemented by fixing the first left column of the table, and then the other columns of the table can be accessed by scrolling and dragging.
Close off-Canvas Layouts — Layouts that allow web content or navigation controls to be hidden by default on mobile devices and reappear when the browser screen is larger or the user is doing something about it. Web content or navigation controls slide up when the user does something about it.
As you can see, Foundation is a huge treasure trove for Web developers and designers alike. When downloading the framework, you can customize the content of the downloaded framework.
Six, GroundworkCSS
GroundworkCSS is a new small and fresh 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 prototype and build websites and apps 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 a number of impressive features, such as a grid system on tablets and mobile. When the width of the screen is smaller than 768 or 480 pixels, the grid columns on the page that were originally arranged side by side automatically become independent rows instead of collapsing together. Another cool feature is jQuery’s ResponsiveText plug-in, which dynamically resizes the text on a page to fit the screen size of the browsing device. This plug-in is especially useful for scalable headings and for creating reactive tables.
GroundworkCSS contains a large number of UI components such as Tabs, responsive data table navigation, buttons, forms, responsive navigation controls, Tiles (an elegant set of components that replace Radio buttons and other default form elements), tooltips, dialog boxes, Cycle2(a powerful, Responsive content sliders) and many other useful components. It also offers many vector social networking ICONS and icon fonts.
You can see how the frame looks by toggling 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.
The GroundworkCSS documentation is very well written and contains many examples. It also provides a variety of responsive templates to help you get started faster. The only drawback I can think of with this framework is the inability to customize the framework content to download.
Seven, Gumby
Gumby is a simple, flexible and stable front-end development framework based on Sass and Compass.
Its fluid-fixed layout automatically optimizes rendered web content based on desktop and mobile resolution. It supports multiple grid layouts, including nested patterns with multiple jumbled columns. Gumby provides two sets of PSD templates for designing on 12 – and 16-column grid systems.
Gumby provides a rich UI toolkit that includes buttons, forms, mobile navigation, Tabs, Skip Links, toggles and Switches, which can quickly and easily switch an element’s class without additional JS operations. Drawer features (Drawers), responsive pictures and Retina pictures etc. To keep up with recent design trends, Gumby’s UI elements also include a Metro style flat design. You can also use a Pretty style gradient design, or blend the two styles as you wish. The framework also provides an outstanding set of responses with Entypo ICONS in independent resolutions that you can use in your own Web projects.
Gumby has a nice custom download selector that allows you to customize the colors of the components and download them as you like.
Eight, HTML KickStart
HTML Kickstart is a toolkit that makes it easy to create any set of layouts for HTML5, CSS, and jQuery. 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 cross-browser compatible Web components such as JavaScript slideshows, Tabs, breadcrumb navigation, menus with submenus, and tooltips.
You can use the UI components provided by 99Lime UIKIT to build your product line block diagram.
Nine, IVORY
IVORY is a lightweight, simple yet powerful front end frame that can be used in responsive layouts with widths ranging from 320 to 1200 pixels. It is based on a 12-column responsive grid layout and contains tables, buttons, tables, pages, toggle switches, tooltips, accordion, tabs, and other components and styles commonly found on web sites.
IVORY is your best bet when you need a frame that is lightweight and flexible, doesn’t require extra features, and can be adapted to different browsing devices.
Ten, Kube
Finally, if your new project requires a simple framework that is solid and doesn’t require complex extras, then Kube is the right choice for you. Kube is a minimal, responsive front-end framework with no imposed styling, thus giving you plenty of freedom to develop your own stylesheets. It provides basic styles for Web elements such as grids, forms, typography, tables, buttons, navigation, links, and images.
The Kube framework includes a concise CSS file for easy creation of responsive layouts and two JS files for TAB and button operations on pages. If you want the maximum flexibility and customization of Kube, you can download the Developer version, which includes LESS files (including variables, mixins, and modules).
Hope this article can be engaged in the Web front-end work of friends have help.