113 lines
5.3 KiB
HTML
113 lines
5.3 KiB
HTML
<!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="../agaric/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>Style Guide</h1>
|
|
<h2>Styleguide Contents</h2>
|
|
<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>
|
|
<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 four 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="../static-layouts/design-output/index.html">Home</a></li>
|
|
<li><a href="../static-layouts/design-output/work.html">Work</a></li>
|
|
<li><a href="../static-layouts/design-output/case_study.html">Case Study</a></li>
|
|
<li><a href="../static-layouts/design-output/initiatives.html">Initiatives</a></li>
|
|
<li><a href="../static-layouts/design-output/initiatives_initiative.html">Initiative</a></li>
|
|
<li><a href="../static-layouts/design-output/about_team.html">Team</a></li>
|
|
<li><a href="../static-layouts/design-output/about_team_member.html">Person</a></li>
|
|
<li><a href="../static-layouts/design-output/about_events.html">Events</a></li>
|
|
<li><a href="../static-layouts/design-output/about_events_event.html">Event</a></li>
|
|
<li><a href="../static-layouts/design-output/insights.html">Insights</a></li>
|
|
<li><a href="../static-layouts/design-output/insights_insight.html">Insight</a></li>
|
|
<li><a href="../static-layouts/design-output/bulma.html">Bulma Elements</a></li>
|
|
</ul>
|
|
<p>At the bottom of each static layout there are links to one another and back to this styleguide.</p>
|
|
<h2>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>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>..\..\static-layouts\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="../agaric/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>
|