reorder docs and rename directories

20minutes · Mar 21, 2018 · ee3d9b0 · ee3d9b0
1 parent 02f6b1c
commit ee3d9b0
Show file tree

Hide file tree

Showing 154 changed files with 3,185 additions and 11,652 deletions.
diff --git a/assets/js/colette.js b/assets/js/colette.js
@@ -15,6 +15,7 @@ import FontFaceLoader from './modules/fontFaceLoader';
 import Pager from './modules/pager';
 import fontsData from '../../fontfaces.json';
 import headroom from 'headroom.js';
+import Blazy from 'blazy';
 
 // Init Colette object
 const colette = window.colette || {};
@@ -27,6 +28,11 @@ Array.prototype.forEach.call(document.querySelectorAll('.block-list'), (item) =>
     colette.pagers.push(new Pager({blockList: item}));
 });
 
+// lazyload init (images)
+colette.lazy = new Blazy({
+    offset: 500
+});
+
 export {
     colette
 };
diff --git a/assets/js/modules/pager.js b/assets/js/modules/pager.js
@@ -9,7 +9,17 @@ function Pager(cfg) {
 
     this.blockList = this.config.blockList;
     this.block = this.blockList.closest('.block');
+    if (!this.block) {
+        return;
+    }
+    this.pager = this.block.querySelector('.pager');
+    if (!this.pager) {
+        return;
+    }
     this.items = this.blockList.querySelectorAll('li');
+    if (!this.items) {
+        return;
+    }
 
     // get config from attribute
     const attributConfigItemPerPage = this.blockList.getAttribute('data-item-per-page');
@@ -19,8 +29,8 @@ function Pager(cfg) {
     this.totalPage = Math.ceil(this.items.length / this.itemPerPage);
     this.currentPage = 1;
 
-    this.btnPrev = this.block.querySelector('.pager-prev');
-    this.btnNext = this.block.querySelector('.pager-next');
+    this.btnPrev = this.pager.querySelector('.pager-prev');
+    this.btnNext = this.pager.querySelector('.pager-next');
 
     // event handlers
     this.btnPrev.addEventListener('click', this.paginateEventHandler.bind(this));

diff --git a/assets/styl/_base/_fonts.styl b/assets/styl/_base/_fonts.styl
@@ -9,8 +9,7 @@
 // - bold or extra bold weight, in block teaser or content view,
 // - regular in listed teaser view.
 //
-// Styleguide: Basics.Fonts
-
+// Styleguide: Design.Fonts
 
 for i, $font in $fontface
     @font-face

diff --git a/assets/styl/_base/_form-elements.styl → assets/styl/_base/_form.styl b/assets/styl/_base/_form-elements.styl → assets/styl/_base/_form.styl
@@ -1,44 +1,12 @@
+// Form
+//
+// Styleguide: Forms
+
 // Form elements
 //
-// Colette comes with basic CSS to style forms' elements.
+// Colette comes with basic CSS to style form’s elements.
 //
-// Styleguide: Components.Forms
-
-form
-    position relative
-
-    p
-        margin 0
-
-    // Form attributes
-    //
-    // Styleguide: Components.FormsAttributes
-
-    // Busy status
-    //
-    // You can apply an animated 'waiting' status on a form (after submitting for example):
-    // if you add the `aria-busy="true"` to the `<form>` tag, you will get a **Loading** animation over it.
-    //
-    // Markup: form-ariabusy.twig
-    //
-    // Styleguide: Components.FormsAttributes.AriaBusy
-
-    &[aria-busy=true]
-        {loading}
-        &:before
-            z-index: $zIndex.overlay + 1
-
-        &:after
-            content ''
-            display block
-            position absolute
-            z-index: $zIndex.overlay
-            left 0
-            right 0
-            bottom 0
-            top 0
-            background rgba($color-white, .8)
-
+// Styleguide: Forms.Base
 fieldset
     border 0
     padding 0
@@ -73,7 +41,7 @@ input[type='reset']
 //
 // Weight: 1
 //
-// Styleguide: Components.Forms.TextInputs
+// Styleguide: Forms.Base.TextInputs
 
 // HTML5 inputs
 //
@@ -84,7 +52,7 @@ input[type='reset']
 //
 // Weight: 2
 //
-// Styleguide: Components.Forms.HTML5Inputs
+// Styleguide: Forms.Base.HTML5Inputs
 input[type='text']
 input[type='password']
 input[type='email']
@@ -138,7 +106,7 @@ input[type='date']
 //
 // Weight: 3
 //
-// Styleguide: Components.Forms.Select
+// Styleguide: Forms.Base.Select
 select
     padding-right 2em
     background-image url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100\" height=\"100\" fill=\"#000\"><polygon points=\"0, 0 100, 0 50, 50\" /></svg>')
@@ -147,7 +115,6 @@ select
     background-size .5em .5em
     -webkit-appearance none // the svg background arrow doesn't display on FF, so we only target -webkit
 
-
 // Textarea
 //
 // Default styles for `<textarea>` field.
@@ -156,7 +123,7 @@ select
 //
 // Weight: 4
 //
-// Styleguide: Components.Forms.Textarea
+// Styleguide: Forms.Base.Textarea
 textarea
     vertical-align top
     border 1px solid $color-base-lighten
@@ -184,7 +151,7 @@ input[type='image']
 //
 // Weight: 5
 //
-// Styleguide: Components.Forms.RadioButtons
+// Styleguide: Forms.Base.RadioButtons
 
 // Checkboxes
 //
@@ -195,7 +162,7 @@ input[type='image']
 //
 // Weight: 6
 //
-// Styleguide: Components.Forms.Checkboxes
+// Styleguide: Forms.Base.Checkboxes
 input[type='checkbox']
 input[type='radio']
     position absolute

diff --git a/assets/styl/_base/_svg.styl b/assets/styl/_base/_svg.styl
@@ -1,2 +1,11 @@
+// SVG symbols
+//
+// Colette use a collection of svg symbols built with [svgstore](https://www.npmjs.com/package/svgstore).
+//
+// By default svg `fill` are colored by current text color.
+//
+// Markup: svg.twig
+//
+// Styleguide: Design.Svg
 svg
     fill currentColor
diff --git a/assets/styl/_base/_symbols.styl b/assets/styl/_base/_symbols.styl
diff --git a/assets/styl/_base/_typography.styl b/assets/styl/_base/_typography.styl
@@ -6,7 +6,7 @@
 //
 // Weight: 2
 //
-// Styleguide Basics.Typography
+// Styleguide Design.Typography
 html
     font-family sans-serif // 2
     font-size 62.5% // 1

diff --git a/assets/styl/_base/form-checkbox.twig b/assets/styl/_base/form-checkbox.twig
@@ -1,14 +1,14 @@
 <form action="#">
-    <p>
+    <div>
         <input id="checkbox1" name="checkbox1" type="checkbox">
         <label for="checkbox1">Label</label>
-    </p>
-    <p>
+    </div>
+    <div>
         <input id="checkbox2" name="checkbox2" type="checkbox">
         <label for="checkbox2">Label</label>
-    </p>
-    <p>
+    </div>
+    <div>
         <input id="checkbox3" name="checkbox3" type="checkbox">
         <label for="checkbox3">Label</label>
-    </p>
+    </div>
 </form>
diff --git a/assets/styl/_base/form-html5input.twig b/assets/styl/_base/form-html5input.twig
@@ -1,14 +1,12 @@
 <form action="#">
     {% for textfield in textfields %}
         <div class="form-field pb2">
-            <p>
-                <label for="{{ textfield.id }}">{{ textfield.label }}</label>
-                <input id="{{ textfield.id }}" type="{{ textfield.type }}"
-                    {% if textfield.value is not empty %}value="{{ textfield.value }}"{% endif %}
-                    {% if textfield.placeholder is not empty %}placeholder="{{ textfield.placeholder }}"{% endif %}
-                    {% if textfield.attrs is not empty %}{{ textfield.attrs }}{% endif %}
-                />
-            </p>
+            <label for="{{ textfield.id }}">{{ textfield.label }}</label>
+            <input id="{{ textfield.id }}" type="{{ textfield.type }}"
+                {% if textfield.value is not empty %}value="{{ textfield.value }}"{% endif %}
+                {% if textfield.placeholder is not empty %}placeholder="{{ textfield.placeholder }}"{% endif %}
+                {% if textfield.attrs is not empty %}{{ textfield.attrs }}{% endif %}
+            />
         </div>
     {% endfor %}
 </form>
diff --git a/assets/styl/_base/form-radiobutton.twig b/assets/styl/_base/form-radiobutton.twig
@@ -1,14 +1,14 @@
 <form action="#">
-    <p>
+    <div>
         <input id="radioButton1" name="radioButtonGroup" type="radio">
         <label for="radioButton1">Label</label>
-    </p>
-    <p>
+    </div>
+    <div>
         <input id="radioButton2" name="radioButtonGroup" type="radio">
         <label for="radioButton2">Label</label>
-    </p>
-    <p>
+    </div>
+    <div>
         <input id="radioButton3" name="radioButtonGroup" type="radio">
         <label for="radioButton3">Label</label>
-    </p>
+    </div>
 </form>
diff --git a/assets/styl/_base/form-select.twig b/assets/styl/_base/form-select.twig
@@ -1,12 +1,10 @@
 <form action="#">
     <div class="form-field">
-        <p>
-            <label for="select">Select</label>
-            <select id="select">
-                <option>option 1</option>
-                <option>option 2</option>
-                <option>option 3</option>
-            </select>
-        </p>
+        <label for="select">Select</label>
+        <select id="select">
+            <option>option 1</option>
+            <option>option 2</option>
+            <option>option 3</option>
+        </select>
     </div>
 </form>
diff --git a/assets/styl/_base/form-textarea.twig b/assets/styl/_base/form-textarea.twig
@@ -1,8 +1,6 @@
 <form action="#">
     <div class="form-field">
-        <p>
-            <label for="textarea">Textarea</label>
-            <textarea id="textarea" row="4" cols="50" />default value</textarea>
-        </p>
+        <label for="textarea">Textarea</label>
+        <textarea id="textarea" row="4" cols="50" />default value</textarea>
     </div>
 </form>
diff --git a/assets/styl/_base/form-textinput.twig b/assets/styl/_base/form-textinput.twig
@@ -1,14 +1,12 @@
 <form action="#">
     {% for textfield in textfields %}
         <div class="form-field pb2">
-            <p>
-                <label for="{{ textfield.id }}">{{ textfield.label }}</label>
-                <input id="{{ textfield.id }}" type="{{ textfield.type }}"
-                    {% if textfield.value is not empty %}value="{{ textfield.value }}"{% endif %}
-                    {% if textfield.placeholder is not empty %}placeholder="{{ textfield.placeholder }}"{% endif %}
-                    {% if textfield.attrs is not empty %}{{ textfield.attrs }}{% endif %}
-                />
-            </p>
+            <label for="{{ textfield.id }}">{{ textfield.label }}</label>
+            <input id="{{ textfield.id }}" type="{{ textfield.type }}"
+                {% if textfield.value is not empty %}value="{{ textfield.value }}"{% endif %}
+                {% if textfield.placeholder is not empty %}placeholder="{{ textfield.placeholder }}"{% endif %}
+                {% if textfield.attrs is not empty %}{{ textfield.attrs }}{% endif %}
+            />
         </div>
     {% endfor %}
 </form>
diff --git a/assets/styl/_base/symbols.json → assets/styl/_base/svg.json b/assets/styl/_base/symbols.json → assets/styl/_base/svg.json
@@ -5,6 +5,7 @@
         "clock2",
         "comments",
         "cooking",
+        "diapo",
         "download",
         "folder",
         "games",

diff --git a/assets/styl/_base/symbols.twig → assets/styl/_base/svg.twig b/assets/styl/_base/symbols.twig → assets/styl/_base/svg.twig
diff --git a/assets/styl/_modules/_block.styl → assets/styl/_components/_block.styl b/assets/styl/_modules/_block.styl → assets/styl/_components/_block.styl
@@ -9,7 +9,7 @@
 //
 // block-default - default theme color
 //
-// Styleguide Components.Blocks
+// Styleguide Components.Block
 
 // Weight: 1
 //
@@ -23,7 +23,7 @@
 //
 // block-title-lined - title with bottom border instead of background color
 //
-// Styleguide Components.Blocks.BlockTitle
+// Styleguide Components.Block.BlockTitle
 
 // Weight: 2
 //
@@ -33,15 +33,15 @@
 //
 // .block-stretch - stretch content to keep 100% height of container
 //
-// Styleguide Components.Blocks.BlockList
+// Styleguide Components.Block.BlockList
 
 // Weight: 3
 //
 // Block List can be used with article cards
 //
 // Markup: block-list-with-cards.twig
 //
-// Styleguide Components.Blocks.BlockList-with-Cards
+// Styleguide Components.Block.BlockList-with-Cards
 $block-custom-color ?= $color-base-lighten
 $block-header-minheight ?= 3.6rem
 
@@ -56,16 +56,14 @@ $block-header-minheight ?= 3.6rem
         height 100%
         flex-grow 999
         overflow hidden
+        padding-bottom 3rem // 3rem = .block-footer height
 
         .block-footer
             position absolute
             bottom 1px
             left 1px
             right 1px
 
-        &.box
-            padding-bottom 3rem // 3rem = .block-footer height | we want to override .box padding-bottom set to 1px
-
     &-title
         _pt(.75)
         _pr(1)

diff --git a/assets/styl/_components/_box.styl b/assets/styl/_components/_box.styl
@@ -0,0 +1,14 @@
+// Box
+//
+// A `box` is a skin for block present on the body background.
+// It can be used on a simple `div` on a component block or preview (on homepage or listing pages) or on the content container (content view).
+//
+// Markup: box.twig
+//
+// Styleguide Theme.Box
+.box
+    overflow hidden
+    border-radius $boxBorderRadius
+    border .1rem solid $color-white
+    background-color $color-white
+    box-shadow 0 0 0 .1rem rgba($color-black, .02), 0 .1rem .4rem .1rem rgba($color-black, .06)