Customizing Bootstrap – Adding a New Panel Type

Introduction

This tip is for the experienced web developer and covers topics such as CSS, Bootstrap and the concept of Responsive Design using technologies such as Node.js and Grunt. This tip is not an introduction to such technologies so if I’ve already confused you with these names then you’ll need to find several tutorials to familiarize yourself. A good starting point would be w3schools.com.

Customizing Bootstrap can be an intimidating task when first approaching the idea. But once you successfully set up Node.js and the compiler that you choose to use - I’m going with Grunt - it can be a rewarding experience.

I’ll leave the details of the setup in the capable hands of Sergey Nosov, his March 14^th article on integrating Less and Grunt in Visual Studio is top notch, and it works (at least on my machine). My IDE of choice is Visual Studio but Sergey's article can apply to any text editor. If you’re not familiar with CSS compilers (a.k.a. Transpilers), read that article first, get it working and then come back to my tip where I’ll take you to the next step of customization.

Bootstrap Panels

Bootstrap Panels come in different states: default, primary, info, warning and danger. Each one is suited for a specific purpose, but sometimes you need a definition for an element that’s not covered in those states. I’ll show you how to create a new Panel Type, the name of which can be whatever you wish, given your need. In my case, I needed a new type of Panel for an FAQ page so I ended up with a new FAQ Panel. This is the panel type that we’ll use for this tutorial.

Side note: I decided to use panels for the format of questions and answers because they provide a neatly formatted layout for such a display while also keeping the responsive design features. I only needed to adjust the colors to conform to the site’s color scheme and reduce the margins to make better use of screen real estate. At first, I re-defined some CSS selectors in a separate stylesheet that loaded after Bootstrap’s definitions, but that became messy and tedious, that’s when I decided to take the dive and learn how to use LESS variables. Doing so would reduce development time and make the site’s theme more scalable.

Setting Up A New Panel Header Color

The first step is to define your LESS variables. In your project, you should have a directory where all your LESS files live, in my case it’s Content/bootstrap. In that directory, you’ll find a file called variables.less, open that file for editing.

Scroll down to the Panels section (currently near the 700^th line), or you can just search for “@panel-” within the document. At the end of the panels variables, add a new variable called @panel-faq-text and give it a value of #672C08 (the color is somewhere between brown and burgandy), for example:

@panel-faq-text: #672C08;

Go back to your LESS files directory and open the panels.less file for editing. At the very bottom, you’ll find the “// Contextual variations” section. This is where the different panel states are defined using a LESS mixin named .panel-variant, which is basically a function that takes care of all CSS properties for a panel, including any child elements.

Now we’ll add our own definition, the best practice would be to define a new section: “//Panel types” some developers will prefer to use “Kinds” instead of “Types”, use your discretion. To define your own type just follow the same format as for the panel states, a good idea would be to copy the definition of the default state and replace the @panel-default-text variable with your new one @panel-faq-text like so:

// Panel types

.panel-faq {
 .panel-variant(@panel-default-border; @panel-faq-text; @panel-default-heading-bg; @panel-default-border);
}

Important: Notice how the parameters for the mixin are separated by semicolons instead of the usual commas used in most function usage with other programming languages. Using commas will throw an error during compilation.

Now we’re at a point where we can test our changes. Compile your customized bootstrap framework (as explained in Sergey's post) and add your new Panel type to some HTML markup like so:

<div class="panel panel-faq">
   <div class="panel-heading">
       <h4>Lorem ipsum dolor sit amet?</h4>
   </div>
   <div class="panel-body">
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
	Itaque, optio corporis quae nulla aspernatur in alias at numquam rerum ea excepturi 
	expedita tenetur assumenda voluptatibus eveniet incidunt dicta nostrum quod?
      </p>
   </div>
</div>

View your markup in a browser, your panel header text should now have a dark brownish color if you went with my choice or whatever color you chose to use. This will conclude my first part of the article, in my next contribution I will show how to change the definition of the mixin used in this tip.