Posts tagged as Hackery

Newer
Older

Favorite CSS Framework Design Patterns

Over the last couple of years, a whole collection of mature CSS frameworks have emerged, with the ambition of making CSS development faster, the rendering more predictable and the code easier to maintain. I’ve recently wanted to revisit some methodologies I use when it comes to maintaining CSS across a product line, and what better place to research CSS best practices and abstractions than the frameworks used by thousands of other people.

Reset

Every single CSS framework out there that I’ve looked at ships with a reset stylesheet. I think even the most framework-averse CSS artisans can find value in reseting the browser defaults and have all the elements start off on equal footing, regardless of browser. There are a couple of options for this, you can go with the industrial reset.css, courtesy of YUI, or with the local, organic variety, via Eric Meyer.

Font Reset

Font-sizing is another area that is hard to do “right”. Ideally, you want your fonts to scale when the user changes their browser’s font-size setting. Doing so means using relative units, which means lots of added complexity (i.e. arithmetic), and even then, consistent results across browsers aren’t guaranteed.   There are a couple of schools of thoughts on text sizing, but I like to err on the side of Yahoo.  If anything, they’ve put their YUI framework through a testing gauntlet, so you can be confident that their methodology will produce good results.  You have to use percentages to set your font-size (easiest to reference their percentage → pixel translation table), but outside of that inconvenience, you get scalable font sizes virtually for free.

Neutering deprecated elements

I noticed Tripoli using this strategy. They take the likes of the <font> and the <center> tag and hinder their ability to affect the page style and layout. It’s a pretty interesting way to discourage their use and making bad habits a bit more toothless.

Setting good defaults for core elements

One of the most jarring things when you first switch to using a reset stylesheet is that writing simple, semantic markup no longer results in an intelligible document by default — all the headings, paragraphs and lists are the same size and so are the margins between the elements. You’ll feel like you’re doing a lot of extra work defining that which should be more implicit. Either way, if you’re far enough into a project, even if you didn’t use a reset stylesheet, you would probably have redefind those elements anyways , as the browser defaults aren’t good. Defining smart defaults on top of the reset stylesheet helps you save time redefining these basic elements, while establishing a more rigorous typographical system than the browser defaults could ever provide.

Concept of a template for basic layout

A lot of the frameworks use the concept of a template. You start off by marking-up your document with a pre-defined structure of common elements. For example, you’d add the header, navigation, content, primary-sidebar, secondary-sidebar and footer to your HTML.  Once these pieces are in place, you can liberally change the layout from fluid to fixed, as well as change the order  in which the sidebar and content elements display – all by adding one <div> around the common elements that specifies the template you’re using as a class.

css-template-graphic

Modular Components

There are many common interface patterns, but most don’t merit being included on every single page. Things like pagination and, arguably, form styles are great candidates for including individually on top of the core CSS framework. You would include these components only when you need them.  There are a lot of good thoughts in this presentation from Yahoo’s Nicole Sullivan on how to best abstract site components in terms of structural markup and CSS classes. Particularly, pay attention to the concepts of “extending” components by adding classes, as well as “separating the container from the content”.

Pseudo-namespacing

All re-usable CSS components should use class names with some standardized prefix. For example, instead of using “.block” you’d use “.ez-block” to define a generic class block. This helps identify the component as a piece of the framework and gives the developer working with the framework sufficient caution when over-riding those styles. This also helps minimize conflicts when including javascript and CSS modules that aren’t endemic to your CSS framework.

Bringing it all together

With all of this in mind, this is the list and order of all the CSS components that would be included to make up my ideal CSS workflow. 

Ideal CSS framework stack

Notable CSS Frameworks

Mar 4 2009

Using MySQL to Store Data With a Flexible Schema

Bret Taylor on how FriendFeed decided to scale their datastore.

Lots of projects exist designed to tackle the problem storing data with flexible schemas and building new indexes on the fly (e.g., CouchDB). However, none of them seemed widely-used enough by large sites to inspire confidence. In the tests we read about and ran ourselves, none of the projects were stable or battle-tested enough for our needs (see this somewhat outdated article on CouchDB, for example). MySQL works. It doesn’t corrupt data. Replication works. We understand its limitations already. We like MySQL for storage, just not RDBMS usage patterns.

After some deliberation, we decided to implement a “schema-less” storage system on top of MySQL rather than use a completely new storage system. This post attempts to describe the high-level details of the system.

Feb 27 2009

Startups in 13 sentences

The requisite Paul Graham essay. He’s been meditating on these topics for years now, but you can always find something to extract from his essays.

Having gotten it down to 13 sentences, I asked myself which I’d choose if I could only keep one.

Understand your users. That’s the key. The essential task in a startup is to create wealth; the dimension of wealth you have most control over is how much you improve users’ lives; and the hardest part of that is knowing what to make for them. Once you know what to make, it’s mere effort to make it, and most decent hackers are capable of that.

Feb 24 2009

Inconsolata: a free monospaced font

I can’t tell if this is meant to be a programming font or simply a reaction to programming fonts.  Designed by Raph Levien, this monospaced font is meant to alleviate the garishness of common monospaced fonts when viewed at a high resolution.  The humanist strokes that make it distinct also end up handicapping it at smaller sizes.  That said, it can make the likes of Monaco look down-right crude.

For a programming font with similar sensibilities Consolas is where it’s at, especially if your editor renders certain elements (like code comments) in italics.

Feb 17 2009

Blowing Out the Dust: Recent Work Edition

It’s very appropriate that the last proper post on this blog was titled “Designing for Permanence” — a post espousing an approach to web design in which one aims to create an enduring artifact — and so this blog endured: static, fixed and not updated for a couple of months. That’s not exactly the type of permanence I was shooting for.

In an effort to jump-start a couple of topics and provide context for future posts, I thought I’d share some recent work highlights.

Glassbooth

Glassbooth HomeHome page.
The actual questionsQuestions based on issues you chose.
Glassbooth issue-by-issue breakdownThese aren’t my actual results.

This was probably the biggest personal project I worked on in a while. It started as a thought exercise by a couple of buddies of mine on the current state of representative democracy and ended in an interactive tool backed by some of the best data on the current presidential candidates. It’s now a fully-certified 501(c)(3) non-profit. What’s great about a project like this is the autonomy afforded in making design decisions. In this case, I got the opportunity to design everything you see except for the icons and logo.

Because the aim of the project was to create a non-biased source of information for the upcoming election, the challenge was to present it as such. I also wanted to avoid cliched motifs: using red white and blue or the american flag. Colors in general were problematic, as their interpretation is often personal and subjective. Choosing any distinct palette would be tantamount to choosing a side (especially green). Not to mention the information design and interaction problems that needed to be solved.

Searchblog

Searchblog redesignedThis one looks better in person.

Having had a surplus of ideas on blog design, I decided to use them to re-think Searchblog. It was not prompted and I essentially imposed the design on John. Thankfully, he was a good sport about it and after a fun reader census, it’s now live. Speaking of reader feedback on design, this served as a good opportunity to revisit Daniel Burka’s presentation on that very same topic.

Feed Wrangler

Feed Wrangler screenshotMain settings screen where you can create new feeds and manage existing ones

Feed Wrangler is a WordPress plugin that came out of my work at FM. Feeds are an extremely important part of any publishing venture. Whether it’s to facilitate a syndication partnership or plug in to some third-party service. The requirements, however, can be quite diverse and unpredictable. For example, the feed widgets generated by FeedBurner are problematic if your blog is available on the Amazon Kindle.

To address the problem, Movable Type has the custom-feed-generation thing covered pretty well. On the other hand, there is a fair amount of work required to do the same if you are a WordPress publisher — this plugin aims to solve that, by making custom feed creation a more manageable process.

May 27 2008

Posts tagged as Hackery

Newer
Older