May 21, 2012

Posts Comments

You are here: Home / Markup / CSS

Blueprint CSS Grid Tool for Adobe Air

October 26, 2007 By Bruce Kroeze 12 Comments

I’m a big fan of the Blueprint CSS framework. In the process of using it to develop the base template for Banjo, the blog app I'm writing, I realized I need a tool to help me keep page elements lined up on the grid, both vertically and horizontally.

Blueprint comes with a background grid image to use for this, but it only works as a background, and it is not that useful when you are working with colors and final tweaks. So, I made a little (tiny) AIR app which will show a floating grid, sized at 18px and with Blueprint-sized columns.

[Read more...]

Related posts

Technorati Tags: , ,

Filed Under: Adobe AIR, CSS, Open Source Tagged With: blueprint, blueprint-css, grid

jQuery Selector Magic

February 27, 2007 By Bruce Kroeze 1 Comment

swings jQuery Selector MagicI’ve been working on a Drupal module to automatically make CSS-styled drop-down menus from the built-in menuing system. That’s been going great, and I’m really enjoying Drupal’s modular architecture and theming abilities. However, I ran into a little problem which was solved just perfectly by an elegant bit of jQuery Javascript.

What I wanted to do was to mark a list active if any of its children were active. That’s a common design request. “Make this tab active if the current page is one of that tab’s children.” However, I’d written the menu routines recursively, and it just isn’t worth it to me to rewrite them to add this one little feature.

[Read more...]

Filed Under: CSS, Javascript

CSSEdit is my friend

February 24, 2007 By Bruce Kroeze 3 Comments

kungfu CSSEdit is my friendDeveloping sites for clients involves a lot of heavy CSS work for me. I’d been using Aquamacs, an Emacs editor for OSX. That was good, but I don’t care for any of the CSS modes available. I moved to TextMate, which was much better, but still very much a code, reload, code, reload cycle.

That gets very slow, especially when developing using something like Drupal which isn’t very speedy to begin with.

[Read more...]

Filed Under: CSS, Reviews, Tips

Taking CSS to the next level

October 8, 2006 By Bruce Kroeze 1 Comment

blue steps Taking CSS to the next level
For a long while, I used CSS to just do little stuff. I’d change the background color of a form field, or do a fancier background image treatment. But, to get my layout right, I’d still fall back to tables. Sometimes, I’d use a hybrid table/css layout. Several layout effects were just too much bother using CSS, so I never really went all the way with it.

This summer, while programming eBookTribe, I finally took it to the next level. That site is completely laid out using semantic markup and organized, logical CSS. I’m so pleased with the result. It is much more maintainable and easily tweaked to fit my designer’s picky eye, not to mention an order of magnitude more accessible to screen readers and assistive technology.

A shot of energy

I learned tons by reading design sites on the net, but the biggest single boost of energy/knowledge was "CSS Mastery: Advanced Web Standards Solutions", by Andy Budd, Simon Collison, and Cameron Moll.

One of the most brilliant techniques, really a breakthrough for me from CSS Mastery, is the technique of highlighting the current page in the nav bar using all CSS. No more need to have the script determine the page and programatically mark the active nav button. Very slick, and very easy to do once I grasped the technique.

[tags]CSS Mastery,web design[/tags]

Filed Under: CSS, Markup, Reviews

Prototype modification to fvlogger

January 20, 2006 By Bruce Kroeze 2 Comments

logger Prototype modification to fvloggerfvlogger.js is a fine logging system for Javascript, but when you are already using Prototype.js, it unnecessarily duplicates a lot of functionality. I’ve forked the original code to “fvlogger 1.0.proto”, removing this duplication. In addition, I’ve added a sweet “add the logger to the page” function to the script. The end result is much smaller and cleaner looking than the original, I think.

This script is based on fvlogger 1.0, available from Five Volt Logic. It requires prototype, and if you want to use its auto-insertion features, it requires Behaviour.js as well. If you aren’t already using the Behaviour library, you should. It will revolutionize your use of Javascript, fully separating user interaction from markup. Most times I use it, I never have to use a single line of inline javascript at all. That is incredibly liberating!

If you want to use Prototype 1.3.x, you will also need to load a few functions borrowed from “the future”, which I’ve helpfully included as “prototype_future.js”. Just look at the test page in the zip, and all should be clear.

Download protologger-1.0.zip and let me know what you think.

[tags]javascript,libraries,prototype,logging,fvlogger,behaviour[/tags]

Filed Under: CSS, Downloads, Javascript, Libraries, Open Source