You are previewing Bootstrap Site Blueprints Volume II.
O'Reilly logo
Bootstrap Site Blueprints Volume II

Book Description

Maximize the potential of Bootstrap with a collection of real-world site projects for better, faster, more responsive web applications

About This Book

  • Build Bootstrap projects quickly and easily with Harp.js, Node, and Less

  • Learn how to extend Bootstrap with the use of open source JavaScript and icon web font libraries

  • Get acquainted with building complex social networking, wiki, and dashboard projects with Bootstrap

  • Who This Book Is For

    Bootstrap Site Blueprints Volume II is geared for developers of all experience levels. It is written in a concise, easy-to-understand way. Each project follows a step-by-step process that anyone can understand. Some experience with Bootstrap beforehand would definitely be an asset but is not required.

    What You Will Learn

  • Customize and extend existing Bootstrap JavaScript components

  • Combine the Google Material Design look and feel with Bootstrap

  • Use flexbox and other cutting-edge CSS3 techniques in Bootstrap

  • Implement and customize open source JavaScript chart libraries in Bootstrap

  • Optimize and implement an optimal user experience for all your projects

  • Implement the Disqus commenting platform into your projects

  • In Detail

    Bootstrap is the most popular open source project on GitHub today. With a little bit of know-how, this massively popular CSS framework can leveraged for any type of complex web application or website. Bootstrap Site Blueprints Volume II will teach you to build these types of projects in an easy-to-understand fashion.

    The key to any complex Bootstrap project is a strong development foundation for your project. The book will first teach you how to build a Bootstrap development environment using Harp.js, Node, and Less. In the next chapters, we’ll build on this foundation by creating restaurant and mobile-first aggregator projects. Once you’re warmed up, we’ll move on to more complex projects such as a wiki, a new magazine, a dashboard, and finally a social networking website. Whether you are brand new to Bootstrap or a seasoned expert, this book will provide you with the skills you need to successfully create a number of popular web applications and websites.

    Style and approach

    This book takes a step-by-step approach to building each project, explained in a conversational and easy-to-follow style. We start by designing a development environment that will be used in all of the book’s projects. The projects start from an easy-intermediate level and progress to advanced as the book goes on.

    Downloading the example code for this book. You can download the example code files for all Packt books you have purchased from your account at If you purchased this book elsewhere, you can visit and register to have the code file.

    Table of Contents

    1. Bootstrap Site Blueprints Volume II
      1. Table of Contents
      2. Bootstrap Site Blueprints Volume II
      3. Credits
      4. About the Author
      5. About the Reviewer
        1. Support files, eBooks, discount offers, and more
          1. Why subscribe?
          2. Free access for Packt account holders
      7. Preface
        1. What this book covers
        2. What you need for this book
        3. Who this book is for
        4. Conventions
        5. Reader feedback
        6. Customer support
          1. Downloading the example code
          2. Downloading the color images of this book
          3. Errata
          4. Piracy
          5. Questions
      8. 1. Advanced Bootstrap Development Tools
        1. Theming is hard!@
        2. Harp.js – the static web server with built-in preprocessing
          1. Creating a development environment
          2. Installing Node.js
          3. Installing Harp.js
        3. Setting up a boilerplate project
          1. Setting up the CSS
          2. Setting up the fonts
          3. Setting up the JavaScript
          4. Setting up the partials
          5. Setting up _harp.json
          6. Configuring _data.json
          7. Setting up the layout
          8. Inserting the variables
          9. Setting up the header
          10. Setting up the footer
          11. Compiling for the first time
          12. Running the local server
        4. Configuring Less
          1. Defining your Less variables
          2. Colors
          3. Backgrounds
          4. Text
          5. Links
          6. Borders
          7. Typography
          8. Layout
          9. Mixins
          10. Border radius
          11. Animations and transitions
          12. Setting up your theme
        5. SMACSS overview
          1. Base rules
          2. Layout rules
          3. Module rules
          4. State rules
          5. Theme rules
          6. Setting up the base
          7. Setting up the layout
          8. Setting up the modules
          9. Setting up the states
          10. Setting up the theme
          11. Finishing up theme.less
        6. Summary
      9. 2. Building a Restaurant Website
        1. Building our development environment
          1. Adding more pages
          2. Expanding the layout
            1. Adding Google Web Fonts
          3. Updating the Less variables
            1. Backgrounds
            2. Links
          4. Updating the header
          5. Setting up the page title
          6. Setting up the navigation
          7. Setting up the reservations modal
          8. Setting up the footer
            1. The footer layout
        2. Home page
          1. Adding the primary header image
          2. Adding the about text to the home page
          3. Setting up the food tiles
            1. Adding the review carousel
        3. The About page
          1. Changing the feature image
          2. Setting up the large subtitle
          3. Adding the social media icons
          4. Adding the address
          5. Reviewing the layout
          6. Inserting the About text
          7. Don't forget the modal
          8. Recompiling your project
        4. The Menu page
          1. Customizing the .page-header class
          2. Setting up the layout
          3. Adding the featured modal
          4. Multiple modals
        5. The Contact page
          1. Inserting the Google Map
            1. Inserting the Google Map code
          2. Setting up the body of the page
          3. The reservation modal
        6. Summary
      10. 3. Mobile First Bootstrap
        1. Setting up the template
          1. Adding a new web font
          2. Adding the JavaScript to _layout.ejs
          3. Updating the Less variables
          4. Updating the text colors
          5. Setting up the header
          6. Navbar
          7. Modal triggers
          8. Search bar
          9. Search bar jQuery
          10. Filters
          11. Setting up the footer
        2. Single page apps
        3. Setting up the index page
          1. Feed
          2. Adding the feed header
          3. Filling in the posts section
          4. Adding pagination to the feed
          5. Adding the feed count and the next button
          6. Sidebar
          7. About modal
          8. The Contact modal
          9. Login modal
        4. Summary
      11. 4. Bootstrap Wiki
        1. Customizing the template
          1. Updating _layout.ejs
          2. Adding a new partial
        2. Setting up the Less variables
          1. Adding new colors
          2. Background colors
          3. Text colors
          4. Link and border colors
          5. Typography
          6. Rounder corners
        3. Updating the header and footer
          1. Coding the header
          2. Coding the header nav
          3. Coding the header search bar
          4. Adding custom button styles
          5. Adding custom well styles
          6. Finishing off the header search
        4. Adding the navigation modal
          1. Adding the footer
        5. Coding the homepage
          1. Setting up the page title section
          2. Setting up the type styles
          3. Coding the page body
          4. Coding the sidebar
          5. Coding the home page feed
        6. The article page template
          1. Coding the article page body
          2. Adding the body content
        7. The search results page template
          1. Updating the page title
          2. Updating the post-meta class
          3. Adding search posts
          4. Coding the search sidebar
        8. The Profile template
          1. Adding an avatar
        9. Mobile-specific styling
        10. Summary
      12. 5. Bootstrap News Magazine
        1. Customizing the template
          1. Updating _layout.ejs
        2. Setting up the Less variables
          1. Background colors
          2. Text colors
          3. Link colors
          4. Borders
          5. Typography
          6. Border radius
        3. Coding the header and footer
          1. Updating the header
          2. Inserting the logo
          3. Adding the filters
          4. Adding the search field
          5. Adding the form Less component
          6. Updating the footer
          7. Coding the top of the footer
          8. Adding the first two columns
          9. Adding the newsletter form
          10. Updating the button styles
          11. Coding the advertisement section
          12. Updating the well styles
          13. Coding the bottom of the footer
        4. Coding the home page
          1. Creating a post grid with flexbox
          2. Adding the pagination section
        5. Coding the article template
          1. Adding the article title
          2. Adding the article metadata
          3. Adding the article content
          4. Adding the comment section
          5. Creating the custom article layout
          6. Adding the trigger button
          7. Adding the Disqus content component
        6. Summary
      13. 6. Bootstrap Dashboard
        1. Customizing the template
          1. Updating _layout.ejs
        2. Setting up the Less variables
          1. Background colors
          2. Text colors
          3. Link colors
          4. Borders
          5. Typography
        3. Coding the header and footer
          1. Updating the header
          2. Customizing the navbar component
          3. Updating the footer
        4. Coding the dashboard
          1. Setting up the layout
          2. Creating the sidebar
          3. Customizing the nav pills component
          4. Creating the content section
          5. Customizing the typography
          6. Writing the pie chart HTML
          7. Writing the pie chart JavaScript
          8. Creating a Less component for the charts
          9. Setting up the widgets section
          10. Writing the widgets HTML
          11. Reviewing the success panel
          12. Reviewing the danger panel
          13. Writing the panels HTML
          14. Customizing the table component
          15. Adding the button
          16. Customizing the button component
          17. Inserting a line chart
          18. Adding the HTML for the line chart
          19. Updating the chart JavaScript
          20. Updating the chart CSS
          21. Mobile considerations
        5. Summary
      14. 7. Bootstrap Social Network
        1. Customizing the template
          1. Updating _layout.ejs
        2. Setting up the Less variables
          1. Background colors
          2. Text colors
          3. Link colors
          4. Border colors
          5. Typography
          6. Border radius
        3. Coding the header and footer
          1. Updating the header
          2. Inserting the brand
          3. Creating the navbar Less file
          4. Setting up the icon navigation
          5. Adding the search bar
          6. Adding the utility drop-down menu
          7. Adding some mobile-specific styles
          8. Updating the footer
        4. Coding the profile page
          1. Setting up the left sidebar
          2. Adding the avatar
          3. Adding the name and description
          4. Adding the content column
          5. Customizing the well component
          6. Adding the third column
          7. Completing the template
        5. Coding the activity feed
          1. Customizing the first column
          2. Adding button styles
          3. Adding the post form
          4. Adding the new post notification bar
          5. Styling the alert bar
        6. Coding the notifications section
          1. Updating the center column
          2. Adding an alert bar
          3. Adding a notification entry
        7. Coding the private messages section
          1. Adding a conversation
        8. Coding the friends section
          1. Adding a friend entry
        9. Summary
      15. Index