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.
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
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...
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 ...
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
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-...
Fixes all Flash elements on a page so that they heed DOM stacking order
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...
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.
has_css? matcher has a couple of options you might find useful.
:count option like this:
Then /^I should see (\d+) users?$/ do |count| page.should have_css('ul#users li', :count => count.to_i) end
:text option like this:
Then /^I should see a user with name "([^\"]*)"$/ do |nam...
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.
sudo gem install haml
sassin the folder, that stores your stylesheets, e.g.
sass --watch css/sass:css. This will watch your sass files for changes and rewrite stylesheets as required.
This even works on Windows.
You might want to change our [typical .gitignor…
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
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).
This gem is designed to provide CSS views to Rails, and a process to concatenate and minify these files to one file for production.
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:
chmod -x on Ruby, HTML, CSS, image, Rake and similar files.
This script is part of our geordi gem on github.
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
Does not work in versions of <IE8
Your best bet is to expli…
To parse XML-documents, I recommend the gem nokogiri.
xml = Nokogiri::XML("<list><item>foo</item><item>bar</item></list>")parses an xml string. You can also call
Nokogiri::HTMLto be more liberal about accepting invalid XML.
xml / 'list item'returns all matching nodes;
list itemis used like a CSS selector
xml / './/list/item'also returns all matching nodes, but
.//list/itemis now an XPath selector
Unfortunately, the gem has a few problems:
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…
Compatibility tables for features in HTML5, CSS3, SVG and other upcoming web technologies