Compiling and modifying bootstrap¶
Building a simple web page these days is fraught with hidden traps for the unwary. A long time ago, I sat wearing a padded jacket in a cold office, hand-typing out webpages for multi-national companies. (That got old quick so we pretty soon fixed the heating and the production workflow).
But the point was, one person used to be able to write an entire web site, suitable for the Fortune 500, in a text editor.
These days, not so much. Obviously we still use text editors, but they produce programs that produce programs that produce web sites. And they are not one-person jobs.
However one person can still pull together all the right pieces, and with Twitter Bootstrap, its even easier to get “good enough” design and look, whilst still keeping everything manageable.
I intend to create the following page template, for an open source project I am working on and promoting - it takes a DataWarehouse ETL tool (Oracle ODI) and allows it to work bi-directionally with modern source control tools (http://github.com/pmsoftware/odietamo)
- git clone the Bootstrap repo,
- run a simple compile
## Some variables for later rootdir=/opt/bootstrap
cd $rootdir git clone https://github.com/twbs/bootstrap.git
$ apt-get install -y node npm
If you have node and npm installed then:
$ cd $rootdir/bootstrap/bootstrap $ sudo npm install
This will download all the dependancies and
NB - FreeBSD is not well supported for PhantomJS - which only matters for the self-tests. I ignore this on my local machine and blip over to a VM when I need.
If that did not make sense, do not worry.
How to compile¶
Its simple, in the bootstrap dir, where we can see the Gruntfile.js run:
$ grunt dist
OK, we should have seen something like this:
Running "copy:fonts" (copy) task Copied 4 files Running "concat:bootstrap" (concat) task File "dist/js/bootstrap.js" created. Running "uglify:bootstrap" (uglify) task File "dist/js/bootstrap.min.js" created. Done, without errors.
As this is all very local, we want to see the web browser deal with it
$ cd $rootdir $ python -m SimpleHTTPServer Serving HTTP on 0.0.0.0 port 8000 ...
Now a webbrowser can ask for http://localhost:8000/example-page.html and it should see
Moving things around¶
You can skip this bit and come back later - it will make more sense then.
We don’t want to directly change the files provided for us by the bootstrap team. We do however need to change something
Our first Bootstrap File¶
We are now using Bootstrap 3. This is a new, updated version, that is mobile first. Which means its designed to be really sensible on most devices. Hooray - that means we can deploy applications to a mobile, without going through the various appstores. Well sort of.
We need a solid HTML5 template file. The best one to use is HTML5 boilerplate.
Make sure this is in the template file <head>:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Responsive friendly images. We need to add .img-responsive class to each img tag so that they are treated correctly by Bootstrap. I need to use a post-process step in the CMS to shoe-horn these in - whatever gets you through the night.
Everything in BootStrap is in a container. A container is defined as follows.
<div class="container"> ... </div>
The hero units (now seemingly renamed Jumbotrons), the forms, the tables, they
Shims and things¶
These shims and polyfills are amazing pieces of work, but (as in polyfilla) they simply cover over cracks. And they are not perfect. So I am ignoring them for now in my template code. In production this may change but for our purposes they add complexity to understanding.
A quick customisation¶
Lets start with variables.less. The CSS we use for Bootstrap is not hand-written - it is compiled into CSS after the original less code is parsed. The original less code is designed to make writing lots of CSS easier, so it supports things like variables and functions (called mixins but think returning function for ease).
So a quick snippet of variables.less:
@gray-darker: lighten(#000, 13.5%); // #222 @gray-dark: lighten(#000, 20%); // #333 @gray: lighten(#000, 33.5%); // #555 @gray-light: lighten(#000, 60%); // #999 @gray-lighter: lighten(#000, 93.5%); // #eee // Scaffolding // ------------------------- @body-bg: #fff; @text-color: @gray-dark; `
Now, lets have some fun. Firstly our test.html page. This is quite a bit of code, but it is about the simplest HTML5 + bootstrap page you can make, and it liberally ripped off from the bootstrap site.
Now the above html, is about the simplest one can get for bootstrap. And it looks like this:
Firstly let’s adjust the simplest things we can - the LESS variables.
// added pbrian @brand-back: #8a928e; @brand-fore: #8e393f; @gray-darker: lighten(#000, 13.5%); // #222 @gray-dark: lighten(#000, 20%); // #333 @gray: lighten(#000, 33.5%); // #555 @brand-primary: @brand-fore; ^^^^^^ This will roll out across the site.
And the result is :
Ok, nothing spectacular, but one line change gives us a new colour set across the board. What else can we do?
https://raw.github.com/mikadosoftware/screengrab/master/screenshots/colorschemedesigner.png http://bootstrap.lesscss.ru/less.html http://copyhackers.com/2012/12/the-3-step-hack-for-startups-bootstrapping-their-design/ http://24ways.org/2012/how-to-make-your-site-look-half-decent/ http://www.sitediscount.ru/verso/index.html
Choose a color scheme: http://colorschemedesigner.com/
##### Color Palette by Color Scheme Designer ##### Palette URL: http://colorschemedesigner.com/#0Q51Rw0w0w0w0 ##### Color Space: RGB; *** Primary Color: var. 1 = #FF9F00 = rgb(255,159,0) var. 2 = #BF8930 = rgb(191,137,48) var. 3 = #A66800 = rgb(166,104,0) var. 4 = #FFB740 = rgb(255,183,64) var. 5 = #FFCA73 = rgb(255,202,115) *** Secondary Color A: var. 1 = #FFC700 = rgb(255,199,0) var. 2 = #BFA030 = rgb(191,160,48) var. 3 = #A68100 = rgb(166,129,0) var. 4 = #FFD540 = rgb(255,213,64) var. 5 = #FFE073 = rgb(255,224,115) *** Secondary Color B: var. 1 = #FF6700 = rgb(255,103,0) var. 2 = #BF6A30 = rgb(191,106,48) var. 3 = #A64300 = rgb(166,67,0) var. 4 = #FF8D40 = rgb(255,141,64) var. 5 = #FFAB73 = rgb(255,171,115) ##### Generated by Color Scheme Designer (c) Petr Stanicek 2002-2010 @colorA1: #FF9F00; @colorA2: #BF8930; @colorA3: #A66800; @colorA4: #FFB740; @colorA5: #FFCA73; @colorB1: #FFC700; @colorB2: #BFA030; @colorB3: #A68100; @colorB4: #FFD540; @colorB5: #FFE073; @colorC1: #FF6700; @colorC2: #BF6A30; @colorC3: #A64300; @colorC4: #FF8D40; @colorC5: #FFAB73;
We can also adjust the fonts site wide.
New fonts: http://www.google.com/fonts/
<link href=’http://fonts.googleapis.com/css?family=Roboto‘ rel=’stylesheet’ type=’text/css’>
font-family: ‘Roboto’, sans-serif; <link href=’http://fonts.googleapis.com/css?family=Press+Start+2P‘ rel=’stylesheet’ type=’text/css’> (ad nauseum example)
We can see the results (quite horrible) here:
Building my masterpiece¶
OK, so I want to transform this
So lets start with Design basics - cribbed liberally from the folks on InterWebs
- Step 1 - Make it look good in Black and White first
- Step 2 - Write the right things
- Step 3 - Do less. No less than that.
Well, just colour wheels really.
Building my own bootstrap classes¶
Its pretty obvious what <div class=”span6”> means. But that does not mean its a good idea. Yopu want a sidebar, not a span6.
So we define our own classes, and use those in the HTML instead.
This is accounted for in Bootstrap by http://getbootstrap.com/css/#grid-less