User interface

The SiteFlow UI is divided into 3 sections, represented by tabs at the top of the main window :

  • Files: Shows the current project's files SiteFlow knows how to handle
  • Logs: Shows logs collected after processing current project's files
  • Settings: Shows current project's settings

Managing projects

The first thing you will need to do after installing SiteFlow is to set up your first project.

Adding a project

To add a project, drag/drop a directory to the app's window or click on the «+» button in the toolbar.

Your project will then appear in the project's list, sorted by projects name.

Tip: By default, your project's name is based on its root folder name. You can easily rename it by double clicking its label.

Starting from now, SiteFlow will monitor your project's files, display files it can handle in the file's pane and process those file when they get saved.

Each project's settings are saved in a .siteflow file (which is basically a json file), living in the project's root folder.

Removing a project

To remove a project, just select it and hit the «-» button in the toolbar.

Tip: Deleting a project from SiteFlow does NOT delete any file from your hard disk drive, nor does it remove the .siteflow settings file in the project's root folder. This allows you to recover your project just as you left it if you change your mind later on and decide to add this project again in SiteFlow.

File monitoring

By default, SiteFlow monitors your project for file changes, but it is sometimes useful to temporarily disable this feature (mostly when you switch branches in your favorite Version Control System). To do so, just uncheck the box next to the project. When you're done making big changes, you can check the box again and SiteFlow will resume listening for changes and update to reflect added / removed files.

Files list and inspector

Files list

Each row in the files list has the following attributes :

  • An icon, so that you can see the file type at a glance
  • The file's path (relative to your project's root). If your file can be processed, it will appear in a black color, otherwise in a light gray color.
  • The file's output path appears in green if your file can be processed, and does not appear otherwise.
Tip: The file's output path is automatically set when a file is added to your project based on your project's settings. You can manually change it by either:
  • right-click ont the file row and select "Set output path"
  • double-click on the output path
After manually setting the output path, you will notice that the gray arrow before the output path will become green.

Filtering the files list

There are different ways you can filter your project's files list:

  • by file name, using the search box at the top right corner of the main window
  • by category, using the tab bar below the files list
  • by hiding or showing ignored files, using the checkbox at the bottom right corner of the main window. For more information, read the « Ignored files » section.

File inspector

The file inspector on the right hand side of the file's list show the following information:

  • The processor settings that will be used for this file. The contents of this list depend on your project's settings.
  • The files that the selected file imports. Depending on the file type, this list is either computed or user-populated.
    • For files with a type of CSS, Less, Sass, Stylus or Jinja, the list is computed depending on the import / include / extends statements in the file's content.
    • For files with a type of Javascript or CoffeeScript, the list is user-populated, which means that you decide which script "imports" another, as neither JavaScript or CoffeeScript have import statements.
  • The files by which the selected file is imported.

A button (or CMD+ENTER) lets your manually process the file without having to trigger a file save.

Ignored files

Ignored files appear greyed out in the files list, and cannot be processed either manually or with a file save.

All files matching any of the following conditions will be considered as "ignored" by SiteFlow:

  • In the file inspector, all processor settings are set to "Do not process" (also, for JavaScript or CoffeeScript files, no imports should be declared)
  • The file is imported by one or more files (except for CSS files)
  • The file or one of its parent folders is present in the project's settings "Ignore list" (see Settings tab > General)

Processors and Profiles

SiteFlow ships with various processor tools which purpose are to compile / check / minify your code.

Each processor can be configured individually in the « Settings » tab. For each processor, you can create one or more "Profiles". A profile is set of options that are applied during processing.

For exemple, the SASS processor has an "Output style" option and a "Debug" option. You may create two profiles for this processor:

  • a "Development profile" with "Output style" set to a readable "Nested output" and "Debug" turned ON
  • a "Production profile" with "Output style" set to "Compressed output" and "Debug" turned OFF

You can then assign profiles on a file by file basis in the file inspector.

Default actions

In the "Settings > Defaults" section, you can define which profiles will be applied by default for each file type.

The default output path can also be configured there. A special character "*" is allowed, and will be replaced by the file name (without extension) of the processed file.

Tip: Default actions only apply to newly added files to your project. If you need to reset actions for existing files, use the "Reset" tab in the "Settings > Defaults" section.

Browser reload

This is a SiteFlow Pro feature only.

When tweaking a layout or a script, reloading browser on every file change can be a real hassle. SiteFlow eases the pain by including an auto-reload feature. This option is available in the app's «Preferences» (or CMD+,).

Safari and Chrome are both supported (Firefox is not because it doesn't have a scripting bridge right now).

Tip: SiteFlow reloads files based on file extensions. All file extensions are supported, even ones that aren't directly handled by SiteFlow, the only constraint being that modified files must be located under an active project's root folder.

Stylesheets can be reloaded without a full page refresh by injecting modified styles into your open tabs. You can toggle this behaviour in the app's «Preferences».


File extensions

SiteFlow can currently handle 3 categories of files :

  • Styles: files with extension css, less, sass, scss or styl
  • Scripts: files with extension js or coffee
  • Templates: files with extension jinja

Only files with these extensions will be handled by SiteFlow.

Tip: Templates can be used to generate pretty anything : HTML, XML, JSON,... To make things easier to manage, we recommend you name your templates using the following scheme: <file_name>.<target_extension>.jinja. For example, a template which outputs HTML would be named somename.html.jinja). The default output path for templates being « * », this file would output to somename.html.

Files location

SiteFlow can only read and write files located under your project's root folder. When using relative paths in your output paths or files imports, make sure the real paths do not attempt to access files outside your project, this would just fail.

Templates rectrictions

Jinja2 allows you embed content from a template into another using different directives (extends, import, include). When using these directives, you must make sure that the paths you're referencing are all relative to your project's root, and not relative to the current file.

Contact us !