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 | #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.
body
{
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
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 out
FamFam'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
Recognize this general purpose grey box?
Common Blue Box
Recognize this common blue box?
Information Box
Recognize this information box?
Error Box
Recognize this error box?
Facebook Tabs
Facebook Tab #1
Facebook Tab #2
Facebook Tab #3
Facebook Tab #4
Facebook Tab #5
Facebook Tab #1 Facebook Tab #2 Facebook Tab #3 Facebook Tab #4 Facebook 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
/* Default Facebook CSS */
.fbbody
{
font-family: "lucida grande" ,tahoma,verdana,arial,sans-serif;
font-size: 11px;
color: #333333;
}
/* Default Anchor Style */
.fbbody a
{
color: #3b5998;
outline-style: none;
text-decoration: none;
font-size: 11px;
font-weight: bold;
}
.fbbody a:hover
{
text-decoration: underline;
}
/* Facebook Box Styles */
.fbgreybox
{
background-color: #f7f7f7;
border: 1px solid #cccccc;
color: #333333;
padding: 10px;
font-size: 13px;
font-weight: bold;
}
.fbbluebox
{
background-color: #eceff6;
border: 1px solid #d4dae8;
color: #333333;
padding: 10px;
font-size: 13px;
font-weight: bold;
}
.fbinfobox
{
background-color: #fff9d7;
border: 1px solid #e2c822;
color: #333333;
padding: 10px;
font-size: 13px;
font-weight: bold;
}
.fberrorbox
{
background-color: #ffebe8;
border: 1px solid #dd3c10;
color: #333333;
padding: 10px;
font-size: 13px;
font-weight: bold;
}
/* Content Divider on White Background */
.fbcontentdivider
{
margin-top: 15px;
margin-bottom: 15px;
width: 520px;
height: 1px;
background-color: #d8dfea;
}
/* Facebook Tab Style */
.fbtab
{
padding: 8px;
background-color: #d8dfea;
color: #3b5998;
font-weight: bold;
float: left;
margin-right: 4px;
text-decoration: none;
}
.fbtab:hover
{
background-color: #3b5998;
color: #ffffff;
cursor: hand;
}
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!
