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.
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.
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.