Facebook canvas grid

[Jos? Moreira]

Hello,

i'm fiddling with a spreadsheet to create grids for a facebook application. The envolved widths are:

fb canvas page: 760px

fb page tab: 520px

I've been using the default 24 columns although have tried other combinations without success fitting the columns width to the content width:

number of columns * column width + number of columns * column spacing

Any tips?

Best

[Sunny Beach]

One thing to keep in mind with your formula--there will always be one less "gutter" between columns than there are columns.

The standard BP grid has 24 30px columns and 23 10px gutters.

I only did some quick math but would recommend the following layouts. They don't quite fill the entire FB area but are pretty close and maintain the 30/10 setup from BP.

710 px:
19 columns at 30px each
18 gutters at 10px each

510 px:
13 columns at 30px each
12 gutters at 10px each

If you want the exact FB widths and 24 cols:

720px:
24 columns at 30px
23 gutters at 0px <--not sure this would work and it would be difficult to use.

520px:
24 columns at 14px
23 gutters at 8px


Sunny

--
You received this message because you are subscribed to the Google Groups "Blueprint CSS" group.
To post to this group, send email to bluepr...@googlegroups.com.
To unsubscribe from this group, send email to blueprintcss...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/blueprintcss?hl=en.

[Lorin Tackett]

If you don't mind rebuilding the grid, you could use these grids.

Consider these grids for 710px containers

cols: 16
col width: 35px
gutter: 10px
total width: 710px

cols: 12
col width: 50px
gutter: 10px
total width: 710px

cols: 6
col width: 100px
gutter: 22px
total width: 710px

Consider these grids for 520px containers

cols: 16
col width: 25px
gutter: 8px
total width: 520px

cols: 12
col width: 36px
gutter: 8px
total width: 520px

cols: 6
col width: 75px
gutter: 14px
total width: 520px

There is a ruby script shipped with Blueprint to help you generate a custom grid by plugging in these numbers. hope that helps!

-Lorin

[Jos? Moreira]

youre totally right. much appreciated, gonna try it out

[Sunny Beach]

Looking at my earlier message, I was using 720 as the width, not 760 as you mentioned.

Sunny

On Sat, Jan 1, 2011 at 10:56 PM, Jos? Moreira <matrix...@gmail.com> wrote:

youre totally right. much appreciated, gonna try it out

--

[Lorin Tackett]

Ha, I just noticed I did the same thing with my reply and used 710px. Dammit.

[kaiser]

Just wanted to point you at this: http://520grid.com/

Maybe you have an easier job with a reference. Hope you paste your
finished work somewhere. Would be kool if there was some blueprint
facebook "fork"!

[Jos? Moreira]

thanks for the feedback it was great. I havent started on the facebook interface yet, i have just a signup page on http://awardi.es, which also uses blueprint but ill update the mailing list when i have worked it out

[Jos? Moreira]

notes on some posts i missed on this thread:

a) the spreadsheet was for testing values for feeding compress.rb

b) there's no need to fork blueprint i guess

ps.: url was http://www.awardi.es

[Julian Parker]

Hi All,

I'm having more problems understanding inline forms and just can't see
what is wrong so I'm wondering if the groups collective eyes can spot it.

This code does not line up the image with the label and the select box.

<form action="" method="post" class="inline">
<div class="span-22 prepend-1 append-1">
<h3>Select Customer</h3>
<div class="column prepend-1 span-4">
<label for="customer_name">Customer Name</label>
</div>
<!-- does not line up!!! -->
<div class="column span-1">
<img src="/images/icons/help.png"
onMouseOut="UnTip();" onMouseOver="Tip('Select the Customer Name from
the list of available images on the Central Image Server.', TITLE,
'CUSTOMER NAME', WIDTH, 200)" />
</div>
<div class="column span-16 last">
<select name="customer_name" id="customer_name"
style="min-width:300px; max-width:300px; width:300px;"
onchange='showdbimages(this.value)'>
<option selected="selected">--Select--</option>
<option value="1">Customer_1</option>
<option value="2">Customer_2</option>
</select>
</div>
<hr class="space" /><hr /><hr class="space" />
<div class="span-22 prepend-1 append-1">
<h3>Select Ghost Image(s)</h3>
<div class="span-20 prepend-1 append-1 last">
<div id="dbimagelist">
<div class="span-19 prepend-1 info">
Select the Customer Name from the list then
select the images you need to download from the Central Server for
deployment locally
</div>
</div>
</div>
</div>
</form>

This however is fine! All the labels, icons and select/text boxes line
up perfectly!

<form action="#" method="get" class="inline">
<div class="column span-4">
<label for="customer_name">Customer Name</label>
</div>
<div class="column span-1">
<img src="/images/icons/help.png"
onMouseOut="UnTip();" onMouseOver="Tip('Select the Customer Name from
the list. If the Customer Name option does not exist then you must raise
a ticket with Central Services', TITLE, 'CUSTOMER NAME', WIDTH, 200)" />
</div>
<div class="column span-7 last">
<select name="customer_name" id="customer_name"
style="min-width:300px; max-width:300px; width:300px;" >
<option selected="selected">--Select--</option>
</select>
</div>

<div class="column span-4">
<label for="Site">Location</label>
</div>
<div class="column span-1">
<img src="/images/icons/help.png"
onMouseOut="UnTip();" onMouseOver="Tip('Select the Location that the
customer will be testing at', TITLE, 'SUNGARD LOCATION', WIDTH, 200)" />
</div>
<div class="column span-7 last">
<select name="location" id="location"
style="min-width: 200px; max-width: 300px; width : 300px;" >
<option selected="selected">--Select--</option>
</select>
</div>

<div class="column span-4">
<label for="hw_type">Hardware Platform</label>
</div>
<div class="column span-1">
<img src="/images/icons/help.png"
onMouseOut="UnTip();" onMouseOver="Tip('Select the Hardware Platform
that the image is based on', TITLE, 'HARDWARE PLATFORM', WIDTH, 200)" />
</div>
<div class="column span-7 last">
<select name="hw_type" style="min-width: 300px;
max-width: 300px; width : 300px;" size="1" id="hw_type">
<option selected="selected">--Select--</option>
</select>
</div>

<div class="column span-4">
<label for="os_type">Operating System</label>
</div>
<div class="colun span-1">
<img src="/images/icons/help.png"
onMouseOut="UnTip();" onMouseOver="Tip('Select the Operating System used
by the Customer from the list. If the Operating System option does not
exist then you must raise a ticket with Central Services', TITLE,
'OPERATING SYSTEM', WIDTH, 200)" />
</div>
<div class="column span-7 last">
<select name="os_type" style="min-width: 300px;
max-width: 300px; width : 300px;" size="1" id="os_type">
<option selected="selected">--Select--</option>
</select>
</div>

<div class="column span-4">
<label for="customer_ref">Customer Reference</label>
</div>
<div class="column span-1">
<img src="/images/icons/help.png"
onMouseOut="UnTip();" onMouseOver="Tip('Enter the Customer Reference to
be used to identify the image. Please note that all spaces will be
converted to underscore and that all special characters will be
removed', TITLE, 'CUSTOMER REFERENCE', WIDTH, 200)" />
</div>
<div class="column span-7 last">
<input type="text" name="customer_ref"
id="customer_ref" style="min-width: 300px; max-width: 300px; width :
300px;" />
</div>
<div class="column span-4 prepend-5 last">
<a href="create.php" class="button positive"><img
src="/images/database_go.png" alt=""/>Create Image</a>
</div>
<hr class="space" />
</form>

I have changed the zoom in the browser window so as not to scew the
results, it's got to be something stupid but I really cant see what it
could be at the moment...

Any assistance appreciated.

Cheers

Jools

[kaiser]

Hi Jools, please don't hijack threads. I re-posted your question over
here[1]. I dropped your code into a pastebin for better readability.
You can add or change anything over there (you get a new link
afterwards). If you add doctype, html, head, body, etc. to your
example, you would people allow to instantly test your code just by
opening a blank site in firefox and paste it in with firebug. Help the
helpers. :)

[1] http://groups.google.com/group/blueprintcss/browse_thread/thread/8dc079efa7e61901

[kaiser]

Changed Subject to original title.