Calculated Web Development with Soulver

Soulver is a Mac application (they also have an iPad version) that has made my front-end development workflow much easier. CSS development requires a lot of simple calculations for element properties like widths, padding and margins.

When I needed a tool to double-check my work or just do computations for me, I was using either the built-in Calculator or Excel. The built-in Calculator app is simple but it doesn’t save any history of past calculations. Excel takes forever to open and was just too much application for what I really needed.

Soulver is the perfect solution, it is lightweight, fast and allows me to save my work. I keep the application running with a scratch document for any quick width or margin/padding calculations. I also have a few files saved that I reuse over and over again.

Using only words to explain how I use Soulver is difficult. I thought it would be best to show off two of my favorite calculators.

Calculating Fluid Grid Widths

I have a file that I constantly re-use when determining CSS element widths. I believe the calculation is based on the Semantic Grid System.

Calculating Typography Rhythm

I have a LESS mixin I use to set a baseline grid, but I also keep the calculation in a Soulver document to verify the expected output.

You can click on the images above to download the files.

If you are using Soulver, how are you using it?

2 thoughts on “Calculated Web Development with Soulver”

  1. Hi Rachel
    I saw this post on the way you use soulver and liked the idea a lot but to be honest didn’t really take it in until a few weeks later when I needed to do some grid calculations.
    I’d forgotten that you can save your worksheet in soulver – normally I just use it as a scratch pad and clear the sheet every now and again to regain clarity.
    So thanks for sharing your soulver files – something that makes it such a useful tool. People could argue that a spreadsheet does the same job and then some – but it’s one of those apps that’s power is not to be underestimated plus, importantly, it’s nice to use!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>