Everand Logo

Welcome to Everand!

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

    Only $9.99/month after trial. Cancel anytime.

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

    Make Bootstrap Themes

    By Bo Feng

    ()

    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
    View More

    Related podcast episodes

    Related articles

    • Article

      DJANGO Create A Database-driven Website

      Jun 4, 2019

      The Django web framework was named after the famous guitarist Django Reinhardt and was first created by web developers at a small newspaper in Kansas. The main goals of Django is to enable fast development of complex websites with database needs. It

      7 min read

    • Article

      How Tech Firms Are Using China's Social Media Addiction To Teach English

      Mar 14, 2018

      On a recent winter day in Beijing, Ren Li crawls into bed at 3am, worn out after a long day of taking care of her three-month-old daughter. Despite her exhaustion, she is up promptly at 7 in the morning. But the first thing the doctor, 38, reaches fo

      3 min read

    • Article

      Create A Webpage Or Blog

      Mar 26, 2020

      Create A Webpage Or Blog
      12 min read

    • Article

      Post To Your WordPress Blog

      Aug 18, 2020

      Post To Your WordPress Blog
      5 min read

    • Article

      Common Errors

      Aug 27, 2019

      If you receive a ‘Script not found’ error, this probably means that you don’t have the mod scripts installed in your Minecraft directory. Check that you’ve replaced .minecraft with the one from McPiFoMo; this should include mcpipy, which will be full

      1 min read

    • Article

      Discover Easy-to -build Desktop Apps

      Oct 22, 2019

      Electron is actually a browser packaged with node.js and a few APIs. Because it’s built on top of the Chromium browser, you have everything available from there to add to your application. GitHub developed it as part of the Atom editor; it was open-s

      7 min read

    • Article

      Answers

      Jul 23, 2024

      Answers
      9 min read

    • Article

      Direct From the Source

      Oct 22, 2019

      Direct From the Source
      8 min read

    • Article

      FLASK Web Frameworks

      Jun 4, 2019

      The main focus of Python has always been to get you cracking on with your coding – the language was never made for web programming. However, this has just made it more interesting to extend the language for the web, or to create an interface to web-b

      9 min read

    • Article

      Answers

      Jun 4, 2019

      Answers
      7 min read

    • Article

      Answers

      Apr 7, 2020

      Answers
      7 min read

    • Article

      Get Packing!

      May 3, 2022

      Get Packing!
      8 min read

    • Article

      Get Packing!

      May 3, 2022

      Get Packing!
      8 min read

    • Article

      Mark Your Media Files

      Nov 17, 2020

      When using an embedded system as a media centre, you need to know about NFO files. The files keep track of the meta data for your titles. They’re XML files that contain information on the song, movie or other media that you’re accessing. For example,

      6 min read

    • Article

      Answers

      Jul 2, 2019

      Q How do I generate a very large file, say around 980GB, with the dd command? I’m trying to test a quota for an XFS file system under RHEL7. I use the following command as the user oracle, which has the user quota set: and it outputs Where is my

      7 min read

    • Article

      Doctor

      Mar 26, 2024

      > Deploy new PC > Office alternatives > Linux drives I was inspired by your Hydra Mini ITX Chassis build (Feb 2024 issue) to go out and spec a similar system to replace my three-year-old setup (also based on one of your builds, namely the AMD Ryzen 9

      6 min read

    • Article

      Mailserver

      Jul 26, 2022

      Mailserver
      3 min read

    • Article

      HotPicks

      Sep 19, 2023

      HotPicks
      12 min read

    • Article

      Create Smaller Sized Apps With React

      Nov 19, 2019

      You may not be surprised that some developers have criticised Electron (see tutorials LXF256), mostly regarding the memory usage of its final binaries. The initial binary is over 100MB, because a major chunk of code from Chrome is embedded. When you

      6 min read

    Related categories

    Reviews for Make Bootstrap Themes

    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