Discover millions of ebooks, audiobooks, and so much more with a free trial

Only $11.99/month after trial. Cancel anytime.

Make Bootstrap Themes
Make Bootstrap Themes
Make Bootstrap Themes
Ebook306 pages1 hour

Make Bootstrap Themes

Rating: 0 out of 5 stars

()

Read preview

About this ebook

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.

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.

This book is not an introduction to how to use Bootstrap, nor is it for learning the basics of HTML, CSS and Javascript. For example, 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.

LanguageEnglish
PublisherBo Feng
Release dateMay 11, 2017
ISBN9781370135240
Make Bootstrap Themes
Author

Bo Feng

Some birds aren't meant to be caged, that's all. Their feathers are just too bright.

Related authors

Related to Make Bootstrap Themes

Related ebooks

Internet & Web For You

View More

Related articles

Reviews for Make Bootstrap Themes

Rating: 0 out of 5 stars
0 ratings

0 ratings0 reviews

What did you think?

Tap to rate

Review must be at least 10 words

    Book preview

    Make Bootstrap Themes - 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:

    container container-fluid>

       

    row>

           

    col-xs-12 col-sm-10 col-md-8>

                some article content ...

           

       

    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:

    http-server : it will help us easily setup a local web server.

    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.

    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.

    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:

    Go to the Node.js website: https://nodejs.org

    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.

    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:

    Go to the Node.js website: https://nodejs.org

    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.

    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

    $ npm -v

    3.10.9

    If you used this Terminal application a lot, and are familiar with many Linux/Unix commands like cd, ls, etc, you may jump to the Install http-server and Less section; if not, let’s do one more step, it will help you quickly open a Terminal inside one folder:

    Open System Preferences, and go to Keyboard > Shortcuts;

    Click Services on the left, then scroll down a little to the Files and Folders section. Check New Terminal at Folder, then close the System Preferences window;

    Let’s test it. Go find any folder (for example, your Desktop folder or the code repository folder make-bootstrap-themes), right-click on the folder, and in the pop-up menu, choose New Terminal at Folder. A Terminal will show up and its current directory is the folder you right-clicked, we will use this several times in the following chapters.

    For writing convenience, in later content when we mention Open a command/terminal window at folder xxx, it means that, for a Windows user, go into this folder xxx, hold the shift key and right-click the mouse, and in the pop-up menu click Open command window here; for a macOS user, right-click on this folder xxx, and in the popup menu,

    Enjoying the preview?
    Page 1 of 1