Skip to content
hlb edited this page Apr 5, 2012 · 2 revisions

Getting Started

When you start Fire.app/Fire-app.exe, you will see a little dark gray icon sitting in your menubar/system tray. Fire.app does not take any space in your Dock/taskbar.

Reminder: Fire.app is written in Java, so it takes a few seconds to warm up.

OS X - Menubar Windows - System Tray

Create Project

We have put some Compass extensions into Fire.app:

  • Blueprint (builtin in Compass)
  • Compass (builtin in Compass)
  • 960 Grid Sytem
  • HTML5 Boilerplate

If you want to use other extensions, please check Use Compass Extensions section.

Let's create your first project. Please click the icon, choose "Create Project → compass → project", give it a name & save.

Reminder: Compass extensions have two parts: templates and stylesheets. Some extensions have many templates, the others are just stylesheets mixins and have no templates at all. Please check Compass Extensions on the Compass offical site.

Create Project - Choose Create Project - Report

Oh la! Fire.app has created the project, and the icon turns into orange. It means Fire.app is "watching" your project. Now if you change the Sass file, it will compile into CSS file automatically.

Now the project folder looks like this:

Project Folder

awesome-website/
  - sass/
    - screen.scss
    - ...
  - stylesheets/
    - ...
  - .sass-cache/   // The hidden sass cache folder. Do not touch it.
  - config.rb      // Compass setting. Do not remove it.

You can write Sass/ERB/Haml/Markdown/CoffeeScript now.

Sample Project

Fire.app has so many features, so we make a sample project to demonstrate its ability.