HOWTOs for Ruby on Rails, RSpec, Cucumber and Javascript

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.

github.com

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...

When can I use...

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

caniuse.com

mezzoblue § A CSS3 Tip

All browsers that support the CSS text-shadow and box-shadow properties also support the new CSS3 RGBa syntax. Which means you can safely combine them today.

mezzoblue.com

Stubbornella » Blog Archive » Overflow – a secret benefit

Overflow does some cool things you should know about.

stubbornella.org

lojjic's PIE at master - GitHub

A behavior for Internet Explorer allowing it to recognize and render various CSS3 box decoration properties

github.com

About PIE – CSS3 PIE: CSS3 decorations for IE

CSS Level 3 brings with it some incredibly powerful styling features. Rounded corners, soft drop shadows, gradient fills, and so on. These are the kinds of elements our designer friends love to use because they make for attractive sites, but are difficult and time-consuming to implement, involving complex sprite images, extra non-semantic markup, large JavaScript libraries, and other lovely hacks.

css3pie.com

mockko's livereload at master - GitHub

LiveReload applies CSS/JS changes to Safari or Chrome w/o reloading the page

github.com

Stubbornella » Blog Archive » Object Oriented CSS, Grids on Github

How do you scale CSS for millions of visitors or thousands of pages? Object Oriented CSS allows you to write fast, maintainable, standards-based front end code. It adds much needed predictability to CSS so that even beginners can participate in writing beautiful websites.

stubbornella.org

A List Apart: Articles: Prefix or Posthack

So the next time you find yourself grumbling about declaring the same thing four times, once for each browser, remember that the pain is temporary. It’s a little like a vaccine—the shot hurts now, true, but it’s really not that bad in comparison to the disease it prevents.

alistapart.com

iPhone CSS3 | A CSS3 Experiment by JeffBatterton.com

No images whatsoever.

demos.jeffbatterton.com

Generate CSS Sprites on the Fly with Lemonade

Lemonade’s goal as a sprite generator is to be incredible easy to use, so you’ll use ist for every project—just because there’s no overhead. It needs no configuration, no Rake task, no Photoshop, just a little change in your Sass or SCSS files.

hagenburger.net

Less.js Will Obsolete CSS

Less.js is a JavaScript implementation of LESS that’s run by your web browser. As any JavaScript, you include a link to the script in your HTML, and…that’s that. LESS is now going to process LESS code so instead of including a link to a CSS file, you’ll include a link directly to your LESS code. That’s right, no CSS pre-processing, LESS will handle it live.

fadeyev.net

Transparency in Web Design | CSS-Tricks

Let’s take a gander at four different ways. Each of them handling the illusion in a different way, and each completely appropriate depending on the situation at hand.

css-tricks.com

1 12 13 14 15 16 17 18