Asset pipeline: Precompile non-standard manifests

Posted Over 11 years ago by Henning Koch.

By default, only application.js, application.css and all non-JS/CSS files are precompiled into public/assets. If you have asset manifests...

Asset pipeline: Reasons why your stylesheet is empty

Posted Over 11 years ago by Henning Koch.

It might be one of the following: You are looking at a manifest file (like application.css) which is always empty...

Test your CSS rendering output with GreenOnion

Posted Over 11 years ago by Henning Koch.
github.com

No one wants to cry over regression issues in views; does testing HTML and CSS have to be such a...

Twitter Bootstrap: Base CSS

Posted Over 11 years ago by Arne Hartherz.
twitter.github.com

Explanation of the "bootstrap 2" base CSS. Contains information about: Typography Code Tables Forms Buttons Icons

PhoneGap Build

Posted Over 11 years ago by Henning Koch.
build.phonegap.com

Write your app using HTML, CSS or JavaScript, upload it to the PhoneGap Build service and get back app-store...

Drag'n'drop in trees: I went to town

Posted Over 11 years ago by Henning Koch.

For my Gem Session project Holly I ran the Ironman of drag'n'drop implementations: Dragging in nested lists

jQuery.cssHooks – jQuery API

Posted Over 11 years ago by Henning Koch.
api.jquery.com

The $.cssHooks object provides a way to define functions for getting and setting particular CSS values. It can also be...

Updated: Capybara: Check that a page element is hidden via CSS

Posted Over 11 years ago by Henning Koch.
makandracards.com

The step we used in the past (Then "foo" should not be visibile) doesn't reliably work in Selenium features...

Click on a piece of text in Cucumber / Capyabra

Posted Over 11 years ago by Henning Koch.

The step definition below lets you write: When I click on "Foo" This is useful in Selenium features where the...

New cards feature: Explicit language declaration for syntax highlighting

Posted Over 11 years ago by Henning Koch.

Makandra cards will auto-detect the language used for syntax highlighting. This auto-detection sometimes fails for short code snippets...

How to: Limit or disable textarea resizing in Chrome and Firefox

Posted Almost 12 years ago by Arne Hartherz.

Consider this Sass: .comment width: 320px; height: 240px; Any textarea with the comment class will be sized 320 by 240...

How to: Specify size of Selenium browser window

Posted Almost 12 years ago by Arne Hartherz.

Applications often show or hide elements based on viewport dimensions, or may have components that behave differently (like mobile vs...

Use Nokogiri to convert CSS to XPath

Posted Almost 12 years ago by Arne Hartherz.

CSS is a lot easier to write and read than clumsy XPath expressions. So when you need to use XPath...

Use "overflow: hidden" to avoid floating elements from wrapping a container's text

Posted Almost 12 years ago by Arne Hartherz.
jsfiddle.net

Consider this HTML: Click me! Hello Universe! Hello Universe! Hello Universe! Hello Universe! Hello Universe! Hello Universe!

Organize large I18n dictionary files in Ruby on Rails

Posted Almost 12 years ago by Henning Koch.

If you're suffering from a huge de.yml or similiar file, cry no more. Rails lets you freely organize your...

Rails asset pipeline: Why relative paths can work in development, but break in production

Posted Almost 12 years ago by Tobias Kraze.

When using the asset pipeline your assets (images, javascripts, stylesheets, fonts) live in folders inside app: app/assets/fonts app/assets/images...

Browser Standards progress: CSS filter property

Posted Almost 12 years ago by Ulrich Berkmueller.
html5rocks.com

Some progress was made by browsers on implementing CSS filters like blur, greyscale or some other effects. You might already...

IE-friendly mobile-first CSS with Sass 3.2

Posted Almost 12 years ago by Henning Koch.
jakearchibald.github.com

Building CSS mobile-first is the way forward, because blah blah blah progressive enhancement blah. Problem is, Internet Explorer prior...

Mysterious "margin" below an image

Posted Almost 12 years ago by Dominik Schöler.

Consider the following HTML & CSS: ^ img { background-color: red; } div { border: 1px solid black; } This will leave a margin of...

Guide to localizing a Rails application

Posted Almost 12 years ago by Henning Koch.

Localizing a non-trivial application can be a huge undertaking. This card will give you an overview over the many...

Use different CSS depending on whether elements render on the same line or multiple lines

Posted Almost 12 years ago by Henning Koch.

You will find this useful when creating responsive designs that work well on small screens. The attached Javascript gives a...

Howto properly use vertical-align to align elements vertically

Posted Almost 12 years ago by Dominik Schöler.

Say you want to vertically align a div box inside a div container. This is how you do it:

IE9: Linear gradients remove border-radius and inset box-shadows

Posted Almost 12 years ago by Henning Koch.

When you add a linear gradient to an element, IE9 removes all border-radius and inset box-shadows. This is...

You cannot use :before or :after on img in CSS

Posted Almost 12 years ago by Arne Hartherz.
stackoverflow.com

Though the W3C even gives it as an example, no browser actually supports this CSS: img:before { content: "something"; }