How to Create Bootstrap Themes
As a developer of custom Bootstrap themes, I’ve been long in search of a SASS-to-CSS customization tool that would allow me to easily visualize different color schemes, fonts and styles to prototype my theme ideas. Themestr.app was born out of this need.
What’s in a custom Bootstrap theme?
When it comes to customizing the default Bootstrap look, changing the color palette is the first thing that comes to mind. The standard color palette hasn’t changed much in 3 iterations of Bootstrap, and the latest Bootstrap 4 is no different.
Bootstrap’s color scheme is accessed using contextual CSS classes that are designed to broadly “convey meaning” and therefore are named according to purpose. To utilize these colors, we simply use the appropriate class such as text-danger, bg-success, alert-info and btn-primary in our HTML markup.
With Themestr.app, you simply pick a new color scheme, and those boring Bootstrap colors are changed…
Remember that the Bootstrap contextual classes are used to “convey meaning” and provide feedback to the user. Therefore, if you want a red-ish color to mean “danger”, and a yellow-ish to mean “warning”, keep this in mind when customizing the Bootstrap colors.
Color Contrast
For Bootstrap theming, dealing with “Light” and “Dark” colors can be tricky because color contrast needs to be considered. Light and dark contrast well with each other and make text easier to read. To state the obvious, we can’t see dark text on dark backgrounds, and light text on light backgrounds. For this reason, lighter text works better on the darker contextual colors of the Bootstrap color palette.
Fonts
Fonts are obviously another huge factor in making all Bootstrap sites look the same. Themestr.app, lets you can choose from various Google Fonts to use in your theme. The custom font can be set as the “base” font family (font-family-base) for the entire theme. But, in most cases you’ll only want the custom font applied to headings (headings-font-family), and keep the very readable default fonts for smaller text.
SASS Variables
To know Bootstrap, is to know that there are a ton of SASS variables. Changing these variables is the very core of Bootstrap customization. Even if you don’t have any experience with SASS, you can use Themestr.app to easily generate the CSS for your custom theme.
To customize Bootstrap using only CSS, then generally accepted method to put the custom CSS styles after the Bootstrap CSS, like…
<link href="/path/to/bootstrap.min.css">
<link href="/path/to/custom.css">
But, with SASS it’s different, because SASS is pre-processed into “compiled” CSS. SASS customization works by overriding defaults values. When customizing with SASS, the custom styles are defined before the Bootstrap SCSS files are imported. So with SASS, the order looks like…
// _custom.scss
// load these first because our custom style need to reference them
@import "bootstrap/functions"
@import "bootstrap/variables"
// define some custom styles
$primary: #ccff00;
$font-family-base: 'Verdanda';
// import Bootstrap
@import "bootstrap"
1 When this _custom.scss file is processed using SASS, the default values defined in the bootstrap/variables.scss are defined first.
2 Next, the custom values are set, which will override any of the variables that had default values set in bootstrap/variables.scss.
3 Finally, Bootstrap is imported (@import “bootstrap”) which enables the SASS processor (A.K.A. compiler) to generate all the appropriate CSS with both the Bootstrap defaults and the custom overrides.
Themestr.app allows you to change most of the default Bootstrap SASS values, and in most cases you won’t need to be concerned with them at all.
