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.
