Workflow

Here are a couple of tips when building in Firecode

Browser tab setup

Open Firecode and create a new block. Then jump back to the edit mode tab and add that block to a page. Then open the page in Preview mode.

Now you have three tabs open:

  • Firecode
  • Preview mode
  • Edit mode


This is great. When changing something in Firecode you'll see the change instantly in Preview mode

Publish

When your website is in development and you click View Website all HTML/CSS code is published and changes are reflected outside of edit/preview mode.

Behind the scenes we have two different files:

Edit/Preview mode

  • style-development.css
  • development.html


Live mode

  • style-production.css
  • production.html


Having different files makes it calmer to work. Nothing is visible for visitors outside of edit mode. Then you click Publish/View website to make the changes live.

Tips: If you make a small CSS change and want to publish it live instantly. Open style.scss in Firecode and click the Publish button in the bottom right corner.