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?