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.
49 lines
1.7 KiB
49 lines
1.7 KiB
////
|
|
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[]
|
|
|