- Part 1: Build Environment
- Part 2: Google's APIs and RequireJS
- Part 3: Authenticating with OAuth2
- Part 4: Backbone.sync
- Part 5: List Views
- Part 6: Creating Lists
- Part 7: Editing Lists
- Part 8: Deleting Lists
- Part 9: Tasks
- Part 10: Oh No Not More Tasks
- Part 11: Spies, Stubs, and Mocks
- Part 12: Testing with Mocks
- Part 13: Routes
- Part 14: Customising the UI
- Part 15: Updates for 1.0, Clear Complete
- Part 16: jQuery Plugins
Before starting this tutorial, you'll need the following:
- alexyoung / dailyjs-backbone-tutorial at commit
- The API key from part 2
- The "Client ID" key from part 2
app/js/config.jswith your keys (if you've checked out my source)
To check out the source, run the following commands (or use a suitable Git GUI tool):
git clone firstname.lastname@example.org:alexyoung/dailyjs-backbone-tutorial.git cd dailyjs-backbone-tutorial git reset --hard 85c358
So far our Backbone application has had a rudimentary interface. It's based on Bootstrap, which is a popular choice for developers who want a usable interface without spending too much time working on the design side of things. However, Bootstrap is a victim of its own popularity, and most of us are starting to grow tired of seeing it everywhere.
This post is about techniques for customising projects built with Backbone and Bootstrap. There are three main approaches I use to add some originality to my Bootstrap projects:
- Colours: Get the project configured with suitable branding
- Texture: Judicious use of images to add an extra dimension to background, panels, and buttons
- Custom fonts and icons: Carefully applied custom fonts and icons can create a more distinct look
Bootstrap has a customisation page that allows you to change typographic elements and colours. This is self-explanatory so I'm not going to spend too much time on it. Bootstrap is built on LESS CSS so it's easy to create your own builds of Bootstrap with custom colours baked right in.
To save time when working on client projects, I'll often dig through stock photography sites to find useful illustrations and textures. This project, however, just needs something to add a texture to the left-hand-side navigation to make it look visually distinct. An excellent resource for textures is Subtle Patterns -- a curated directory of tiled textures suitable for web and mobile projects. For legal information for use in commercial projects, see About Subtle Patterns.
I've added two tiled images to the project: one for the navigation bar and another for the
body background. The image used on the
body is white, while the navigation bar is dark grey. The navigation list elements use alpha blending to make the underlying texture appear lighter, with
rgba(255, 255, 255, .25).
It's easy to add textures to a project, particularly when they tile, and the Subtle Patterns images include a higher-DPI version as well. I find this a fun second stage to Bootstrap customisation, because it's easy to quickly swap textures around to experiment.
Custom Fonts and Icons
The first thing I wanted to change was the logo font. Rather than using an image I found a suitable font on Google Web Fonts and applied some CSS shadows. This font was added to the project by updating
index.html to load the font and updating the CSS to refer to it by name:
<link href='http://fonts.googleapis.com/css?family=Playball' rel='stylesheet' type='text/css'>
Then in the CSS the font is selected with
font-family: playball, sans-serif.
I also switched the main
body font to
PT Sans, which doesn't look radically different to the default but again elevates the look and feel away from stock-Bootstrap.
Another quick win is to use Font Awesome.
Go Forth and Customise
Adding custom fonts, textures, and icons are just a few easy ways to distinguish a Bootstrap-based project from the crowd. You've got no excuse for releasing boring-looking apps!
I'm running a build of bTask at todo.dailyjs.com. It's not exactly the same as the tutorial version at the moment because I wrote it while researching this tutorial series, but eventually I'll switch it over to use the same code as the GitHub project. It doesn't implement everything Google Tasks supports (like subtasks for example), but I use it every day at work.
The full source for this tutorial can be found in alexyoung / dailyjs-backbone-tutorial, commit 711c9f6.