This one at Mashable is a bit old, but got me thinking

If not Foundation, what else?

I know I’d prefer SASS over LESS because of my already burgeoning back-of-a-postage-stamp background knowledge

And so we reach Gumby (And the inevitable YouTube videos oh and tutorial like this at developerdrive)

Responsiveboilerplate sounded fine until I saw LESS

Important Tools

  • npm online repository for the publishing Node.js projects_and_ a command-line utility for interacting with this
  • bower a package manager for the web

Anyway, here’s the ‘go’ button

bower install gumby


The default txp theme on Github has a lot of partials

, _helpers.scss,
_code-prettify.scss ... etc.

…to adjust the gradients it’s all in /sass/core/_settings.scss

// text colours
$color-text: #333333;
$color-text-footnote: #888888;
$color-link: #114eb1;
$color-link-hover: #0066ff;
$color-link-visited: #183082;
// default gradients
$color-gradient-from: #eeeeee;
$color-gradient-to: darken($color-gradient-from, 6.5%);
$color-gradient-border: darken($color-gradient-from, 13.5%);

No overrides, just rewrite this lot : -)

NB config.rb is where input and output folders are specified

sass_path = "sass"
css_path = "css"
images_dir = "img"
fonts_dir = "fonts"

Categories ,

I was looking for yet another way to embed Flickr photos, not least because I have previously used a Flash-based widget. Anyway, there’s FlickrBomb from Zurb

<img src="flickr://Kevin Bacon" width="175px" height="175px">

except it won’t work :-(

<script src="/js/jquery.js"></script>
<script src="/js/flickrbomb-min.js"></script>
<script src="/js/app.js"></script>
<script src="/js/backbone.js"></script>
<script src="/js/underscore.js"></script>

All in before the closing body tag…

Anyway, meanwhile from flickrslidr


Nice tool to generate from an image at cssdrive

So, in the SCSS these exist as

// $primary-color: #008CBA;
// $secondary-color: #e7e7e7;
// $alert-color: #f04124;
// $success-color: #43AC6A;
// $warning-color: #f08a24;
// $info-color: #a0d3e8;

And can therefore be overwritten in _overrides.scss and ‘watched’ with Compass as per the forum

So this site can swap primary color blue for green like this

$primary-color: #706E55 !default;

Top bar can be changed too, from

$topbar-bg: #556888;


$topbar-bg: #4A4F49;

Anyway, a quick CD into the site root and two words

compass watch

…and nearly 8000 lines of CSS are automatically massaged (okay, so I’ve got the super verbose output). Even better is the compact style

compass watch -s compact

…and nearly 3000 lines of CSS are carefully updated

Categories ,

Funny the things you notice when watching Speed Code

Never mind that the icons are great, the site itself is a thing of beauty… (And even the way the repositories on Github are starred was another What’s that? moment. Anyway, Jan Kovarik gives his explanations at

Foundation Icon Fonts

Which then got me thinking… And looking! And Zurb has these also… (Does that sound American enough?)

Categories ,

Colorzilla has a CSS/SCSS mixin generator, and can spit out multiple browser versions with solid colour fall-back : -)

This sort of thing:

// needs latest Compass, add '@import "compass"' to your scss
background-color: #f6e6b4; // Old browsers
@include filter-gradient(#f6e6b4, #ed9017, vertical); // IE6-9
@include background-image(linear-gradient(top, #f6e6b4 0%,#ed9017 100%));

or as CSS

Top Bar Gradients in Zurb Foundation

scss: gradient in $topbar-bg was identified as a requirement… and seems to have been addressed

E.g. $topbar-bg-color

@mixin gradient($color-gradient-from, $color-gradient-to) {
background: {
color: $color-gradient-from;
/* Safari5.1+, Chrome10+ */
image: -webkit-linear-gradient($color-gradient-from, $color-gradient-to);
/* Firefox3.6 */
image: -moz-linear-gradient($color-gradient-from, $color-gradient-to);
/* Opera11.10+ */
image: -o-linear-gradient($color-gradient-from, $color-gradient-to);
/* CSS3 Compliant */
image: linear-gradient($color-gradient-from, $color-gradient-to);

and then, the gradients are set as

bc, $color-gradient-from: #eeeeee;
$color-gradient-to: darken($color-gradient-from, 6.5%);
$color-gradient-border: darken($color-gradient-from, 13.5%);

This from the TXP SCSS repository on GitHub


<txp:smd_calendar />

Fullsize calendar works fine, but problem for

<txp:smd_calendar size="small" />

txp mag

Okay, so it’s a bit like casting spells, but when everything’s up and running (Windows or OSX, so cmd or Terminal, and got Ruby smiling on both …actually with OSX being the biggest pain to get the right version)


On OSX, best way to update Ruby is with RVM …which in turn requires Homebrew, installed with

ruby -e "$(curl -fsSL"

…which is why, despite OSX actually shipping with Ruby (an old version), this presented a few challenges!

Need Bower, too:

[sudo] npm install -g bower grunt-cli

As per this video Getting started with SASS from Zurb

foundation new project_name --libsass

This is the preferred way with Foundation 5 because it’s faster… although the Compass instructions are even easier

foundation new MY_PROJECT

This is as per, although there’s some business around updating gems

Getting Compass to watch is as simple as cd-ing into the main sites folder and typing:

compass watch

That’s it!

SASS Overrides

For example, customizing the appearance of a navbar

Obviously the route is SASS …but where to put the customisations? It seems that the way is to use a separate partial called something catchy like overrides

@import "settings";
@import "foundation";
@import "overrides"; 

Actually, that’s not quite right, as I posted on the Foundation Forum

@import "overrides";
@import "settings";
@import "foundation"; 

Overrides needs to appear first!