diff --git a/Gruntfile.js b/Gruntfile.js index 7f9085e..2a2e1fc 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -86,6 +86,15 @@ module.exports = function (grunt) { + clean: { + styleguide: ['styleguide'] + }, + + + + + + hologram: { generate: { options: { @@ -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'] } } @@ -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']); + }; diff --git a/package.json b/package.json index d92faac..63287d7 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/styleguide/base.html b/styleguide/base.html index 13086ec..1fd1ad5 100644 --- a/styleguide/base.html +++ b/styleguide/base.html @@ -14,25 +14,15 @@ @@ -41,17 +31,177 @@

blog.alienlebarge.ch's styleguide

+

Code

+ +

Inline code

+
Hello +
<code>Hello</code>
+
Hello +
<kbp>Hello</kbp>
+
Hello +
<samp>Hello</samp>
+
+

Codeblock

+ +

Use an explicit font stack to ensure browsers render correct line-height.

+
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+
<pre>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</pre>
+
+

Headers

+

Heading 1

+

Paragraph with h1 style

+
    <h1>Heading 1</h1>
+    <p class="alpha">Paragraph with h1 style</p>
+

Heading 2

+

Paragraph with h2 style

+
    <h2>Heading 2</h2>
+    <p class="beta">Paragraph with h2 style</p>
+

Heading 3

+

Paragraph with h3 style

+
    <h3>Heading 3</h3>
+    <p class="gamma">Paragraph with h3 style</p>
+

Heading 4

+

Paragraph with h4 style

+
    <h4>Heading 4</h4>
+    <p class="delta">Paragraph with h4 style</p>
+
Heading 5
+

Paragraph with h5 style

+
    <h5>Heading 5</h5>
+    <p class="epsilon">Paragraph with h5 style</p>
+
Heading 6
+

Paragraph with h6 style

+ +
    <h6>Heading 6</h6>
+    <p class="zeta">Paragraph with h6 style</p>
+
+
+

Image

+ +

Figcaption

+
+ image +
A cute kitty
+
+
    <figure>
+      <img src="http://placekitten.com/g/200/300" alt="image">
+      <figcaption>A cute kitty</figcaption>
+    </figure>
+
+

Figure

+
+ image +
+
    <figure>
+      <img src="http://placekitten.com/g/200/300" alt="image">
+    </figure>
+
+

Link

+ + + +

Determine the color of link. +:hover highlight the link when hovered.

+
Link +
    <a href="#">Link</a>
+
+ + +

If you do not want to underline a link. +:hover highlight & undeline the link when hovered.

+
Link +
    <a href="#" class="no-underline">Link</a>
+
+

Lists

+ +

Default list style

+
    +
  • item
    • +
  • item
    • +
  • item
    • +
+
<ul>
+  <li>item</li>
+  <li>item</li>
+  <li>item</li>
+</ul>
+

Page

html

Basic settings for font are set in html.

-
+ +

Paragraph

+ +

Lede

+ +

Lede is the same font as the headings. +It can be use for intriduction paragraph.

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae placeat nam, doloremque, dignissimos nemo debitis.

+
    <p class="lede">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae placeat nam, doloremque, dignissimos nemo debitis.</p>
+
+

Small

+ +

Lede is the same font as the headings. +It can be use for intriduction paragraph.

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae placeat nam, doloremque, dignissimos nemo debitis.

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis, assumenda?

+
    <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>
+
+

Strong

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae placeat nam, doloremque, dignissimos nemo debitis.

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis, assumenda?

+
    <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>
+
+

Quote

+
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+
<blockquote>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</blockquote>
+
+

Blockquote

+
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+
<blockquote>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</blockquote>
+
diff --git a/styleguide/button.html b/styleguide/button.html deleted file mode 100644 index 54f45d2..0000000 --- a/styleguide/button.html +++ /dev/null @@ -1,56 +0,0 @@ - - - - alb styleguide: Button - - - - - - - - -
- - -

blog.alienlebarge.ch's styleguide

-
- -

Buttons

-
button -
<a href="#" class="btn">button</a>
-
- -
- - diff --git a/styleguide/code.html b/styleguide/code.html deleted file mode 100644 index 6e0864c..0000000 --- a/styleguide/code.html +++ /dev/null @@ -1,72 +0,0 @@ - - - - alb styleguide: Code - - - - - - - - -
- - -

blog.alienlebarge.ch's styleguide

-
- -

Code

- -

Inline code

-
Hello -
<code>Hello</code>
-
Hello -
<kbp>Hello</kbp>
-
Hello -
<samp>Hello</samp>
-
-

Codeblock

- -

Use an explicit font stack to ensure browsers render correct line-height.

-
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
-
<pre>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</pre>
-
- -
- - diff --git a/styleguide/componment.html b/styleguide/componment.html index 7cb7d66..78068ef 100644 --- a/styleguide/componment.html +++ b/styleguide/componment.html @@ -1,7 +1,7 @@ - alb styleguide: Componment + alb styleguide: componment @@ -14,25 +14,15 @@ @@ -55,6 +45,16 @@

blog.alienlebarge.ch's styleguide

  • Header image text container
    • +
  • Helper classes
    • + +
  • Center block
    • + +
  • Pull right
    • + +
  • Relative
    • + +
  • Screen reader only
    • +
  • Navigation
  • Primary Navigation
    • @@ -63,6 +63,20 @@

    blog.alienlebarge.ch's styleguide

  • Container
    • +
  • Types
    • + +
  • Font weight normal
    • + +
  • Meta
    • + +
  • Text center
    • + +
  • Text justify
    • + +
  • Text left
    • + +
  • Text right
    • +

    Border

    @@ -125,6 +139,41 @@

    Header image text container

    <p class="meta">Meta info</p> </div> +

    Helper classes

    + +

    Center block

    + +

    Set an element to display: block and center via margin.

    +
    + ... +
    +
    <div class="center-block">
+  ...
+</div>
+
    +

    Pull right

    + +

    Float element to the right

    +
    + ... +
    +
    <div class="pull-right">
+  ...
+</div>
+
    +

    Relative

    + +

    Set the position to relative to help some positioning

    +
    ...
    +
    <div clas="relative">...</div>
+
    +

    Screen reader only

    + +

    Hide an element to all devices except screen readers with .sr-only. +Necessary for following accessibility best practices.

    +
    Skip to main content +
    <a class="sr-only" href="#content">Skip to main content</a>
+

    Navigation

    Primary Navigation

    @@ -142,7 +191,45 @@

    Container

    <div class="container">
   ...
 <div>
-
    + +

    Types

    + +

    Font weight normal

    + +

    Set the font weight to normal

    +

    Heading with normal weight

    +
    <h1 class="font-weight-normal">Heading with normal weight</h1>
+
    +

    Meta

    + +

    Design for article meta information

    +

    This is meta information

    +
    <p class="meta">This is meta information</p>
+
    +

    Text center

    + +

    Center aligned text

    +

    Align me!

    +
    <p class="text-center">Align me!</p>
+
    +

    Text justify

    + +

    Justified text

    +

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta minima quam tempora soluta illum dolore libero. Quidem perferendis, voluptatum, optio dignissimos itaque quaerat nihil fugiat iusto, aperiam mollitia earum non?

    +
    <p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta minima quam tempora soluta illum dolore libero. Quidem perferendis, voluptatum, optio dignissimos itaque quaerat nihil fugiat iusto, aperiam mollitia earum non?</p>
+
    +

    Text left

    + +

    Left aligned text

    +

    Align me!

    +
    <p class="align-left">Align me!</p>
+
    +

    Text right

    + +

    Right Aligned text

    +

    Align me!

    +
    <p class="text-right">Align me!</p>
+
    diff --git a/styleguide/helpers.html b/styleguide/helpers.html deleted file mode 100644 index c086f16..0000000 --- a/styleguide/helpers.html +++ /dev/null @@ -1,147 +0,0 @@ - - - - alb styleguide: Helpers - - - - - - - - -
    - - -

    blog.alienlebarge.ch's styleguide

    -
    - -

    Helper classes

    - -

    Center block

    - -

    Set an element to display: block and center via margin.

    -
    - ... -
    -
    <div class="center-block">
-  ...
-</div>
-
    -

    Pull right

    - -

    Float element to the right

    -
    - ... -
    -
    <div class="pull-right">
-  ...
-</div>
-
    -

    Relative

    - -

    Set the position to relative to help some positioning

    -
    ...
    -
    <div clas="relative">...</div>
-
    -

    Screen reader only

    - -

    Hide an element to all devices except screen readers with .sr-only. -Necessary for following accessibility best practices.

    -
    Skip to main content -
    <a class="sr-only" href="#content">Skip to main content</a>
-
    -

    Types

    - -

    Font weight normal

    - -

    Set the font weight to normal

    -

    Heading with normal weight

    -
    <h1 class="font-weight-normal">Heading with normal weight</h1>
-
    -

    Meta

    - -

    Design for article meta information

    -

    This is meta information

    -
    <p class="meta">This is meta information</p>
-
    -

    Text center

    - -

    Center aligned text

    -

    Align me!

    -
    <p class="text-center">Align me!</p>
-
    -

    Text justify

    - -

    Justified text

    -

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta minima quam tempora soluta illum dolore libero. Quidem perferendis, voluptatum, optio dignissimos itaque quaerat nihil fugiat iusto, aperiam mollitia earum non?

    -
    <p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta minima quam tempora soluta illum dolore libero. Quidem perferendis, voluptatum, optio dignissimos itaque quaerat nihil fugiat iusto, aperiam mollitia earum non?</p>
-
    -

    Text left

    - -

    Left aligned text

    -

    Align me!

    -
    <p class="align-left">Align me!</p>
-
    -

    Text right

    - -

    Right Aligned text

    -

    Align me!

    -
    <p class="text-right">Align me!</p>
-
    - -
    - - diff --git a/styleguide/image.html b/styleguide/image.html deleted file mode 100644 index b0050a6..0000000 --- a/styleguide/image.html +++ /dev/null @@ -1,76 +0,0 @@ - - - - alb styleguide: Image - - - - - - - - -
    - - -

    blog.alienlebarge.ch's styleguide

    -
    - -

    Image

    - -

    Figcaption

    -
    - image -
    A cute kitty
    -
    -
        <figure>
-      <img src="http://placekitten.com/g/200/300" alt="image">
-      <figcaption>A cute kitty</figcaption>
-    </figure>
-
    -

    Figure

    -
    - image -
    -
        <figure>
-      <img src="http://placekitten.com/g/200/300" alt="image">
-    </figure>
-
    - -
    - - diff --git a/styleguide/index.html b/styleguide/index.html index dcbc53d..9ff8d5e 100644 --- a/styleguide/index.html +++ b/styleguide/index.html @@ -13,40 +13,40 @@

    blog.alienlebarge.ch's styleguide

    Welcome in alienlebarge.ch's styleguide.

    The styles use inuitcss framwork (big up tu Harry Roberts !).

    -

    The styles are build with icss architecture in mind.

    +

    The styles are build with icss architecture in mind:

    + +

    Everything is included in a style.scss files.

    diff --git a/styleguide/link.html b/styleguide/link.html deleted file mode 100644 index 493c44f..0000000 --- a/styleguide/link.html +++ /dev/null @@ -1,72 +0,0 @@ - - - - alb styleguide: Link - - - - - - - - -
    - - -

    blog.alienlebarge.ch's styleguide

    -
    - -

    Link

    - - - -

    Determine the color of link. -:hover highlight the link when hovered.

    -
    Link -
        <a href="#">Link</a>
-
    - - -

    If you do not want to underline a link. -:hover highlight & undeline the link when hovered.

    -
    Link -
        <a href="#" class="no-underline">Link</a>
-
    -
    -

    This documentation generated using Hologram -

    -
    - - diff --git a/styleguide/list.html b/styleguide/list.html deleted file mode 100644 index 1ea694f..0000000 --- a/styleguide/list.html +++ /dev/null @@ -1,98 +0,0 @@ - - - - alb styleguide: List - - - - - - - - -
    - - -

    blog.alienlebarge.ch's styleguide

    -
    - -

    Lists

    - -

    Default list style

    -
      -
    • item
      • -
    • item
      • -
    • item
      • -
    -
    <ul>
-  <li>item</li>
-  <li>item</li>
-  <li>item</li>
-</ul>
-
    -

    List inline

    - -

    The List-inline object simply displays a list as one horizontal row.

    -
      -
    • item
      • -
    • item
      • -
    • item
      • -
    -
    <ul class="list-inline">
-  <li>item</li>
-  <li>item</li>
-  <li>item</li>
-</ul>
-
    -

    List UI

    - -

    The list-ui object creates blocky, keyline-delimited list items.

    -
      -
    • item
      • -
    • item
      • -
    • item
      • -
    -
    <ul class="list-ui">
-  <li>item</li>
-  <li>item</li>
-  <li>item</li>
-</ul>
-
    -
    -

    This documentation generated using Hologram -

    -
    - - diff --git a/styleguide/settings.html b/styleguide/settings.html index 5db8e72..8fa704f 100644 --- a/styleguide/settings.html +++ b/styleguide/settings.html @@ -1,7 +1,7 @@ - alb styleguide: Settings + alb styleguide: settings @@ -14,25 +14,15 @@ diff --git a/styleguide/typography.html b/styleguide/typography.html deleted file mode 100644 index 5792041..0000000 --- a/styleguide/typography.html +++ /dev/null @@ -1,124 +0,0 @@ - - - - alb styleguide: Typography - - - - - - - - -
    - - -

    blog.alienlebarge.ch's styleguide

    -
    - -

    Headers

    -

    Heading 1

    -

    Paragraph with h1 style

    -
        <h1>Heading 1</h1>
-    <p class="alpha">Paragraph with h1 style</p>
-

    Heading 2

    -

    Paragraph with h2 style

    -
        <h2>Heading 2</h2>
-    <p class="beta">Paragraph with h2 style</p>
-

    Heading 3

    -

    Paragraph with h3 style

    -
        <h3>Heading 3</h3>
-    <p class="gamma">Paragraph with h3 style</p>
-

    Heading 4

    -

    Paragraph with h4 style

    -
        <h4>Heading 4</h4>
-    <p class="delta">Paragraph with h4 style</p>
-
    Heading 5
    -

    Paragraph with h5 style

    -
        <h5>Heading 5</h5>
-    <p class="epsilon">Paragraph with h5 style</p>
-
    Heading 6
    -

    Paragraph with h6 style

    - -
        <h6>Heading 6</h6>
-    <p class="zeta">Paragraph with h6 style</p>
-
-
    -

    Paragraph

    - -

    Lede

    - -

    Lede is the same font as the headings. -It can be use for intriduction paragraph.

    -

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae placeat nam, doloremque, dignissimos nemo debitis.

    -
        <p class="lede">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae placeat nam, doloremque, dignissimos nemo debitis.</p>
-
    -

    Small

    - -

    Lede is the same font as the headings. -It can be use for intriduction paragraph.

    -

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae placeat nam, doloremque, dignissimos nemo debitis.

    -

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis, assumenda?

    -
        <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>
-
    -

    Strong

    -

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae placeat nam, doloremque, dignissimos nemo debitis.

    -

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis, assumenda?

    -
        <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>
-
    -

    Quote

    -
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    -
    <blockquote>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</blockquote>
-
    -

    Blockquote

    -
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    -
    <blockquote>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</blockquote>
-
    - -
    - -