Turbolinks makes following links in your web application faster. Instead of letting the browser recompile the JavaScript and CSS between each page change, it keeps the current page instance alive and replaces only the body and the title in the head.

This is similar to pjax, but instead of worrying about what element on the page to replace, and tailoring the server-side response to fit, we replace the entire body. This means that you get the bulk of the speed benefits from pjax (no recompiling of the JavaScript or CSS) without having to tail...

CSS transitions make your responsive websites smoother and more professional. It's easy and already there. Use it!

StaticMatic is a nice tool to build simple static websites.
In case you want to have some nifty styles on the navigation item that is currently active, you can use this:

=link 'Aktuelles', :class => (current_page =~ /aktuelles/) ? 'current' : 'default'

Keep in mind that current_page gives you the full relative path of your page. raise current_path in case you're not sure.

I know there is an navigation helper out there. I did not use it and also did not want to migrate.

Note: Modern Rails has two build pipelines, the asset pipeline (or "Sprockets") and Webpacker. The principles below apply for both, but the examples shown are for Sprockets.

Every page in your application uses many assets, such as images, javascripts and stylesheets. Without your intervention, the browser will request these assets again and again on every request. There is no magic in Rails that gives you automatic caching for assets. In fact, if you haven't been paying attention to this, your application is probabl...

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.