Bootstrap Site Blueprints

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.
Preview in Mapt

Bootstrap Site Blueprints

David Cochran, Ian Whitley

1 customer reviews
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.
Mapt Subscription
FREE
$29.99/m after trial
eBook
$18.90
RRP $26.99
Save 29%
Print + eBook
$44.99
RRP $44.99
What do I get with a Mapt Pro subscription?
  • Unlimited access to all Packt’s 5,000+ eBooks and Videos
  • Early Access content, Progress Tracking, and Assessments
  • 1 Free eBook or Video to download and keep every month after trial
What do I get with an eBook?
  • Download this book in EPUB, PDF, MOBI formats
  • DRM FREE - read and interact with your content when you want, where you want, and how you want
  • Access this title in the Mapt reader
What do I get with Print & eBook?
  • Get a paperback copy of the book delivered to you
  • Download this book in EPUB, PDF, MOBI formats
  • DRM FREE - read and interact with your content when you want, where you want, and how you want
  • Access this title in the Mapt reader
What do I get with a Video?
  • Download this Video course in MP4 format
  • DRM FREE - read and interact with your content when you want, where you want, and how you want
  • Access this title in the Mapt reader
$0.00
$18.90
$44.99
$29.99p/m after trial
RRP $26.99
RRP $44.99
Subscription
eBook
Print + eBook
Start 30 Day Trial

Frequently bought together


Bootstrap Site Blueprints Book Cover
Bootstrap Site Blueprints
$ 26.99
$ 18.90
Bootstrap 4 Site Blueprints Book Cover
Bootstrap 4 Site Blueprints
$ 39.99
$ 28.00
Buy 2 for $35.00
Save $31.98
Add to Cart
Subscribe and access every Packt eBook & Video.
 
  • 5,000+ eBooks & Videos
  • 50+ New titles a month
  • 1 Free eBook/Video to keep every month
Start Free Trial
 

Book Details

ISBN 139781782164524
Paperback304 pages

Book Description

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.

Table of Contents

Chapter 1: Getting Started with Bootstrap
Quantity and quality
Downloading Bootstrap
Preparing a project template folder
Pulling in the Bootstrap files
Taking inventory
Setting up the HTML template file
Giving your site a title
Providing a navbar markup
Compiling and linking default Bootstrap CSS
Summary
Chapter 2: Bootstrappin' Your Portfolio
What we'll build
Surveying the exercise files
Marking up the carousel
Creating responsive columns
Turning links into buttons
Understanding the power of LESS
Customizing Bootstrap's LESS according to our needs
Adding the logo image
Adjusting nav item padding
Adding icons
Adding Font Awesome icons
Adjusting the navbar icon color
Adjusting the responsive navbar breakpoint
Styling the carousel
Tweaking the columns and their content
Styling the footer
Recommended next steps
Summary
Chapter 3: Bootstrappin' a WordPress Theme
Downloading and renaming the Roots theme
Installing the theme
Configuring the navbar
Bringing in our home page content
Customizing a page template
Understanding the Roots base template
Creating a custom base template
Using custom fields for a custom structure
Creating a custom content template
Putting the footer content in place
Surveying the Roots assets folder
Swapping design assets
Connecting our stylesheet
Connecting our JavaScript files
Adding logo images to the navbar and footer
Adding icon links
Adding back WordPress-specific styles
Summary
Chapter 4: Bootstrappin' Business
Sizing up our beginning files
Creating a complex banner area
Adding utility navigation
Making responsive adjustments
Implementing the color scheme
Styling the collapsed navbar
Designing a complex responsive layout
Laying out a complex footer
Summary
Chapter 5: Bootstrappin' E-commerce
Surveying the markup for our products page
Styling the breadcrumbs, page title, and pagination
Adjusting the products grid
Styling the options sidebar
Summary
Chapter 6: Bootstrappin' a One-page Marketing Website
Overview
Surveying the starter files
Viewing the page content
Adjusting the navbar
Customizing the jumbotron
Beautifying the features list
Tackling customer reviews
Creating attention-grabbing pricing tables
Adding the final touches
Adding ScrollSpy to the navbar
Summary

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

Authors

Table of Contents

Chapter 1: Getting Started with Bootstrap
Quantity and quality
Downloading Bootstrap
Preparing a project template folder
Pulling in the Bootstrap files
Taking inventory
Setting up the HTML template file
Giving your site a title
Providing a navbar markup
Compiling and linking default Bootstrap CSS
Summary
Chapter 2: Bootstrappin' Your Portfolio
What we'll build
Surveying the exercise files
Marking up the carousel
Creating responsive columns
Turning links into buttons
Understanding the power of LESS
Customizing Bootstrap's LESS according to our needs
Adding the logo image
Adjusting nav item padding
Adding icons
Adding Font Awesome icons
Adjusting the navbar icon color
Adjusting the responsive navbar breakpoint
Styling the carousel
Tweaking the columns and their content
Styling the footer
Recommended next steps
Summary
Chapter 3: Bootstrappin' a WordPress Theme
Downloading and renaming the Roots theme
Installing the theme
Configuring the navbar
Bringing in our home page content
Customizing a page template
Understanding the Roots base template
Creating a custom base template
Using custom fields for a custom structure
Creating a custom content template
Putting the footer content in place
Surveying the Roots assets folder
Swapping design assets
Connecting our stylesheet
Connecting our JavaScript files
Adding logo images to the navbar and footer
Adding icon links
Adding back WordPress-specific styles
Summary
Chapter 4: Bootstrappin' Business
Sizing up our beginning files
Creating a complex banner area
Adding utility navigation
Making responsive adjustments
Implementing the color scheme
Styling the collapsed navbar
Designing a complex responsive layout
Laying out a complex footer
Summary
Chapter 5: Bootstrappin' E-commerce
Surveying the markup for our products page
Styling the breadcrumbs, page title, and pagination
Adjusting the products grid
Styling the options sidebar
Summary
Chapter 6: Bootstrappin' a One-page Marketing Website
Overview
Surveying the starter files
Viewing the page content
Adjusting the navbar
Customizing the jumbotron
Beautifying the features list
Tackling customer reviews
Creating attention-grabbing pricing tables
Adding the final touches
Adding ScrollSpy to the navbar
Summary

Book Details

ISBN 139781782164524
Paperback304 pages
Read More
From 1 reviews

Read More Reviews

Recommended for You

Mastering Web Application Development with AngularJS Book Cover
Mastering Web Application Development with AngularJS
$ 26.99
$ 5.40
Responsive Web Design with HTML5 and CSS3 Book Cover
Responsive Web Design with HTML5 and CSS3
$ 23.99
$ 4.80
AngularJS Web Application Development Blueprints Book Cover
AngularJS Web Application Development Blueprints
$ 29.99
$ 21.00
AngularJS UI Development Book Cover
AngularJS UI Development
$ 26.99
$ 18.90
Object-Oriented JavaScript - Second Edition Book Cover
Object-Oriented JavaScript - Second Edition
$ 29.99
$ 21.00
Responsive Web Design by Example : Beginner's Guide Book Cover
Responsive Web Design by Example : Beginner's Guide
$ 26.99
$ 18.90