How to Style an Application Like Facebook

In this article we will explore how we can style our Facebook application to look and feel like an extension of the Facebook platform. We will examine colors, fonts, dimensions and a few common design patterns utlized by the Facebook platform in our quest to fit in with the crowd.

Introduction

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.

Facebook Blue

Facebook Blue

#3b5998

Text Colours

Light Text	#999999
Medium Text	#666666
Dark Text	#333333
Link/Anchor Text	#3b5998

Grey Box

Background	#f7f7f7
Border	#cccccc

Blue Box

Background	#eceff6
Border	#d4dae8

Information Box

Background	#fff9d7
Border	#e2c822

Error Box

Background	#ffebe8
Border	#dd3c10

Facebook Typography

A little research revealed that Facebook uses the following set of fonts.

view plaincopy to clipboardprint?

1. body  
2. {  
3.     font-family: "lucida grande", tahoma, verdana, arial, sans-serif;  
4. }  

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

Width: 760px
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

Icon Dimensions

Facebook uses 16x16 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

view plaincopy to clipboardprint?

1. <div class="fbgreybox" style="width: 500px;">  
2.     Recognize this general purpose grey box?  
3. </div>  

Recognize this general purpose grey box?

Common Blue Box

view plaincopy to clipboardprint?

1. <div class="fbbluebox" style="width: 500px;">  
2.     Recognize this common blue box?  
3. </div>  

Recognize this common blue box?

Information Box

view plaincopy to clipboardprint?

1. <div class="fbinfobox" style="width: 500px;">  
2.     Recognize this information box?  
3. </div>  

Recognize this information box?

Error Box

view plaincopy to clipboardprint?

1. <div class="fberrorbox" style="width: 500px;">  
2.     Recognize this error box?  
3. </div>  

Recognize this error box?

Facebook Tabs

view plaincopy to clipboardprint?

1. <a href="#" class="fbtab">Facebook Tab #1</a>  
2. <a href="#" class="fbtab">Facebook Tab #2</a>  
3. <a href="#" class="fbtab">Facebook Tab #3</a>  
4. <a href="#" class="fbtab">Facebook Tab #4</a>  
5. <a href="#" class="fbtab">Facebook Tab #5</a>  

Facebook Tab #1Facebook Tab #2Facebook Tab #3Facebook Tab #4Facebook Tab #5

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

view plaincopy to clipboardprint?

1. /* Default Facebook CSS */  
2. .fbbody  
3. {  
4.     font-family: "lucida grande" ,tahoma,verdana,arial,sans-serif;  
5.     font-size: 11px;  
6.     color: #333333;  
7. }  
8. /* Default Anchor Style */  
9. .fbbody a  
10. {  
11.     color: #3b5998;  
12.     outline-style: none;  
13.     text-decoration: none;  
14.     font-size: 11px;  
15.     font-weight: bold;  
16. }  
17. .fbbody a:hover  
18. {  
19.     text-decoration: underline;  
20. }  
21. /* Facebook Box Styles */  
22. .fbgreybox  
23. {  
24.     background-color: #f7f7f7;  
25.     border: 1px solid #cccccc;  
26.     color: #333333;  
27.     padding: 10px;  
28.     font-size: 13px;  
29.     font-weight: bold;  
30. }  
31. .fbbluebox  
32. {  
33.     background-color: #eceff6;  
34.     border: 1px solid #d4dae8;  
35.     color: #333333;  
36.     padding: 10px;  
37.     font-size: 13px;  
38.     font-weight: bold;  
39. }  
40. .fbinfobox  
41. {  
42.     background-color: #fff9d7;  
43.     border: 1px solid #e2c822;  
44.     color: #333333;  
45.     padding: 10px;  
46.     font-size: 13px;  
47.     font-weight: bold;  
48. }  
49. .fberrorbox  
50. {  
51.     background-color: #ffebe8;  
52.     border: 1px solid #dd3c10;  
53.     color: #333333;  
54.     padding: 10px;  
55.     font-size: 13px;  
56.     font-weight: bold;  
57. }  
58. /* Content Divider on White Background */  
59. .fbcontentdivider  
60. {  
61.     margin-top: 15px;  
62.     margin-bottom: 15px;  
63.     width: 520px;  
64.     height: 1px;  
65.     background-color: #d8dfea;  
66. }  
67. /* Facebook Tab Style */  
68. .fbtab  
69. {  
70.     padding: 8px;  
71.     background-color: #d8dfea;  
72.     color: #3b5998;  
73.     font-weight: bold;  
74.     float: left;  
75.     margin-right: 4px;  
76.     text-decoration: none;  
77. }  
78. .fbtab:hover  
79. {  
80.     background-color: #3b5998;  
81.     color: #ffffff;  
82.     cursor: hand;  
83. }  

Conclusions

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!