Skip to content
This repository has been archived by the owner on Jun 26, 2022. It is now read-only.

Commit

Permalink
Merge pull request #95 from alienlebarge/feature/clean-styleguide-fol…
Browse files Browse the repository at this point in the history 
…der-before-build

Feature/clean styleguide folder before build #88
  • Loading branch information
@alienlebarge
alienlebarge committed Dec 11, 2014
2 parents 997acfc + 84451fe commit 79f3650
Show file tree
Hide file tree
Showing 13 changed files with 312 additions and 718 deletions.
15 changes: 13 additions & 2 deletions Gruntfile.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,6 +86,15 @@ module.exports = function (grunt) {



clean: {
styleguide: ['styleguide']
},






hologram: {
generate: {
options: {
Expand Down Expand Up @@ -114,7 +123,7 @@ module.exports = function (grunt) {
watch: {
css: {
files: 'stylesheets/**/*.scss',
tasks: ['sass','usebanner','concat', 'copy', 'hologram']
tasks: ['sass', 'usebanner', 'concat', 'clean', 'hologram']
}
}

Expand All @@ -132,9 +141,11 @@ module.exports = function (grunt) {
grunt.loadNpmTasks('grunt-hologram');
grunt.loadNpmTasks('grunt-exec');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-clean');

// Default task(s).
grunt.registerTask('default', ['sass', 'usebanner', 'concat', 'exec:serve']);
grunt.registerTask('build', ['sass', 'usebanner', 'concat']);
grunt.registerTask('build', ['sass', 'usebanner', 'concat', 'clean', 'hologram']);


};
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
"devDependencies": {
"grunt": "~0.4.2",
"grunt-banner": "^0.2.3",
"grunt-contrib-clean": "^0.6.0",
"grunt-contrib-concat": "~0.5.0",
"grunt-contrib-copy": "^0.7.0",
"grunt-contrib-sass": "~0.7.3",
Expand Down
182 changes: 166 additions & 16 deletions styleguide/base.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,25 +14,15 @@
<nav>
<ul class="list-inline">

<li><a href="componment.html">Componment</a></li>
<li><a href="componment.html">componment</a></li>

<li><a href="button.html">Button</a></li>
<li><a href="objects.html">objects</a></li>

<li><a href="code.html">Code</a></li>

<li><a href="settings.html">Settings</a></li>

<li><a href="typography.html">Typography</a></li>

<li><a href="helpers.html">Helpers</a></li>

<li><a href="image.html">Image</a></li>

<li><a href="link.html">Link</a></li>
<li><a href="base.html">base</a></li>

<li><a href="list.html">List</a></li>
<li><a href="settings.html">settings</a></li>

<li><a href="base.html">base</a></li>
<li><a href="tools.html">tools</a></li>

</ul>
</nav>
Expand All @@ -41,17 +31,177 @@ <h1><a href="index.html">blog.alienlebarge.ch's styleguide</a></h1>
<section class="content">
<ul>

<li><a href="#code">Code</a></li>

<li><a href="#inline-code">Inline code</a></li>

<li><a href="#pre">Codeblock</a></li>

<li><a href="#headers">Headers</a></li>

<li><a href="#image">Image</a></li>

<li><a href="#figcaption">Figcaption</a></li>

<li><a href="#figure">Figure</a></li>

<li><a href="#link">Link</a></li>

<li><a href="#default-link">Default link</a></li>

<li><a href="#no-underlined-link">No underlined link</a></li>

<li><a href="#list">Lists</a></li>

<li><a href="#page">Page</a></li>

<li><a href="#html">html</a></li>

<li><a href="#paragraph">Paragraph</a></li>

<li><a href="#lede">Lede</a></li>

<li><a href="#small">Small</a></li>

<li><a href="#strong">Strong</a></li>

<li><a href="#quote">Quote</a></li>

<li><a href="#blockquote">Blockquote</a></li>

</ul>
<h1 id="code">Code</h1>

<h2 id="inline-code">Inline code</h2>
<div class="codeExample"><div class="exampleOutput"><code>Hello</code>
</div><div class="codeBlock"><div class="highlight"><pre><span class="nt">&lt;code&gt;</span>Hello<span class="nt">&lt;/code&gt;</span>
</pre></div></div></div><div class="codeExample"><div class="exampleOutput"><kbp>Hello</kbp>
</div><div class="codeBlock"><div class="highlight"><pre><span class="nt">&lt;kbp&gt;</span>Hello<span class="nt">&lt;/kbp&gt;</span>
</pre></div></div></div><div class="codeExample"><div class="exampleOutput"><samp>Hello</samp>
</div><div class="codeBlock"><div class="highlight"><pre><span class="nt">&lt;samp&gt;</span>Hello<span class="nt">&lt;/samp&gt;</span>
</pre></div></div></div>
<h2 id="pre">Codeblock</h2>

<p>Use an explicit font stack to ensure browsers render correct <code>line-height</code>.</p>
<div class="codeExample"><div class="exampleOutput"><pre>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</pre>
</div><div class="codeBlock"><div class="highlight"><pre><span class="nt">&lt;pre&gt;</span>Lorem ipsum dolor sit amet, consectetur adipisicing elit.<span class="nt">&lt;/pre&gt;</span>
</pre></div></div></div>
<h1 id="headers">Headers</h1>
<div class="codeExample"><div class="exampleOutput"> <h1>Heading 1</h1>
<p class="alpha">Paragraph with h1 style</p>
</div><div class="codeBlock"><div class="highlight"><pre> <span class="nt">&lt;h1&gt;</span>Heading 1<span class="nt">&lt;/h1&gt;</span>
<span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"alpha"</span><span class="nt">&gt;</span>Paragraph with h1 style<span class="nt">&lt;/p&gt;</span>
</pre></div></div></div><div class="codeExample"><div class="exampleOutput"> <h2>Heading 2</h2>
<p class="beta">Paragraph with h2 style</p>
</div><div class="codeBlock"><div class="highlight"><pre> <span class="nt">&lt;h2&gt;</span>Heading 2<span class="nt">&lt;/h2&gt;</span>
<span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"beta"</span><span class="nt">&gt;</span>Paragraph with h2 style<span class="nt">&lt;/p&gt;</span>
</pre></div></div></div><div class="codeExample"><div class="exampleOutput"> <h3>Heading 3</h3>
<p class="gamma">Paragraph with h3 style</p>
</div><div class="codeBlock"><div class="highlight"><pre> <span class="nt">&lt;h3&gt;</span>Heading 3<span class="nt">&lt;/h3&gt;</span>
<span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"gamma"</span><span class="nt">&gt;</span>Paragraph with h3 style<span class="nt">&lt;/p&gt;</span>
</pre></div></div></div><div class="codeExample"><div class="exampleOutput"> <h4>Heading 4</h4>
<p class="delta">Paragraph with h4 style</p>
</div><div class="codeBlock"><div class="highlight"><pre> <span class="nt">&lt;h4&gt;</span>Heading 4<span class="nt">&lt;/h4&gt;</span>
<span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"delta"</span><span class="nt">&gt;</span>Paragraph with h4 style<span class="nt">&lt;/p&gt;</span>
</pre></div></div></div><div class="codeExample"><div class="exampleOutput"> <h5>Heading 5</h5>
<p class="epsilon">Paragraph with h5 style</p>
</div><div class="codeBlock"><div class="highlight"><pre> <span class="nt">&lt;h5&gt;</span>Heading 5<span class="nt">&lt;/h5&gt;</span>
<span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"epsilon"</span><span class="nt">&gt;</span>Paragraph with h5 style<span class="nt">&lt;/p&gt;</span>
</pre></div></div></div><div class="codeExample"><div class="exampleOutput"> <h6>Heading 6</h6>
<p class="zeta">Paragraph with h6 style</p>

</div><div class="codeBlock"><div class="highlight"><pre> <span class="nt">&lt;h6&gt;</span>Heading 6<span class="nt">&lt;/h6&gt;</span>
<span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"zeta"</span><span class="nt">&gt;</span>Paragraph with h6 style<span class="nt">&lt;/p&gt;</span>

</pre></div></div></div>
<h1 id="image">Image</h1>

<h2 id="figcaption">Figcaption</h2>
<div class="codeExample"><div class="exampleOutput"> <figure>
<img src="http://placekitten.com/g/200/300" alt="image">
<figcaption>A cute kitty</figcaption>
</figure>
</div><div class="codeBlock"><div class="highlight"><pre> <span class="nt">&lt;figure&gt;</span>
<span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"http://placekitten.com/g/200/300"</span> <span class="na">alt=</span><span class="s">"image"</span><span class="nt">&gt;</span>
<span class="nt">&lt;figcaption&gt;</span>A cute kitty<span class="nt">&lt;/figcaption&gt;</span>
<span class="nt">&lt;/figure&gt;</span>
</pre></div></div></div>
<h2 id="figure">Figure</h2>
<div class="codeExample"><div class="exampleOutput"> <figure>
<img src="http://placekitten.com/g/200/300" alt="image">
</figure>
</div><div class="codeBlock"><div class="highlight"><pre> <span class="nt">&lt;figure&gt;</span>
<span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"http://placekitten.com/g/200/300"</span> <span class="na">alt=</span><span class="s">"image"</span><span class="nt">&gt;</span>
<span class="nt">&lt;/figure&gt;</span>
</pre></div></div></div>
<h1 id="link">Link</h1>

<h2 id="default-link">Default link</h2>

<p>Determine the color of link.
<code>:hover</code> highlight the link when hovered.</p>
<div class="codeExample"><div class="exampleOutput"> <a href="#">Link</a>
</div><div class="codeBlock"><div class="highlight"><pre> <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Link<span class="nt">&lt;/a&gt;</span>
</pre></div></div></div>
<h2 id="no-underlined-link">No underlined link</h2>

<p>If you do not want to underline a link.
<code>:hover</code> highlight &amp; undeline the link when hovered.</p>
<div class="codeExample"><div class="exampleOutput"> <a href="#" class="no-underline">Link</a>
</div><div class="codeBlock"><div class="highlight"><pre> <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"no-underline"</span><span class="nt">&gt;</span>Link<span class="nt">&lt;/a&gt;</span>
</pre></div></div></div>
<h1 id="list">Lists</h1>

<p>Default list style</p>
<div class="codeExample"><div class="exampleOutput"><ul>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</div><div class="codeBlock"><div class="highlight"><pre><span class="nt">&lt;ul&gt;</span>
<span class="nt">&lt;li&gt;</span>item<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li&gt;</span>item<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li&gt;</span>item<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;/ul&gt;</span>
</pre></div></div></div>
<h1 id="page">Page</h1>

<h2 id="html">html</h2>

<p>Basic settings for font are set in <code>html</code>.</p>
</section>

<h1 id="paragraph">Paragraph</h1>

<h2 id="lede">Lede</h2>

<p>Lede is the same font as the headings.
It can be use for intriduction paragraph.</p>
<div class="codeExample"><div class="exampleOutput"> <p class="lede">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae placeat nam, doloremque, dignissimos nemo debitis.</p>
</div><div class="codeBlock"><div class="highlight"><pre> <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"lede"</span><span class="nt">&gt;</span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae placeat nam, doloremque, dignissimos nemo debitis.<span class="nt">&lt;/p&gt;</span>
</pre></div></div></div>
<h2 id="small">Small</h2>

<p>Lede is the same font as the headings.
It can be use for intriduction paragraph.</p>
<div class="codeExample"><div class="exampleOutput"> <p class="small">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae placeat nam, doloremque, dignissimos nemo debitis.</p>
<p>Lorem ipsum <small>dolor sit amet</small>, consectetur adipisicing elit. Perferendis, assumenda?</p>
</div><div class="codeBlock"><div class="highlight"><pre> <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"small"</span><span class="nt">&gt;</span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae placeat nam, doloremque, dignissimos nemo debitis.<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;p&gt;</span>Lorem ipsum <span class="nt">&lt;small&gt;</span>dolor sit amet<span class="nt">&lt;/small&gt;</span>, consectetur adipisicing elit. Perferendis, assumenda?<span class="nt">&lt;/p&gt;</span>
</pre></div></div></div>
<h2 id="strong">Strong</h2>
<div class="codeExample"><div class="exampleOutput"> <p class="strong">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae placeat nam, doloremque, dignissimos nemo debitis.</p>
<p>Lorem ipsum <strong>dolor sit amet</strong>, consectetur adipisicing elit. Perferendis, assumenda?</p>
</div><div class="codeBlock"><div class="highlight"><pre> <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"strong"</span><span class="nt">&gt;</span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae placeat nam, doloremque, dignissimos nemo debitis.<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;p&gt;</span>Lorem ipsum <span class="nt">&lt;strong&gt;</span>dolor sit amet<span class="nt">&lt;/strong&gt;</span>, consectetur adipisicing elit. Perferendis, assumenda?<span class="nt">&lt;/p&gt;</span>
</pre></div></div></div>
<h1 id="quote">Quote</h1>
<div class="codeExample"><div class="exampleOutput"><blockquote>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</blockquote>
</div><div class="codeBlock"><div class="highlight"><pre><span class="nt">&lt;blockquote&gt;</span>Lorem ipsum dolor sit amet, consectetur adipisicing elit.<span class="nt">&lt;/blockquote&gt;</span>
</pre></div></div></div>
<h2 id="blockquote">Blockquote</h2>
<div class="codeExample"><div class="exampleOutput"><blockquote>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</blockquote>
</div><div class="codeBlock"><div class="highlight"><pre><span class="nt">&lt;blockquote&gt;</span>Lorem ipsum dolor sit amet, consectetur adipisicing elit.<span class="nt">&lt;/blockquote&gt;</span>
</pre></div></div></div> </section>
<footer class="small">
<p>This documentation generated using <a href="http://github.com/trulia/hologram">Hologram</a>
</footer>
Expand Down
56 changes: 0 additions & 56 deletions styleguide/button.html
View file

This file was deleted.

72 changes: 0 additions & 72 deletions styleguide/code.html
View file

This file was deleted.

Loading

0 comments on commit 79f3650

Please sign in to comment.