-

Style Guide

-

Styleguide Contents

-

This project contains SASS/CSS and markup samples for the Agaric.com website and any associated websites, including data.agaric.com. SASS source code is compiled to CSS. Handlebars templates are compiled to HTML markup examples.

-

The SASS/CSS code is built on the Bulma framework.

-

The markup examples are compiled by the Assemble static site generator. (It is not necessary to use this in your application.)

-

Here is a description of the directories:

+

Style Guide

+

Styleguide Contents

+

This project contains SASS/CSS and markup samples for the Agaric.com website and any associated websites, including data.agaric.com. SASS source code is compiled to CSS. Handlebars templates are compiled to HTML markup examples.

+

The SASS/CSS code is built on the Bulma framework.

+

The markup examples are comiled by the Assemble static site generator. (It is not necessary to use this in your application.)

+

Here is a description of the four directories:

  • assets: compiled CSS, fonts, and images for production
  • design-output: compiled HTML
    • @@ -79,20 +79,20 @@
  • Insight
  • Bulma Elements
-

Up and running

+

Up and running

  1. Install Grunt, npm install -g grunt-cli, and npm install -g grunt
  2. Go to the project directory: cd [PATH_TO_PROJECT]
  3. Install the node modules: npm install
    4. -
  4. Run the command grunt.
    5. +
  5. Run the command grunt.
-

Image Processing

+

Image Processing

Creating the duotone images can be accomplished using the ImageMagick library.

This is a two-step process. The first step is to create a black and white (grayscale) image:

convert test.jpg -colorspace Gray test_gray.jpg

The second step is to apply a color lookup table:

convert test_gray.jpg duo_cinnamon_clut.png -clut test_duo.jpg

-

The following duotone color lookup table .PNG files can be found in \sass\image-processing\:

+

The following duotone color lookup table .PNG files can be found in ..\..\static-layouts\image-processing\:

  • duo_berry_clut.png
  • duo_blue_clut.png
    • @@ -105,7 +105,7 @@