🧠Knowledge Series #14: CSS Frameworks Explained
Everything you need to know about CSS frameworks
🔒The Knowledge Series is a series of easy to read guides designed to help you plug the gaps in your tech knowledge so that you feel more confident when chatting to colleagues. Clearly explained in plain English. One topic at a time.
If you’re a free subscriber and you’d like to upgrade to unlock them you can do so below. Or you can find out more about paid access here.
Hi product people 👋,
Rich from the Department of Product here! Frameworks are an essential part of the product development process but for non-technical members of product teams, it can be pretty difficult to understand what frameworks actually do.
You may hear engineers debate the benefits of framework X over Y without really understanding what the point of each one is.
In this Knowledge Series, we’ll explore a specific type of framework you may have heard engineering teams refer to: CSS frameworks.
We won’t get bogged down too much in the technical details, instead we’ll focus on some of the reasons why development teams choose to use them, along with some pitfalls and potential issues to look out for if your team is considering adopting a front end framework.
Coming up:
What is a CSS framework?
Popular frameworks compared
Some real world examples of what CSS frameworks actually do
The downsides of being dependent on frameworks
Should you use a framework?
CSS: a quick recap
HTML, CSS and Javascript make up the essential skill set of a front end engineer. Without a solid understanding of each of these, front end development is almost impossible.
Some backend focused engineers really dislike working with CSS and many front end engineers will never touch the backend. Full stackers though, will spend their time split across everything.
HTML is responsible for the structure of the page.
CSS is responsible for the style of a page.
Javascript is responsible for adding interactivity and logic to a page.
These are gross simplifications I know but if you want a deeper dive into what each of these technologies do, check out the previous Knowledge Series on front end technologies.
What CSS does
CSS works with HTML to make web pages and applications look visually appealing or match design systems and brand guidelines.
CSS stands for cascading stylesheets and CSS is added through stylesheets, which are externally linked documents that work directly with HTML to change the way a page looks.
Some of the things you can do with CSS include:
Set the font family
Make text bold
Change the background color
One of the core parts of working with CSS involves using classes. Classes are re-usable styles that can be applied to HTML elements to transform them in some way.Â
So, for example, you might create a .button class which can be applied to a HTML element to transform it into a button: