You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

50 lines
1.7 KiB

4 years ago
////
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[]