Optimizing Site Assets | Bootstrap Site Blueprints

Sign In Start Free Trial

Book Overview & Buying
Table Of Contents
Feedback & Rating

Bootstrap Site Blueprints

4.2 (10)

Bootstrap Site Blueprints

4.2 (10)

Overview of this book

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

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

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

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

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

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

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

Customer Reviews

4.2 (10)

5 star

50%

4 star

30%

3 star

10%

2 star

10%

1 star

0

Optimizing CSS

Check out the size of our unoptimized stylesheet, main.css:

It's 137 KB! No conscientious developer should ship such a gigantic stylesheet for so small a website.

Thankfully, we can easily cut the size of this file by nearly half. We'll use the power of Bootstrap's modular LESS organization to quickly cut it down to size. Here's how:

Open less/__main.less.

Comment out all unnecessary LESS files, such as these:

// @import "bootstrap/glyphicons.less";
...
// @import "bootstrap/dropdowns.less";
// @import "bootstrap/button-groups.less";
// @import "bootstrap/input-groups.less";
...
// @import "bootstrap/breadcrumbs.less";
// @import "bootstrap/pagination.less";
// @import "bootstrap/pager.less";
// @import "bootstrap/labels.less";
// @import "bootstrap/badges.less";
// @import "bootstrap/jumbotron.less";
// @import "bootstrap/thumbnails.less";
// @import "bootstrap/alerts.less";
// @import "bootstrap/progress-bars.less";
// @import "bootstrap/media.less";
// @import "bootstrap/list-group.less";
// @import "bootstrap/panels.less";
// @import "bootstrap/wells.less";
// @import "bootstrap/close.less";
...
// @import "bootstrap/modals.less";
// @import "bootstrap/tooltip.less";
// @import "bootstrap/popovers.less";

You'll need to be careful, of course. You may inadvertently eliminate a necessary file. Take time to recompile and test thoroughly.
Once done, set your compiler to minify and/or to compress its output, and then recompile one last time to css/main.css.
Check out the new file size. My resulting file weighs in at only 74 KB, which is 62 percent of its original size.

Of course, you can press further. You could, for example, take a bit more time, open each of your remaining .less files, and comment out the lines within each one. I'll leave that step to you.

Finally, let's get to the JavaScript.

Search

Your notes and bookmarks