Linked content

Pure CSS Timeline | CSSDeck

Clever hack to allow user interaction without Javascript (by using radio buttons and selecting on :checked).

Prevent long strings from stretching your <table> with CSS

  • Give the table a style table-layout: fixed
  • Give the cells in the first row a width
  • The same width will be automatically used for following rows

Howto set jQuery colorbox overlay opacity

Setting the colorbox opacity by hash parameter when initializing doesn't work the way like the documentation tells you.

  $(selector).colorbox({ ..., opacity: 0.5, ... }); // has no effect

The opacity value of 0.5 will be overwritten by the inline style attribute style="opacity: 0.9" that colorbox sets.

To manually set the opacity you have to add the following css rule

  #cboxOverlay { opacity: 0.5 !important; }

Embed Font Awesome icons from your CSS

An annoying part of using font icons is that the icons usually need to live in the DOM. This is a step back from the time when we defined raster icons with background-image, in the CSS.

It doesn't have to be that way.

Copy the attached file font-awesome-sass.css.sass to your assets (we recommend /vendor/asset-libs/font-awesome-sass).

You can now use Font Awesome icons from your Sass files:

@import font-awesome-sass


Fix „command failed: /usr/bin/wkhtmltopdf ...“ using PDFKit middleware

Ubuntu 12.04 LTS x64, Ruby 1.8.7, Rails 2.13, PDFKit 0.5.4, Phusion Passenger Apache 2

I ran into this, when I started using passenger to deal with the Single Thread Issue which caused my webrick to deadlock when an ActionController::RoutingError (No route matches "...") occurred.

These steps brought me a little further

(1) assert dependencies are installed

 sudo aptitude install openssl build-essential xorg libssl-dev

(2) only for 64bits OS Run one by one the follo...

Linked content

The top responsive web design problems ... and how to avoid them

I recently created a survey asking fellow designers about the problems they faced when creating fully responsive sites. This article will list the most common problems they reported and offer possible solutions, along with suggestions to consider on your next projects.


Disable text-transforms in Selenium tests

Using text-transform: uppercase - especially on form labels - can cause you serious headaches in Selenium tests. Sometimes the web driver will see the uppercase text, sometimes it won't, and umlauts will be a problem as well.

Simply disable it in tests, by

  • adding a body class for tests

    %body{'data-environment' => Rails.env}
  • overriding the transforms

    [data-environment="test"] *
      text-transform: none !important
Linked content

Building Custom Text Strikethroughs with CSS

Did you know you can color your line-throughs or underline, or make them wavy like spell-checkers do?

Linked content

Normalising Designs For Better Quality CSS

Awesome slide deck about taking liberties with design requirements in order to keep the CSS simple.

Linked content

Font Awesome: List of Unicode glyphs and HTML entities

A list of FontAwesome icons in the form of copyable Unicode characters or HTML entities.

You might prefer to use FontAwesome by simply typing out these characters instead of using CSS classes. Of course you need to then give the containing element as style:

font-family: FontAwesome
Linked content

Simple Naming for Modular CSS Class Names ··· Nico Hagenburger

An opinion how to implement BEM. I don't agree with all of Nico's choices, but I applaud his approach to compile a simple and short list of rules.

Many box shadows will make your app unusable on smartphones and tablets

Box shadows are awesome. Unfortunately they are also very costly to render. You will rarely notice the rendering time on a laptop or desktop PC, box shadows can make your app completely unusable on smartphones and tables. By "unusable" I mean "device freezes for 10 seconds after an user action".

But isn't it the future?

Not yet. Eventually mobile devices will become powerful enough to make this a no...

News flash: Absolute CSS positioning on opposite sides is not a problem

Back in the old days, we couldn't do something like that:

.foo {
  position: absolute;
  bottom: 0;
  /* This was bad: */
  left: 10px;
  right: 10px;

Why? Because IE5 and IE6 (which a majority of people used back then) failed horribly trying to render it.

I've now checked if this is still an issue with any browser that's not from the stone age. \
Turns out all is well -- except if you have to support IE6 and below, but then you're in some other kinds of trouble.

It works in all sane browsers, and Internet Explorer 7, 8...

How to horizontally center absolute positioned container with CSS

Note: We have card with all CSS centering options. You probably want to head over there and get an overview over what techniques are available for your use case and browser requirements.

Horizontally centering a static element in CSS is normally handled by setting the left and right margins to auto, for example:

$container_width: 100px
  width: $container_width
  margin: 0 auto

However, this w...

Center a float horizontally

Note: We have card with all CSS centering options. You probably want to head over there and get an overview over what techniques are available for your use case and browser requirements.

If you cannot use display: inline-block, centering a float can be useful if you want to center something and at the same time make its width automatically fit some content.

Use this SASS:


Capybara 0.3.9 Bug: Chaining .find to scope doesn't work

The following code doesn't work like expected:


The second .find will search the whole dom instead of a scope.

Rumor has it this is fixed in Capybara 0.4.1.

Linked content

Tips And Tricks For Print Style Sheets

Smashing Magazine lists some handy tricks for print style sheets, all with CSS:

Linked content

Interactive generator for gradients, borders, noise textures and box shadows

CSSmatic lets you play around with four rather complex CSS stylings and gives you CSS or SASS code to use your result right away.

  • Gradients
  • Borders
  • Noise textures – offers a texture download
  • Box shadows
This website uses cookies to improve usability and analyze traffic.
Accept or learn more