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

Book Description

Without Bootstrap your web designs may not be reaching their full potential. This book will change that through a series of hands-on projects covering everything from custom icon fonts to JavaScript plugins.

In Detail

Since its debut in August 2011, Twitter Bootstrap, now simply Bootstrap, has become by far the most popular framework for empowering and enhancing frontend web design. With Version 3, Bootstrap reaches an exciting new milestone, introducing a mobile-first responsive grid, new and powerful LESS mixins, and a lean code base optimized for modern browsers.

"Bootstrap Site Blueprints" is a hands-on guide to the inner workings of Bootstrap’s latest and greatest development milestone. In an easy-to-follow, step-by-step format, you’ll quickly get to know the ins and outs of Bootstrap while building a portfolio site, a WordPress theme, a business site, an e-commerce interface, and administration interface, and an upscale marketing site.

"Bootstrap Site Blueprints" guides you through the process of building different types of web applications, by leveraging the power of Bootstrap 3. In the process, you’ll experience the power of customizing and recompiling Bootstrap’s LESS files and adapting Bootstrap’s JavaScript plugins, to the design of an excellent user interface. While creating these layouts, you will quickly become comfortable with customizing Bootstrap to meet the needs of your specific projects. You will add custom icon fonts, customize and recompile Bootstrap’s powerful LESS files, and leverage Bootstrap’s excellent JavaScript plugins to create dynamic user interfaces.

By the end of this book you will be a more adept and efficient designer.

What You Will Learn

  • Set up a custom Bootstrap project
  • Customize and recompile Bootstrap's LESS files
  • Incorporate custom icon fonts
  • Write your own LESS variables and mixins
  • Translate a Bootstrap design into a WordPress theme
  • Leverage Bootstrap's powerful JavaScript plugins
  • Incorporate non-Bootstrap JavaScript plugins into your design
  • Optimize Bootstrap CSS and JavaScript for performance
  • Implement the PictureFill responsive images method
  • Add touch swipe functionality to the Bootstrap carousel
  • 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 http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to have the files e-mailed directly to you.

    Table of Contents

    1. Bootstrap Site Blueprints
      1. Table of Contents
      2. Bootstrap Site Blueprints
      3. Credits
      4. About the Authors
      5. About the Reviewers
      6. www.PacktPub.com
        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
        7. Downloading the example code
          1. Errata
          2. Piracy
          3. Questions
      8. 1. Getting Started with Bootstrap
        1. Quantity and quality
          1. Improving with age
          2. The power of leaner CSS
        2. Downloading Bootstrap
          1. The files you'll have
        3. Preparing a project template folder
          1. Getting H5BP
          2. Deleting unnecessary Boilerplate files
          3. Evaluating the Boilerplate .htaccess file
          4. Updating required Boilerplate files
          5. Updating the favicon and touch icons
        4. Pulling in the Bootstrap files
          1. Fonts
          2. JavaScript
          3. Holding off on the CSS
          4. Bringing the LESS files over
        5. Taking inventory
        6. Setting up the HTML template file
        7. Giving your site a title
          1. Adjusting the outdated browser message
          2. Setting up major structural elements
        8. Providing a navbar markup
        9. Compiling and linking default Bootstrap CSS
          1. Compiling Bootstrap CSS
          2. Completing the responsive navbar
          3. Troubleshooting
          4. Adding support for Internet Explorer 8
        10. Summary
      9. 2. Bootstrappin' Your Portfolio
        1. What we'll build
        2. Surveying the exercise files
        3. Marking up the carousel
        4. Creating responsive columns
        5. Turning links into buttons
        6. Understanding the power of LESS
          1. Nested rules
          2. Variables
          3. Mixins
          4. Operations
          5. Importing files
          6. The modular file organization
        7. Customizing Bootstrap's LESS according to our needs
          1. Customizing variables
            1. Importing our new variables
            2. Editing navbar variables
        8. Adding the logo image
        9. Adjusting nav item padding
        10. Adding icons
        11. Adding Font Awesome icons
        12. Adjusting the navbar icon color
        13. Adjusting the responsive navbar breakpoint
        14. Styling the carousel
          1. Setting Font Awesome icons for the controls
          2. Adding top and bottom padding
          3. Forcing images to their full width
          4. Constraining the carousel height
          5. Repositioning the carousel indicators
          6. Styling the indicators
        15. Tweaking the columns and their content
        16. Styling the footer
        17. Recommended next steps
        18. Summary
      10. 3. Bootstrappin' a WordPress Theme
        1. Downloading and renaming the Roots theme
        2. Installing the theme
        3. Configuring the navbar
        4. Bringing in our home page content
          1. Adding images
        5. Customizing a page template
        6. Understanding the Roots base template
        7. Creating a custom base template
        8. Using custom fields for a custom structure
        9. Creating a custom content template
          1. Building our carousel from custom fields
          2. Adding our content columns from custom fields
        10. Putting the footer content in place
        11. Surveying the Roots assets folder
        12. Swapping design assets
        13. Connecting our stylesheet
        14. Connecting our JavaScript files
        15. Adding logo images to the navbar and footer
        16. Adding icon links
        17. Adding back WordPress-specific styles
        18. Summary
      11. 4. Bootstrappin' Business
        1. Sizing up our beginning files
        2. Creating a complex banner area
          1. Placing a logo above the navbar
          2. Reviewing and checking navbar dropdown items
        3. Adding utility navigation
        4. Making responsive adjustments
        5. Implementing the color scheme
        6. Styling the collapsed navbar
          1. Styling the horizontal navbar
        7. Designing a complex responsive layout
          1. Adjusting the medium and wide layout
          2. Adjusting headings, font sizes, and buttons
          3. Enhancing the primary column
          4. Adjusting the tertiary column
          5. Fine touches for multiple viewports
        8. Laying out a complex footer
          1. Setting up the markup
          2. Adjusting for tablet-width viewports
          3. Adding a targeted responsive clearfix
          4. Refining the details
        9. Summary
      12. 5. Bootstrappin' E-commerce
        1. Surveying the markup for our products page
        2. Styling the breadcrumbs, page title, and pagination
        3. Adjusting the products grid
        4. Styling the options sidebar
          1. Setting up basic styles
          2. Styling the Clearance Sale link
          3. Styling the options list
          4. Adding Font Awesome checkboxes to our option links
          5. Using LESS mixins to arrange option links in columns
          6. Adjusting the options list layout for tablets and phones
          7. Collapsing the options panel for phone users
        5. Summary
      13. 6. Bootstrappin' a One-page Marketing Website
        1. Overview
        2. Surveying the starter files
        3. Viewing the page content
        4. Adjusting the navbar
        5. Customizing the jumbotron
          1. Refining the jumbotron message design
        6. Beautifying the features list
        7. Tackling customer reviews
          1. Positioning and styling the captions
          2. Refining the caption position
          3. Adding Bootstrap grid classes
          4. Downloading and linking up the Masonry JavaScript plugin
          5. Initializing Masonry JavaScript on our reviews layout
          6. Cutting and trimming our bricks
            1. Adjusting for tiny screens
        8. Creating attention-grabbing pricing tables
          1. Setting up the variables, files, and markup
          2. Beautifying the table head
          3. Styling the table body and foot
          4. Differentiating the packages
          5. Adjusting for small viewports
          6. Providing visual hierarchy to our tables
        9. Adding the final touches
        10. Adding ScrollSpy to the navbar
          1. Animating the scroll
        11. Summary
      14. A. Optimizing Site Assets
        1. Optimizing images
        2. Optimizing CSS
        3. Optimizing JavaScript
        4. Our optimized results
      15. B. Implementing Responsive Images
        1. Considering our portfolio carousel
        2. Choosing a solution from the available solutions
          1. Preparing our responsive images
          2. Plugging in the JavaScript
          3. Implementing the markup structure
          4. Testing and adjusting
        3. Our end results
      16. C. Adding Swipe to the Carousel
        1. Considering our options
        2. Getting and including the TouchSwipe plugin
        3. Initializing TouchSwipe
      17. Index