Extending Bootstrap

Written for intermediate frontend developers, this book helps you extend Bootstrap, allowing you to tailor your project using themes, third-party plugins, and plugins you’ve customized yourself. A practical, instruction-based guide.

Extending Bootstrap

Progressing

Christoffer NiskaMarch 2014

Written for intermediate frontend developers, this book helps you extend Bootstrap, allowing you to tailor your project using themes, third-party plugins, and plugins you’ve customized yourself. A practical, instruction-based guide.

About This Book

Who This Book Is For

If you are an intermediate front-end developer or designer who wants to learn the secrets of Bootstrap, this book is perfect for you.

Table of Contents

Chapter 1: Getting Started with Bootstrap

Why use Bootstrap?

Bootstrap pros and cons

Creating your first Bootstrap project

Summary

Chapter 2: Applying a Custom Theme

When to use a theme

Finding a suitable theme

Applying the theme

Customizing your theme

Best practices

Summary

Chapter 3: Creating Your Own Build

Need to customize Bootstrap

Generating a custom build

Keeping only what you need

Summary

Chapter 4: LESS is More

Why use LESS?

Compiling your first LESS file

Building Bootstrap from the source

Customizing variables

Summary

Chapter 5: Compiling Your Styles with Grunt

Why build LESS files with Grunt?

Using Grunt to build your project

Using Grunt for live reloading

Summary

Chapter 6: Adapting Bootstrap JavaScript Plugins

Why customize plugins?

Customizing plugins

Extending Bootstrap plugins

Summary

Chapter 7: Custom Grids

Why use a custom grid?

Customizing the grid

Custom breakpoints

Disabling responsiveness

Summary

Chapter 8: Custom Bootstrap Plugins

Why use custom plugins?

Popular plugins

Summary

Chapter 9: Creating Your Own Theme

Why create a theme?

Creating your own Bootstrap theme

Publishing your theme

Summary

What You Will Learn

Create your first Bootstrap project

Customize your project with themes through CSS

Use Bootstrap with LESS

Build a custom build with Grunt.js

Customize and extend JavaScript plugins

Utilize third- party plugins such as Lightbox, Notify.js, and so on

In Detail

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.

Authors

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.

Alerts & Offers

Series & Level

We understand your time is important. Uniquely amongst the major publishers, we seek to develop and publish the broadest range of learning and information products on each technology. Every Packt product delivers a specific learning pathway, broadly defined by the Series type. This structured approach enables you to select the pathway which best suits your knowledge level, learning style and task objectives.

Learning

As a new user, these step-by-step tutorial guides will give you all the practical skills necessary to become competent and efficient.

Beginner's Guide

Friendly, informal tutorials that provide a practical introduction using examples, activities, and challenges.

Essentials

Fast paced, concentrated introductions showing the quickest way to put the tool to work in the real world.

Cookbook

A collection of practical self-contained recipes that all users of the technology will find useful for building more powerful and reliable systems.

Blueprints

Guides you through the most common types of project you'll encounter, giving you end-to-end guidance on how to build your specific solution quickly and reliably.

Mastering

Take your skills to the next level with advanced tutorials that will give you confidence to master the tool's most powerful features.

Starting

Accessible to readers adopting the topic, these titles get you into the tool or technology so that you can become an effective user.

Progressing

Building on core skills you already have, these titles share solutions and expertise so you become a highly productive power user.