Book Image

Bootstrap Site Blueprints

Book Image

Bootstrap Site Blueprints

Overview of this book

Related Content you might be interested in

Current Title:

Small book image
Bootstrap Site Blueprints
Feb, 2014 | 304 pages
No titles found
Table of Contents (16 chapters)
Bootstrap Site Blueprints
Bootstrap Site Blueprints
Credits
Credits
About the Authors
About the Authors
About the Reviewers
About the Reviewers
www.PacktPub.com
www.PacktPub.com
Preface
Preface
Free Chapter
1
Getting Started with Bootstrap
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
2
Bootstrappin' Your Portfolio
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
3
Bootstrappin' a WordPress Theme
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
4
Bootstrappin' Business
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
5
Bootstrappin' E-commerce
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
6
Bootstrappin' a One-page Marketing Website
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
Optimizing Site Assets
Optimizing Site Assets
Optimizing images
Optimizing CSS
Optimizing JavaScript
Our optimized results
Implementing Responsive Images
Implementing Responsive Images
Considering our portfolio carousel
Choosing a solution from the available solutions
Our end results
Adding Swipe to the Carousel
Adding Swipe to the Carousel
Considering our options
Getting and including the TouchSwipe plugin
Initializing TouchSwipe
Index
Index

Appendix B. Implementing Responsive Images

If our workflow is to be truly mobile friendly, we need a good responsive image technique. In this exercise, we'll implement one of the current leading techniques to improve both the performance and the design of the portfolio carousel implemented in Chapter 2, Bootstrappin' Your Portfolio.

Previous Section
End of Section
Next Section