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
- Install Grunt,
npm install -g grunt-cli, andnpm install -g grunt - Go to the project directory:
cd [PATH_TO_PROJECT] - Install the node modules:
npm install
- - Run the command
grunt.
+ - 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.pngduo_blue_clut.png
@@ -105,7 +105,7 @@