- Ruthsarian :
- Layouts :
- Labs :
- Blog :
- Contact :
April 10, 2008
New Layout: Comic
I'm not officially publishing this yet, but it's pretty close to done and I figure anyone who keeps up with this blog should get a little something out of the deal.
So here it is, my latest creation: Comic.
The layout explains most of what the layout is about. But to put it briefly, this layout is about conserving horizontal space for content and not navigation. It's also a showcase for style switching.
I realize the vertical toolbox on the right-side could just as easily be a horizontal piece perhaps placed above the layout at the very top of the page or under the masthead. I liked the idea of making it a vertical toolbar though for a couple reasons. One is it makes the layout feel almost like various popular graphics programs that have vertical toolboxes. The other is I get a sick pleasure in the irony of preaching vertical space conservation and then wasting about 2ems worth with that silly thing.
Getting the buttons to scale with the changing font size of the page was actually a bit tricky. Turns out most browsers set input buttons to a fixed text size that doesn't scale as you scale the font-size of any of the button's parent elements (e.g. the BODY). So you have to explicitly set font-size:1em to input elements. Then it will scale.
The font selection buttons have different font sizes. So instead of saying "width:1.6em" for all three, each one has a different width scaled up or down, depending on the font size for that button, so they'll all be the same rendered size. Check the CSS.
It's surprisinglycompatible, even Mac/IE 5.0 works great with this layout. Netscape 6 doesn't like horizontally centered dropdown menus so I'll need to fix that, but it's a ruthsarian menus issue not a comic issue.
No packaged download yet (although you'll see there's a spot to put a link to one as soon as I'm ready). But if you want to play around with it I'm sure most of you can figure out where the various bits are and how to download them.
So give it a go. Put it through its paces. Let me know what you think or what you experience.
Post a comment