Extending Bootstrap (2014)
Preface
Extending Bootstrap is a practical guide to extending the use of Bootstrap, a very popular open source CSS framework originally developed by Twitter. This book focuses on different techniques to customize and extend Bootstrap according to your needs. We will cover theming, CSS customization, LESS usage, compiling your styles with Grunt.js, and much more. After reading this book, you will be an expert in Bootstrap and have all the knowledge you need to use it efficiently in your projects.
What this book covers
Chapter 1, Getting Started with Bootstrap, helps you understand why you should use Twitter Bootstrap in the first place.
Chapter 2, Applying a Custom Theme, shows you how to create your first Bootstrap project and apply a Bootswatch theme to it.
Chapter 3, Creating Your Own Build, uses the customize tool from the Bootstrap site to create your own build of Bootstrap.
Chapter 4, LESS is More, provides an introduction to LESS, a preprocessed style sheet language that changes the way you work.
Chapter 5, Compiling Your Styles with Grunt, uses Grunt.js to compile your styles and improve your efficiency.
Chapter 6, Adapting Bootstrap JavaScript Plugins, shows you how to customize and extend Bootstrap JavaScript plugins to do more.
Chapter 7, Custom Grids, teaches you how to customize the grid in Bootstrap.
Chapter 8, Custom Bootstrap Plugins, introduces you to many useful plugins that you can use with Bootstrap.
Chapter 9, Creating Your Own Theme, teaches you how to create your own theme using Bootswatch.
What you need for this book
In order to follow the examples in this book, you will need to install a web server (XAMPP or similar), Node.js, a text editor (Sublime Text 2 or similar), and Google Chrome.
Who this book is for
If you are an intermediate or advanced web developer or designer who is interested in unlocking the secrets within Bootstrap and want to start using it for your projects, this is the book for you.
Conventions
In this book, you will find a number of styles of text that distinguish between different kinds of information. Here are some examples of these styles and an explanation of their meaning.
Code words in text, folder names, filenames, file extensions, pathnames, are shown as follows: "Create a new HTML document, add the following contents, and save it in your project directory as index.html."
A block of code is set as follows:
[default]
grunt.initConfig({
less: {
app: {
files: {"less/main.less": "css/main.css"}
}
}
});
When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:
[default]
grunt.initConfig({
less: {
app: {
files: {"less/main.less": "css/main.css"}
}
}
});
Any command-line input or output is written as follows:
recess less/main.less --compile > css/main.css
New terms and important words are shown in bold. Words that you see on the screen, in menus or dialog boxes for example, appear in the text like this: "For more information, refer to the Live Reloading section in the Watch plugin documentation."
Note
Warnings or important notes appear in a box like this.
Tip
Tips and tricks appear like this.