I gave a talk at OSCON yesterday on YUI CSS, Making the hard stuff fun and easy with YUI CSS, and it went pretty well. Thanks to Nate for all his help and to all you gorgeous OSCON geeks that came to see my talk! Did a Perl Lightning Talk this afternoon and came SO close to finishing before the gong! :-)
I recently redesigned webchic.net and wanted to tweak the design to look good on the iPhone. While my first thought was to use a JS style switcher triggered by the iPhone's unique WebKit referrer, I decided on a much simpler solution for now.
<!--[if !IE]>-->
<link media="only screen and (max-device-width: 480px)"
href="iPhone.css" type="text/css" rel="stylesheet" />
<!--<![endif]-->
Ultimately, only browsers that recognize screen will understand only, and only the iPhone fits the category of max-device-width: 480px.
On a related side note, I've notice a lot of developers reciting "browser width 320px" in regards to iPhone development. This is a little misleading, since the tilted, horizontal iPhone screen is much more popular when surfing websites and is 480px wide.
What you'll need from the Yahoo User Interface Library:
CSS: reset-fonts-grids.css
Javascript: yahoo-dom-event.js, container.js
Download 'em all.
Hop to it, campers! Call the YUI stuff first:
<link rel="stylesheet" href="css/reset-fonts-grids.css" type="text/css" media="screen" charset="utf-8" />
<script src="js/yahoo-dom-event.js" type="text/javascript" charset="utf-8"></script>
<script src="js/container.js" type="text/javascript" charset="utf-8"></script>
Add some styles for the prettiness factor. :o)
<style type="text/css" media="screen">
.container {
width: 300px;
}
.container h3 {
font-size: 136%;
font-weight: bold;
}
.container h3 a {
display: block;
float: right;
font-size: 77%;
font-weight: normal;
text-decoration: none;
}
.module {
padding: 5px;
}
</style>
Apply YUI Javascript generously.
<script type="text/javascript" charset="utf-8">
YAHOO.namespace("cats.container");
function init() {
YAHOO.cats.container.module = new YAHOO.widget.Module("module");
YAHOO.cats.container.show = new YAHOO.widget.Module("show");
YAHOO.cats.container.hide = new YAHOO.widget.Module("hide");
YAHOO.cats.container.module.render();
YAHOO.util.Event.addListener("show", "click", YAHOO.cats.container.module.show, YAHOO.cats.container.module, true);
YAHOO.util.Event.addListener("show", "click", YAHOO.cats.container.hide.show, YAHOO.cats.container.hide, true);
YAHOO.util.Event.addListener("show", "click", YAHOO.cats.container.show.hide, YAHOO.cats.container.show, true);
YAHOO.util.Event.addListener("hide", "click", YAHOO.cats.container.module.hide, YAHOO.cats.container.module, true);
YAHOO.util.Event.addListener("hide", "click", YAHOO.cats.container.show.show, YAHOO.cats.container.show, true);
YAHOO.util.Event.addListener("hide", "click", YAHOO.cats.container.hide.hide, YAHOO.cats.container.hide, true);
}
YAHOO.util.Event.addListener(window, "load", init);
</script>
And the HTML. (Try holding your breath - it's really that quick!)
<div class="container">
<h3>
<a href="#" id="show" style="display: none;">Show</a>
<a href="#" id="hide">Hide</a>
Header
</h3>
<div id="module" class="module">
<div class="bd">
<ul>
<li><input type="checkbox" name="some_name" value="" id="some_name" /> Lorem ipsum dolor sit amet</li>
<li><input type="checkbox" name="some_name" value="" id="some_name" /> Lorem ipsum dolor sit amet</li>
<li><input type="checkbox" name="some_name" value="" id="some_name" /> Lorem ipsum dolor sit amet</li>
<li><input type="checkbox" name="some_name" value="" id="some_name" /> Lorem ipsum dolor sit amet</li>
<li><input type="checkbox" name="some_name" value="" id="some_name" /> Lorem ipsum dolor sit amet</li>
</ul>
</div> <!-- end .bd -->
</div> <!-- end .module -->
</div> <!-- end .container -->
And you're done! Easier than a soft-boiled egg.
Once upon a time there was a young web developer. Each day, she trudged to work, sat in her hard, unfeeling office chair and laboriously put her CSS layout in place, block by block. Some days the graphic designer's needs were great, and she would sweat and toil for hours under the whip of Internet Explorer until the job was entirely satisfactory.
Then one day, she discovered YUI. It was like magic, and it blessed her the gift of multiple layouts in under 15 seconds. It unshackled IE's chains from her aching wrists and with a single "reset.css", freed her from being a hapless victim of browser wars forever... or at least for the next few months!
YUI. Like a dream come true. No matter what your skill level with CSS, I can only recommend that you take an afternoon or evening off, grab a beer or mug of hot tea and camp out with the excellent documentation the YDN (Yahoo Developer Network) has provided.
- Reset - levels the playing field. Standardizes those annoying inconsistencies between browsers, margins being my particular bane.
- Fonts - let all fonts be equal. Control all fonts from general text up to h1 using percentages. Safely!
- Grids - the holy grail. There's nothing this baby can't do. (At least nothing I've run into yet.) With a handful of yui-b's and a couple of yui-u's, you can format (and maintain) a page layout faster than ever before. While some of the page layout widths may seem limited, the css is fairly easy to read and change to fit your needs.
I've also been using a couple bits in the YUI JS library: Container, Slider, and TabView. All are super-easy with not only great, step-by-step documentation, but also really great examples. (I tend to look at those first.) If you're new to flashy JS stuff, I highly recommend the book, DOM Scripting and the entire Yahoo User Interface library.
I haven't seen many people using the built-in Keyboard Shortcuts feature in OS X, maybe because there are so many full-featured third-party apps out there that do it better. Still, it's good for the quick and simple commands that Apple doesn't already have keymapped.
For example, I noticed in iTunes 7 that the main iTunes window no longer has a default keymapping, nor does the equalizer.
- Open System Preferences.
- Click on Keyboard & Mouse.
- Select the Keyboard Shortcuts tab.
- Scroll to the bottom and select "Application Keyboard Shortcuts".
- Click the plus button to add a new shortcut.
- Select your app and type the menu command you want to run.
- Close and re-open your app, if it was still running.
In the effort to post more regularly, I'm going to start posting these "Good Word" tidbits. The idea is to spread the word of various code tips and tricks that many people may not be aware of. (If you've heard of one before, or use it frequently, give yourself a big pat on the back.) I may or may not post the pros and cons of techniques, but will try to link to some supplementary material.
PNGs are often a favorite file format for icons, button images and all sorts of things. Transparent PNGs are transparent on ANY background color; fantastic for when your background color changes with the season, for example. PNG transparency support is already well-supported in Mozilla (Firefox, Safari), Opera, IE5 for Mac and a few others. Where doesn't it work? IE.
Here's the trick. IE has these semi-useless visual filters, one of which is AlphaImageLoader. Here's how to use it.
<div style="width: 10px;
height: 10px;
position: relative;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png', sizingMethod='crop');"></div>
Messy to use inline, of course. Ideally, you would call the PNG as a background image from your stylesheet and drop the filter call in your IE-only stylesheet.
More info: Cross-Browser Variable Opacity with PNG: A Real Solution [A List Apart]
A la Ask's similar post:
Here's some valuables from my Dashboard:
- Dolor Sit Amet - Effortless lorem ipsum generator.
- Galleria - Search through the oodles of color palettes from ColorSchemer.com
- ColourMod - Color picker that spits out HEX.
- CSSTweak - Optimize your stylesheets.
- CSS Cheat Sheet - Is what it is. Quick 'n handy.
- WidgetTerm - Great for all sorts of handy uses. I use mine for SVN commands.
- DashTunes - A mini iTunes which allows for rating.
- Sound Volume - Between this and DashTunes, I can close the iTunes window and still have quite a bit of control over music stuff.
- Transmit - Good for those repeated image uploads. Requires Transmit.
- Ma.gnolia Ma.rker - Having recently discovered Ma.gnolia, I use the bookmarklet to mark sites in a rush, but I use this cute widget when I have time to edit details & tags in the moment.
If you haven't found Well Styled's Color Scheme Generator yet, you should hop on over there and try it out. It makes for a nice bookmark when you're looking for a quick hex color choice and need to shift around with various hues and such on the fly. Other spendid choices include:
- Visibone's Color Lab
- Also, if you're smart enough to be using OS X, you can use the already-installed DigiColor Meter's color picker to pick up RGB and HEX codes from colors anywhere on your desktop. (/Applications/Utilities/DigiColor Meter)
The problem when you take two weeks off of coding is that doing real work again is like trying to solve an equation while your brain thaws out of cryogenic sleep. Sluggish, to say the least.
