Responsive web-Design

With more and more types of mobile devices, web design has changed, responsive web design applications, there are many more popular framework to solve this problem, regardless of switching any device, will automatically according to the size of the device dynamically change, do not need to tailor the different categories of Web pages, Significant savings in development effort, responsive web design has become a trend.

First, the Popular Front-end (from_end) design Framework is many, probably the following several:

1. BootstrapBoostrap 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 sections:

• 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.

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.

Foundation The framework also provides a number of useful extensions.

• templates ( Stencils) All UI elements in the--foundation framework are downloaded in OmniGraffle stencils and vector PDF Two formats, which you can use to quickly and easily draw wireframe and prototype diagrams. The
• html template--html template makes it easy for you to quickly create a page layout. All you have to do is copy the template code and throw it between the tabs on the page.
• icon font (icon Fonts)-a Web page font that contains 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 response 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.
• 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).

Second, the popular debugging, verification

1.ProtoFluid 4Protofluid simplifies the development of liquid layouts, adapts to CSS and responsive design, and builds a precise, dynamic perspective. Developers can use Protofluid free of charge and also allow developers to use other extension tools, such as Firebug. 2.Viewport ResizerViewport Resizer is a browser-based test tool that can test the responsiveness of any website. Users can check the screen resolution of the page by simply dragging the page into the bookmark and clicking on the page they want to test. In addition, the Viewport Resizer comes with a resolution size that does not necessarily meet your needs, so users can also customize the addition of other types of screen sizes. 3.responsive.isThe user simply enters the URL to be tested, which automatically changes the size of the page based on the device you choose. 4.RespondrRespondr is a lightweight, easy-to-use tool that allows users to enter the URL of a Web page and then select the device you want to test, such as the iphone, IPad, desktop browser, and so on, to see how the page will look on different platforms. 5.FroontFroont is a web-based design tool that does not require programmer intervention, and provides designers with a visual online web design environment. 6.ResponsivepxResponsivepx is a simple, yet easy-to-use test tool that can test the effect of Web pages on different sizes of displays. In addition, the responsivepx allows you to adjust the length-to-width PX value to be displayed on your own. Users can use it online or test the Web page locally. 7.Responsiveresponsive allows you to see the test site showing different resolutions on the same screen without having to switch to a different mode. 8.ScreenflyScreenfly is a free test tool that can be used to test the display status of websites under different clients (different displays or mobile devices). 9.review.jsReview.js is a dynamic viewport system that provides efficient and responsive web browsing options. It is a purely JavaScript-enabled class library, with fewer requests making it less demanding for broadband, support for plug-in extensions, and the ability to support custom window-changing events. In addition, the system provides ' opt-in ' and ' opt-out ' responsive design status. 10.ResponsinatorResponsinator provides a simulated web interface to test your responsive design, providing a preview of Iphone,android,ipad,kindle and its many devices, and you can easily see the responsive design of the devices you need to support. 11.resizeMyBrowserResizemybrowser is a responsive web design tool that allows you to choose the size of the browser you want to test. Users can select or enter a custom size in 15 different preset sizes. 12.Responsive Design bookmarkletResponsive Design Bookmarklet is a response-style test tool that users need to drag and drop Web pages to the bookmarks bar above their bookmarks, and the browser will automatically apply. Users can view the preview of a Web page on different devices. 13.Adobe Edge Inspect CCAdobe Edge lets you preview and check responsive sites on your device. 14.I am MobileI am Mobile can test the display of Web pages in various windows, and will give some suggestions to make your site more mobile-friendly. 15.Retina ImagesRetina images is primarily used to test the display of images on different devices, which helps users develop high-definition images. Plus, you don't need to change any of the IMG tags, and the retina images is easy to install. [3]

Responsive web-Design