: What is a difference in Css frameworks vs preprocessors I am somewhat confused as a graphic designer. What is that distinguish them. I know what both provide to some extent. Like I read about

@Pope1402555

CSS itself is static in the sense that it doesn't provide for logical blocks, resuable values, or self-contained functions. Preprocessors such as LESS and SASS add such functionality, creating a sort of CSS superset. These are written differently, though they resemble closely CSS. Because browsers expect plain CSS, styles written in one of the preprocessors will need to be processed into CSS.

Frameworks are collections of pre-built styles, usually covering typography, forms, grids, among other things. They provide an out-of-the box stylesheet(s), which can be used as-is or further customized. Such frameworks can be written in plain CSS, or in one of the preprocessor variants.

Vote Up Vote Down

@Shelley591

Noah's answer certainly isn't bad, though I always try not and compare CSS to any sort of programming language, as that often adds a different level of confusion.

I'd perhaps describe them as such:

A CSS preprocessor is a way to add conditional logic and/or writing efficiency to the process of making CSS. Since CSS is relatively verbose and contains no built in conditional logic, this is a way to achieve those things.

It's a pre processor because CSS is static. The browser demands a flat file, so all of that has to happen before the CSS file is published, hence the preprocessor.

A CSS framework is essentially a pre-built page layout grid system. That is typically the primary purpose. Many frameworks will also contain other pre-defined style elements (for things like forms, buttons, etc.) but it's primarily a page-layout shortcut. Many of the newer frameworks also enable you to create a responsive grid (meaning the grid will change based on display size) which is typically a big time saver in a lot of cases.

The similarity between them would be that they are both usually used to speed up the process of building a site. The preprocessing language allows you to write and maintain CSS faster. The framework gives you building blocks to work with to get to where you want to end up faster.

Vote Up Vote Down

@Murphy569

CSS Preprocessors like SASS, LESS, and Stylus are tools that enhance the base functionality of CSS. Though it wouldn't be entirely accurate, it's a convenient analogy to think of them as languages. Preprocessors are designed to improve the development and maintenance of web projects, be they small or large web sites, apps, browser plugins, or anything else built using web standards.

Whereas a front-end framework is a conveniently packaged, documented collection of code -- usually CSS, HTML, and Javascript. Frameworks help developers and designers quickly build new projects from well-tested snippets/skeletons/examples. These frameworks might include code for grids, buttons, forms, tooltips, and other common building blocks.

How are Preprocessors and Frameworks related?

If a Preprocessor is like a language and a Framework is a bunch of code, then it should follow that frameworks can be written using preprocessors. And this is true. On top of basic CSS, many framework also offer their code using one or more preprocessors. For example, Twitter Bootstrap and Zurb Foundation are written using LESS and SASS, respectively.

P.S. - it sounds like you're interested in learning more about HTML and CSS. If so, looking at frameworks is a great way to learn about current practices and see how to solve common design challenges. Community is another perk of frameworks: Zurb and Bootstrap both have lots of users of various skill levels, so you'll always have people around who can answer questions as you go. Have fun!

Vote Up Vote Down