gradientD is a CSS3 Gradient Designer using Dojo #

Tom Pryor:

I wanted to try out Dojo’s new AMD pattern, as well as widigtize (finally) the gradient code spagetti I am currently using in my CSS3 Button Tool (Beta) and I finally got some time to play so I put this dojo widget/mashup together and put it on gitHub in case anyone was interested.

I’m psyched with the much better network performance, but even more importantly (for me) is that I have my first Dojo widget, and I think the next step is to just include it in the buttonMaker… but now I am thinking of upgrading it too to the AMD pattern, before installing this new Dojo AMD widget.

Wow. This is certainly useful, if you’re looking to easily visually create gradients of all types using CSS3/SCSS copy and paste-able code right into your project. The UI design Tom has chosen to go with for the generator could use some work (using Drew Wilson a barometer), but it’s certainly an awesome project that makes it too easy to create CSS3 gradients that’s for sure.

I like how you can double click the sliders to change their color or add new ones by clicking below the horizontal ruler.

Tom does mention support for SCSS in the description of the repo on GitHub, but based on his todo list, that’s not done yet.

Check out the CSS3 Gradient Designer to have some fun creating CSS3 gradients and the source on GitHub.

The Good Man experiments with basic CSS3 animations #

From the readme:

This project is about experimentations. About CSS3 animations and a graduation project. My name is Pedro Ivo Hudson and this is my debut.

And what a debut. Wow, I’m impressed.

Check it out for yourself at thegoodman.cc or check out the source code as well as the about/credits to learn more about how Pedro did this. By the way, Pedro is open to new projects right now, so get in touch if he’s got the skills you need.

Hat tip to Chris Coyier on Google+

Nodefront – Node.js-powered rapid front-end development utility #

Nodefront from Karthik Viswanathan aims to make a front-end developer’s life easier. Built in Node.js, Nodefront bundles a local web server for serving up HTML, CSS, and JavaScript assets and supports live reloading via web sockets. Additionally it ships with a command line interface:

  • nodefront compile – Compiles Jade and Stylus files to HTML and CSS. Can compile upon modification, serve files on localhost, and even automatically refresh the browser/styles when files are changed.

  • nodefront fetch – Automatically fetches CSS/JS libraries for use in your project. Provides an interactive mode to add new libraries.

  • nodefront insert – Inserts CSS/JS libraries directly into your HTML or Jade files.

  • nodefront minify – Minifies CSS and JS files. Can also optimize JPG and PNG images.

Karthik has put together a twenty minute screencast for a full demonstration.

Check out the project web site or source on GitHub for more.

Holmes – CSS based error detection, watson. #

A unique take on HTML ‘validation’, Luke Williams has made finding erroneous markup elementary. It’s a two step process: add the stylesheet to your markup, and add the following class to the <body> tag:

<body class="holmes-debug">

It will catch common errors, like give all <image> tags without an alt attribute a 2 pixel red outline. There are actually three colors, red (error), yellow (warning, potentially bad practice) and dark grey (deprecation). Hovering over most of these gives you a description, so you know what the problem is (or might be).

Checkout the source on GitHub!

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]

Changelog Ads Ship it!

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