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.
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
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 |
|
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.
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
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!
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?
- </div>
Recognize this general purpose grey box?
Common Blue Box
- <div class="fbbluebox" style="width: 500px;">
- Recognize this common blue box?
- </div>
Recognize this common blue box?
Information Box
- <div class="fbinfobox" style="width: 500px;">
- Recognize this information box?
- </div>
Recognize this information box?
Error Box
- <div class="fberrorbox" style="width: 500px;">
- Recognize this error box?
- </div>
Recognize this error box?
Facebook Tabs
- <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>
Facebook Tab #1Facebook Tab #2Facebook Tab #3Facebook Tab #4Facebook Tab #5
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.
-
- .fbbody
- {
- font-family: "lucida grande" ,tahoma,verdana,arial,sans-serif;
- font-size: 11px;
- color: #333333;
- }
-
- .fbbody a
- {
- color: #3b5998;
- outline-style: none;
- text-decoration: none;
- font-size: 11px;
- font-weight: bold;
- }
- .fbbody a:hover
- {
- text-decoration: underline;
- }
-
- .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;
- }
-
- .fbcontentdivider
- {
- margin-top: 15px;
- margin-bottom: 15px;
- width: 520px;
- height: 1px;
- background-color: #d8dfea;
- }
-
- .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;
- }
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!
<原文地址: >