I think you should learn a css framework was said to me by my brother after i had spent two whole weeks having a breakdown on responsiveness. I remember reaching for my phone to search for css frameworks and i got a bit overwhelmed because i had no clue as to what i was staring at. This pushed me into doing a deep dive, and after hours and weeks of tutorials i definitely got a better understanding on what css frameworks were and how i could use them.
WHAT ARE CSS FRAMEWORKS?
Css frameworks are stylesheets containing a pre-defined set of rules that can be applied to the page that is currently being styled. They are tools used by developers to make their works easier, faster and smoother if used correctly. Examples of these frameworks include; tailwindcss, bootstrap, bulma, materialize, foundation e.t.c.
Css frameworks provides a lot of Advantages that is not limited to but includes;
- CSS frameworks makes your pages instantly look better through a bunch of element selector rules.
- Framework allows you to build softwares without having to code from scratch.
- Css frameworks helps you save time since lot of example code is given in the documentation website where you can refer if you get stuck. It also reduces the time spent on writing vanilla css codes.
- CSS framework will help keep your code away from bugs most of the times.
- Css frameworks helps Enforces standard web design patterns and styles.
These frameworks also have a couple of disadvantages that are not limited to but include:
Using a framework could restrict your knowledge. It could lead to a lack of understanding vanilla css.
Frameworks can be restricting. You may find yourself designing to the framework instead of selecting the best framework for your design.
Learning a framework can be seen as a tasking event. Since every framework is from the different creator(s), when you decide to change them, you also have to learn the syntax all over again.
Applying your own styles can be a bit difficult
HOW TO USE CSS FRAMEWORKS
Every framework comes with a documentation page that gives a step-by-step guidelines on how to incorporate the frameworks into your works. In some cases you could add these frameworks to your html page via cdn links.
For example, bootstrap can be added to your html page like this;
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
</head>
<body>
<h1>Hello, world!</h1>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
</body>
</html>
Frameworks can also be added via npm packages;
npm install bootstrap@5.2.1
These are the two easiest way of adding a framework to your designs.
Frameworks can help to speed up your learning process and help you build beautiful and neat websites. I definitely recommend using one, but only learn when you are ready to.
Top comments (0)