So you have a great idea for an application, and you’ve developed your idea into a somewhat functional Facebook app. The only problem is, it looks completely out of place in the space Facebook has designated for your layout. Let’s look at how we can change that.
Facebook invested a lot of money in creating the fluid graphic design work you see in front of you, but we won’t have to. Using a few handy tools right in our browser you can figure out the majority of what’s going on. I won’t go into detail about this process, but we primarily used the Firefox extension FireBug and Chrome’s built in inspection tools to ferret out the pertinent style attributes.
Let’s look at the crucial elements of the stylesheet by category and then discuss how to implement them. We’ll start with colour.
The Colours of Facebook
Facebook keeps their colour model simple, and it’s an effective approach. General text ranges from light to dark grey (never black) and as far as I can tell, every link is in what I call "Facebook Blue". For background and border colours, Facebook uses a pair of light and dark variations on a single colour to create contrast.
Let’s take a look at the full reference chart.
A little research revealed that Facebook uses the following set of fonts.
- font-family: "lucida grande", tahoma, verdana, arial, sans-serif;
As a quick note for beginners, this CSS states: First check the browser’s ability to render text in Lucida Grande, then try Tahoma, etc.
Important Dimensions / Spacing
When developing a Facebook application there are a few dimensions that we must be aware of since Facebook determines where your content can be rendered. As a general note, Facebook uses a 10px padding in most of their elements, so for a consistent look and feel, this is probably a good practice in your application.
Application Canvas Page
Maximum Height: N/A
Narrow Profile Box
Width: 200px (with 8px padding on each side)
Maximum Height: 400px
About Profile Box
Width: 500px (with 10px padding on each side)
Maximum Height: N/A
Facebook uses 16×16 pixel icons throughout their application. For a similar look and feel with great expansion capabilities, check outFamFam’s Silk Icons.
If you look closely in the next section, you’ll see one of FamFam’s icons used for the comment!
Ready-To-Use Facebook Components
We here at SocialSnippets decided that telling you about the CSS styling in Facebook wasn’t quite enough. So we went ahead and created a fully functional set of styles that when dropped in your page allow you to instantly being creating some basic "Facebook Components". Here they are in all their glory.
General Purpose Grey Box
- <div class="fbgreybox" style="width: 500px;">
- Recognize this general purpose grey box?
Recognize this general purpose grey box?
Common Blue Box
- <div class="fbbluebox" style="width: 500px;">
- Recognize this common blue box?
Recognize this common blue box?
- <div class="fbinfobox" style="width: 500px;">
- Recognize this information box?
Recognize this information box?
- <div class="fberrorbox" style="width: 500px;">
- Recognize this error box?
Recognize this error box?
- <a href="#" class="fbtab">Facebook Tab #1</a>
- <a href="#" class="fbtab">Facebook Tab #2</a>
- <a href="#" class="fbtab">Facebook Tab #3</a>
- <a href="#" class="fbtab">Facebook Tab #4</a>
- <a href="#" class="fbtab">Facebook Tab #5</a>
How to Use These Components
It’s actually quite easy. The sample code above should get you started. Essentially, you just need to set the class of the div or anchor element to the corresponding class in the stylesheet. If you want to inherit the basic Facebook text styling, wrap your content with a div of class "fbbody".
Included below is the full stylesheet. Copy and paste it into either your external stylesheet, or directly into a style element in your markup.
Complete Facebook Component Stylesheet
While the research that went into this article was quite extensive, it in no way encompasses every style used in the Facebook platform. If you enjoyed the article, please comment briefly and say what you would like to see more of in the future. Maybe a sequel is in the cards?
And, as always, if you have a second, Digg the article and share the wealth!