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
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.
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.
.siteflowsettings 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.
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
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.
- right-click ont the file row and select "Set output path"
- double-click on the output path
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.
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.
- 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 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:
- 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.
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.
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).
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».
SiteFlow can currently handle 3 categories of files :
- Styles: files with extension
- Scripts: files with extension
- Templates: files with extension
Only files with these extensions will be handled by SiteFlow.
<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
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.
Jinja2 allows you embed content from a template into another using different directives (
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.