All geek questions in one place

HTML5 CSS3 Frameworks Sass / Compass / 320 & up / susy / HTML5boilerplate play together?

I studied tools and techniques for implementing responsive design.

I like the responsive mobile 1st approach, which is 320 and above, it says it uses an html5 template.

For general editing, management, and functions, Compass / Sass seems to have something to offer.

  • Unclear if HTML5 is included in Compass?
  • Does Compass seem to have similar capabilities?
  • Susy claims inclusion of 320 and above, which states that it uses HTML5 templated.
  • Am I confused since html5 templates coexist with Compass features? do i need to choose?
  • What is the best stack to consider here?
  • Are there compass plugins that provide a full stack?
+6
source share
2 answers

(HTML5 does not require flexible design.)

Each of these stylesheet technologies is based on a different one. All of them are "compiled" in CSS.

SASS is an important part. Learn the basics and start playing with the rest.

html5boilerplate . This is a cross-browser style sheet. This is a great starting point for CSS. Starting with version 2.0, it uses normalization instead of reset.

CSS : Clarke 320 and above is a great approach for mobile browsers that recognize media queries. Skeleton is another good one if you use mesh systems for site layout. It's like direct basic CSS files, such as templates plus grids and media queries.

SASS . If you want to write CSS faster and with less repetition, then an abstraction tool like SASS will help you. It processes the SASS syntax to generate CSS. Key features: variables, user-defined functions (mixins), converting existing .css, .less, .sass, .scss files to .sass or .scss formats.

Compass Compass is rather a collection of SASS mixes and includes a "framework". In the end, you will not like (for) creating your own SASS mixes. Compass has already solved many problems, and you can use their solutions like mixins and pre-created "CSS modules" that you can import.

  • The compass uses parts of the html5boilerplate, but it does not explicitly include all of this.
  • It is not normalized ( normalize.css ), it is reset based on Meyer reset.
  • You need to know what you want and then pull it out in Compass.

Susy : Susy is a percent based mesh system written in SASS that uses some of the features of Compass.

If I want to see how a specific problem was solved, I will look at Compass and see if they did it. I found that there is some overhead on Compass, so I don't use it often.

I personally use my own version of 320 and written in SASS, where I break each part into my own include file: colors, fonts, shapes, grids, headers, links, mixins, modernizr, tables, printers, sellers, 320, 480, ... etc. This keeps things beautiful and organized, and compiles into a single syles.css file, which is then minimized.

+10
source

Check octopress.org//this is a template for jekyll that works with compass + 320 & up ... divya manian website, nimbupani.com, uses octopress and html5boilerplate: http://nimbupani.com/redesign-notes.html

to use.

-2
source

Source: https://habr.com/ru/post/904622/

More articles:


All Articles