Richard Rutter of Clagnut has built The Elements of Typographic Style Applied to the Web, to explain the core principles of The Elements of Typographic Style and how they can, and for that matter should be applied to the Web. I’m extremely excited about this new resource and plan to spend some time digging through the site to take it all in.
For those interested in more information regarding the site, check out Richard’s introductory post.
is “a liquid three column CSS layout with a fixed positioned and width centre column, released under a Creative Commons Attribution 2.0 license.”
The One True Layout – I’m noting this so I can come back and check it out in full and hopefully leave my notes in this space. Here is a quick summary for those Web-types who are interested:
“This article shows how to achieve [total layout flexibility, equal hight, non-faux columns and vertical placement of elements across grids/columns], and then how to combine them, creating what could be called the One True Layout™”
CSS: Specificity Wars | And all that Malarkey – A great use of the dark side to explain the specificty within the cascade.
As expected, the introduction of IE 7 will wreak havoc on those sites that utilize CSS hacks to serve up different styles to IE browsers. The IE development team is urging developers to clean up their hacks. They recommend the use of conditional comments, but I lean to using server-side code to detect and serve browser/platform-specific styles as needed. In PHP I use and heartily recommend phpSniff . Now I need to research some options in JSP…
footerStickAlt: A more robust method of positioning a footer, specifically “at the bottom of the browser window or at the bottom of the Web page – whichever is visually lowest.” This looks very interesting – I can’t wait to find a project that will allow me to try this out!
The SeeSS widget for the OS X dashboard “is a quick and handy reference sheet for 140 CSS (1, 2 & 3) properties (proprietary extensions are not included). Each property includes information on its inheritance, CSS compliancy, Safari support, all values (including defaults), some examples and an extensive description. A link to the appropriate W3.org pages is included as well, for even more additional information.” This looks quite handy for those running 10.4+. Link found via Veerle’s blog
Simple Templating from mezzoblue provides a straightforward and solid templating system. I’ve typically followed the same type of practice on my sites, though Dave Shea’s practice of setting the body class as a variable was a new idea to me – one which I will adopt.
Even cooler is the use of a PHP array to provide the flexibility of using different style sheets per page. I’ve needed this functionality in past projects, but hadn’t solved the issue anywhere near as elegantly.
snook.ca provides some nice Web development tutorials for your perusal. But that isn’t why I am posting it. I am spreading the word about this “collection of tips, tricks and bookmarks” so you can see the brilliant implementation of a commenting system. Check out one of the entires (“I’m an addict” is an ideal example, plus it explains the system) to see what I mean. Not only is the left hand margin used to display comment information in a compact method (tidy!), the comment form remains visible on the right hand side of the page as you scroll, making it easy for the reader to comment as they read. This is a great way to encourage feedback and participation.
I learned of the site and method through Derek Featherstone’s post “Dockable Comments: Intelligent DOM Scripting, which discusses his variant of the concept, which in turn was pointed out by Cameron Moll.
Another great tutorial from Roger Johnson (456 Berea Street), discusses a method to create transparent custom corners and borders, which “uses no extra markup, allows the use of transparent images for the corners and borders, and has no restrictions on the background colour and margins of the elements within the main container. Skip right ahead and take a look at the final example if you can’t wait.”
In between Fixed and Liquid Layouts, there is now Jello. Tasty.
Dave Shea has written a great post about his misunderstanding of when to use (or not use) tables in his post Too Far. For those of you unfamiliar with Dave, he has provided a wealth of information and tools to the Web community (in addition to the CSS Zen Garden, and his book, The Zen of CSS design, there are many posts on this site that point to entries on Mezzoblue). He has taught many in the community about good design, and proper use of CSS, but he made the same mistake that many of us have – taking dogma too far by eliminating the use of tables throughout the site. The freedom and power of Cascading Style Sheets introduced a loathing for tables-based design within the community, and many, myself included, eliminated tables from our sites as quickly as we could figure out how to create multi-column designs in CSS.
Like Dave, I hit a point a while back where I realized that I was attempting to use CSS, Divs, Lists and the like to present tabular data, instead of utilizing the semantically correct table tags. For me, it was one of those “Ah ha!” moments – tables are not bad, they are actually very useful, but like any tool, they can, and have been mis-used within our community. The backlash is understandable, but a sizable portion of the community has since realized that the pendulum swung too far, and are now doing it the right way. This is due in large part to the work of Dave and many others like him.
Veerle provides a nice tutorial discussing how you can use CSS to make a table more attractive while being accessible.