8. CSS tooling

Notes:

The aim here is not to have an exhaustive understanding of any one framework, but rather to understand the pros and cons, what a CSS framework can do, and what general usage looks like.

Learning outcomes:

• Understand the value that CSS frameworks bring — consistency, organization, ready-made components and style guidelines, and built-in best practices.

• Understand the problems with CSS frameworks — they are often overkill (in terms of complexity and file size), new syntax to learn, your sites will start to look like everyone else's, and they can be hard to override if you want to customize them.

• Understand the basics of using popular CSS frameworks such as Bootstrap, Foundation, and Tailwind.

• Understand how they integrate into a web project.

• Understand how to weigh up the burden of adopting a CSS framework (e.g. handling integration and initial learning curve) versus the advantages (how much they can speed up development once you are familiar with them).

Notes:

The aim here is not to have an exhaustive understanding of any one preprocessor, but rather to understand the pros and cons, what a CSS preprocessor can do, and what general usage looks like.

Learning outcomes:

• Understanding the value of CSS preprocessors — bringing features to CSS that are not available natively (such as loops or if/else structures), and speeding up the writing of your code.

• Understand the problems with CSS preprocessors — for example, they often require learning new syntax.

• Understand the basics of using popular CSS preprocessors such as Sass and PostCSS.

• Understand how they integrate into a web project.

• Understand how to weigh up the burden of adopting a CSS preprocessor (e.g. handling integration and initial learning curve) versus the advantages (how much they can speed up writing CSS once you are familiar with them).