Advertisement
Workflow

Twitter Bootstrap 101: Customize

by

Built into Twitter Bootstrap's documentation is a handy Customize page, which provides a quick way to implement a custom color scheme, custom typography and a number of other CSS customizations. Of course, the most powerful approach is to work directly with Bootstrap's LESS files. But with a few quick adjustments, and for those who prefer to work in straight CSS, this page offers you a great way to jumpstart your customizations.


Customize Colors and Typography

In this screencast, I'll walk you through converting a basic Bootstrap site to a dark color scheme. We'll give it a taller navbar and we'll pull in a pair of Google web fonts. The process is fast and pretty painless!

In a short follow-up video, I'll show you how to check for errors that can disrupt the creation of your custom CSS files. You'll need to watch out for these and be able to go back and fix them when they occur. I'll show you how that's done.

In the end, many of you will find this a great way to get the ball rolling for your custom designs.


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

Watch for Errors!

Even a small typo can introduce an error into the customization process. You'll need to watch for an "error.txt" file. If it appears alongside your custom CSS, you'll need to open and use it to help you find and correct error-causing entries in the Customize page. Let me show you an example!


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

Resources

During these videos we used:

You might also find it useful to reference the color and typography values used in the screencast:





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…
  • Web Design
    CMS
    Tumblr Appearance Options: Select ElementsTumblr 24 retina
    It's time to add some more Appearance Options to our Tumblr theme. In this episode, we're going to add a select element, populated with a list of Google fonts, allowing users to choose which fonts are used in the theme.Read More…
  • Web Design
    CMS
    Continuing With Our Tumblr Theme's CSSTumblr 15 retina
    In this part of our Tumblr theming series, we're going to continue with our theme's CSS. We'll be working directly on the live site, as a number of elements won't show up otherwise. Let's dig in!Read More…
  • Web Design
    CMS
    Styling Our Tumblr ThemeTumblr 13 retina
    Having finished the HTML markup for our theme, it's now time to begin playing with CSS. In this tutorial we'll gather everything we need to start styling; colors, typography details and so on.Read More…
  • Web Design
    CMS
    The Code Behind a Tumblr ThemeTumblr 2 retina
    In this screencast we'll take a first look at the structure of a Tumblr theme and the Tumblr customize area.Read More…
  • Web Design
    HTML/CSS
    Introducing Gumby: An Alternative CSS FrameworkGumby intro retina
    Let me introduce you to Gumby; a flexible CSS framework, currently at version 2.5. Gumby is packed with useful features, which we'll examine throughout the course of a few screencast tutorials. We'll begin by exploring its straightforward CSS variant, the UI kit, the grid, a host of other tricks, then in later videos we'll take a look at Gumby's Sass version.Read More…