Getting it right with Sass and Bootstrap 5
Making it exciting!
There are multiple ways of adding Bootstrap to a project, like using a CDN link, which promises speed/snappiness. Another common option has been downloading, which has worked great and allows you to edit it as you continue to develop the project. However, since Bootstrap 4, there has been the package-manager option, allowing you to install it as a package. And it will work regardless of whichever framework you are using, be it laravel, vue/react-cli, nuxt or even symfony. This, my friends, is the holy grail of CSS flexibility and versatility. Why? How? You might ask.
See, if you’re a SASS/SCSS nut like I am, the flexibility that comes with that is unparalleled. Bootstrap package will ship with all its source code, and for the styling part, it is all written in Sass. There is a compiled file available if you need it, of course. Going back to the Sass part, you can add it to your project sass so that everything gets compiled at once, Bootstrap and your custom CSS code. Easy enough, right? The best part about this, however, is the sass variables.
All of Bootstrap source relies on a single file with a long list of variables, all of which can be overwritten. What’s fun about that is how you can just change literally everything about a project’s design by just overwriting these variables, without writing any single CSS rule/property, or using the dreaded !important rule. And it works for simple things such as changing the color of your primary button/links to changing container sizes across your breakpoints, to add as many spacings as you wish instead of the usual 5. You get to enjoy the cleanliness and orderliness of Bootstrap CSS, but at the same time having it work for you.
Now, if you like clean, organised, and consistent code like me, you will probably appreciate breaking down the entire sass source into modules/components depending on their purpose. In my case, I prefer to create subfolders for different files like so:
your-project/
├── assets/
│ └── scss/
│ ├─── components/
│ ├─── config/
│ ├─── custom/
│ ├─── modules/
│ ├─── pages/
│ └─── app.scss
│
├── pages/*
└── components/*
- config – has files that configure the entire design of the project e.g colors, fonts, variables, mixins.
- modules – for files that affect the top layer of the design, e.g typography, icons, layout, etc. Any common rules will also go here.
- custom – has files for overwritten/modified bootstrap components e.g forms, modals, tables, buttons, etc. In respective component files, I add more or overwrite certain properties of the component to achieve desired design/function.
- components – any custom components given in the design that are not based on any existing Bootstrap components e.g cards, sidebars, headers, footers.
- pages – has files that affect design for individual pages, where necessary to create a custom design file.
You could create the folders/subfolders to your liking, just remember that if it is a project that has a great team, you may want to make it easy and straightforward so the other team members can understand.
Using sass variables
In your config folder, or anywhere you please, create a `_variables.scss` file and add all the variables you wish to tweak with custom values. When processed, your variables will take priority over Bootstrap’s variables, since those have been set with the !default flag. For that to happen, you must declare the custom variables file before including bootstrap in the main sass. file.
Adding custom colors
To change the look and feel, you would need to add custom colors and fonts, which also involves messing a bit more with variables.
You can add a separate file for custom colors for the project design, or just add them in the variables file, all up to you. Personally, when I am choosing a color scheme for a project, I prefer to go use coolors.co, although there are other great alternatives. It provides a really easy way to generate color palettes and also allows you to save and easily export them to a project. Besides that, it also gives you color names and can derive colors from a picture, that way you can get the colors from your design to your project, if they had no labels.
That allows you to use them as variables that you can use anywhere in the project. If you wish to change these colors, it can be a bit hectic if you use the color names. Instead of using names, you can just number them with a common prefix, then every time you change, you just edit the values. This way, if a color is too bright/dull, you can change it there, and it will reflect all through, or if you want to change it to a completely different color.
So far, however, Bootstrap does not recognize these colors, so you cannot have them for buttons, texts, and backgrounds unless you add them to Bootstrap’s theme colors. Create a custom colors map, add the colors(name and value) and map-merge with theme-colors variable.
Then you can use these colors to style buttons, backgrounds, and text as you please. Bootstrap will infuse the colors into their components.
Going beyond
There is definitely a lot more to Bootstrap variables than colors and fonts, and design involves making lots more changes to finally achieve the desired end goal, no matter how complex the design is. Documentation for Bootstrap 5 offers the necessary variables to change for each component page, so that makes it easier to identify which variables to change to edit the design of that particular component. The same can be said for utilities. Experiment away!
Dave is a front-end web developer and designer.
He has been part of TCM since December 2018 and has worked on designs for dozens of projects.
He is passionate about design and articulate about code organisation and quality and loves to discuss matters front-end.
