Quick Start to responsive Layout

Quick Start to responsive Layout

Learning responsive website design has lasted for a period of time. I have a general understanding of sass, less, compass, grunt, and so on. However, due to the unpredictability of products, and the frontend must use the sass language and is not applicable to bootstrap. Therefore, many existing responsive frameworks such as Bootstrap, Golden Grid system, less Framework 4, and Skelton cannot be used, choose to choose to use the susy framework. susy uses sass for writing. At the same time, Susy is designed as part of the Compass platform. Therefore, use Compass.

The official introduction of susy describes susy as follows: "Your markup, your design, your opinions, out math. "Because her design was originally intended as an auxiliary tool for raster layout, it determined that she was not a css framework, and she did not have many css components or js components.

Form elements play an important role in the website. <input>, <button>, <textarea>, <select>, and <label>, <a> other elements are everywhere on the webpage. The reusability of these styles is very high. A sass buttons component is very good. It is called Sassy Buttons. We can also learn about the website metadata dom arrangement.

Http://bourbon.io/Bourbon is doing well in this field, mark it.

Two articles on getting started with susy 1: http://www.w3cplus.com/preprocessor/susy-docs.html

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

Official site of susy: http://susy.oddbird.net/

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

Responsive website design recommendations: http://www.qianduan.net/responsive-web-design/

 

An article about 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 in w3c: http://www.w3.org/TR/css3-mediaqueries/#media0

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

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