SaaSculator part 3 – implementation of the first design

journal saasculator

Table of Contents

This is part of a series about building my side project SaaSculator. Each part covers my experiences and learnings while developing. The topics include the development, design, marketing & running of this project. You can find all parts here.

Creating the project

Finally getting to development! Last time I created the first design of SaaSculator. Now it’s time to bring it into the real world and convert the design into code. As I mentioned in the first post, I have decided to use Gridsome for this project. The first steps therefore are to get a Gridsome site running. As it turns out that’s done in three simple steps of cli code:

  • install gridsome

yarn global add @gridsome/cli
npm install --global @gridsome/cli

  • create the project

gridsome create my-gridsome-site

  • start local dev server

gridsome develop

This gets you started with the basic Gridsome template consisting of an index & about page and impressive speed out of the box. The only changes I made before starting to convert the design into HTML & CSS was to edit some of the default config values in gridsome.config.js

Adding Tailwind

Besides not being a great designer, I never actually enjoyed using CSS. That is until I encountered Tailwind CSS. I used it, yeah, but I never liked using it. I definitely take the blame for that, because I never really got into structuring my CSS thoughtfully or using preprocessors correctly. But using Tailwind (although uncommon for the first few hours) felt like taking all the painful parts from CSS away and making it fun again. What took me ages before, now simply worked by adding a few classes of predefined CSS. Wow!

Also, having sensible defaults for colors, spacing etc. does wonders to the designs of people like me. So, the next step was integrating Tailwind into my project. There is even a Gridsome plugin for that. Talking about sensible defaults! You install it with yarn add gridsome-plugin-tailwindcss, add some options to your gridsome.config.js, include the tailwind directives in your main css file and you are good to go. You don’t even need to specify a Tailwind config file as I did.

module.exports = {
  siteName: SaaSculator.com',
  siteUrl: 'https://www.saasculator.com',
  transformers: {},
  plugins: [    {
      use: 'gridsome-plugin-tailwindcss',
      options: {
        config: './tailwind.config.js',      }
    },
  ]
}

Design to HTML

From there it was just recreating the initial design from Figma in my Index.vue file. This whole process took quite some time, but is not exciting to tell, so I’ll leave it at that. There were some minor differences between the original design and the code version, but that’s normal. I was happy how it turned out, but it was still just a lifeless piece of html pretending to be a calculator. Therefore, the next step was to breath some life into it.