Skip to content

Instantly share code, notes, and snippets.

@andrewsardone
Last active January 9, 2017 12:28
Show Gist options
  • Save andrewsardone/6095318 to your computer and use it in GitHub Desktop.
Save andrewsardone/6095318 to your computer and use it in GitHub Desktop.

Using Calca for design

Below, the variables and examples were taken verbatim from [Using Soulver for design][sfd].

I'm just posting this as a reference, and example of sharing plain text documents for use within Calca. [sfd]: http://bjango.com/articles/soulver/

Variables and examples

iPhoneW = 320
iPhoneH = 568
iPhoneOldH = 480
iPhonePPI = 326
iPhoneOldPPI = 163
iPadW = 1024
iPadH = 768
iPadPPI = 264
iPadOldPPI = 132
iPadMiniPPI = 163
statusbar = 20
navbar = 44
tabbar = 49
toolbar = 49
cell = 44
gr = 1.6180339888
phi = 1.6180339888
igr = 0.6180339888
iphi = 0.6180339888

For example, it's easy to work out the width of each tab bar button on an iPhone:

iPhoneW / 4 => 80

What if we needed a 10pt margin on each side?

(iPhoneW - 20) / 4 => 75

What about for landscape orientation?

(iPhoneH - 20) / 4 => 137

Splitting the iPhone 5's display into two vertically by the Golden Ratio, but excluding the status bar?

(iPhoneH - statusbar) * igr => 338.6826258624

Let's say you're working on an iPad design, and you'd like to figure out the width of columns in a two column design with margins, a gutter, and you'd also like to see how it translates to portrait and landscape orientation:

margin = 40
gutter = 15
cols = 2
(iPadW - (gutter + margin * 2)) / cols => 464.5
(iPadH - (gutter + margin * 2)) / cols => 336.5

The results fall on non-integer values (464.5 and 336.5), which isn't ideal. What if we tweak the gutter size?

tweakedGutter = 16
cols = 2
(iPadW - (tweakedGutter + margin * 2)) / cols => 464
(iPadH - (tweakedGutter + margin * 2)) / cols => 336
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment