A print stylesheet is easy to create. Choose a font suited for paper, hide some elements, done. Unfortunately print stylesheets often break as the application is developed further, because they are quickly forgotten and nobody bothers to check if their change breaks the print stylesheet.

This card describes how to write a simple Cucumber feature that tests some aspects of a print stylesheets. This way, the requirement of having a print stylesheet is manifested in your tests and cannot be inadvertedly removed from the code. Note that you can...

There are many fun Unicode characters like ▲ or ☯. You might be tempted to use them for graphical elements in lieu for an image. After all they are so much easier to style and scale than a raster image!

Unfortunately you will discover that these symbols render very differently on Linux, Windows and MacOS. The reason for this is that the font you are using will probably not contain any characters outside the standard Latin-1 set. When browsers encounter a character not included in the current font, they use a fallback font for this one cha...

Nice list of icon sets that come in the form of fonts.

I recommend Font Awesome.

If you encounter a Firefox that does not care about your font settings but always uses specific fonts, you can fix that. Usually this should not happen, as it's not a default setting:

1. Open up the Preferences.
2. Switch to "Content".
3. In the "Fonts & Colors" section, click the "Advanced..." button.
4. Tick "Allow pages to choose their own fonts, instead of my selection above".
5. Confirm by pressing "OK".

![Screenshot](https://makandracards.com/makandra/10913-how-to-fix-firefox-uses-incorrect-fonts-on-all-webpages-regardless-of-their-c...

Internet Explorer until version 9 has some limitations when parsing CSS files

Summarized, these are:

• Up to 31 CSS files or <style> tags per page.
• Up to 4095 selectors per CSS file.
• Up to 3 nested @import rules

To test the selector limit for a specific browser, check this CSS selector limitation test website.

When you run into this issue, the following links might be helpful to fix the problem. The Idea is to split up the css ...

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

If you have asset manifests in non-standard locations, declare them in your config/application.rb:

config.assets.precompile += ['application/all.css', 'result/all.css', 'application/all.js', 'result/all.js']

This way you can also precompile files that do not have any manifest.

It might be one of the following:

• You are looking at a manifest file (like application.css) which is always empty during development
• Your Sass file has a syntax error it did not handle properly

Explanation of the "bootstrap 2" base CSS.

Contains information about:

• Typography
• Code
• Tables
• Forms
• Buttons
• Icons

Write your app using HTML, CSS or JavaScript, upload it to the PhoneGap Build service and get back app-store ready apps for Apple iOS, Google Android, Windows Phone 7, Palm, Symbian, BlackBerry and more.

By compiling in the cloud with PhoneGap Build, you get all the benefits of cross-platform development but can still build apps just the way you like.

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

• Dragging in nested lists
• User-definable order of items
• Complicated item elements with super-custom CSS and other Javascript functionality
• Items that can be both leaves and containers of other items
• has_ancestry on the server side

Things I learned:

• Be ready to write a lot of CSS. You need to indicate what is being dragged, where it will be dropped, if it is dropped above, below o...

The $.cssHooks object provides a way to define functions for getting and setting particular CSS values. It can also be used to create new cssHooks for normalizing CSS3 features such as box shadows and gradients.

For example, some versions of Webkit-based browsers require -webkit-border-radius to set the border-radius on an element, while earlier Firefox versions require -moz-border-radius. A css hook can normalize these vendor-prefixed properties to let .css() accept a single, standard property name (border-radius, or with DOM property synt...

• The step we used in the past (Then "foo" should not be visibile) doesn't reliably work in Selenium features.
• I overhauled the entire step so it uses Javascript to detect visibility in Selenium.
• The step has support for jQuery and Prototype projects, so it should be a drop-in replacement for all your projects.
• For Rack::Test the step no longer uses XPath so you should be able to understand it when you are not a cyborg :)
• There were some other cards detailing alternative steps to detect visibility. I deleted all these other cards s...

The step definition below lets you write:

When I click on "Foo"

This is useful in Selenium features where the element you click on is not necessarily a link or button, but could be any HTML element with a Javascript event binding.

The easiest way to get this step is to use Spreewald. If you would like to add it manually, here is the step definition:

When /^I click on "([^\"]+)"$/ do |text|
  matcher = ['*', { :text => text }]
  element = page.find(:css, *matcher)
  while be...

Makandra cards will auto-detect the language used for syntax highlighting.

This auto-detection sometimes fails for short code snippets. In such cases you can explicitly declare the language for Github-style code blocks:

```css
body {
  font-size: 12px
}
```

Will turn into this:

body {
  font-size: 12px
}

To disable syntax highlighting entirely use the text language:

```text
I am nothing without pretend

...

Consider this Sass:

.comment
  width: 320px;
  height: 240px;

Any textarea with the comment class will be sized 320 by 240 pixels. In WebKit browsers (Chrome, Safari, ...) or Firefox, this is only the initial size -- users can resize textareas to become bigger.

This is helpful to the user, but may be breaking your application layout in some cases.

If you want to disable it, don't introduce any proprietary CSS properties. Instead, set maximum width and/or height to the values of width and height:

.comment
  wi...

Applications often show or hide elements based on viewport dimensions, or may have components that behave differently (like mobile vs desktop navigation menus).
Since you want your integration tests to behave consistently, you want to set a specific size for your tests' browser windows.

Using WebDriver options / Chrome device metrics

For Google Chrome, the preferred way is setting "device metrics". This allows you to configure dimensions larger than your display and enable/disable touch behavior.

Simply use register_driver to set up...

CSS is a lot easier to write and read than clumsy XPath expressions. So when you need to use XPath, you can have Nokogiri help you out on creating it.

Simply use Nokogiri's xpath_for:

Nokogiri::CSS.xpath_for('#foo')
# =>  ["//*[@id = 'foo']"]
Nokogiri::CSS.xpath_for('#foo .bar:nth-of-type(2)')
# => ["//*[@id = 'foo']//*[contains(concat(' ', @class, ' '), ' bar ') and position() = 2]"]

Since XPath is more powerful you may still need to do some hardcore XPath hacking eventually. But at least you don't need to for simple cases.

If you're suffering from a huge de.yml or similiar file, cry no more. Rails lets you freely organize your dictionary files in config/locales.

My organization works like this:

• config/locales/rails.de.yml modified Rails boilerplate
• config/locales/faker.de.yml modified Faker boilerplate
• config/locales/models.de.yml model names, attribute names, assignable_value labels
• `config/locales/views.de.y...

The problem

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

app/assets/fonts
app/assets/images
app/assets/javascripts
app/assets/stylesheets

With the asset pipeline, you can use the full power of Ruby to generate assets. E.g. you can have ERB tags in your Javascript. Or you can have an ERB template which generates Haml which generates HTML. You can chain as many preprocessors as you want.

When you deploy, Rails runs assets:precompile...

Some progress was made by browsers on implementing CSS filters like blur, greyscale or some other effects. You might already know the legacy CSS filter attribute that old IE versions used to perform DirectX transformations. Luckily these legacy filters are removed in IE10. The good news is, newest WebKit-based browsers like Chrome (18.0+) Safari and Mozilla Firefox expe...

Building CSS mobile-first is the way forward, because blah blah blah progressive enhancement blah. Problem is, Internet Explorer prior to 9 ignores anything within media query blocks, leaving those browsers with mobile styles.

Not all of us can get away with that, but thankfully, as Chris Eppstein points out, Sass 3.2 (not yet released) can generate a separate stylesheet with everything it needs to create a "desktop" look.

This page was built mobile-first where smaller width devices get a single column layout, but IE8 and below still get a...

Geoffrey Grosenbach has created Gruff for easily plotting graphs. It is written in pure Ruby and integrates with Rails applications.

It provides features as automatic sizing of dots and lines (the more values, the thinner the graph's elements), custom or predefined themes, different styles (bar, line, dot and many more) and multiple graphs in one chart.

Installation

In your Gemfile:

gem 'rmagick', :require => false
gem 'gruff'

Then run bundle install (and don't forget to restart your development server.)

Usage

This i...