agaric/patternlibrary
10
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Commit generated styleguide

Browse source
This commit is contained in:
benjamin melançon 2018-08-20 18:27:23 -04:00
parent ff8990a8c8
commit a63630c808
5 changed files with 27 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
styleguide/index.html
View file

@ -7,7 +7,7 @@
<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">
<link rel="stylesheet" href="../agaric/css/agaric.css">
</head>
<body id="kss-node" >
@ -52,12 +52,12 @@
<!-- 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>
<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 compiled 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>
<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>
@ -79,20 +79,20 @@
<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>
<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>
<li>Run the command <code>grunt</code>.</li>
</ol>
<h2 id="image-processing">Image Processing</h2>
<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>\sass\image-processing\</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>
@ -105,7 +105,7 @@
</article>
</div>
<script src="../assets/js/jquery-3.2.1.min.js"></script>
<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>

18
styleguide/section-base.html
View file

@ -7,7 +7,7 @@
<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">
<link rel="stylesheet" href="../agaric/css/agaric.css">
</head>
<body id="kss-node" >
@ -972,7 +972,7 @@
<div class="kss-source kss-style">
<b>Source</b><br>
<code>agaric/_variables.scss</code>, line
171
173
</div>
<!-- Markup -->
</div><!-- kss-pattern-code -->
@ -1008,7 +1008,7 @@
<div class="kss-source kss-style">
<b>Source</b><br>
<code>agaric/_variables.scss</code>, line
181
183
</div>
<!-- Markup -->
</div><!-- kss-pattern-code -->
@ -1044,7 +1044,7 @@
<div class="kss-source kss-style">
<b>Source</b><br>
<code>agaric/_variables.scss</code>, line
157
159
</div>
<!-- Markup -->
</div><!-- kss-pattern-code -->
@ -1080,7 +1080,7 @@
<div class="kss-source kss-style">
<b>Source</b><br>
<code>agaric/_variables.scss</code>, line
10
12
</div>
<!-- Markup -->
</div><!-- kss-pattern-code -->
@ -1116,7 +1116,7 @@
<div class="kss-source kss-style">
<b>Source</b><br>
<code>agaric/_variables.scss</code>, line
86
88
</div>
<!-- Markup -->
</div><!-- kss-pattern-code -->
@ -1152,7 +1152,7 @@
<div class="kss-source kss-style">
<b>Source</b><br>
<code>agaric/_variables.scss</code>, line
148
150
</div>
<!-- Markup -->
</div><!-- kss-pattern-code -->
@ -1188,7 +1188,7 @@
<div class="kss-source kss-style">
<b>Source</b><br>
<code>agaric/_variables.scss</code>, line
123
125
</div>
<!-- Markup -->
</div><!-- kss-pattern-code -->
@ -1235,7 +1235,7 @@
</article>
</div>
<script src="../assets/js/jquery-3.2.1.min.js"></script>
<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>. -->
<script>

4
styleguide/section-componenet.html
View file

@ -7,7 +7,7 @@
<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">
<link rel="stylesheet" href="../agaric/css/agaric.css">
</head>
<body id="kss-node" >
@ -162,7 +162,7 @@
</article>
</div>
<script src="../assets/js/jquery-3.2.1.min.js"></script>
<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>. -->
<script>

4
styleguide/section-component.html
View file

@ -7,7 +7,7 @@
<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">
<link rel="stylesheet" href="../agaric/css/agaric.css">
</head>
<body id="kss-node" >
@ -765,7 +765,7 @@ to the right.</p>
</article>
</div>
<script src="../assets/js/jquery-3.2.1.min.js"></script>
<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>. -->
<script>

4
styleguide/section-layout.html
View file

@ -7,7 +7,7 @@
<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">
<link rel="stylesheet" href="../agaric/css/agaric.css">
</head>
<body id="kss-node" >
@ -240,7 +240,7 @@
</article>
</div>
<script src="../assets/js/jquery-3.2.1.min.js"></script>
<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>. -->
<script>