Bagatelle: A Layout For Articles

Because Blogs Get Too Much Attention

Articles Are People, Too

This is Bagatelle, my second submission to OSWD. It's similar in layout to cityslicker, my first submission, but has a major difference: it's made for articles rather than blogs. The two-column layout is perfect for larger amounts of text, and the cross-column pullouts are good for drawing attention to certain quotes or images (charts, for example). Besides the cross-column pullouts (which took a bit of black magic, let me tell you!), I did another subtle experimental thing in  this design: The faux-soft shadows in the header text. Yep, that's all CSS and text. It won't look like that in Opera, but it won't look too far off.

It Works in IE, I Promise!

As in my first design, you will probably want to remove the XML prologue I fixed this problem by using a <meta> tag to specify the encoding, instead of the XML prologue. It interferes with Internet Explorer's ability to sense the DOCTYPE element, and causes the browser to revert to quirks mode, wrecking the box model. In case you're wondering what's causing the OSWD preview to look incorrect in IE, there you have it. If you want to see a preview of what the page looks like in IE without that blasted prologue, click here. Unfortunately, the prologue is required for OSWD submission, because its absence causes a warning (not an error) in W3C validation.

Adopt, Adapt, and Improve

I hope you enjoy using this design. Unlike many who submit designs here, I'm a  firm believer in the greatness of Open Source and its sense of community. That means, you are free, nay, encouraged to change this design in any way you see fit. I would love for you to submit your improvements back to OSWD, but if you do, please include link in the template body back to this original OSWD preview. This way we can keep a trail of versions, which is a good thing. Also, it will keep people from thinking you're passing it off as your own original design, which is frowned upon.

Here Comes the Latin

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec tempor tortor et libero. Vestibulum posuere dolor nec augue. Phasellus tincidunt accumsan pede. Aliquam vestibulum dui

elementum, tellus risus ultrices libero, at tincidunt urna quam vulputate neque. Nulla magna. Sed a justo ut elit scelerisque aliquet. Nulla lacinia. Proin pretium tempus eros. Fusce tempus neque et pede. Vestibulum ac est. Maecenas elementum. Mauris at lacus. Maecenas tristique mattis dolor. Donec ornare dolor id erat. Donec gravida semper odio. Integer nonummy orci vel dolor. Morbi at urna quis ligula ornare convallis. Morbi quis felis ut turpis consectetuer feugiat. Donec ipsum risus, ultricies id, euismod quis, dapibus non, arcu.

The only thing more awesome than pullquotes, are cross-column pullquotes.
Nulla tempus turpis ac massa ornare ultrices. Phasellus congue leo sed ligula. Ut tellus. Cras viverra tortor at leo.

Praesent tincidunt nibh sit amet nisi. Aliquam iaculis fringilla dui. Sed eleifend, pede in ultricies euismod, nunc turpis mollis justo, a dapibus arcu diam ut massa. Suspendisse ac mi quis mi pretium congue. Ut vel mauris a nunc faucibus convallis. Sed at ante eu pede blandit fringilla. Sed semper elit. Quisque blandit ullamcorper urna. Nulla ut orci. Morbi porta feugiat nisl. Sed sapien. Quisque semper. Sed libero. Nunc adipiscing elit sit amet ligula.

More Latin, Sir?

Nunc nec lacus ut mauris porta aliquet. Donec neque. Sed accumsan. Maecenas nec ipsum. Integer aliquet mattis diam. Ut ut nulla eu nibh ullamcorper tempor. Etiam ultricies, massa in porta lacinia, sem tortor vestibulum eros, id pellentesque lectus urna et tellus. Mauris congue dolor pellentesque sem. Suspendisse in erat. Curabitur
A Colorful Image!
A colorful image.
tincidunt. Nunc vestibulum urna vitae erat. Curabitur rhoncus diam sed sapien.

Vivamus imperdiet iaculis mi. Ut id felis. Donec ante. Ut convallis auctor turpis. Ut turpis pede, ullamcorper eget, egestas in, tempor ac, massa. Maecenas vitae quam. Duis orci. Nam at ante at neque varius pulvinar. Praesent semper. Donec et velit at urna faucibus mattis. Ut erat. Nullam dolor massa, dapibus ac, cursus eu, facilisis vitae, nisl. Pellentesque tincidunt semper tortor. Vivamus lorem leo, vulputate a, euismod quis, sagittis et, turpis. Phasellus eu sapien ut libero fermentum euismod.