How To Create Your Custom Bootstrap Theme
As you surely know, Bootstrap is one of the most popular front-end frameworks (probably even the most popular framework). You may have tried different sets of Bootstrap themes, but what if none of them meets your needs? What if you want to create your own theme?
In this article, I am going to describe key steps that I follow to create a custom Bootstrap theme. At the end you will get a bonus. So, let’s begin!
The process of creating a theme requires time and patience. To save your time, I recommend using npm along with gulp. You can also use Grunt, Webpack, or another package manager.
Create a root folder and name it, e.g.: “myAwesomeThemes”. Configure npm via the package.json file for the necessary libraries. Use the following dependencies and devDependencies to create a theme:
Note: there are three dots at the top (…), which means that I left out some unimportant sections. You can find the full package.json file here.
Add the index.html file with all standard Bootstrap components to see how your custom theme looks. You can download it from here.
Add a new gulpfile.js file to the root folder. Its configuration will be presented later.
In your terminal, go to your theme workspace folder (cd your_path) and execute the npm install command. After it is finished, you will see a heavy (don’t panic 😉) “node_modules” folder in your root “myAwesomeThemes” folder. Create another folder for your future themes: dist. Create an “awesomeTheme” folder that will contain styles for a given custom theme. In particular, I recommend keeping three files there:
Finally, you will see the following structure:
So, what’s next?
SCSS should be compiled to CSS. Using Gulp, you can automate this process. Open gulpfile.js and declare variables:
Here, the most important options are:
– “theme”: allows you to set up your theme name
– “basename”: a name of an output CSS file
Now we need to write some tasks. Declare the default task that will only compile your theme:
To catch changes, it is really convenient to create a task that will ‘watch’ for every change of “*.scss” and “index.html” files:
where the connect task uses the gulp-connect plugin that refreshes required files if necessary:
Live reloading should be applied to the index.html file and at the end of the task that compiles a theme:
compileTheme and minifyCss functions are called, and in your dist/YourTheme folder, you will see two CSS files that you can use instead of a default Bootstrap theme:
Now we have two files that were created by the “gulp” or “gulp watch” tasks, but they are empty. Let’s change *.scss files.
Look, how easy it is to fill the content of the myAwesomeTheme.scss file:
I admit it’s my favorite part of the process. So easy, right? Mind the only thing — the order: your variables must be declared before a default Bootstrap theme is imported.
Let’s move on.
The _myVariables.scss file should contain only variables that can be set as follows:
In this way, you can override any of these variables by declaring them earlier (A Sass !default use case) without changing the default theme and that’s why the import order in the myAwesomeTheme.scss file is so important. Moreover, you can create your own variables. However, take note that default Bootstrap files should not be changed! Work only with your custom *.scss files.
Now the most interesting part begins:
Run the “gulp watch” task in your terminal. You will see the output:
Go to the http://localhost:5050 URL and say “WAKE UP!” to your designer skills! Create, create, and create custom rules until the sweet cake is ready 😊. Use variables from the _myVariables.scss file in the _myStyles.scss file and use a browser’s Developer Tools to inspect certain elements. After this, you will know what CSS rule you should write in your _myStyles.scss file. Use any means until you reach your goal!
Now you know the key steps of creating a custom Bootstrap theme. There are also plenty of beautiful themes that are available for free. Here are some of them that I admire and you will definitely want to use them in real applications:
1. Thomas Park — knows Bootstrap like the palm of his hand. He is the author of the bootstwatch collection of themes and interactive and impressive Bootstrap tutorials.
2. DevExpress — a famous vendor of UI controls that created free Bootstrap themes for their Bootstrap controls and any Bootstrap components.
3. The last but not least, Alexander Rechsteiner and his tremendous HackerThemes. There is also a ‘starter theme kit’ repository. What I like even more is that this guy also wrote an article describing how to create such custom Bootstrap themes. So, if you find this article boring, not enough informative, read this one.
As I promised at the beginning, I’ve prepared the bonus: it is a custom dark Bootstrap theme – “Eclipse”. Please enjoy:
It is available here:
https://github.com/paulwolf7/bootstrap-eclipse
Since the “Eclipse” theme is dark, and if you wish to create a dark theme, Andy Clarke’s tips from the Redesigning your product and website for dark mode article will be useful for you.
If you decide to use the “Eclipse” theme in your Bootstrap application, I will be happy to hear your feedback. Fork it on GitHub and customize it according to your needs.
Best Regards, Paul
P.S. As you may notice (or maybe not), this is my first article here. I’m going to continue writing some useful posts to share my experience, knowledge with you and learn something new from you and your feedback. Thank you.
How To Create Your Custom Bootstrap Theme
Research & References of How To Create Your Custom Bootstrap Theme|A&C Accounting And Tax Services
Source
0 Comments