Every time I would start a project while at Flatiron School, I would plan on using a css framework for styling. I would look through the documentation for different frameworks such as Bulma, Bootstrap, Semantic, and would be immediately put off. There was so much in the documentation and I didn't understand what I needed to add to my code in order to use the frameworks pre-styled elements. Instead of spending a little extra time to learn, I would focus on my project's functionality and end up styling with vanilla css from scratch.
Since completing the program, I am able to approach learning a bit more calmly, and am happy to announce that I learned my first css framework, Bootstrap. Looking back, I am not sure why I was flustered with it to begin with. It is very easy to use and has great documentation that is well organized and easy to understand. Below I will walk you through how to add Bootstrap to your projects and how to go through the documentation.
- Visit Bootstrap.com and click on GET STARTED. This will take you to an Introduction page.
- The intro page gives you a few options to add Bootstrap to your project.
- You can copy the css link and paste it in your html file( in the head section under the title where you would normally add links for stylesheets). This is best option if you will not be needing any functional components such as drop-downs or items that change in appearance.
- If you are barely starting on your project, you can copy the starter template which already has what you need to get started.
Now that you have added Bootstrap to your project, you have access to many pre-styled elements. To apply them, all you need to do is add class names to your html elements and attributes. For example, you would add "col" for column, "btn" for button. The documentation is split into sections that make it easy to find what you are looking for but you can also search for any element in the searchbar to easier find the documentation for it.
One of the huge advantages to using a css framework, other than the pre-styled elements, is the added responsiveness. Rather than creating multiple stylesheets or media queries for different screen sizes, you can add sizes to your an element for different breakpoints. For example, if you set up a column using the class "col-6-md", the column will take up half of the screen width(6 out of 12 possible column widths) for screen sizes medium or larger. If it is smaller, the column will resize to full width of the screen automatically.
With more practice, I can understand how Bootstrap can be a time-saver as well as keep your code cleaner, provide uniformity if you are working on larger teams(people aren't making up their own class names), and help make your project more responsive. Don't let the documentation intimidate you, it is a lot easier than you think.