Advertisement
HTML/CSS

Twitter Bootstrap 101: Trimming File Size

by

One of the common criticisms of frameworks such as Twitter Bootstrap is that they include far more code than you actually use in your site, leaving you with a bloated code base and poor site performance. This is a possible danger, but Bootstrap's Customize page provides an excellent tool for addressing the problem. Let me walk you through the process of customizing your CSS and JavaScript files to greatly reduce their file size.

That takes care of the first video, in the second I'll walk you through another important step: squeezing bits out of your image files, using Yahoo!'s Smushit tool. Together, these two steps (optimizing your code and optimizing your images) will greatly reduce your site's footprint.


Step 1: Trim CSS and JavaScript

We'll use Twitter Bootstrap's Customize page to select and download only the CSS and JavaScript components we need, resulting in much smaller file sizes.

Alternatively, Download the video, or subscribe to Webdesigntuts+ screencasts via iTunes or YouTube!

Screenshots: CSS & JS Components

The following are screenshots of selections I made in the screencast.

Want to Optimize Further?

Once you've downloaded and deployed your customized CSS and JS files, you may choose to make further gains by using a plugin like Dust Me Selectors to identify remaining unused selectors, which you could edit out of your CSS file by hand. This will be much easier with the smaller customized file than with the original file.


Step 2: Smush Your Image Files

While we're optimizing files, we may as well mention an additional step that will help you with the biggest files in the average site: the image files. There's a lot to think about when optimizing images for the web. You may be surprised to know that not all compression tools are equal. The "Save for web and devices" dialog in Photoshop turns out to be one of the least effective compression tools out there.

Here we'll use Yahoo!'s Smushit tool to help us accomplish what Photoshop couldn't.

Alternatively, Download the video, or subscribe to Webdesigntuts+ screencasts via iTunes or YouTube!

For Further Reading

Related Posts
  • Web Design
    HTML/CSS
    Quick Tip: Fix Your Messy CSS With SMACSSSmacss retina
    Face it, your CSS is a complete mess! Today I'm going to introduce you to SMACSS, a set of guidelines and principles to tidy up your stylesheets, making your projects better organised, flexible and scalable.Read More…
  • Code
    JavaScript & AJAX
    Managing Your Build Tasks With Gulp.jsGulpjs retina preview
    The benefits of task runners in software development is obvious. They help to automate common, often tedious tasks and let you squarely focus on more important things, like writing awesome code. Seriously though, the ability to automate tasks such as image compression, minification, unit testing and much more is a huge time saver.Read More…
  • Web Design
    UX
    Walk Users Through Your Website With Bootstrap TourTour retina
    When you have a web application which requires some getting used to from your users, a walkthrough of the interface is in order. Creating a walkthrough directly on top of the interface makes things very clear, so that's what we're going to build, using Bootstrap Tour.Read More…
  • Web Design
    Industry
    Web Design 2014: What to Watch Out For014 retina
    This year has been a brilliant year in web design. More than any other year perhaps, huge strides have been made towards the maturing of the field. Let's have a look at some of what we can expect for the future of web design as an industry.Read More…
  • Web Design
    Applications and Tools
    Setting Up Gumby With the Claymate Command Line ToolGumby claymate retina
    In this tutorial I'm going to explain how you can use Gumby's Claymate. Claymate is a command line interface tool, which helps simplify a number of tasks relating to installing and maintaining your Gumby projects.Read More…
  • Web Design
    HTML/CSS
    Quick Tip: Make the Most of CSS Attribute SelectorsSelectors preview
    If you've never used attribute selectors in your CSS before, you're missing out on a great way to manipulate your styles. Let's take a look at how you can make the most of them..Read More…