Extending Bootstrap

5 (1 reviews total)
By Christoffer Niska
  • Instant online access to over 8,000+ books and videos
  • Constantly updated with 100+ new titles each month
  • Breadth and depth in over 1,000+ technologies

About this book

Bootstrap is a free collection of tools used to create websites and web applications. It contains HTML- and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions. Much has been written and said recently, in the world of web design and development, about Bootstrap. Some people call it a boon for web developers with little designing knowledge, while others call it a blessing for the designers. A user familiar with all that Bootstrap has to offer can extend the framework so that it no longer has the original look and feel of Twitter. This will allow you to use clever and novel ways of taking the power the standard library of Bootstrap has, and transform it into what you have envisioned.

This is a practical, step-by-step guide to extending Bootstrap. It covers all the aspects of extending Bootstrap, including themes, customization, extending its plugins, and an introduction to several third- party Bootstrap plugins.

Once you understand why you should use Bootstrap in the first place, you will learn about custom themes. This book then walks you through customization with CSS, and introduces you to LESS. You will learn to use Grunt.js to generate your own custom build of Bootstrap, customize plugins and grids, and even build custom plugins! Finally you will explore the most useful third-party plugins for Bootstrap and end with creating your first Bootswatch theme. This is a complete guide to unlocking the true power of Bootstrap.

Publication date:
March 2014
Publisher
Packt
Pages
88
ISBN
9781782168416

 

Chapter 1. Getting Started with Bootstrap

You must be eager to start your first Bootstrap project, but hold your horses. First, you will need to learn a few useful things about Bootstrap in order to know whether or not Bootstrap is a good suite for your project.

 

Why use Bootstrap?


Twitter Bootstrap is an excellent CSS framework that provides many carefully crafted user interface elements, layouts, and jQuery plugins. Bootstrap is open source and is also one of the most popular projects of all time on GitHub.

Bootstrap contains a top-notch, responsive mobile-first grid, which allows you to implement your design in a breeze; it comes with ready-made styles for typography, navigation, tables, forms, buttons, and more.

Bootstrap also includes some jQuery plugins, such as Modal, Dropdown, Tooltip, and Carousel, which come in handy quite often.

 

Today, you can use Bootstrap to throw together quick prototypes or guide the execution of more sophisticated designs and larger engineering efforts. In other words, Bootstrap is a very simple way to promote quick, clean and highly usable applications.

 
 --– Mark Otto, creator of Bootstrap

Even though Bootstrap comes with all these features, none of them actually get in the way of further customization. Bootstrap is very easy to extend, especially if you use LESS instead of traditional CSS.

 

At its core, Bootstrap is just CSS, but it's built with Less, a flexible pre-processor that offers much more power and flexibility than regular CSS. With Less, we gain a range of features like nested declarations, variables, mixins, operations, and color functions.

 
 -- – Mark Otto, creator of Bootstrap

Next, you will learn about the advantages and disadvantages of using Bootstrap.

 

Bootstrap pros and cons


As with many things, using Bootstrap too has its pros and cons. Let us list some important things that you will need to know when you decide whether or not to use Bootstrap in your project.

The pros are as follows:

  • Cross-browser support: Bootstrap works on all the latest desktop and mobile browsers. While older browsers may display Bootstrap differently with respect to styles, it is still fully functional in legacy browsers such as Internet Explorer 8.

  • Easy to customize: Bootstrap is easy to customize, especially with the use of LESS. You can also leave out parts that you do not need, that is, you can use only its grid and leave out all the components, or you can leave out the grid and use its components.

  • Encourages using LESS: Bootstrap is written in LESS, a dynamic style sheet language that is compiled into CSS, which gives it a lot of flexibility. You can take advantage of this if you use LESS to write your styles.

  • Supports useful jQuery plugins: Bootstrap comes with many useful jQuery plugins that can come handy in many situations. The quality of the plugins is not the best, and they usually work best when you do not customize them at all.

  • Many custom jQuery plugins available: There is a wide range of jQuery plugins that extend Bootstrap, for example, X-editable, Wysihtml5, and the jQuery File Upload. We will cover these plugins later in this book.

  • Mobile-first: Bootstrap has been mobile-first since Version 3.0. This means that the grid starts out stacked and is floated using media queries when the screen width grows.

The cons are as follows:

  • jQuery plugins are hard to customize: The jQuery plugins that come with Bootstrap are often hard to customize, and many argue that they are not written using best practices, so it can be challenging to work with the source code at times. Usually, the plugins work in the most common cases but they come up short when you try to customize them a bit.

  • Many Bootstrap sites end up looking alike: It is unfortunate that many sites that are built with Bootstrap look exactly the same, but you can avoid this by using a custom theme or creating your own theme once you have read this book.

Tip

Downloading the example code

You can download the sample code files for all Packt books that you have purchased from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.

 

Creating your first Bootstrap project


Now that you know when it is suitable to use Bootstrap, you are ready to start your first Bootstrap project. Perform the following steps to get started:

  1. Create a new folder for your Bootstrap project inside your document root. You can call it bootstrap-app.

  2. Pick up the latest version of Bootstrap from http://getbootstrap.com and unpack it into your project directory.

  3. Create a new HTML document, add the following contents, and save it in your project directory as index.html in the following manner:

    <!DOCTYPE html>
    <html>
      <head>
        <title>Hello from Bootstrap</title>
        <!-- Ensure proper rendering and touch zooming on mobiledevices -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elementsand media queries -->
        <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
          <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
        <![endif]-->
      </head>
      <body>
        <h1>Hello, world!</h1>
      </body>
    </html>

    Tip

    You can omit html5shiv.js and respond.js if you don't wish to support older versions of Internet Explorer.

Let us look at the following reasons why we included all those CSS and JavaScript files:

  • bootstrap.min.css: It is the minified version of the Bootstrap CSS styles

  • html5shiv.js: It adds HTML5 support to older browsers

  • respond.min.js: It adds media query support to older browsers

Navigate to your project directory using your favorite web browser; you should see your project in action as shown in the following screenshot. Not too impressive, but do not worry, you will soon add more to it.

Tip

For more information on how to get started with Bootstrap, refer to the Getting started page on the official site at http://getbootstrap.com/getting-started/.

 

Summary


You now know why you should use Bootstrap in your projects rather than writing all the CSS files yourself, and you know what kind of features Bootstrap provides.

In this chapter, you learned about the pros and cons of Bootstrap, as well as how to decide whether or not to use Bootstrap in a project. You also learned how to create a very simple Bootstrap project.

The project you created in this chapter was not so impressive; it was just some dark text on a white background. In the next chapter, you will learn how to apply a custom theme to your newly created Bootstrap project. Onwards!

About the Author

  • Christoffer Niska

    Christoffer Niska is a web developer from Helsinki, Finland. He maintains many open source projects that are mainly extensions of the Yii PHP framework. Christoffer's most notable open source effort is Yiistrap, which is an extension for Yii that allows developers to use Twitter Bootstrap along with Yii in a very convenient way.

    Christoffer is the CTO at Nord Software Ltd., a company based in Helsinki that delivers cutting-edge web solutions to various clients of all sizes. At work, he helps clients to transform their vision into reality. During his hours off from work, he maintains his open source projects, experiments with web technologies, and makes arcade games using HTML5 and JavaScript.

    Christoffer's Twitter handle is @Crisu83 and his online portfolio can be found at http://crisu83.me. Extending Bootstrap is his first official attempt at writing and very likely, not the last.

    Browse publications by this author

Latest Reviews

(1 reviews total)
rapide et low cost.... Ouvrage de qualité technique....
Book Title
Access this book and the full library for just $5/m.
Access now