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

18
styleguide/index.html
View file

@ -7,7 +7,7 @@
<meta name="generator" content="kss-node"> <meta name="generator" content="kss-node">
<meta name="viewport" content="width=device-width"> <meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="./kss-assets/kss.css"> <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> </head>
<body id="kss-node" > <body id="kss-node" >
@ -52,12 +52,12 @@
<!-- kss-main --> <!-- kss-main -->
<div class="kss-main-wrap"> <div class="kss-main-wrap">
<article role="main" class="kss-main kss-homepage content"> <article role="main" class="kss-main kss-homepage content">
<h1 id="style-guide">Style Guide</h1> <h1>Style Guide</h1>
<h2 id="styleguide-contents">Styleguide Contents</h2> <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>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 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>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> <p>Here is a description of the four directories:</p>
<ul> <ul>
<li><strong>assets:</strong> compiled CSS, fonts, and images for production</li> <li><strong>assets:</strong> compiled CSS, fonts, and images for production</li>
<li><strong>design-output:</strong> compiled HTML</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/insights_insight.html">Insight</a></li>
<li><a href="../design-output/bulma.html">Bulma Elements</a></li> <li><a href="../design-output/bulma.html">Bulma Elements</a></li>
</ul> </ul>
<h2 id="up-and-running">Up and running</h2> <h2>Up and running</h2>
<ol> <ol>
<li>Install Grunt, <code>npm install -g grunt-cli</code>, and <code>npm install -g grunt</code></li> <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>Go to the project directory: <code>cd [PATH_TO_PROJECT]</code></li>
<li>Install the node modules: <code>npm install</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> </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>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>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><code>convert test.jpg -colorspace Gray test_gray.jpg</code></p>
<p>The second step is to apply a color lookup table:</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><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> <ul>
<li><code>duo_berry_clut.png</code></li> <li><code>duo_berry_clut.png</code></li>
<li><code>duo_blue_clut.png</code></li> <li><code>duo_blue_clut.png</code></li>
@ -105,7 +105,7 @@
</article> </article>
</div> </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>. --> <!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
</body> </body>

18
styleguide/section-base.html
View file

@ -7,7 +7,7 @@
<meta name="generator" content="kss-node"> <meta name="generator" content="kss-node">
<meta name="viewport" content="width=device-width"> <meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="./kss-assets/kss.css"> <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> </head>
<body id="kss-node" > <body id="kss-node" >
@ -972,7 +972,7 @@
<div class="kss-source kss-style"> <div class="kss-source kss-style">
<b>Source</b><br> <b>Source</b><br>
<code>agaric/_variables.scss</code>, line <code>agaric/_variables.scss</code>, line
171 173
</div> </div>
<!-- Markup --> <!-- Markup -->
</div><!-- kss-pattern-code --> </div><!-- kss-pattern-code -->
@ -1008,7 +1008,7 @@
<div class="kss-source kss-style"> <div class="kss-source kss-style">
<b>Source</b><br> <b>Source</b><br>
<code>agaric/_variables.scss</code>, line <code>agaric/_variables.scss</code>, line
181 183
</div> </div>
<!-- Markup --> <!-- Markup -->
</div><!-- kss-pattern-code --> </div><!-- kss-pattern-code -->
@ -1044,7 +1044,7 @@
<div class="kss-source kss-style"> <div class="kss-source kss-style">
<b>Source</b><br> <b>Source</b><br>
<code>agaric/_variables.scss</code>, line <code>agaric/_variables.scss</code>, line
157 159
</div> </div>
<!-- Markup --> <!-- Markup -->
</div><!-- kss-pattern-code --> </div><!-- kss-pattern-code -->
@ -1080,7 +1080,7 @@
<div class="kss-source kss-style"> <div class="kss-source kss-style">
<b>Source</b><br> <b>Source</b><br>
<code>agaric/_variables.scss</code>, line <code>agaric/_variables.scss</code>, line
10 12
</div> </div>
<!-- Markup --> <!-- Markup -->
</div><!-- kss-pattern-code --> </div><!-- kss-pattern-code -->
@ -1116,7 +1116,7 @@
<div class="kss-source kss-style"> <div class="kss-source kss-style">
<b>Source</b><br> <b>Source</b><br>
<code>agaric/_variables.scss</code>, line <code>agaric/_variables.scss</code>, line
86 88
</div> </div>
<!-- Markup --> <!-- Markup -->
</div><!-- kss-pattern-code --> </div><!-- kss-pattern-code -->
@ -1152,7 +1152,7 @@
<div class="kss-source kss-style"> <div class="kss-source kss-style">
<b>Source</b><br> <b>Source</b><br>
<code>agaric/_variables.scss</code>, line <code>agaric/_variables.scss</code>, line
148 150
</div> </div>
<!-- Markup --> <!-- Markup -->
</div><!-- kss-pattern-code --> </div><!-- kss-pattern-code -->
@ -1188,7 +1188,7 @@
<div class="kss-source kss-style"> <div class="kss-source kss-style">
<b>Source</b><br> <b>Source</b><br>
<code>agaric/_variables.scss</code>, line <code>agaric/_variables.scss</code>, line
123 125
</div> </div>
<!-- Markup --> <!-- Markup -->
</div><!-- kss-pattern-code --> </div><!-- kss-pattern-code -->
@ -1235,7 +1235,7 @@
</article> </article>
</div> </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>. --> <!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
<script> <script>

4
styleguide/section-componenet.html
View file

@ -7,7 +7,7 @@
<meta name="generator" content="kss-node"> <meta name="generator" content="kss-node">
<meta name="viewport" content="width=device-width"> <meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="./kss-assets/kss.css"> <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> </head>
<body id="kss-node" > <body id="kss-node" >
@ -162,7 +162,7 @@
</article> </article>
</div> </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>. --> <!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
<script> <script>

4
styleguide/section-component.html
View file

@ -7,7 +7,7 @@
<meta name="generator" content="kss-node"> <meta name="generator" content="kss-node">
<meta name="viewport" content="width=device-width"> <meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="./kss-assets/kss.css"> <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> </head>
<body id="kss-node" > <body id="kss-node" >
@ -765,7 +765,7 @@ to the right.</p>
</article> </article>
</div> </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>. --> <!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
<script> <script>

4
styleguide/section-layout.html
View file

@ -7,7 +7,7 @@
<meta name="generator" content="kss-node"> <meta name="generator" content="kss-node">
<meta name="viewport" content="width=device-width"> <meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="./kss-assets/kss.css"> <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> </head>
<body id="kss-node" > <body id="kss-node" >
@ -240,7 +240,7 @@
</article> </article>
</div> </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>. --> <!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
<script> <script>