An introductory study of responsive layouts

Learning responsive website Design has been a long time, the sass,less,compass,grunt and so on have a general understanding, but due to the unpredictable nature of the product, as well as the front-end requirements to use SASS language and not applicable bootstrap, So many existing responsive frameworks such as Bootstrap,golden Grid system,less Framework 4, Skelton, etc. are not available, choose to choose to use SUSY Framework, Susy use sass writing, and Susy was originally designed as part of the Compass platform, so use compass.

Susy's official profile describes Susy as follows: "Your markup, Your design, Your opinions, out math." Because she was originally designed to be a grid layout of the auxiliary tools, which determines that she is not a CSS framework, a lot of CSS components, JS components she did not.

The role of form elements in the site is very important,<input>,<button>,<textarea>,<select> and <label>,<a> and other elements are everywhere in the web. The reusability in these styles is very high, a sass Buttons component is very good called: Sassy Buttons, URL http://jaredhardy.com/sassy-buttons/ With her you can quickly build a suitable and beautiful buttons component, the form of bootstrap in a variety of forms, reasonable HTML and CSS Dom arrangement also has our learning place.

Http://bourbon.io/Bourbon is doing a good job in this area, mark it.

Two article Susy Primer 1:http://www.w3cplus.com/preprocessor/susy-docs.html

2:http://www.w3cplus.com/preprocessor/susy2-tutorial.html

SUSY Official website: http://susy.oddbird.net/

Responsive design and the combination of CSS3 Media queries: http://www.w3cplus.com/css3/responsive-design-with-css3-media-queries

A responsive web Design recommendation: http://www.qianduan.net/responsive-web-design/

An article Introducing Use-css3-media-queries: http://www.smashingmagazine.com/2010/07/19/ how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

Media-queries's article: http://www.w3.org/TR/css3-mediaqueries/#media0

CSS Media Queries & Using Available space:https://css-tricks.com/css-media-queries/

system:http://www.w3cplus.com/source/30-css-grid-system.html CSS Grid

An introductory study of responsive layouts