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! :-) 

The week here has been so much fun, I can't believe it. I met Leah of Pownce, Noel at Intel, Mike from rData, and hung out with lots of old friends that I only get to see once a year. Portland is a beautiful, crafty, eco-friendly town with great good, good bars, fantastic public transportation.. *sigh* Would be nice to move here one day!

Read and post comments | Send to a friend

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" /> &nbsp;Lorem ipsum dolor sit amet</li>
                    <li><input type="checkbox" name="some_name" value="" id="some_name" /> &nbsp;Lorem ipsum dolor sit amet</li>
                    <li><input type="checkbox" name="some_name" value="" id="some_name" /> &nbsp;Lorem ipsum dolor sit amet</li>
                    <li><input type="checkbox" name="some_name" value="" id="some_name" /> &nbsp;Lorem ipsum dolor sit amet</li>
                    <li><input type="checkbox" name="some_name" value="" id="some_name" /> &nbsp;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. 

Read and post comments | Send to a friend

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.

Read and post comments | Send to a friend