Make Bootstrap Themes

247 Pages·08.314 MB·English

by  BO FENG

Preface
Bootstrap perhaps is the most popular frontend framework for developing mobile
first projects on the web in recent years, its repository on github gets more than
100 thousands stars. Millions of websites are using it not only because it is easy to
learn and use but the flexibility of customization. You can quickly start building a
prototype or minimum viable product on the web by just including its 2 files (one
is a CSS file and the other is a Javascript file), then do some customization later to
make your web product stand out and look more professional.
In this book, we’ll focus on the customization part - build your own Bootstrap
theme. At the time of writing this book, Bootstrap 4 is still in its alpha version, by
“Bootstrap” here we are referring to Bootstrap 3. We will start with preparing a
development workbench, and introducing Less (a CSS pre-processor Bootstrap
uses), then walk through Bootstrap’s source code which will help us first get
familiar with its code structure and later build themes by reusing it. Moreover, we
will learn how to make additional styles and use plugins to polish our themes.
Lastly we will touch on Bootstrap 4 a little and see how to use and customize it.
To learn something new, you need to practice, sometimes a lot. In this book I am
following the “learn by doing” methodology: in most of chapters, I’ll put a
“Practice” section. Usually those sections ask you to go to this book’s code
repository (see the next section), open some files and learn the code inside. Some
chapters will also contain a “Challenge” section, which will suggest you to make
changes to the code we learned in that chapter. Those challenges usually are not
hard to solve, and there for you to get your hands dirty, and help you have a better
understanding.
Prerequisites
This book is not an introduction to how to use Bootstrap, nor is it for learning the
basics of HTML, CSS and Javascript, there are already plenty of awesome books
on such fields. In general, I will assume that you have some working knowledge of
HTML, CSS and using Bootstrap, for example you should be able to understand
the following code:
<div class="container container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-10 col-md-8">
some article content ...
</div>
</div>
</div>
You should know what container , col-xs-12 , col-sm-10 classes mean in
Bootstrap. If not, I suggest reading through some tutorials about using Bootstrap
before coming back to this book. If you are already familiar with the basis of
HTML, CSS and Bootstrap usage, and want to go further to customize its theme, or
even sell your own theme in the marketplaces, this is the book for you.
Code examples
Supplemental materials (code examples, exercises, etc) are available for download
at: https://github.com/bofeng/make-bootstrap-themes
You should check the license before using the code examples and documentation.
Usually it will not be a problem. Asking me for permission is not needed, but I do
appreciate if you could include an attribution when using it, something like “From
the book Make Bootstrap Themes By Bo Feng” would be great.
Feedback
If you find errors in this book or the code example repository, you may create an
issue ticket on the Github repository page:
https://github.com/bofeng/make-bootstrap-themes/issues
Acknowledgments
This book would not have been possible without the help and support of many
others. Thank you to my reviewer, Sabrina Wagner, for your time and perceptive
feedback. Thanks also to Xin Ge for his help with designing this great book cover.
And many thanks are owed to my dear friends Melora Loffreto, Devon Loffreto
and my girlfriend Sherry. They put up with me throughout this process and
provided moral support and guidance. Thank you.
Chapter 1 - Setup Workbench
First things first, let’s get our workbench ready. We need 4 items:
1. http-server : it will help us easily setup a local web server.
2. less : we use it to compile code written in Less to plain CSS, Bootstrap
uses Less for generating its final CSS file. When we make our own themes,
we will also write some code in Less, then use the lessc command to
convert it to plain CSS. Don’t worry if you are not familiar with Less for
now, we will learn more about it in chapter 2.
3. Bootstrap source code : we will learn how Bootstrap organizes its code
and this will teach us how to follow its structure and utilize its code to make
our themes.
4. theme-styles.html : we need to make a web page to view all commonly
used Bootstrap components (typography, buttons, panels, alerts, etc). We will
have all of them on one page so that we can easily see the changes when we
make some customizations for our themes.
The first two items above are software applications, and we can install them
through npm . npm comes along with the Node.js installation package, so we
will first install Node.js . The third and fourth items are already included in the
code repository for this book ( https://github.com/bofeng/make-bootstrap-themes ).
You can clone it:
$ git clone https://github.com/bofeng/make-bootstrap-
themes.git
Or you can download the zipped file at following address, then unzip it:
https://github.com/bofeng/make-bootstrap-themes/archive/master.zip
Once you get it, in the folder you should be able to see the following files:
For writing convenience, in the following chapters, when we mention in the code
repository or code repository folder, we are referring to this make-bootstrap-
themes folder.
1.1 Install Node.js & npm
We will cover the installation both for Windows and macOS. Fortunately the
process is quite straightforward using an installer package.
Windows
Installation steps:
1. Go to the Node.js website: https://nodejs.org
2. On the home page, click the LTS version to download the installation file
(ends with .msi) Depending on the version of Windows you use, you may
see the buttons below slightly different from mine on the website.
3. Double click this .msi file to run the installer and follow the prompts in it.
You may need to first accept the license agreement, then click the “Next”
buttons several times, during which you may use the default installation
settings.
Now let’s test if it works: go to any folder, (for example, your Download folder or
the code repository folder make-bootstrap-themes), hold the shift key and right-
click your mouse. In the pop-up menu, click Open command window here :
A command-line window will be opened up, then type two commands: use node -
v first to see the Node.js version you have installed; then type npm -v to see the
npm version. (Notice that npm is installed along with Node.js, and we will use
npm to install other applications later).
Tips: When you type the node and npm commands in the command window, if
an error like “command not found” shows up, try restarting your computer then
running the commands again.
macOS
If you are using a Mac with macOS, the process is quite similar:
1. Go to the Node.js website: https://nodejs.org
2. On the home page, you will see a download button like below. At the time of
writing this book, the Long-Term-Support stable version is 6.9.2, click
v6.9.2 LTS button and a node-v6.9.2.pkg file will be downloaded.
3. Double click this node-v6.9.2.pkg and finish the installation.
To test if it works, go to “Applications > Utilities“, open the “Terminal”
application, and then type node -v and npm -v . You should be able to see the
version they print out like below (depends on the version you installed, you may
see a different version number):
$ node -v
v6.9.2