If you're going to build SFUMATO locally and you're not familiar with or setup to build SCSS, continue reading. The information below will get you set up.

Style guide...

The repository contains a style guide page that shows you how SFUMATO can be used. It's standard HTML so you can open it in a browser without a web server.

Install node-sass to compile SCSS

If you're compiling SCSS locally, you'll need software to do it. We recommend node-sass. It's the fastest SCSS compiler out there, and works on Microsoft Windows, Apple macOS, and Linux. It not only builds the CSS, it also watches for changes as you work and compiles on-the-fly.

Here are the steps to get the project up and running:

Install node.js. Visit https://nodejs.org to get node.js. SFUMATO has been built with node.js version 6.11.1, but newer versions should work as well.

Download and extract SFUMATO. Then open a terminal/command prompt and change directory to the SFUMATO root.

cd sfumato

Install node.js dependencies. Just run package manager to create the node_modules folder.

npminstall

If you're switching platforms, like from macOS to Windows it's best to delete the node_modules folder in the root, and run `npm install` so it can build native resources.

Customize

Once you get the standard SFUMATO package to build, you can clone the SFUMATO project folder and rename it for use with your own project. You may also need to:

...run `npm install` in the new project folder, to make sure you have the node.js dependencies. If you have issues, especially when switching from one OS to another, delete the node_modules folder before running an npm install.

Configuration

You can edit the _config.scss file to set various defaults, like font sizes, screen breakpoints, etc. The file is fairly well documented so it should be easy enough to follow.

Folder structure

Below is a brief explanation of the folder structure for a SFUMATO project.

Build scripts

If you use a tool like Carbide, which has features for dynamic SCSS compilation, you can modify your website to compile server-side. We do that on this site :) But if you want to work locally and upload compiled CSS, use the build scripts.

Included in the root of the project are both macOS bash scripts, Windows batch files, and Windows PowerShell scripts. They delete all files in the /stylesheets folder and then call node-sass to watch for changes and build the CSS on-demand.

macOS

Watch for changes and build in development mode. This creates a larger, documented CSS file and associated map so you can debug your Sass code in the browser.

cd sfumato
sh watch.sh

Watch for changes and build in release mode. This creates a small, compressed CSS file and deletes the associated map so you can deploy to production.

cd sfumato
sh watch-release.sh

Windows cmd.exe

Watch for changes and build in development mode. This creates a larger, documented CSS file and associated map so you can debug your Sass code in the browser.

cd sfumato
watch.bat

Watch for changes and build in release mode. This creates a small, compressed CSS file and deletes the associated map so you can deploy to production.

cd sfumato
watch-release.bat

Windows PowerShell

Watch for changes and build in development mode. This creates a larger, documented CSS file and associated map so you can debug your Sass code in the browser.

cd sfumato
./watch.ps1

Watch for changes and build in release mode. This creates a small, compressed CSS file and deletes the associated map so you can deploy to production.

cd sfumato
./watch-release.ps1

Host the sample site

If you want to run the sample website that comes with the project, you'll need a web server that can handle .shtml files and which supports server-side includes.

macOS Server

Apple offers a server product that can be installed on any Mac. Once installed, point the site at your SFUMATO project folder and turn on "Server Side Includes" in Advanced Settings.

Windows IIS

In Windows IIS, follow the instructions on Microsoft's site, then set up a site, set the default document to index.shtml and point the site at the SFUMATO project folder.