////
Included in:

- user-manual: Stylesheet Factory: Setting up the factory
////

// tag::setup[]
The stylesheets in the Asciidoctor stylesheet factory are built using {compass-ref}[Compass], a CSS authoring framework that uses {sass-ref}[Sass] to generate CSS files.
The styles and components are generated by {uri-foundation}[Foundation 4], an awesome and flexible CSS component framework that ensures your stylesheet is cross-browser and mobile friendly.
// end::setup[]

==== Install the gems
// tag::gem[]
In order to build the stylesheets, you must download the Asciidoctor stylesheet factory repository and install the Compass and Foundation gems.

. Download or clone the {factory-ref}[Asciidoctor stylesheet factory repository].
+
NOTE: It does not matter where you save the project on your system.
. Make sure you have {get-ruby-ref}[Ruby and RubyGems] installed, and, ideally, {bundler-ref}[Bundler].
. Run Bundler to install the Compass and Foundation gems.

 $ bundle install

+
[TIP]
--
The previous `bundle` command is equivalent to the following two commands:

 $ gem install compass --version 0.12.2
 $ gem install zurb-foundation --version 4.3.2

You don't need to execute these `gem install` commands if you use Bundler.
--

Once you have the gems installed, you can build the stylesheets.
// end::gem[]

==== Build the stylesheets
// tag::build[]
To build the stylesheets:

. Navigate to the Asciidoctor stylesheet factory directory on your system.
. Run Compass's `compile` command.

 $ compass compile

The stylesheets are compiled from the Sass source files in the [.path]_sass/_ folder and written to the [.path]_stylesheets/_ folder.
You can reference the stylesheets in [.path]_stylesheets/_ from your HTML file.
// end::build[]