Linked content


Bourbon is a library of pure Sass mixins that are designed to be simple and easy to use. No configuration required. The mixins aim to be as vanilla as possible, meaning they should be as close to the original CSS syntax as possible.

The mixins contain vendor specific prefixes for all CSS3 properties for support amongst modern browsers. The prefixes also ensure graceful degradation for older browsers that support only CSS3 prefixed properties.

Managing vendor libraries with the Rails asset pipeline

The benefit of the Rails asset pipeline is that it compiles your stylesheets and javascripts to a single file, respectively. However, the consequences are startling if you don't understand them. Among others, the raw asset pipeline requires you to have all your asset libraries in the same folder, which quickly becomes confusing as your set of assets grows. To overcome this, we have two different solutions.

Custom solution

We are using a custom workaround to keep library files apart in their own directories. To avoid b...

Asset Pipeline Basics

The Rails asset pipeline improves delivery of application assets (javascripts, stylesheets, images, fonts). Here are some basic facts about its inner workings.

No magic

Manifests are the handle on your assets:

app/assets/stylesheets/application.css # use via: stylesheet_link_tag 'application'

The asset pipeline only considers files you explicitly require within your manifest files. The most common directives used in manifests are require some/file and require_tree some/directory. Paths may be **relative to the current director...

Linked content


Clamps (ie. cuts off) an HTML element's content by adding ellipsis to it if the content inside is too long.

While you can only truncate single lines with CSS by using text-overflow, this small JavaScript library also allows truncating text after multiple lines.

Please note:

  • For Internet Explorer, the element you clamp on needs to have its line-height set in pixels. A relative value will not work.
  • There is also the [-webkit-line-clamp](http:...

bower-rails can rewrite your relative asset paths

The asset pipeline changes the paths of CSS files during precompilation. This opens a world of pain when CSS files reference images (like jQuery UI) or fonts (like webfont kits from Font Squirrel), since all those url(images/icon.png) will now point to a broken path.

In the past we have been using the vendor/asset-libs folder ...

When Sass-generated stylesheets print a Encoding::CompatibilityError

We upgraded a Rails 2 application to Rails 3.2 and Ruby 2.1, changed the mysql adapter from mysql to mysql2, but did not activitate the asset pipeline. Instead we used Sass the old-school way (stylesheets in public/sass/*.sass) and relied on stylesheet_link_tag to activate the Sass compiler.

Now all Sass-generated stylesheets inserted the following text into body:before:

Encoding::CompatibilityError: incompatible character encodings: UTF-8 and ASCII-8BIT

I could get rid of this by removing all generated .css files in `...

Linked content

What we know about PDFKit

What PDFKit is

  • PDFKit converts a web page to a PDF document. It uses a Webkit engine under the hood.
  • For you as a web developer this means you can keep using the technology you are familar with and don't need to learn LaTeX. All you need is a pretty print-stylesheet.

How to use it from your Rails application

  • You can have PDFKit render a website by simply calling'').to_file('google.pdf'). You can then send the...
Linked content

Transactional HTML Email Templates

Styling HTML email is painful. Tables, inline CSS, unsupported CSS, desktop clients, web clients, mobile clients, various devices, various providers. All these things have to be thought about and tested. It’s no surprise developers don’t want to deal with this when there is a backlog of more important priorities.

We’ve tried to remove some of the pain for you and open-sourced a collection of common templates for transactional email.

Alternative transactional email templates include

  • [these ones...](

Test if all your favicons exist

When you don't only have a favicon.ico in your project but also PNGs of different sizes and backgrounds, you should test if all those files are actually reachable.

Here are a few selectors to get you started:

'link[rel~="icon"]' # regular ones, matches "shortcut icon" and "icon"
'link[rel="apple-touch-icon"]' # iOS
'meta[content][name="msapplication-TileImage"]' # IE11
'meta[content][name^="msapplication-square"]' # IE11

A simple...

Linked content

SudoSlider: a jQuery slider

SudoSlider is a simple yet powerful content slider that makes no (or very few) assumptions about your markup and is very customizable.

You can basically embed any HTML into the slides, so you can mix images, videos, texts, and other stuff.

Check out the demos.

Please note:

  • There is a ton to configure. Check the demos and read the docs.
  • It does not bring styles for prev/next links etc, so you need to style controls yourself (which I consider to b...

Cucumber step to manually trigger javascript events in Selenium scenarios (using jQuery)

When you cannot make Selenium trigger events you rely on (e.g. a "change" event when filling in a form field), trigger it yourself using this step:

When /^I manually trigger a (".*?") event on (".*?")$/ do |event, selector|

Note that this only triggers events that were registered through jQuery. Events registered through CSS or the native Javascript registry will not trigger.

Get the last leaf of a DOM tree (while considering text nodes)

I use this to simulate the (non-existing) :last-letter CSS pseudoclass, e. g. to insert a tombstone at the end of an article:

findLastLeaf = ($container) ->
  $children = $container.children()
  if $children.length == 0
    $lastChild = $children.last()
    $lastContent = $container.contents().filter(->
      # Only return nodes that are either elements or non-empty text nodes
      @nodeType == 1 || (@nodeType == 3 && _.strip(@nodeValue) != '')

About "unexpected '#' after 'DESCENDANT_SELECTOR' (Nokogiri::CSS::SyntaxError)"

The error unexpected 'x' after 'DESCENDANT_SELECTOR' (Nokogiri::CSS::SyntaxError) (where x may be basically any character) occurs when the Nokogiri parser receives an invalid selector like .field_with_errors # or td <strong>.

In Cucumber, the culprit will be an invalid step definition that builds an invalid selector:

# inside some step definition:
field = find_field(label)
page.send(expectation, have_css(".field_with_errors ##{field[:id]}"))

The above raises the mentioned error if field[:id] is nil, i.e. the foun...


Making media queries work in IE8 and below

When using @media CSS queries, Internet Explorer 8 and below will fail to respect them.

Though there are several options (like mediatizr and css3-mediaqueries), Respond.js was the only one that worked for me.

If you do not want to pollute your application's default JS file with Respond.js, simply:

  1. Create an extra JS file (like media_queries_polyfill.js) that loads Respond.js:

    //= require respond-1.4.2
  2. Make sure it's added to config.assets.precompile

  3. Embed that JS fi...

Sticky table header with jQuery

When you want the table headers to always stay around (e.g. because that table is huuuge), use the code below.


  position: fixed;
  top: 0;
  width: auto;
  display: none;
  border: none;
  margin: 0;


;(function($) {
   $.fn.fixHeader = function() {
      return this.each(function() {
         var $table = $(this),

         function init() {
            $t_fixed = $table.clone();
Linked contentDeprecated

CSS: Vertically center with margin: auto

Check out the jsFiddle Demo.


.absoluteCenterWrapper {
 position: relative; /* Declare this element as the anchor point for centering */

/* Positioning */
.absoluteCenter {
 margin: auto; /* Required */
 position: absolute; /* Required */
 top: 0; bottom: 0; /* Aligns Vertically */
 left: 0; right: 0; /* Aligns Horizontally */

/* Make sure the centered element fits into its container. If you know that's the case, you can omit this part. */
.absoluteCenter {
 max-height: 100%;
 max-width: 100%;

Firefox: Remove dotted border from focused buttons

The following Sass will do the trick:

input[type="file"] > input[type="button"]
    border: none

There's also a plain CSS version.

Note that you can no longer visually navigate through a form with the keyboard without these borders.

Howto prompt before accidentally discarding unsaved changes with JavaScript

Ask before leaving an unsaved CKEditor

Vanilla JavaScript way, but removes any other onbeforeunload handlers:

    document.body.onbeforeunload = function() {
      for(editorName in CKEDITOR.instances) {
        if (CKEDITOR.instances[editorName].checkDirty()) {
          return "Unsaved changes present!"

A robuster implementation example

Note: Don't forget to mark the 'search as you type' forms with the skip_pending_changes_warning class.

var WarnBeforeAccidentallyDiscard...
This website uses cookies to improve usability and analyze traffic.
Accept or learn more