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



Just as I’m finally embracing Twitter and putting a feed on the site, with Kevin Potts again leading the way, linking to two plugins…

  1. kml_twitter
  2. arc_twitter

Oh, and I’ve got a nice Foundation social icon, in the bag, too

…I’m reminded of why I was such a slow adopter in the first place by Michael Bester (author of kimili of the plugin fame)… (Oh, and Statamic and Typekit get a mention again).

Oh, and Andy Carter’s plugin works a treat, too…



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