patternlibrary/styleguide/_source/styleguide.md

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
• design-source: the templates for the markup samples
• sass: the uncompiled SASS files

Here are the complete static layouts:

• Home
• Work
• Case Study
• Initiatives
• Initiative
• Team
• Person
• Events
• Event
• Insights
• Insight
• Bulma Elements

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. Run the command grunt.

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\:

• duo_berry_clut.png
• duo_blue_clut.png
• duo_briteblue_clut.png
• duo_cinnamon_clut.png
• duo_dandelion_clut.png
• duo_marine_clut.png