Sometimes we don't have a design system in our hands or we simply want to get a project online as quickly as possible. And for others coding in CSS is not their strong suit. I think all the programmers have already used or at least heard about Bootstrap so I am not going to talk about what this specific framework is. Especially because I will explain how to use one of the most popular UI Libraries in the React.js universe and how we can make it more appealing.
If you've heard of Bootstrap, then you should already know what the Bootswatch project is. For those who do not know, it is simply a collection of free themes for Boostrap. But what a lot of people don't know is that we can combine reactstrap with bootswatch and have fully functional JavaScript components with a totally different design than what we are used to.
How to setup
The configuration is simple, just paste this command in the terminal:
npm install reactstrap bootswatch
And in the index.js file, paste the following line of code:
import 'bootswatch/dist/quartz/bootstrap.min.css';
In this case I am using a theme called Quartz, after that all components are customized. But you can choose many other themes without having to install a third dependency, just change the name of the theme. Make sure you have saved all the files and then visit your website, if you don't see any differences, do a simple refresh.
What about you ?
What is your favorite Bootswatch theme?
Top comments (0)