Linked content

Creating Liquid Layouts with Negative Margins

I was recently confronted with the task of creating a two-column liquid layout with a header and footer in which the content needed to come before the sidebar in the source code. I took opportunity to demonstrate an under-used aspect of CSS: negative margins. Negative margins allow us to push the content area away from the sides of the browser, leaving room for the sidebar.

Proper cross-browser CSS styling for buttons

Styling button tags across all major browsers is not easy.

Many times you should be fine by using the native button style a browser-OS-combination offers you. But if you are trying to style buttons with images (e.g. by nesting a span tag inside them as assigning a background to both button and span) it will look different on each browser.

Use this Sass snippet as a base style:

button
  border: 0
  padding: 0
  cursor: pointer
  overflow: visible // removes padding in IE
  &::-moz-focu...

Useful collection of Sass mixins

This collection of Sass mixins enables cross-browser styling (including IE with CSS3PIE) with less lines of code.

This enables PIE for IE up to version 8 only (the first part is not possible in Haml, so use ERB):

<!--[if !IE]><!-->
  <%= stylesheet_link_tag 'screen', :media => 'screen' %>
<!--<![endif]-->
<!--[if lte IE 8]>
  <%= stylesheet_link_tag 'screen_with_pie', :media => 'screen' %>
<![endif]-->

These would be your two screen Sasses:

# screen_with_pie.sass ...

Cross-browser height and line-height

When using an odd value for line-height in CSS the result will vary across all major browsers.\
Use an even line-height whenever possible.


When you are styling block elements you often apply both height and line-height to them. This Sass mixin helps you out with odd heights by always setting an even line height:

=height($height)
  height: $height
  line-height: floor($height / 2) * 2

So when you call +height(19px) in Sass this will be the resulting CSS:

height: 19px
line-...
Linked content

scribd's flash_heed at master - GitHub

Fixes all Flash elements on a page so that they heed DOM stacking order

Test that a CSS selector is present with Cucumber

This note describes a Cucumber step definition that lets you test whether or not a CSS selector is present on the site:

Then I should see an element "#sign_in"
But I should not see an element "#sign_out"

Here is the step definition for Capybara:

Then /^I should (not )?see an element "([^"]*)"$/ do |negate, selector|
  expectation = negate ? :should_not : :should
  page.send(expectation, have_css(selector))
end

Here is the step definition for Webrat:

Then /^I should (not )?see an element "([^"]*)"$/ do |negate...
Linked content

Here’s what we’ve learned about doing UI for mobile web apps with WebKit

Lately, we’ve been exploring ways to offer web apps that perform like native apps on mobile devices. For this short sprint we targeted mobile WebKit browsers—especially the default browsers on iOS and Android—because of their widespread use and excellent support for HTML5 and CSS3. Here are a few things we’ve learned along the way.

Using the full power of have_css

Capybara's has_css? matcher has a couple of options you might find useful.

Check that a selector appears a given number of times

Use the :count option like this:

Then /^I should see (\d+) users?$/ do |count|
  page.should have_css('ul#users li', :count => count.to_i)
end

Check that a selector has a given text content

Use the :text option like this:

Then /^I should see a user with name "([^\"]*)"$/ do |nam...

Use Sass without Rails

You don't need a Rails application to use Sass. Even when you're working on a static site you can generate your CSS through Sass.

  • Install Sass with sudo gem install haml
  • Create a folder sass in the folder, that stores your stylesheets, e.g. mkdir css/sass
  • In a separate terminal window, run sass --watch css/sass:css. This will watch your sass files for changes and rewrite stylesheets as required.

This even works on Windows.

Note about your .gitignore

You might want to change our [typical .gitignor…

Linked content

Adding Stroke to Web Text

Because they are vector, it would make sense if we could do things that other vector programs (e.g. Adobe Illustrator) can do with vector text, like draw a stroke around the individual characters. Well, we can! At least in WebKit

Linked content

JQuery CSS Emoticons Plugin

The CSS Emoticons plugin is a simple jQuery plugin (and stylesheet) that allows you to turn any text emoticons on the page into cute little smiling faces with pure CSS3 styling (no images whatsoever).

Linked content

rhulse's rails-css-views at master - GitHub

This gem is designed to provide CSS views to Rails, and a process to concatenate and minify these files to one file for production.

Recursively remove unnecessary executable-flags

Sometimes files attain executable-flags that they do not need, e.g. when your Windows VM copies them over a Samba share onto your machine.

From inside your Rails project directory call regularly:

geordi remove-executable-flags

Runs chmod -x on Ruby, HTML, CSS, image, Rake and similar files.


This script is part of our geordi gem on github.

Hide the last bottom margin in a container

When you create e.g. a sidebar box that contains headlines and paragraphs, the final paragraph's margin in that box will create an undesired 'bottom padding' inside that box.

Here is a Sass mixin that you can apply to such boxes. It makes the last child's bottom margin disappear:

=hide_last_margin
  >*:last-child
    margin-bottom: 0

Use it like this:

.sidebar_box
  p, table, ul
    margin-bottom: 1em
  +hide_last_margin

Internet Explorer (fix)

Does not work in versions of <IE8

Your best bet is to expli…

Parse XML or HTML with Nokogiri

To parse XML-documents, I recommend the gem nokogiri.

A few hints:

  • xml = Nokogiri::XML("<list><item>foo</item><item>bar</item></list>") parses an xml string. You can also call Nokogiri::HTML to be more liberal about accepting invalid XML.
  • xml / 'list item' returns all matching nodes; list item is used like a CSS selector
  • xml / './/list/item' also returns all matching nodes, but .//list/item is now an XPath selector
    • XPath seems to be triggered by a leading .

Automatically build sprites with Lemonade

How it works

See the lemonade descriptions.

Unfortunately, the gem has a few problems:

  • it does not work with Sass2
  • it always generates all sprites when the sass file changes, which is too slow for big projects
  • it expects a folder structure quite different to our usual

All these problems are solved for us, in our own lemonade fork. This fork has since been merged to the original gem, maybe we can use t…

Typical .gitignore

log/*
tmp/*
storage/*
db/*.sqlite3
db/schema.rb
db/structure.sql
public/system
.project
.idea/
public/javascripts/all*
public/stylesheets/all*
public/stylesheets/*.css
config/database.yml
*~
*#*
.#*
.DS_Store
webrat-*.html
capybara-*.html
rerun.txt
coverage.data
coverage/*
dump_for_download.dump
.~lock.*
.*.swp
C:\\nppdf32Log\\debuglog.txt
Linked content

When can I use...

Compatibility tables for features in HTML5, CSS3, SVG and other upcoming web technologies

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