London tube map redesign

Redesigned London tube map by Jug Cerović

Redesigned London tube map by Jug Cerović

The London tube map first designed in the 1930s by Harry Beck was a piece of design genius. But I really like this redesign by French- Serbian architect Jug Cerović.

Ukip will be pleased, it returns the Circle line to being a circle again!

Not content with the London underground map he has also tackled maps of

While we’re on the topic of tube maps. Here’s a tube map made entirely from HTML and CSS.

Bootstrap vs Foundation at Learnable

Two men and a woman chatting

Bootstrap vs Foundation

Learnable has just published an interesting video where two front-end developers discuss the benefits of both Bootstrap and Foundation.

I’ve been using Bootstrap on and off for the last couple of years, having been a firm user and contributor to the Blueprint CSS community.

For the last few months I’ve been really keen to check out Foundation. From what I’ve seen so far it looks very impressive. I’ll report back once I’ve had a more in depth look.

In the meantime, check out the video: Bootstrap vs Foundation.

Compiling Twitter Bootstrap 2.0 with SimpLESS on Windows 7

Using LESS with Bootstrap

This afternoon, after a couple of hours of poking and prodding various pieces of software, I worked out how to compile Twitter Bootstrap 2.0 using SimpLESS. This is what I’ve discovered so far…

CSS frameworks

Having been an avid user of the Blueprint CSS framework for a number of years now (I created what has become quite a popular cheatsheet for the framework, which even got released with the Joomla! CMS a few versions back) I am aware of its limitations, particularly in the area of responsive web design.

So I’ve been keeping an eye on how various CSS frameworks have been developing, such as 320 and up, Less Framework 4 and Twitter Bootstrap.

Twitter Bootstrap reached version 2.0.0 in late January of this year; the current version is 2.0.3 (released 24 April 2012). I downloaded it last week and have spent a couple of days idly playing around with it. with a view to using it on a future web project.

One thing that I was uncertain about, however, was how to use the LESS files.

LESS

When it comes to CSS pre-processors, such as LESS and Sass, I’m a bit late to the party. What can I say, I’ve got twins and a 16 month old and I still don’t get enough sleep.

Sass claims that it “makes CSS fun again”; LESS that it “extends CSS with dynamic behavior such as variables, mixins, operations and functions.” Chris Coyier prefers SASS. Bootstrap from Twitter uses LESS so I guess, for now, I’m going with LESS.

I’ve dabbled with both LESS and Sass over the last year but not enough to get proficient in either, and certainly not enough to use either in a production environment. One put-off for me, certainly in the early days, was the lack of GUI to compile the files. Sass uses Ruby; LESS uses JavaScript (either client- or server-side).

These days, however, there are a number of standalone desktop applications that allow you to compile LESS code without needing to poke around with command-line commands. One of my favourites is SimpLESS from We Are Kiss.

SimpLESS

SimpLESS is available for Windows, Linux and Mac. It installs as a very simple application onto which you drag-and-drop your directory/folder containing the .less files, click a button and it convert your LESS files to CSS. It’s just a shame that you can’t batch process all the files, a feature that WinLess offers.

By default, if your directory structure includes a \less directory and a \css directory then SimpLESS will compile all your .less files into .css files within the \css directory. Sounds simple enough. No faffing, and you get a very usable CSS file at the end of it all.

Also by default SimpLESS will compress/minify your CSS files unless you include //simpless:!minify in the .less file. I include it at the top of the file.

Bootstrap from Twitter

Twitter Bootstrap 2.0 uses LESS. It has a directory full of LESS files that control every aspect of the framework: accordion, alerts, breadcrumbs, button-groups, buttons, carousel, forms, layouts, etc.

So, if you want 16 columns instead of 12 edit the @gridColumns, @gridColumnWidth and @gridGutterWidth variables within variables.less and recompile. That’s how customisable the framework is.

Except… when I did that I and I used SimpLESS to compile the LESS file I got an error:

Syntax error in progress-bars.less on line 33

Syntax error in progress-bars.less on line 33

Syntax error in progress-bars.less on line 33.

After a little digging around on the internet and I discovered a very helpful post on GitHub. This is what I did…

How to fix SimpLESS to compile Twitter BOOTSTRAP 2.0 on Windows 7

  1. Download and unzip Twitter Bootstrap v.2.0;
  2. Copy the \less directory to a new test directory and create a new \css directory as its sibling, so you will have:
    \test
    \test\less
    \test\css
  3. Download and install SimpLESS;
  4. Download the fixed version of less.js from We Are Kiss;
  5. Replace the existing less.js located at
    C:\Program Files\SimpLESS\Resources\js (32-bit Windows)
    C:\Program Files (x86)\SimpLESS\Resources\js. (64-bit Windows);
  6. Run SimpLESS;
  7. Drag your \test directory onto SimpLESS;
  8. Click the ‘reload’ icon against bootstrap.less to compile it;
  9. Success! You will now have compiled .css files in \test\css
Successfully compiled LESS file

Successfully compiled LESS file

A few things I noted:

  • If you run SimpLESS without the fixed less.js file then you will need to restart the application after you copy over the fixed less.js file in order for it to start using the new version.
  • less.js v.1.3.0 from the official LESS website does not work; only this fixed version from We Are Kiss works as expected.
  • The two main files to compile are bootstrap.less and responsive.less.

Time to get creating…

Blueprint cheat sheet updated for version 1.0.1

20110618-blueprintcheatsheet43

This week I updated my Blueprint CSS framework cheat sheet for Blueprint v.1.0.1 which was released last month.

Changes

I mostly fixed a few typos, and added the new features that the latest version of the framework added: mostly HTML5 input attributes. I made the following changes:

  • NEW—FORMS Added new HTML5 input attributes: email and url.
  • NEW—IE FIXES Added IE8#HACK.
  • FIX—FLOAT CLASSES p .left and p .right was showing the margins only for p .left.
  • FIX—Page 2 was showing a completely different version number from page 1.
  • CHANGE—Updated the list of URLs on page 2, removing one that is now redundant.

Download

You can download it from the usual places including garethjmsaunders.co.uk/blueprint/

It’s released under a Creative Commons Attribution-ShareAlike 2.5 UK license so feel free to use it, adapt it, whatever… The source document (in Microsoft Publisher 2010 format) is available on the site too.

Enjoy!

Blueprint CSS v.1.0 cheat sheet

Blueprint CSS 1.0 cheat sheet

This afternoon I published my Blueprint CSS v.1.0 cheat sheet, a handy guide to all the classes used in the Blueprint CSS framework.

I even got a mention on the official Blueprint CSS Twitter account, which was kind:

Announcement about the latest cheat sheet on the Blueprint CSS Twitter account

Announcement about the latest cheat sheet on the Blueprint CSS Twitter account

The cheat sheet is released under a Creative Commons license, allowing you to adapt the work so long as I’m attributed. The file is available in PDF and Microsoft Publisher 2007/2010 (source copy) formats, as well as on Scribd.

Differences between Blueprint CSS 0.9.1 and 1.0

Blueprint CSS

I know I’m a bit behind the times posting this given that the Blueprint CSS framework was updated to version 1.0 (from 0.9.1) on Wednesday 29 September 2010 but I’m in the process of updating my cheatsheet and I thought that someone might find the following interesting/useful.

Changelog

The official changelog file included in Blueprint CSS version 1.0 gives the following brief overview of changes:

  • Added detailed explanations to core uncompressed CSS files [CMM]
  • Added .info and .alert classes to forms.css [CMM]
  • Fixed numerous bugs in forms, including the fieldset padding bug in IE6-8 [CMM]
  • Fixed specificity problems in typography.css and grid.css [CMM]
  • See Lighthouse for more bug fixes

Comparing the files for version 0.9.1 with version 1.0, however, I’ve noted the following changes in detail.


reset.css

1. NEW body background

A new declaration has been added to the body rule “background: white;”.

2. NEW caption, th, td float rule

New declaration has been added to the ‘caption,th, td’ rule to prevent these elements from floating.

3. NEW :focus pseudo-class

New pseudo class to remove outlines from on-focus links.

4. CHANGE html element

The ‘html’ element has now been separated from the main reset group. ‘html’ now no longer inherits the font and vertical-align rules along with ‘div, span, object, etc.’

5. ENHANCEMENT code style

Code style on table rules has been made consistent with declarations above it, on separate lines rather than inline.

6. ENHANCEMENT comments

Three rules now have new comments.

  1. The ‘article, aside, dialog, etc.’ rule is now prefixed with a comment to explain that “this helps to make newer HTML5 elements behave like DIVs in older browers”
  2. The ‘body’ rule is now prefixed with a comment to explain that “line-height should always be unitless.”
  3. The ‘caption, th, td’ rule is now prefixed with a comment to explain that “float:none prevents the span-x classes from breaking table-cell display”.

typography.css

7. NEW classes

New .left and .right classes which can be used on any element. These replace the p img.left and p img.right groupings.

8. NEW table-striping

New rules to enable table-striping, in both new and old browsers.

9. CHANGE colours

  1. Colour for ‘a:focus’ and ‘a:hover’ pseudo-selectors have changed from #000 (black) to #09f (bright blue).
  2. Colour for ‘a’ element has changed from #009 (dark blue) to #06c (bright blue).

10. ENHANCEMENT dfn

The ‘dfn’ rule has been merged with the ‘strong’ rule as they both had only one declaration: ‘font-weight: bold’.

11. CHANGE lists

The ‘padding-left’ declaration on ‘ul’ and ‘ol’ elements is now 1.5em rather than 3.333em.

12. ENHANCEMENT comments

  1. New comment to prefix the .left/.right rules to explain that “these can be used to pull an image at the start of a paragraph, so that the text flows around it (usage: <p><img class=”left”>Text</p>)”
  2. New comment to prefix the tables rules to explain that “because of the need for padding on TH and TD, the vertical rhythm on table cells has to be 27px, instead of the standard 18px or 36px of other elements.”
  3. New comment to prefix the new rules for table-striping: “You can zebra-stripe your tables in outdated browsers by adding the class “even” to every other table row.”

forms.css

13. NEW IE8 hack for fieldset and legend

IE8 has a bug whereby it doesn’t apply padding correctly on fieldsets. This hack fixes it.

14. NEW .alert and .info classes

There are now two new coloured box classes to join ‘success’, ‘error’ and ‘notice’ called ‘alert’ and ‘info’. ‘alert’ shares the same colours as ‘error’ (red) and so can be used where ‘error’ is semantically the wrong term to use. ‘info’ is blue.

15. ENHANCEMENT select rule

The ‘select’ rule has now been separated from the ‘input’ rules, presumably for semantic reasons and to make way for the new HTML5 input attributes.

16. CHANGE input rules

The input rules have been changed.  Gone are the input.checkbox and input.radio classes. There are now two HTML5 attributes: input[type=text], input[type=password].

17. ENHANCEMENT comments

  1. New comment to prefix the label, fieldset and legend rules to introduce a new IE8 hack: “A special hack is included for IE8 since it does not apply padding correctly on fieldsets”
  2. New comment to prefix input elements with new HTML5 attributes: “Attribute selectors are used to differentiate the different types of input elements, but to support old browsers, you will have to add classes for each one. “.title” simply creates a large text field, this is purely for looks.”
  3. New comment to prefix ‘form.inline’ rules: “This is to be used on forms where a variety of elements are placed side-by-side. Use the p tag to denote a line.”

grid.css

18. ENHANCEMENT !important declarations

‘!important’ declarations have been placed after every ‘input-span-x’ rule (where x = 1-24).

19. CHANGE change of border color

The border colour on both ‘.border’ and ‘.colborder’ classes has changed from #eee (light grey) to #ddd (mid-grey).

20. FIX .push class float

The float declaration on all the .push-x (where x = 1-24) rules has been changed from ‘float: right;’ to ‘float: left;’

21. ENHANCEMENT .prepend-top and .append-bottom

‘div.prepend-top’ and ‘div.append-bottom’ selectors have been added to the ‘.prepend-top’ and ‘.append-bottom’ selectors, presumably to make these rules more specific.

22. CHANGE height of hr element

The height of the horizontal rule (‘hr’) element has been changed from .1em to 1px.


ie.css

23. FIX legend

There is a new ‘legend’ selector that fixes issues with margins on legends within fieldsets in IE.

24. FIX label

There is a new ‘label’ selector which corrects how labels behave in IE6 and IE7.

25. DELETED form.inline label

The rule for ‘form.inline label’ has now been deleted in light of the new ‘label’ fix (above).


print.css

26. ENHANCEMENT comment

There is now a comment to prefix the ‘:link:after, a:visited:after’ selectors which explains “This has been the source of many questions in the past. This snippet of CSS appends the URL of each link within the text. The idea is that users printing your webpage will want to know the URLs they go to. If you want to remove this functionality, comment out this snippet and make sure to re-compress your files.”

Extending colborder in Blueprint CSS

Blueprint

For the last few months, when time has allowed, I’ve been working on a new CSS framework combining my favourite elements from Blueprint CSS framework and 960 Grid System but this week I ran into a problem.

I’m developing the adapted framework to use when I redesign my website later this year. When it’s completed I will also make it publicly available on my website to whoever wants to use it and adapt it.

This is what I want

On Friday night, while testing it, I spotted something about the original Blueprint framework that I hadn’t noticed before.

It was to do with the colborder rule. What if I want to do this:

12 columns of text

That is create two blocks of text, the first spanning six columns with two blank columns appended on the end, then a colborder (which as the name suggests is a border that span an entire column) and finally the second block of text which spans three columns.

Just to be clear, in this example I’m using an adapted Blueprint grid. The default grid uses 24 columns, but in this example I’m using 12 columns as fewer and wider columns make it easier to demonstrate what I’m talking about.

The code, I initially thought, would look like this:

45
46
47
48
49
50
51
52
53
<div id="column1" class="span-6 append-2 colborder">
  <h2>span-6 append-2 colborder</h2>
  <p>Lorem ipsum dolor sit amet, ... </p>
</div>
 
<div id="column2" class="span-3 last">
  <h3>span-3 last</h3>
  <p>Lorem ipsum dolor sit amet, ... </p>
</div>

My blank columns have disappeared

But testing this out, what this code actually gives you is this:

Six columns, a line, three columns

Hang on! Where are my two appended columns in the first block, the ones that should appear after the span-6 and before the colborder?

append-x and colborder don’t mix

To answer that I had to take a look at the Blueprint source code. As these three classes are to do with the layout grid these CSS rules span-6, append-2 and colborder are all defined in (my adapted) blueprint\src\grid.css:

58
59
60
.span-6 {
  width: 460px;
}
106
107
108
.append-2 {
  padding-right: 160px;
}
138
139
140
141
142
.colborder {
  padding-right: 49px;
  margin-right: 50px;
  border-right: 1px solid #eee;
}

So, in order:

  1. span-6 class is setting the width of the content to 460px.
  2. append-2 class is setting a padding-right of 160px.
  3. colborder is then overwriting padding-right with a width of 49px thereby making our appended two columns effectively disappear.

A new rule is required

I really wanted a solution that didn’t require any extra mark-up. Because I realised that this could be achieved with this code:

45
46
47
48
49
50
51
52
53
54
55
<div id="column1wrapper" class="span-8 colborder">
  <div id="column1" class="span-6 append-2">
    <h2>span-6 append-2</h2>
    <p>Lorem ipsum dolor sit amet, ... </p>
  </div>
</div>
 
<div id="column2" class="span-3 last">
  <h3>span-3 last</h3>
  <p>Lorem ipsum dolor sit amet, ... </p>
</div>

but that has an extra level of div tags.

After a little pondering, and a little scribbling on a scrap of paper, I realised that the solution lay in writing a new CSS rule that would prepend a colborder before the second block rather than append one after the first block.

In keeping with the append/prepend terminology of Blueprint I decided to call the new rule precolborder. The 12-columns version looks like this:

145
146
147
148
149
.precolborder {
  padding-left: 49px;
  margin-left: 29px;
  border-left: 1px solid #eee;
}

The 24-columns version (compatible with the default Blueprint CSS framework) looks like this:

165
166
167
168
169
170
171
/* Border with more whitespace on left hand side
    of a column, spans one column. */
.precolborder {
  padding-left: 24px;
  margin-left: 15px;
  border-left: 1px solid #eee;
}

and so our HTML now looks like this:

45
46
47
48
49
50
51
52
53
<div id="column1" class="span-6 append-2">
  <h2>span-6 colborder</h2>
  <p>Lorem ipsum dolor sit amet, ... </p>
</div>
 
<div id="column2" class="precolborder span-3 last">
  <h3>precolborder span-3 last</h3>
  <p>Lorem ipsum dolor sit amet, ... </p>
</div>

which looks like this on the rendered page:

Text spanning six columns, two blank columns, a border and then text spanning three columns

Which, if I’m not mistaken, is just what I wanted.

Feel free to use it if you like.