2018-06-21 01:38:13 +00:00
Style Guide
===========
## Styleguide Contents
2018-08-20 13:42:55 +00:00
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.
2018-06-21 01:38:13 +00:00
2018-08-20 13:42:55 +00:00
The SASS/CSS code is built on the [Bulma framework ](https://bulma.io ).
2018-06-21 01:38:13 +00:00
The markup examples are comiled by the [Assemble static site generator ](http://assemble.io ). _(It is not necessary to use this in your application.)_
2018-08-20 13:42:55 +00:00
Here is a description of the four directories:
2018-06-21 01:38:13 +00:00
- **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 ](../design-output/index.html )
* [Work ](../design-output/work.html )
* [Case Study ](../design-output/case_study.html )
* [Initiatives ](../design-output/initiatives.html )
* [Initiative ](../design-output/initiatives_initiative.html )
* [Team ](../design-output/about_team.html )
* [Person ](../design-output/about_team_member.html )
* [Events ](../design-output/about_events.html )
* [Event ](../design-output/about_events_event.html )
* [Insights ](../design-output/insights.html )
* [Insight ](../design-output/insights_insight.html )
* [Bulma Elements ](../design-output/bulma.html )
## 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`
2018-08-20 13:42:55 +00:00
4. Run the command `grunt` .
2018-06-21 01:38:13 +00:00
## Image Processing
Creating the duotone images can be accomplished using the [ImageMagick library ](http://www.imagemagick.org ).
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`