Photon – CSS 3D Lighting Engine #

Tom Giannattasio authored a very powerful lighting engine using JavaScript and CSS3, and it is very easy to use – Photon. There are three basic concepts in Photon:

  • Photon.Light (A point in 3D space from which faces are lit)
  • Photon.Face (A DOM element to shade with a given light)
  • render (Tie a light and a face together)

A Quick Start, from the project’s website:

var light = new Photon.Light();
var face = new Photon.Face( $('.face-1')[0] );
face.render(light, true);

That’s it! Styling is handled with CSS, and you can setup as many face and light combinations as you want. There is even the concept of a Photon.FaceGroup, which makes shading multiple faces with a single light source dead easy.

Checkout the awesome examples or view the source on Github.

Cassette – Web asset manager for .NET with support for Less and CoffeeScript #

Asset packaging is a hot topic these days. Andrew Davey brings the fun to .NET with Cassette, an asset bundler for .NET web apps. Much like Jammit or Sprockets for Ruby apps, Cassette concatenates, minifies, and manages dependencies between scripts:

@{
  Bundles.Reference("Scripts/app/page.js");
}
<!DOCTYPE html>
<html>
<head>
  <title>Web App</title>
  @Bundles.RenderScripts()
</head>
<body>
  ...
</body>
</html>

… which yields individual scripts in debug mode:

<!DOCTYPE html>
<html>
<head>
  <title>Web App</title>
  <script src="/Scripts/lib/jquery.js?a4babad4b" type="text/javascript"></script>
  <script src="/Scripts/lib/jquery-ui.js?53dd39212" type="text/javascript"></script>
  <script src="/Scripts/app/tools.js?4d03ae0b" type="text/javascript"></script>
  <script src="/Scripts/app/widgets.js?cf319fe0b" type="text/javascript"></script>
  <script src="/Scripts/app/page.js?485f05e21" type="text/javascript"></script>
</head>
<body>
  ...
</body>
</html>

… and concatenated, minified assets in production mode:

<!DOCTYPE html>
<html>
<head>
  <title>Web App</title>
  <script src="/_assets/scripts/Scripts/lib_4bad47afb" type="text/javascript"></script>
  <script src="/_assets/scripts/Scripts/app_b7c29fecc" type="text/javascript"></script>
</head>
<body>
  ...
</body>
</html>

Cassette even supports Less and CoffeeScript. Please, someone fork this and bless the community with the pure goodness that is Sass.

#70: Foundation and other Zurb goodies

Wynn caught up with Jonathan and Matt from Zurb to talk about Foundation, their HTML5 front end scaffold and many projects from the Zurb playground. Items mentioned in the show: Jonathan Smiley – Design lead at Zurb Matt Kelly is a developer at Zurb The Zurb playground showcases many Zurb’s front end experiments. Zurb foundation […]

Zurb Foundation – Design scaffold for your web app #

The talented team at Zurb has released Foundation, a design scaffold for building web applications. Much like HTML5 Boilerplate, Foundation comes with some sensible markup defaults, however it goes farther with attractive styles for most interface elements in the spirit of Twitter’s Bootstrap project.

Screenshot

Along with a grid layout and form styling, Foundation also bundles two powerful Zurb JavaScript plugins: Orbit and Reveal.

While the front end code is server framework agnostic, Rails developers can integrate Zurb Foundation easily with the zurb-foundation gem which delivers foundation assets via the Rails 3.1 Asset Pipeline.

CSS1K: A demonstration of what can be accomplished with only 1k of CSS #

CSS isn’t a subject we cover too often here on The Changelog. Most often, we are talking about Sass (drink!), Compass, Stylus, Less or some other blend of “pre-processor” we, fan boys, love to cover. What we need to realize, and not forget, is that all of these solutions regardless of how awesome they are – in the end they ALL produce CSS. That’s what the browsers consume, and in the end that’s what we are writing. This will be the case for the foreseeable future.

There’s Beauty in CSS Design

Back in the day (2003), we as a design community and a community that was facinated with what could be done with CSS alone flocked to Dave Shea’s CSS Zen Garden – it showcased what was possible with CSS-based designs. That helped prove what CSS was capable of in its early days and that lead to an explosion in the use of CSS on the web.

Well, a lot has changed since 2003, and there has been massive advancement of the CSS spec, and today you can do almost anything with only CSS. As CSS use expands, so does the average CSS file size. Large websites often sport CSS files in the 15-25k range – some even bloat all the way up to a megabyte! Whoa.

So what’s CSS1K about?

CSS1K, like CSS Zen Garden, invites you to show that web developers are more inventive than ever, and that limitations can spark creativity. Fork CSS1K at GitHub, craft your own CSS style and send your submission as a pull request. If you don’t have a GitHub account, you can send in your submission via e-mail.

In your CSS file, specify the name of the style, your name and URL (such as your homepage) if you would like them to link to you. Check out the example below – by the way, Columns by Alexander Makarov is one of my favs.

/* CSS1K entry
 * "Columns" by Alexander Makarov (http://rmcreative.ru)

Rules of participation

  • Submissions must consist of only CSS
  • Submissions may be up to 1K (1024 bytes) minified
  • Vendor prefixes are not counted to the total number of bytes – submit your code un-prefixed and they will add necessary prefixes (sounds like a PITA)
  • Any external resources and images, including data URI’s, @font-face and @import’s, are forbidden
  • The page does not have to look the same in every browser, but graceful degradation is encouraged
  • The submitted code is licensed under the MIT License

If you have any questions, reach out to Jacob on Twitter at @CSS1K.

Good luck and happy styling.

[Project on GitHub] [Homepage]

AssetHat: Load your CSS and JS faster. Your assets are covered. #

Ron DeVera reached out to us a few weeks back to let us know about a new project he’s working on at Mint Digital called AssetHat.

AssetHat is a Rails gem that hopes to make the web a little bit quicker by making front-end assets (CSS, JS and images) load faster (especially on mobile devices). It does the usual minification and concatenation, but unlike others, AssetHat automatically takes advantage of Google’s CDN and cdnJS for loading common third-party libraries. There’s even a little switch to enable LABjs mode, so you can quickly A/B test to see whether LABjs is right for their site.

Google said it best, “Every millisecond counts. Nothing is more valuable than people’s time.” So do what you can to save your users some time and make your project faster.

Example usage

AssetHat is super-easy to set up for Rails 3 (or even Rails 2.3 with Bundler):

Before AssetHat

app/views/layouts/application.html.erb:

<%= stylesheet_link_tag 'reset', 'application', :cache => 'application' %>
<%= javascript_include_tag Rails.env.production? ?
      'http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js' :
      'jquery-1.6.0' %>
<%= javascript_include_tag 'plugin1', 'plugin2', :cache => 'plugins' %>
<%= javascript_include_tag 'application' %>

app/views/layouts/admin.html.erb:

<%= stylesheet_link_tag 'reset', 'admin', :cache => 'admin' %>
<%= javascript_include_tag Rails.env.production? ?
      'http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js' :
      'jquery-1.6.0' %>
<%= javascript_include_tag 'plugin1', 'plugin2', :cache => 'plugins' %>
<%= javascript_include_tag 'admin' %>

After AssetHat

app/views/layouts/application.html.erb:

<%= include_css :bundle => 'application' %>
<%= include_js  :jquery, :bundles => ['plugins', 'application'] %>

app/views/layouts/admin.html.erb:

<%= include_css :bundle => 'admin' %>
<%= include_js  :jquery, :bundles => ['plugins', 'admin'] %>

Use a config file to keep your layouts lightweight config/assets.yml:

css:
  bundles:
    application: ['reset', 'application']
    admin:       ['reset', 'admin']
js:
  vendors:
    jquery:
      version: 1.6.0
  bundles:
    plugins:     ['plugin1', 'plugin2']
    application: ['application']
    admin:       ['admin']

Installation

Installation and configuration is easy, read the details at their site, or check out the readme for full details.

Learn more

[Source on GitHub] [Homepage]

scrollability: Native scrolling for the mobile web #

Perhaps even more than advanced features like GPS, camera access, contacts, and
App stores, the lack of viewport-aware position:fixed is what drives
many apps to be developed as a native experience.

Joe Hewitt who brought us
Firebug and the Facebook iPhone app has
released Scrollability, a
single script with no external dependencies that allows developers to
achieve near-native feeling scrolling, just by adding a few CSS classes
to their markup. In just a few hours of its release, the project has over 250 watchers on GitHub.

Joe includes a simple demo for iOS devices that demonstrates super smooth scrolling as well as fixed header and footer elements.

Screencap

[Source on GitHub]

Sass 3.1 released, now with functions, lists, and @media bubbling #

Sass continues to provide innovative new ways to DRY up our CSS. Version
3.1 is
out
and offers many new language features, compilation performance improvements, and some new command line options.

Sass, extend thyself with Sass-based functions

Rubyists have long had the ability to extend Sass, but now anyone can
create powerful functions using only Sass:

$grid-width: 40px;
$gutter-width: 10px;

@function grid-width($n) {
  @return $n * $grid-width + ($n - 1) * $gutter-width;
}

Lists

Sass now includes some handy functions to work with lists introduced in
version 3.0 including nth, append, join, and length:

$ sass -i
>> nth(1px 2px 10px, 2)
2px
>> append(1px 2px, 5px)
(1px 2px 5px)
>> length(5px 10px)
2

There is also a new @each directive to iterate over lists:

@each $animal in puma, sea-slug, egret, salamander {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}

New command line utility and breaking changes

Sass 3.1 brings changes to command line tools and some breaking changes:

  • There is a new scss command line utility to compile stylesheets, defaulting to the SCSS syntax.
  • @import used with a path without a file extension will now throw
    an error
  • Old-style ! variable support has been removed
  • The css2sass command line utility has been removed in favor of
    sass-convert.

Check out the
Changelog
for complete release details. For a deeper look at Sass and Compass, check out our upcoming book Sass and Compass in Action from Manning, now in early access.

[Source on GitHub]

Adapt.js: More efficient responsive design #

As the mobile space continues to grow, there has been a growing interest in Responsive Web
Design
,
making use of CSS media
queries
to selectively target
device screen size and layout orientation in CSS stylesheets. But as
Jason
Grigsby
points out, media queries have
substantial
drawbacks
. Since media queries only filter styles and (and related image assets) on the client, you may end up pushing a lot of data down to the client that the user may never see. In mobile applications, this is extremely costly.

Nathan Smith, JavaScript hacker and
creator of the 960 Grid System has released
Adapt.js, a lightweight JavaScript library that
will let you specify a list of stylesheets and the screen sizes for
which they should be loaded:

// Edit to suit your needs.
var ADAPT_CONFIG = {
  // Where is your CSS?
  path: 'assets/css/',

  // false = Only run one time, when page first loads.
  // true = Change for window resize or page tilt too.
  dynamic: true,

  // First range entry is the minimum.
  // Last range entry is the maximum.
  // Should have at least one "to" range.
  range: [
    '760px            = mobile.css',
    '760px  to 960px  = 720.css',
    '960px  to 1280px = 960.css',
    '1280px to 1600px = 1200.css',
    '1600px to 1920px = 1560.css',
    '1920px           = fluid.css'
  ]
};

When your page loades, the appropriate layout is written to the <head>
of your document based on the screen width of the page. If you enable the
dynamic setting, additional stylesheets will be fetched when the user
resizes the browser window or rotates their mobile device.

Silver bullet?

Nathan admits that every project is different and there are tradeoffs
between stylesheet size and extra network hops:

As with any area in which technological approaches are open for
debate, there is the danger of religious fanaticism, where we each
rally behind a respective method and defend it vehemently. I would
caution you to weigh the options, consider mobile users, and choose an
approach makes sense for you.

[Source on GitHub] [Web
site
]

Episode 0.5.3 – Formalize and News Roundup Design Edition with Nathan Smith

Episode 0.5.3 – Formalize and News Roundup Design Edition with Nathan Smith Adam and Wynn were joined by Nathan Smith, creator of 960.gs to talk about his new project Formalize and the latest news on The Changelog. Download MP3 Items mentioned in the show: Nathan Smith, front end dev, speaker, and author 960 Grid System […]

rack-pagespeed: Rack middleware for page speed optimization #

Thanks to work by Google and Yahoo, we’re all better informed about how to speed up our web pages. For those on Apache, Google has made it easier to implement these ideas at the Apache Module level. For those running on Ruby web frameworks, Julio Cesar offers up the same goodness as Rack middleware.

Rack Pagespeed offers some HTML output filters to help you implement page optimization best practices with minimal effort. To get started, install the gem:

gem install rack-pagespeed

For Sinatra, Rack, or Padrino apps, configure Rack Pagespeed in your config.ru Rackup file:

require 'rack/pagespeed'
require 'myapp'
use Rack::PageSpeed, :public => "/app/public/dir" do
  store :disk => Dir.tmpdir # require 'tmpdir'
  inline_javascript :max_size => 4000
  inline_css
  combine_javascripts
end
run Sinatra::Application

For those Rails, create a rack_pagespeed.rb initializer with:

require 'rack/pagespeed' # somewhere
class Application < Rails::Application
  config.middleware.use Rack::PageSpeed, :public => Rails.public_path do
    store :disk => Dir.tmpdir # require 'tmpdir'
    inline_javascript :max_size => 4000
    inline_css
    combine_javascripts
  end
  # ...

Filters

Out of the box, Rack Pagespeed supports filters to:

  • Inline JavaScript under 2kb
  • Inline CSS under 2kb
  • Bundle JavaScript files
  • Minify JavaScript files
  • Bundle CSS files
  • Inline images using data-uri

You can even roll your own filters.

Storage

Rack Pagespeed currently supports two storage options: disk and memcached. See the well designed docs for advanced options.

[Source on GitHub] [Web site]

compass-magick: Extend Sass with power of ImageMagick #

Compass delivers powerful features on top of Sass including support for CSS3 and image sprites. With Compass-Magick, Stan Angeloff pushes the envelope a bit and adds the power of ImageMagick (via RMagick), allowing you to create images for your stylesheets on the fly:

background: transparent magick-image('nav.png', 940px, 50px,
  magick-erase(blue),
  magick-linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)),
  magick-top-left-corner(10px),
  magick-top-right-corner(10px)
);

In this example, the magick-image function creates an image with filename nav.png with a linear white gradient over blue background with top rounded corners. If a filename is not specified, the image is embedded directly into the stylesheet with data-uri.

Compass-Magick is a nifty way to dynamically create images to serve up for older browsers that do not support CSS3 rounded corners and gradients. Check out the Readme for a full list of functions and usage options.

[Source on GitHub]

Stylebot introduces social stylesheet sharing #

Since we first covered Stylebot a few months back, I’ve been using it every day to bend web pages to my will. GitHub gets a healthy dose of Menlo on all code blocks and my TeuxDeux list seems a bit more personal in Hand of Sean.

Stylebot.me, the project home page, now includes some nifty social features, allowing you to share your styles with others, like this whitewashed view of Hacker News:

Hacker news

The site even lets you view and copy styles to the clipboard:

body {
 background-color: fff;
}

a:hover {
 color: #ff3300;
}

span.pagetop {
 font-family: Helvetica, Arial, sans-serif;
 color: transparent;
}

span.pagetop a {
 color: #999;
}

span.pagetop a:hover {
 text-decoration: underline;
}

span.yclinks {
 display: none;
}

tbody:last {
 display: none;
}

body>center>table>tbody>tr:last-child {
 display: none;
}

td>a>img {
 display: none;
}

td.title a {
 font-family: Helvetica, Arial, sans-serif;
 font-style: normal;
 font-weight: bold;
 font-size: 24px;
}

span.pagetop b a {
 font-family: Helvetica, Arial, sans-serif;
 color: ffffff;
 background-color: ff3300;
 padding: 10px;
}

span.comhead {
 font-family: "Lucida Grande", Verdana, sans-serif;
 font-style: italic;
 font-size: 10px;
 color: cccccc;
}

body center table {
 background-color: fff;
 padding-bottom: 60px;
}

td.subtext {
 padding-bottom: 20px;
 padding-left: 25px;
}

tr td center a {
 float: left;
 background-color: ffffff;
 border-style: none;
 padding-left: 35px;
}

td.title {
 color: 999999;
 font-family: Helvetica, Arial, sans-serif;
 vertical-align: center;
 padding-left: 25px;
 padding-right: 20px;
}

Now we just need it to support Sass

[Source on GitHub] [Follow @stylebot on Twitter]

stylus: Expressive, robust, feature-rich CSS language built for Node.js #

This isn’t the first time we’ve covered the latest fresh and new creation from LearnBoost.

Stylus is an expressive, dynamic, robust CSS pre-processor for Node.js. If you are familiar with Sass.js, Sass or Less.js … Stylus is kind of similar, but from what we’ve heard from TJ Holowaychuk they’ve taken it pretty far in a new direction.

At first glance, Stylus looks a lot like it’s counterparts, Sass and Less, but has been built specifically for Node.js. If you like Jade’s syntax over Haml, you need to take a look at Stylus instead of Sass in your Node projects.

Stylus has all the same features that you’d see in Sass/Less such as Arithmetic, Mixins, Variables, but adds a few new innovative features to the CSS pre-processor ecosystem. The feature list is long, so check out the project’s Readme to take a peek for yourself.

Just like Jade is to Haml in getting rid of the extras left behind, Stylus goes even further to not only get rid of the braces and semi-colons, but also the colons as well.

For example:

body
  font 12px Helvetica, Arial, sans-serif

Installation

Assuming you’ve got Node.js and npm installed

$ npm install stylus

TextMate Bundle

Stylus ships with a TextMate bundle, located within ./editors. To install simply execute make install-bundle, or place ./editors/Stylus.tmbundle in the appropriate location.

Example

Check out the codes below or dive into this implementation comparison where Stylus goes head to head with other CSS Pre-processor implementations. You can also check out the docs to get a deeper look at features like: conditionals, @font-face, interpolation and @key-frames.

This code …

border-radius()
  -webkit-border-radius arguments
  -moz-border-radius arguments
  border-radius arguments

body a
  font 12px/1.4 "Lucida Grande", Arial, sans-serif
  background black
  color #ccc

form input
  padding 5px
  border 1px solid
  border-radius 5px

… compiles to …

body a {
  font: 12px/1.4 "Lucida Grande", Arial, sans-serif;
  background: #000;
  color: #ccc;
}
form input {
  padding: 5px;
  border: 1px solid;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

Video

Thanks to TJ for this great into video on Screenr.

[Source on GitHub] [Homepage]

CompassApp: Compile Sass stylesheets easily without resorting to the command line #

compass-app.png

One of the biggest adoption hurdles to reaching the designer masses for Sass and Compass has been the intimidation level presented to designers when mentioning “the command line” … ooh, I just scared myself.

But seriously, the command line truly can be intimidating for folks who don’t care to or ever plan to go there. I’m talking about folks like traditional css designers, print designers, graphic designers and folks who just want to use GUI tools to do their day to day design work. No, I am not putting anyone down. Facts are facts.

Well, the good folks over at Handlino recognized these facts and got to work on creating Compass.app (written in Java) to do all the heavy lifting for you – leaving you to enjoy a command line free life, all while embracing the awesomeness that is Sass and Compass.

compass-app-screenshot.png

Getting started

Out of the box Compass.app is supported on Windows, Linux and Mac OS X. For a small nominal fee of $7, you can buy a pre-built copy for your platform at the official site. Or, if you know how to build it yourself, you can download the source from GitHub and save your money.

Either way you are gonna need to have Java, JRuby and rawr installed on your machine.

[Source on GitHub] [Homepage]

WatchWednesday for 20101013

Another Wednesday, another set of projects you might want to watch. mauricemach / coffeekup Released as a celebration of whyday, CoffeeKup brings the Markaby concept to CoffeeScript (featured in Episode 0.2.9). body -> header -> h1 (@title or ‘No Title’) nav -> ul -> (li -> a href: ‘/’, -> ‘Home’) unless @path is ‘/’ […]

snoopy and sniffer: Detection scripts and bookmarklets for mobile browsers #

One of the great things about being a front-end web developer is that you can always improve your craft. You can inspect the work of others by simply viewing the source for a web page to see what JavaScript libraries were used and how.

Mark Perkins offers a couple of projects to make the task a bit easier, especially on mobile devices.

Snoopy

Snoopy is a bookmarklet that lets you snoop on pages on mobile devices like the iPad (although it works on the desktop nicely, too). Simply add the script as a bookmark, navigate to your target page, and launch the bookmarklet. Here’s a screenshot of Snoopy snooping on the Modernizr web site.

screenshot

Sniffer

Snoopy uses Sniffer under the hood, if you want to use the detection in a close-to-the-metal script form.

Sniffer will detect:

  • Page info, including doctype and charset
  • Popular JavaScript libraries like jQuery, jQuery UI, Prototype, Dojo, Modernizr, and more
  • Popular CMS tools such as WordPress, Joomla, and MovableType
  • Analytics packages from Google, Clicky, and others
  • Typography toolkits like Cufon, TypeKit, sIFR, and Google’s Webfonts

[Snoopy on GitHub] [Sniffer on GitHub]

WatchWednesday for 20100922

We’re bringing back #FollowFriday, but for GitHub. On Friday, we’ll kick off our #FollowFriday series and showcase GitHub users you should follow. But it’s Wednesday, you say. That’s right, we’re riffing on #FollowFriday and introducing #WatchWednesday – a quick list of projects you may have overlooked, aren’t ready for primetime, or otherwise noteworthy. Got suggestions […]

stylebot: Site-specific styles in Google Chrome #

One of the things I missed moving to Google Chrome as my full time browser was Grease Monkey and site-specific hacks. Custom user stylsheets have been available in Chrome for a little while now, but they’re cumbersome to manage.

Ankit Ahuja has made overriding a site’s styles a snap with Stylebot, an extension for Google Chrome he built as part of Google’s Summer of Code 2010.

To use Stylebot, just install the extension for the Google Extensions Gallery or clone the repo and open the .crx file with Chrome.

Once installed you get a handy ‘CSS’ link in Chromes address bar that opens the Stylebot panel, letting you select elements and override default styles. For advanced users, you can drop in your own site-specific CSS, like this:

code, #browser table {
  font-family: menlo ;
}

Just like that, my favorite fixed width font on GitHub.com.

[Source on GitHub] [Homepage] [Follow @stylebot on Twitter]

slablet: Stylish CSS layout for iPad and more #

If you like Sencha Touch, the HTML5 mobile framework we recently covered in Episode 0.3.0, but long for a more declarative, markup-driven approach, then keep an eye on Slablet from Fellowship Technologies.

Landscape

Slablet, as defined by Urban Dictionary:

(n.) – a slang word for a computer tablet such as the iPad or other branded tablet devices

Unlike Sencha’s JavaScript-centric approach, Slablet opts for a more unobtrusive implementation. Content is created in HTML, styled with CSS, and driven by jQuery. The project uses iScroll to provide overflow:scroll in its fixed height elements.

Fellowship has provided a few nice looking demos.

Horizontal

If you’re wanting to start developing split-pane interfaces for the iPad, give Slablet a look.

[Source on GitHub]

#32: 960.gs, CSS, and Sass with Nathan Smith

Adam and Wynn caught up with Nathan Smith from 960 Grid System to talk about web development and CSS grid frameworks. Items mentioned in the show: 960 Grid System – Nathan’s awesome CSS grid framework 960’s awesome templates help you plan your layouts Wynn’s new monitor setup is just plain obscene 960’s fluid support from […]

Lemonade – Generates sprites on the fly with Compass and Sass #

One of the best ways to optimize your stylesheets and improve your site performance is to use CSS sprites. A CSS sprite is the technique of stitching together many images into a larger image and managing the placement using CSS background positioning. The upside is you save many network calls for your image assets. The downside is the complexity of creating the sprite.

Enter Lemonade from Nico Hagenburger. Lemonade is a Compass plugin that creates CSS sprites on-the-fly without Photoshop or ImageMagick.

To install, just install the gem:

sudo gem install lemonade

and then add the plugin to your Compass config:

# in config.rb
require 'lemonade'

You’re then all set to start creating sprites in your Sass:

.logo {
  background: sprite-image("lemonade/lemonade-logo.png");
}
.lime {
  background: sprite-image("lemonade/lime.png");
}
.coffee {
  background: sprite-image("other-drinks/coffee.png") no-repeat;
}

which yields

.logo {
  background: url('/images/lemonade.png');
}
.lime {
  background: url('/images/lemonade.png') 0 -26px;
}
.coffee {
  background: url('/images/other-drinks.png') no-repeat;
}

Nifty. Check out some advanced features on Nico’s blog post.

Technically, a better name might have been Lymonade, but this project is refreshing just the same.

[Source on GitHub]

WebFont Loader – easy @font-face from Google, TypeKit, or your own site #

Thanks to greater browser support for @font-face, web typography is breaking free from the same boring font stacks we’ve known for the last ten years. As with any new technique, @font-face introduces new challenges for finding the right cross-browser syntax, especially to avoid things like Firefox’s Flash of Unstyled Text issue.

WebFont Loader is an open source project from Typekit that helps you easily embed web fonts in a consistent, cross browser way regardless of the font source. It also provides some events you can handle as fonts are loaded, letting you more closely control the font rendering process.

<script>
  WebFont.load({
    google: {
      families: ['Droid Sans']
    }
  });
</script>
<style>
  h1 {
    font-family: 'Droid Sans';
    visibility: hidden;
  }
  .wf-active h1 {
    visibility: visible;
  }
</style>

In this example, we can hide the h1 until the Droid Sans font has finished loading.

WebFont Loader is hosted on Google AJAX APIs and can use the Google Font API to load fonts from Google, from TypeKit, or even your own custom site. Hopefully we’ll see support for FontSquirrel and FontSpring soon.

[Source on GitHub]

Changelog Ads Ship it!

Continuous Deployment made simple. Codeship runs your tests & continuously deploys your code. Try it now for free!