Exploring the stylesheet of Fab.com

I occasionally (frequently) get emails from Fab.com with their weekly sales and features. Given that it’s a design company that sells unique and quirky products on a limited basis, I try to check out the website once in a while. This time around, I thought I’d look at their stylesheet to see how exactly they make their website look so clean and simple.

Fab

 

Since Fab’s main purpose is to sell products within different categories (and to promote “good design”), the layout of the site itself needs to be easy to navigate and pleasing to the eye. From surface level, the home page certainly looks good with its block arrangements, friendly typeface (which according to its stylesheet is Helvetica Neue), and grid styling.

The site has a stark white background, and each of the “boxes” you see on the above screen grab have 0 margins and 0 padding. One thing I noticed about each of the boxes is that their backgrounds are listed in the stylesheet as “transparent,” so I’m not sure what exactly that says about the background of the site or the background of each image. Only the big box at the top left (which is a gif featuring different kitchen supplies/utensils) is sized at 650×456 pixels, while the smaller boxes to the right of it are sized at 310×218 pixels.

Fab.com 2

 

Scrolling down to the actual e-commerce components of the site, we can see that the individual products for sale are placed in smaller columns, and the images provided for those products also have margins, paddings, and borders of 0.

What was most surprising about this exercise was getting to see just how utterly insane the stylesheet looks behind what is a seemingly simplistic and user-friendly website. There were actually three separate stylesheets for this site: one for the home department product page one for the collections pages, and one for the holiday shops page. This makes little sense to me, given that the entire website looks consistent throughout each page, but that’s something I hope to understand as I become more familiar with CSS in general.

Advertisements

2 thoughts on “Exploring the stylesheet of Fab.com

  1. I thought this was really interesting. It was enlightening to see the nitty, gritty CSS that helps give this website it’s “simple and sleek” design. I think it will be really useful to other’s (& maybe your) site moving forward when we are looking at how we want to lay out our content.

    Like

  2. I would definitely be down to live in a home curated by the Fab people, and I agree that their minimalist website is easy to navigate and effective. I’ve definitely come to appreciate all the work developers do through these blog posts — like you, I would have never guessed that it took so much style to design something that looks so clean. Of course, I’m starting to feel that pain now that I’m working on my own site.

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s