CSS Frameworks và Tài nguyên Thiết kế Responsive

Trong phần này, tôi sẽ tìm thấy một số thư viện CSS đáp ứng, Plugins và Hướng dẫn để giúp chúng ta nhanh chóng và dễ dàng phát triển đáp ứng bố trí trang web.

Foundation

Foundation bao gồm hàng chục các phong cách và các yếu tố để giúp bạn nhanh chóng đặt cùng nguyên mẫu có thể click. Các hình thức, các nút, tab, tất cả các loại công cụ tốt.

Grid cho phép bạn nhanh chóng đặt cùng bố cục trang cho các thiết bị di động và máy tính để bàn. Bạn không cần hai trang web khác nhau - Grid được xây dựng để tạo ra một kinh nghiệm vững chắc trên tất cả các loại thiết bị với cùng đánh dấu chính xác.

Less Framework 4

Less Framework 4 là một hệ thống lưới điện CSS cho việc thiết kế các trang web thích ứng. Nó chứa 4 bố trí và 3 bộ cài đặt trước kiểu chữ, tất cả đều dựa trên một mạng lưới duy nhất.

InuitCSS

inuit.css is built to work on smaller screens (such as tablets) and tiny screens (such as phones) straight out of the box with minimal effort.

Amazium

1140 CSS Grid

The 1140 grid designed to fits perfectly into a 1280 monitor. On smaller monitors it becomes fluid and adapts to the width of the browser, beyond a certain point it uses media queries to serve up a mobile version, which essentially stacks all the columns on top of each other so the flow of information still makes sense. Scrap 1024! Design once at 1140 for 1280, and with very little extra work, it will adapt itself to work on just about any monitor, even mobile.

Semantic

The Semantic Grid System set column and gutter widths, choose the number of columns, and switch between pixels and percentages. All without any .grid_x classes in your markup.

The Heads-Up Grid

The Heads-Up Grid is an overlay grid for in-browser website development, built with HTML, CSS, JavaScript.

Golden Grid System

Golden Grid System (GGS) splits the screen into 18 even columns. The leftmost and rightmost columns are used as the outer margins of the grid, which leaves 16 columns for use in design.

320 and up

‘320 and Up’ prevents mobile devices from downloading desktop assets by using a tiny screen’s stylesheet as its starting point. Try this page at different window sizes and on different devices to see it in action.

The Fluid Baseline Grid

The Fluid Baseline Grid system was built with typographic standards in mind and combines principals of fluid-column layouts, baseline grids and mobile-first responsive design into a resolution independent and device agnostic framework. It is packed with CSS normalization, beautiful typographic standards, corrected bugs, common browser inconsistencies and improved usability. You can finally have your cake and eat it too, all while making awesome websites.

The Columnal CSS

The Columnal CSS grid system is a “remix” of a couple others with some custom code thrown in. The elastic grid system is borrowed from cssgrid.net, while some code inspiration (and the idea for subcolumns) are taken from 960.gs.

Gridless

Gridless is an optionated HTML5 and CSS3 boilerplate for making mobile first responsive, cross-browser websites with beautiful typography.

SimpleGrid

SimpleGrid is prepared for 4 distinct ranges of screen size: screens 720px, screens 720px, screens than 985px, and screens than 1235px. This means that people visiting your site will receive a layout that’s tuned to the size of their browser window. Say goodbye to horizontal scrollbars.

Adaptive Images

Adaptive Images detects your visitor’s screen size and automatically creates, caches, and delivers device appropriate re-scaled versions of your web page’s embeded HTML images. No mark-up changes needed.

Mobilize.js

Mobilize.js is a HTML5 and Javascript framework to transform websites to mobile sites, allows web developers create mobile sites out of existing websites with little effort.

Responsly.js

Responsly, dead simple responsive widgets, written using CSS3 transformations and available as a jQuery Plugin. Not only do they allow you to reach mobile and tablet users with minimal effort, they also make your context scale up for desktop users with larger screens.