Creating your own Bootstrap theme

We will use Bootswatch to create our theme. You should already be familiar with Bootswatch because we used a readymade Bootswatch theme to theme our Bootstrap project earlier in this book.

Let us create a new theme. We we will name it Greenhorn and move the theme-specific styles and variable overrides there by performing the following steps:

  1. Create a new folder under the less directory named greenhorn.
  2. Create a new LESS file named bootswatch.less in the greenhorn directory and add the following contents to it:
    // Greenhorn 1.0.0
// Bootswatch
// -----------------------------------------------------

// Navbar =====================================================================

// Buttons ====================================================================

// Typography =================================================================

// Tables =====================================================================

// Forms ======================================================================

// Navs =======================================================================

// Indicators =================================================================

// Progress bars ==============================================================

// Containers =================================================================

    Tip

    You can use this template as a starting point for your bootswatch.less file in all of your themes in the future.

  3. Move the following styles from custom-theme.less to bootswatch.less:
    // Indicators =================================================================

.label {
  border-radius: 0;
}

.....

// Containers =================================================================

.container .jumbotron {
  border-radius: 0;
}
  4. Move custom-variables.less to the greenhorn directory and rename it to variables.less.

    Now that you have created your theme, you can move the rest of the styles from custom-theme.less to main.less and remove custom-theme.less completely.

Congratulations! You have created you first Bootswatch theme! While it may not seem like much, it is a great starting point for your custom theme.

The sky's the limit! Use your imagination and create the most amazing themes. Next, you will learn how to package your theme using Bootswatch and how to share it.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.137.178.9