Posts tagged css

Getting Started with Sass

A primer by David Demaree on Sass, “an extension of CSS3.” A great way to save time and your sanity when working with large stylesheets.

Dec. 1, 2011 css webdev

Lost and Found

The latest at the Chronicle. This one was a lot of fun to design. The animation is all CSS, and the whole page is responsive.

Sep. 16, 2011 baseball css design storytelling webdev

A Responsive Design

It’s no secret: The Baseball Chronicle isn’t just a celebration of baseball and the narrative. It’s also a place for me to experiment with the latest in web design and development.

I’m a tinkerer by nature, and the Chronicle has become, perhaps even more than this site, that with which I tinker. After months of reading about HTML5, CSS3 and @font-face, I started on a redesign incorporating all of them. What better way to learn? What good is unapplied knowledge?

So after I read Ethan Marcotte’s spectacular “Responsive Web Design” at A List Apart, of course I had to implement it at the Chronicle. I’d long thought about creating a mobile version of the site, but it always seemed excessive. I didn’t need to add content or functionality for mobile users. The site simply needed to be a little more usable for readers with small screens. Enter media queries:

Rather than quarantining our content into disparate, device-specific experiences, we can use media queries to progressively enhance our work within different viewing contexts.

I started in July on a rudimentary responsive front page, but vacation and other happenings shelved the project until mid-August, while designing “Sunday Fly,” the second story of the bespoke era. (As part of the redesign, I create original designs for every story, using Movable Type logic to search for and apply a style sheet whose name matches the post’s title. Pre-redesign posts, as yet lacking custom styles, inherit a base design.) I tack on the responsive code to the end of each post’s style sheet.

The responsive styles for “The Man on the Mound” begin:

@media screen and (max-width: 750px)

Screens less than 750 pixels wide receive any subsequent styling, which eliminates floats, resizes type and margins, and adds many a width: auto;. The effect is a legible and usable design at any screen size, across devices, without a dedicated mobile subdomain or new style sheet.

For more on responsive design, read the A List Apart article and check out the websites of Dan Cederholm, Simon Collison and Jon Hicks for further inspiration and guidance.

Sep. 13, 2010 css design webdev

Responsive Web Design

Stunning. I’ll be adding this functionality to the Chronicle this week. And Jon Hicks’ implementation is equally inspiring.

Jul. 6, 2010 css design webdev

shutup.css

For a more civil web.

Feb. 4, 2010 css humor webdev

Paul Irish: Bulletproof @font-face Syntax

Very nifty.

Sep. 12, 2009 css typography webdev