When bootstrap 5 Alpha came out, I asked myself the questions, how well will it handle complex designs, will I end up hacking much of the css to get my desired outcome. My ultimate test would be to code a complex color theme design consisting of primary and secondary colors using bootstrap 5. I should be able to just change either one of these colors to give a different look and feel to the site. I wanted to find out how bootstrap would handle things like multiple backgrounds, clip-path and transparent gradient backgrounds. Below is the end design in two different color themes.
Watch the video to see the process I went through to achieve this in bootstrap 5 (alpha) and SASS.
My complex design comprised of a header with background image, and multiple color background gradients. It also had a curved edge at the bottom of the header.
The amazing powers of bootstrap variables
In the video, I show how you can integrate bootstrap variables into your custom sass file to give the desired look and feel to your website. From controlling the responsive sizes of the containers to specifying the rounded corners of elements, you truly do get some amazing powers.
Utilities are all the rage
Bootstrap 5 also goes big on utility classes, what does this mean for us frontend developers you may ask? well, this is another way to apply your styling without writing css. How this is achieved is by incorporating the basic styling rules that most designs use then use css classes to apply them. you would combine other style classes to create more complex styles. Below is an example of utility classes where the content item is given flex property, items are vertically aligned at the top and horizontally centered.
<div class="d-flex align-items-start justify-content-center">...</div>
Themimg made easy by SASS
The great thing about bootstrap is that you can download the custom sass version, and then you are able to do a lot more magic. For example, I have experimented with the color theme variables to give the header of our web page a multi-colored transparent gradient as shown in the snippet below. Note that I am only referring to the colors as primary and secondary in the css property.
The verdict
To summarize, I had some fun going deep into bootstrap sass configurations and I am quite impressed so far but will need to wait for the full version to come out so that I can test it with more complex designs. But what I can say is that you are able to use utility classes to compensate for the lack of flexibility bootstrap comes with. One good example is that you can actually use utility classes to implement flexbox layouts. Another bonus is that you can create/modify the utility classes, this will give you more power.
Top comments (0)