2018-06-21 01:38:13 +00:00
<!DOCTYPE html>
< html >
< head >
< meta charset = "utf-8" >
< title > Agaric< / title >
< meta name = "description" content = "" >
< meta name = "generator" content = "kss-node" >
< meta name = "viewport" content = "width=device-width" >
< link rel = "stylesheet" href = "./kss-assets/kss.css" >
< link rel = "stylesheet" href = "../assets/css/agaric.css" >
< / head >
< body id = "kss-node" >
<!-- kss - sidebar -->
< div class = "kss-sidebar" >
< header class = "kss-sidebar__header" >
< a class = "kss-link" href = "index.html" >
< h1 class = "kss-doc-title" > Agaric< / h1 >
< / a >
< / header >
< nav class = "kss-nav" >
< ul class = "kss-nav__menu" >
< li class = "kss-nav__menu-item" >
< a class = "kss-nav__menu-link" href = "section-componenet.html" >
<!-- <span class="kss - nav__ref">1</span> -->
Componenet< / a >
<!-- Design links stright to item tempplate -->
< / li >
< li class = "kss-nav__menu-item" >
< a class = "kss-nav__menu-link" href = "section-base.html" >
<!-- <span class="kss - nav__ref">2</span> -->
Base< / a >
<!-- Design links stright to item tempplate -->
< / li >
< li class = "kss-nav__menu-item" >
< a class = "kss-nav__menu-link" href = "section-layout.html" >
<!-- <span class="kss - nav__ref">3</span> -->
Layout< / a >
<!-- Design links stright to item tempplate -->
< / li >
< li class = "kss-nav__menu-item" >
< a class = "kss-nav__menu-link" href = "section-component.html" >
<!-- <span class="kss - nav__ref">4</span> -->
Component< / a >
<!-- Design links stright to item tempplate -->
< / li >
< / ul >
< / nav >
< / div >
<!-- kss - main -->
< div class = "kss-main-wrap" >
< article role = "main" class = "kss-main kss-homepage content" >
< h1 id = "style-guide" > Style Guide< / h1 >
< h2 id = "styleguide-contents" > Styleguide Contents< / h2 >
2018-06-21 15:51:54 +00:00
< p > 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. < / p >
2018-06-21 01:38:13 +00:00
< p > The SASS/CSS code is built on the < a href = "https://bulma.io" > Bulma framework< / a > . < / p >
< p > The markup examples are comiled by the < a href = "http://assemble.io" > Assemble static site generator< / a > . < em > (It is not necessary to use this in your application.)< / em > < / p >
< p > Here is a description of the directories:< / p >
< ul >
< li > < strong > assets:< / strong > compiled CSS, fonts, and images for production< / li >
< li > < strong > design-output:< / strong > compiled HTML< / li >
< li > < strong > design-source:< / strong > the templates for the markup samples< / li >
< li > < strong > sass:< / strong > the uncompiled SASS files< / li >
< / ul >
< p > Here are the complete static layouts:< / p >
< ul >
< li > < a href = "../design-output/index.html" > Home< / a > < / li >
< li > < a href = "../design-output/work.html" > Work< / a > < / li >
< li > < a href = "../design-output/case_study.html" > Case Study< / a > < / li >
< li > < a href = "../design-output/initiatives.html" > Initiatives< / a > < / li >
< li > < a href = "../design-output/initiatives_initiative.html" > Initiative< / a > < / li >
< li > < a href = "../design-output/about_team.html" > Team< / a > < / li >
< li > < a href = "../design-output/about_team_member.html" > Person< / a > < / li >
< li > < a href = "../design-output/about_events.html" > Events< / a > < / li >
< li > < a href = "../design-output/about_events_event.html" > Event< / a > < / li >
< li > < a href = "../design-output/insights.html" > Insights< / a > < / li >
< li > < a href = "../design-output/insights_insight.html" > Insight< / a > < / li >
< li > < a href = "../design-output/bulma.html" > Bulma Elements< / a > < / li >
< / ul >
< h2 id = "up-and-running" > Up and running< / h2 >
< ol >
< li > Install Grunt, < code > npm install -g grunt-cli< / code > , and < code > npm install -g grunt< / code > < / li >
< li > Go to the project directory: < code > cd [PATH_TO_PROJECT]< / code > < / li >
< li > Install the node modules: < code > npm install< / code > < / li >
< li > Run the command < code > grunt< / code > . < / li >
< / ol >
< h2 id = "image-processing" > Image Processing< / h2 >
< p > Creating the duotone images can be accomplished using the < a href = "http://www.imagemagick.org" > ImageMagick library< / a > .< / p >
< p > This is a two-step process. The first step is to create a black and white (grayscale) image:< / p >
< p > < code > convert test.jpg -colorspace Gray test_gray.jpg< / code > < / p >
< p > The second step is to apply a color lookup table:< / p >
< p > < code > convert test_gray.jpg duo_cinnamon_clut.png -clut test_duo.jpg< / code > < / p >
< p > The following duotone color lookup table .PNG files can be found in < code > \sass\image-processing\< / code > :< / p >
< ul >
< li > < code > duo_berry_clut.png< / code > < / li >
< li > < code > duo_blue_clut.png< / code > < / li >
< li > < code > duo_briteblue_clut.png< / code > < / li >
< li > < code > duo_cinnamon_clut.png< / code > < / li >
< li > < code > duo_dandelion_clut.png< / code > < / li >
< li > < code > duo_marine_clut.png< / code > < / li >
< / ul >
< / article >
< / div >
< script src = "../assets/js/jquery-3.2.1.min.js" > < / script >
<!-- Automatically built using <a href="https://github.com/kss - node/kss - node">kss - node</a>. -->
< / body >
< / html >
