superdesk-ui-framework 4.0.52 → 4.0.54

package/examples/pages/components_deprecated/input.html

@@ -1,233 +0,0 @@
-<section class="docs-page__container">    
-    <h2 class="docs-page__h2">Inputs</h2>
-    <p class="docs-page__paragraph">Line inputs are based on Material design style inputs. They include useful elements like hint text <code>.sd-line-input__hint</code>, error messages <code>.sd-line-input__message</code> and character count <code>.sd-line-input__char-count</code>.</p>
-    <div class="docs-page__code-window" doc-tabs>
-        <div class="docs-page__window-bar">
-            <a id="example" href="#" class="active">Example</a>
-            <a id="markup" href="#">Markup</a>
-        </div>
-        <div class="docs-page__window-content">
-            <div class="docs-page__code-example">
-                <p class="docs-page__paragraph">// Input with hint text and character count</p>
-                <div class="form__row">
-                    <div class="sd-line-input">
-                        <label class="sd-line-input__label">Headline</label>
-                        <input class="sd-line-input__input" type="text">
-                        <div class="sd-line-input__char-count">00/90</div>
-                        <span class="sd-line-input__hint">This is a hint text. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.</span>
-                    </div>
-                </div>
-                <p class="docs-page__paragraph docs-page__paragraph--topMarginL">// Required input field</p>
-                <div class="form__row">
-                    <div class="sd-line-input sd-line-input--required">
-                        <label class="sd-line-input__label">Description</label>
-                        <input class="sd-line-input__input" type="text">
-                        <div class="sd-line-input__hint">Hendrerit in vulputate velit esse molestie consequat.</div>
-                    </div>
-                </div>
-                <p class="docs-page__paragraph docs-page__paragraph--topMarginL">// Input with error message</p>
-                <div class="form__row">
-                    <div class="sd-line-input sd-line-input--invalid sd-line-input--required">
-                        <label class="sd-line-input__label">Description</label>
-                        <input class="sd-line-input__input" type="text">
-                        <div class="sd-line-input__message">This field is required.</div>
-                    </div>
-                </div>
-                <p class="docs-page__paragraph docs-page__paragraph--topMarginL">// Disabled input</p>
-                <div class="form__row">
-                    <div class="sd-line-input sd-line-input--disabled">
-                        <label class="sd-line-input__label">Disabled input</label>
-                        <input class="sd-line-input__input" type="text" disabled>
-                        <div class="sd-line-input__message">This field is disabled.</div>
-                    </div>
-                </div>
-
-                <p class="docs-page__paragraph docs-page__paragraph--topMarginL">// Input with no dedicated space for the hint text at the bottom</p>
-                <div class="form__row">
-                    <div class="sd-line-input sd-line-input--no-margin">
-                        <label class="sd-line-input__label">No margin below</label>
-                        <input class="sd-line-input__input" type="text">
-                    </div>
-                </div>
-
-                <p class="docs-page__paragraph docs-page__paragraph--topMarginL">// File input</p>
-                <div class="form__row">
-                    <div class="sd-line-input">
-                        <label class="sd-line-input__label">File input</label>
-                        <input class="sd-line-input__input" type="file">
-                    </div>
-                </div>
-
-                <p class="docs-page__paragraph docs-page__paragraph--topMarginL">// Color input</p>
-                <div class="form__row" style="max-width: 100px;">
-                    <div class="sd-line-input sd-line-input--is-color">
-                        <label class="sd-line-input__label">Color input</label>
-                        <div class="sd-line-input--flex-row">
-                            <div class="sd-line-input__value">{{test}}</div>
-                            <input class="sd-line-input__color" type="color" value="#5eadc8" ng-init="test='#5eadc8'" ng-model="test">
-                        </div>
-                    </div>
-                </div>
-
-                <p class="docs-page__paragraph docs-page__paragraph--topMarginL">// Alternative styling</p>
-                <p class="docs-page__paragraph docs-page__paragraph--small">An alternative styling for input fields is available in cases where the whole filed needs to be visible. The style is applied by appending <code>.sd-line-input--boxed</code> to the default classes.</p>
-                <div class="form__row">
-                    <div class="sd-line-input sd-line-input--boxed">
-                        <label class="sd-line-input__label">Description</label>
-                        <input class="sd-line-input__input" type="text">
-                        <div class="sd-line-input__hint">Vulputate velit esse molestie consequat.</div>
-                    </div>
-                </div>
-
-                <div class="form__row">
-                    <div class="sd-line-input sd-line-input--boxed sd-line-input--disabled">
-                        <label class="sd-line-input__label">Disabled</label>
-                        <input class="sd-line-input__input" type="text" disabled>
-                        <div class="sd-line-input__hint">This field is disabled.</div>
-                    </div>
-                </div>
-            </div>
-            <div class="docs-page__code-markup">
-                <pre class="prettyprint lang-html linenums">
-                    <!--Input with hint text and character count.-->
-                    <div class="sd-line-input">
-                        <label class="sd-line-input__label">Headline</label>
-                        <input class="sd-line-input__input" type="text">
-                        <div class="sd-line-input__char-count">00/90</div>
-                        <span class="sd-line-input__hint">This is a hint text. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.</span>
-                    </div>
-                    <!--Required input field-->
-                    <div class="sd-line-input sd-line-input--required">
-                        <label class="sd-line-input__label">Description</label>
-                        <input class="sd-line-input__input" type="text">
-                        <div class="sd-line-input__hint">Hendrerit in vulputate velit esse molestie consequat.</div>
-                    </div>
-                    <!--Input with error message.-->
-                    <div class="sd-line-input sd-line-input--invalid">
-                        <label class="sd-line-input__label">Description</label>
-                        <input class="sd-line-input__input" type="text">
-                        <div class="sd-line-input__message">This field is required.</div>
-                    </div>
-                    <div class="sd-line-input sd-line-input--disabled">
-                        <label class="sd-line-input__label">Disabled input</label>
-                        <input class="sd-line-input__input" type="text" disabled>
-                        <div class="sd-line-input__message">This field is disabled.</div>
-                    </div>
-                    <!-- Input with no dedicated space for the hint text at the bottom -->
-                    <div class="form__row">
-                        <div class="sd-line-input sd-line-input--no-margin">
-                            <label class="sd-line-input__label">No margin below</label>
-                            <input class="sd-line-input__input" type="text">
-                        </div>
-                    </div>
-                    <!-- Color input -->
-                    <div class="form__row">
-                        <div class="sd-line-input sd-line-input--is-color">
-                            <label class="sd-line-input__label">Color input</label>
-                            <div class="sd-line-input--flex-row">
-                                <div class="sd-line-input__value">{{test}}</div>
-                                <input class="sd-line-input__color" type="color" value="#5eadc8" ng-init="test='#5eadc8'" ng-model="test">
-                            </div>
-                        </div>
-                    </div>
-                    <!--Alternative styling-->
-                    <!--in cases where the whole filed needs to be visible.-->
-                    <div class="sd-line-input sd-line-input--boxed">
-                        <label class="sd-line-input__label">Description</label>
-                        <input class="sd-line-input__input" type="text">
-                        <div class="sd-line-input__hint">Vulputate velit esse molestie consequat.</div>
-                    </div>
-                    <div class="sd-line-input sd-line-input--boxed sd-line-input--disabled">
-                        <label class="sd-line-input__label">Disabled</label>
-                        <input class="sd-line-input__input" type="text" disabled>
-                        <div class="sd-line-input__hint">This field is disabled.</div>
-                    </div>
-                </pre>
-            </div>
-        </div>
-    </div>
-
-    <h3 class="docs-page__h3">Input with label on the left</h3>
-    <p class="docs-page__paragraph">Athough displaying labels above the input is the desired option in Superdesk, in some cases this is not optimal. In those cases it is posible to displaying the label at the same line as the input, on the left, by adding modifier classes. Two options are available:  <code>.sd-line-input--label-left</code>, 
-    with a predefined minimal width for the label, and <code>.sd-line-input--label-left-auto</code> with no predifined label width.</p>
-
-    <div class="docs-page__code-window" doc-tabs>
-            <div class="docs-page__window-bar">
-                <a id="example" href="#" class="active">Example</a>
-                <a id="markup" href="#">Markup</a>
-            </div>
-            <div class="docs-page__window-content">
-                <div class="docs-page__code-example">
-                    <p class="docs-page__paragraph">// Predefined label width</p>
-                    <p class="docs-page__paragraph docs-page__paragraph--small"><strong>Usage:</strong> stacked inputs where space is limited (use form__row as a container if extra space between rows is neede).</p>
-                    <div class="sd-line-input sd-line-input--label-left">
-                        <label class="sd-line-input__label">Label one</label>
-                        <input class="sd-line-input__input" type="text">
-                        <div class="sd-line-input__char-count">00/90</div>
-                        <span class="sd-line-input__hint">This is a hint text. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.</span>
-                    </div>
-                    <div class="sd-line-input sd-line-input--label-left">
-                        <label class="sd-line-input__label">Label two</label>
-                        <input class="sd-line-input__input" type="text">
-                        <span class="sd-line-input__hint">Hint text. Dolor in hendrerit in vulputate velit esse molestie consequat.</span>
-                    </div>
-                    <p class="docs-page__paragraph">// No predefined label width</p>
-                    <p class="docs-page__paragraph docs-page__paragraph--small"><strong>Usage:</strong> single input fields e.g. in subnavigation bars and similar.</p>
-                    <div class="sd-line-input sd-line-input--label-left-auto">
-                        <label class="sd-line-input__label">Label</label>
-                        <input class="sd-line-input__input" type="text">
-                    </div>
-                </div>
-                <div class="docs-page__code-markup">
-                    <pre class="prettyprint lang-html linenums">
-                        <!--Predefined label width-->
-                        <div class="sd-line-input sd-line-input--label-left">
-                            <label class="sd-line-input__label">Label one</label>
-                            <input class="sd-line-input__input" type="text">
-                            <div class="sd-line-input__char-count">00/90</div>
-                            <span class="sd-line-input__hint">This is a hint text. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.</span>
-                        </div>
-                        <div class="sd-line-input sd-line-input--label-left">
-                            <label class="sd-line-input__label">Label two</label>
-                            <input class="sd-line-input__input" type="text">
-                            <span class="sd-line-input__hint">Hint text. Dolor in hendrerit in vulputate velit esse molestie consequat.</span>
-                        </div>
-                        <!--No predefined label width-->
-                        <div class="sd-line-input sd-line-input--label-left-auto">
-                            <label class="sd-line-input__label">Label</label>
-                            <input class="sd-line-input__input" type="text">
-                        </div>
-                    </pre>
-                </div>
-            </div>
-        </div>
-
-    <h3 class="docs-page__h3">Other modifiers</h3>
-
-    <ul>
-        <li>
-            <p class="docs-page__paragraph">
-                <code>.sd-line-input--no-label</code><br> 
-            Removes the top padding reserved for the label. Use in case there is no label needed.
-            </p>
-        </li>
-        <li>
-            <p class="docs-page__paragraph">
-                <code>.sd-line-input--no-margin</code><br> 
-                Removes the bottom margin where otherwise the hint text apears.
-            </p>
-        </li>
-        <li>
-            <p class="docs-page__paragraph">
-                <code>.sd-line-input--with-button</code><br> 
-                Adds space before the input for the [+] <code>.sd-line-input__plus-btn</code> button.
-            </p>
-        </li>
-        <li>
-            <p class="docs-page__paragraph">
-                <code>.sd-line-input--with-button</code><br> 
-                Adds space before the input for the [+] button.
-            </p>
-        </li>
-    </ul>
-</section>

package/examples/pages/components_deprecated/labels.html

@@ -1,170 +0,0 @@
-<section class="docs-page__container">
-    <h2 class="docs-page__h2">Labels</h2>
-    <p class="docs-page__paragraph">Labels are inline styles that can be dropped into body text. For example, labels are used to show the state of items in Superdesk.</p>
-    <h3 class="docs-page__h3">Sizing</h3>
-    <div class="docs-page__code-window" doc-tabs>
-        <div class="docs-page__window-bar">
-            <a id="example" href="#" class="active">Example</a>
-            <a id="markup" href="#">Markup</a>
-        </div> 
-        <div class="docs-page__window-content">
-            <div class="docs-page__code-example">
-                <div class="docs-page__content-row">
-                    <span class="label">default label</span>
-                    <span class="label label--large">large label</span>
-                </div>
-                <p class="docs-page__paragraph">// No text transformation</p>
-                <p style="margin: -10px 0 20px; color: #747474;">This version should be used only in combination with <code>label--large</code></p>
-                <div class="docs-page__content-row">
-                    <span class="label label--large label--no-transform label--primary">No text transform here</span>
-                    <span class="label label--large label--no-transform label--success">No text transform</span>
-                </div>
-            </div>
-            <div class="docs-page__code-markup">
-                <pre class="prettyprint lang-html linenums">
-                    <span class="label">default label</span>
-                    <span class="label label--large">large label</span>
-                    <!-- No text transformation -->
-                    <span class="label label--large label--no-transform label--primary">No text transform here</span>
-                    <span class="label label--large label--no-transform label--success">No text transform</span>
-                </pre>
-            </div>
-        </div>
-    </div>
-
-    <h3 class="docs-page__h3">Coloring</h3>
-    <p class="docs-page__paragraph">By default labels have a wider color palette than buttons and badges.</p>
-
-    <div class="docs-page__code-window" doc-tabs>
-        <div class="docs-page__window-bar">
-            <a id="example" href="#" class="active">Example</a>
-            <a id="markup" href="#">Markup</a>
-        </div> 
-        <div class="docs-page__window-content">
-            <div class="docs-page__code-example">
-                <div class="docs-page__content-row">
-                    <span class="label">default label</span>
-                    <span class="label label--primary">primary label</span>
-                    <span class="label label--success">success label</span>
-                    <span class="label label--yellow2">Color label</span>
-                    <span class="label label--warning">warning label</span>
-                    <span class="label label--orange2">Color label</span>
-                    <span class="label label--alert">alert label</span>
-                    <span class="label label--red2">Color label</span>
-                    <span class="label label--highlight">highlight label</span>
-                    <span class="label label--highlight2">Color label</span>
-                    <span class="label label--highlight3">Color label</span>
-                    <span class="label label--highlight4">Color label</span>
-                    <span class="label label--darkBlue2">Color label</span>
-                </div>
-            </div>
-            <div class="docs-page__code-markup">
-                <pre class="prettyprint lang-html linenums">
-                    <span class="label">default label</span>
-                    <span class="label label--primary">primary label</span>
-                    <span class="label label--success">success label</span>
-                    <span class="label label--yellow2">Color label</span>
-                    <span class="label label--warning">warning label</span>
-                    <span class="label label--orange2">Color label</span>
-                    <span class="label label--alert">alert label</span>
-                    <span class="label label--red2">Color label</span>
-                    <span class="label label--highlight">highlight label</span>
-                    <span class="label label--highlight2">Color label</span>
-                    <span class="label label--highlight3">Color label</span>
-                    <span class="label label--highlight4">Color label</span>
-                    <span class="label label--darkBlue2">Color label</span>
-                </pre>
-            </div>
-        </div>
-    </div>
-    <h3 class="docs-page__h3">Hollow style</h3>
-    <div class="docs-page__code-window" doc-tabs>
-        <div class="docs-page__window-bar">
-            <a id="example" href="#" class="active">Example</a>
-            <a id="markup" href="#">Markup</a>
-        </div> 
-        <div class="docs-page__window-content">
-            <div class="docs-page__code-example">
-                <div class="docs-page__content-row">
-                    <span class="label label--hollow">default label</span>
-                    <span class="label label--primary label--hollow">primary label</span>
-                    <span class="label label--success label--hollow">success label</span>
-                    <span class="label label--yellow2 label--hollow">Color label</span>
-                    <span class="label label--warning label--hollow">warning label</span>
-                    <span class="label label--orange2 label--hollow">Color label</span>
-                    <span class="label label--alert label--hollow">alert label</span>
-                    <span class="label label--red2 label--hollow">Color label</span>
-                    <span class="label label--highlight label--hollow">highlight label</span>
-                    <span class="label label--highlight2 label--hollow">Color label</span>
-                    <span class="label label--highlight3 label--hollow">Color label</span>
-                    <span class="label label--highlight4 label--hollow">Color label</span>
-                    <span class="label label--darkBlue2 label--hollow">Color label</span>
-                </div>
-                <div class="docs-page__content-row">
-                    <span class="label label--hollow label--large">Hollow large</span>
-                    <span class="label label--primary label--hollow label--large">Hollow large</span>
-                    <span class="label label--highlight2 label--hollow label--large label--no-transform">Hollow, large & no text transformation</span>
-                </div> 
-            </div>
-            <div class="docs-page__code-markup">
-                <pre class="prettyprint lang-html linenums">
-                    <span class="label label--hollow">default label</span>
-                    <span class="label label--primary label--hollow">primary label</span>
-                    <span class="label label--success label--hollow">success label</span>
-                    <span class="label label--yellow2 label--hollow">Color label</span>
-                    <span class="label label--warning label--hollow">warning label</span>
-                    <span class="label label--orange2 label--hollow">Color label</span>
-                    <span class="label label--alert label--hollow">alert label</span>
-                    <span class="label label--red2 label--hollow">Color label</span>
-                    <span class="label label--highlight label--hollow">highlight label</span>
-                    <span class="label label--highlight2 label--hollow">Color label</span>
-                    <span class="label label--highlight3 label--hollow">Color label</span>
-                    <span class="label label--highlight4 label--hollow">Color label</span>
-                    <span class="label label--darkBlue2 label--hollow">Color label</span>
-                    <!-- Large and Hollow -->
-                    <span class="label label--hollow label--large">Hollow large</span>
-                    <span class="label label--primary label--hollow label--large">Hollow large</span>
-                    <span class="label label--highlight2 label--hollow label--large label--no-transform">Hollow, large & no text transformation</span>
-                </pre>
-            </div>
-        </div>
-    </div>
-    <h3 class="docs-page__h3">Link label</h3>
-    <p class="docs-page__paragraph">Should be used only in specific case, like in line with other regular labels inside the list item. Otherwise using regular buttons is preferred.</p>
-    <div class="docs-page__code-window" doc-tabs>
-        <div class="docs-page__window-bar">
-            <a id="example" href="#" class="active">Example</a>
-            <a id="markup" href="#">Markup</a>
-        </div> 
-        <div class="docs-page__window-content">
-            <div class="docs-page__code-example">
-                <div class="docs-page__content-row">
-                    <a href="#" class="label">default label</a>
-                    <a href="#" class="label label--primary">primary label</a>
-                    <a href="#" class="label label--success">success label</a>
-                    <a href="#" class="label label--alert">alert label</a>
-                </div>
-                <div class="docs-page__content-row">
-                    <a href="#" class="label label--hollow">default label</a>
-                    <a href="#" class="label label--primary label--hollow">primary label</a>
-                    <a href="#" class="label label--success label--hollow">success label</a>
-                    <a href="#" class="label label--alert label--hollow">alert label</a>
-                </div>
-            </div>
-            <div class="docs-page__code-markup">
-                <pre class="prettyprint lang-html linenums">
-                    <a href="#" class="label">default label</a>
-                    <a href="#" class="label label--primary">primary label</a>
-                    <a href="#" class="label label--success">success label</a>
-                    <a href="#" class="label label--alert">alert label</a>
-                    ...
-                    <!-- Hollow -->
-                    <a href="#" class="label label--hollow">default label</a>
-                    <a href="#" class="label label--primary label--hollow">primary label</a>
-                    <a href="#" class="label label--success label--hollow">success label</a>
-                    <a href="#" class="label label--alert label--hollow">alert label</a>
-                </pre>
-            </div>
-        </div>
-    </div>
-</section>

package/examples/pages/components_deprecated/layout-grid.html

@@ -1,227 +0,0 @@
-<section class="docs-page__container">
-    <h2 class="docs-page__h2">Layout grid</h2>
-    <p class="docs-page__paragraph">Layout grid in Superdesk is based on flex grid and works very similarly to the standard float grid. It has 12 columns setup, and column gutter of 10px so that the space between two columns is always 20px.</p>
-    <p class="docs-page__paragraph">If there is a need to have layout grid inside an element which already has default padding (like modal body for instance), just add modifier <code>.grid--padding-fix</code> to div <code>.grid</code>.</p>
-    <h3 class="docs-page__h3">Default Layout grid (not responsive)</h3>
-    <p class="docs-page__paragraph">Add grid container with class <code>.grid</code>, and nest grid items inside. For example, grid item will be <code>.grid__item</code> with additional modifier class <code>.grid__item--col-3</code>, so number of columns is set as a modifier on a grid item div. To have a full row width, sum of items columns should be 12.</p>
-    <div class="docs-page__code-window" doc-tabs>
-        <div class="docs-page__window-bar">
-            <a id="example" href="#" class="active">Example</a>
-            <a id="markup" href="#">Markup</a>
-        </div>
-        <div class="docs-page__window-content">
-            <div class="docs-page__code-example">
-                <div class="docs-page__content-row"> 
-                    <div class="grid">
-                        <div class="grid__item grid__item--col-3">col-3</div>
-                        <div class="grid__item grid__item--col-6">col-6</div>
-                        <div class="grid__item grid__item--col-3">col-3</div>
-                    </div>
-                </div>
-                <div class="docs-page__content-row"> 
-                    <div class="grid">
-                        <div class="grid__item grid__item--col-3">col-3</div>
-                        <div class="grid__item grid__item--col-3">col-3</div>
-                        <div class="grid__item grid__item--col-3">col-3</div>
-                        <div class="grid__item grid__item--col-3">col-3</div>
-                    </div>
-                </div>
-                <div class="docs-page__content-row"> 
-                    <div class="grid">
-                        <div class="grid__item grid__item--col-2">col-2</div>
-                        <div class="grid__item grid__item--col-8">col-8</div>
-                        <div class="grid__item grid__item--col-2">col-2</div>
-                    </div>
-                </div>
-                <div class="docs-page__content-row"> 
-                    <div class="grid">
-                        <div class="grid__item grid__item--col-6">col-6</div>
-                        <div class="grid__item grid__item--col-6">col-6</div>                    
-                    </div>
-                </div>
-                <div class="docs-page__content-row"> 
-                    <div class="grid">
-                        <div class="grid__item grid__item--col-4">col-4</div>
-                        <div class="grid__item grid__item--col-4">col-4</div>
-                        <div class="grid__item grid__item--col-4">col-4</div>
-                    </div>
-                </div>
-            </div>
-            <div class="docs-page__code-markup">
-                <pre class="prettyprint lang-html linenums">
-                    <div class="grid">
-                        <div class="grid__item grid__item--col-3">col-3</div>
-                        <div class="grid__item grid__item--col-6">col-6</div>
-                        <div class="grid__item grid__item--col-3">col-3</div>
-                    </div>
-                </pre>
-            </div>
-        </div>
-    </div>
-
-    <h4 class="docs-page__h4">Nested grid</h4>
-    <p class="docs-page__paragraph">To have layout grid inside another one, just add whole <code>.grid</code> structure to <code>.grid__item</code> div.</p>
-    <div class="docs-page__code-window" doc-tabs>
-        <div class="docs-page__window-bar">
-            <a id="example" href="#" class="active">Example</a>
-            <a id="markup" href="#">Markup</a>
-        </div>
-        <div class="docs-page__window-content">
-            <div class="docs-page__code-example">
-                <div class="docs-page__content-row"> 
-                    <div class="grid">
-                        <div class="grid__item grid__item--col-4">col-4</div>
-                        <div class="grid__item grid__item--col-4">
-                            <div class="grid">
-                                <div class="grid__item grid__item--col-6">col-6 (nested)</div>
-                                <div class="grid__item grid__item--col-6">col-6 (nested)</div>                    
-                            </div>
-                        </div>
-                        <div class="grid__item grid__item--col-4">col-4</div>
-                    </div>
-                </div>
-            </div>
-            <div class="docs-page__code-markup">
-                <pre class="prettyprint lang-html linenums">
-                    <div class="grid">
-                        <div class="grid__item grid__item--col-4">col-4</div>
-                        <div class="grid__item grid__item--col-4">
-                            <div class="grid">
-                                <div class="grid__item grid__item--col-6">col-6 (nested)</div>
-                                <div class="grid__item grid__item--col-6">col-6 (nested)</div>
-                            </div>
-                        </div>
-                        <div class="grid__item grid__item--col-4">col-4</div>
-                    </div>
-                </pre>
-            </div>
-        </div>
-    </div>
-
-    <h3 class="docs-page__h3">Responsive Layout grid</h3>
-    <p class="docs-page__paragraph">Responsive Layout grid is based on 12 columns and 6 breakpoints which define media queries. We use 'mobile first' approach which assumes 'min-width' as a parameter for calculation. To make it work, add a class for particular breakpoint on grid__item div block.</p>
-    <p class="docs-page__paragraph">Example class: <code>grid__item gi-xsmall-12 gi-small-6 gi-medium-4 gi-large-3 gi-xlarge-2 gi-xxlarge-1</code></p>
-    <p class="docs-page__paragraph">Available breakpoints:</p>
-    <table class="sd-table" style="width:300px; margin-bottom:30px;">
-        <thead>
-            <tr>
-                <th>name</th>
-                <th>value</th>            
-            </tr>
-        </thead>
-        <tbody>
-            <tr>
-                <td>xsmall</td>
-                <td>≥ 0</td>            
-            </tr>
-            <tr>
-                <td>small</td>
-                <td>≥ 640px</td>
-            </tr>
-            <tr>
-                <td>medium</td>
-                <td>≥ 960px</td>
-            </tr>
-            <tr>
-                <td>large</td>
-                <td>≥ 1024px</td>
-            </tr>
-            <tr>
-                <td>xlarge</td>
-                <td>≥ 1200px</td>
-            </tr>
-            <tr>
-                <td>xxlarge</td>
-                <td>≥ 1440px</td>
-            </tr>
-        </tbody>
-    </table>
-    <div class="docs-page__code-window" doc-tabs>
-        <div class="docs-page__window-bar">
-            <a id="example" href="#" class="active">Example</a>
-            <a id="markup" href="#">Markup</a>
-        </div>
-        <div class="docs-page__window-content">
-            <div class="docs-page__code-example">
-                <div class="docs-page__content-row"> 
-                    <div class="grid">
-                        <div class="grid__item gi-xsmall-12 gi-small-3 gi-medium-4 gi-large-1 gi-xlarge-3 gi-xxlarge-4">xsmall-12 small-3 medium-4 large-1 xlarge-3 xxlarge-4</div>
-                        <div class="grid__item gi-xsmall-12 gi-small-6 gi-medium-8 gi-large-10 gi-xlarge-3 gi-xxlarge-4">xsmall-12 small-6 medium-8 large-10 xlarge-3 xxlarge-4</div>
-                        <div class="grid__item gi-xsmall-12 gi-small-3 gi-medium-4 gi-large-1 gi-xlarge-6 gi-xxlarge-4">xsmall-12 small-3 medium-4 large-1 xlarge-6 xxlarge-4</div>
-                    </div>
-                </div>
-            </div>
-            <div class="docs-page__code-markup">
-                <pre class="prettyprint lang-html linenums">
-                    <div class="grid">
-                        <div class="grid__item gi-xsmall-12 gi-small-3 gi-medium-4 gi-large-1 gi-xlarge-3 gi-xxlarge-4">xsmall-12 small-3 medium-4 large-1 xlarge-3 xxlarge-4</div>
-                        <div class="grid__item gi-xsmall-12 gi-small-6 gi-medium-8 gi-large-10 gi-xlarge-3 gi-xxlarge-4">xsmall-12 small-6 medium-8 large-10 xlarge-3 xxlarge-4</div>
-                        <div class="grid__item gi-xsmall-12 gi-small-3 gi-medium-4 gi-large-1 gi-xlarge-6 gi-xxlarge-4">xsmall-12 small-3 medium-4 large-1 xlarge-6 xxlarge-4</div>
-                    </div>
-                </pre>
-            </div>
-        </div>
-    </div>
-
-    <h4 class="docs-page__h4">Responsive Layout grid - boxed</h4>
-    <p class="docs-page__paragraph">Boxed version is different as it has margin set between grid items, instead of padding (which is 0, by default).</p>
-    <p class="docs-page__paragraph">Add <code>grid--boxed</code> modifier class to the main grid block.</p>
-
-    <div class="docs-page__code-window" doc-tabs>
-        <div class="docs-page__window-bar">
-            <a id="example" href="#" class="active">Example</a>
-            <a id="markup" href="#">Markup</a>
-        </div>
-        <div class="docs-page__window-content">
-            <div class="docs-page__code-example">
-                <div class="docs-page__content-row"> 
-                    <div class="grid grid--boxed">
-                        <div class="grid__item gi-xsmall-12 gi-small-3 gi-medium-4 gi-large-1 gi-xlarge-3 gi-xxlarge-4">xsmall-12 small-3 medium-4 large-1 xlarge-3 xxlarge-4</div>
-                        <div class="grid__item gi-xsmall-12 gi-small-6 gi-medium-8 gi-large-10 gi-xlarge-3 gi-xxlarge-4">xsmall-12 small-6 medium-8 large-10 xlarge-3 xxlarge-4</div>
-                        <div class="grid__item gi-xsmall-12 gi-small-3 gi-medium-4 gi-large-1 gi-xlarge-6 gi-xxlarge-4">xsmall-12 small-3 medium-4 large-1 xlarge-6 xxlarge-4</div>
-                    </div>
-                </div>
-            </div>
-            <div class="docs-page__code-markup">
-                <pre class="prettyprint lang-html linenums">
-                    <div class="grid grid--boxed">
-                        <div class="grid__item gi-xsmall-12 gi-small-3 gi-medium-4 gi-large-1 gi-xlarge-3 gi-xxlarge-4">xsmall-12 small-3 medium-4 large-1 xlarge-3 xxlarge-4</div>
-                        <div class="grid__item gi-xsmall-12 gi-small-6 gi-medium-8 gi-large-10 gi-xlarge-3 gi-xxlarge-4">xsmall-12 small-6 medium-8 large-10 xlarge-3 xxlarge-4</div>
-                        <div class="grid__item gi-xsmall-12 gi-small-3 gi-medium-4 gi-large-1 gi-xlarge-6 gi-xxlarge-4">xsmall-12 small-3 medium-4 large-1 xlarge-6 xxlarge-4</div>
-                    </div>
-                </pre>
-            </div>
-        </div>
-    </div>
-    <h4 class="docs-page__h4">Responsive Layout grid - boxed styled</h4>
-    <p class="docs-page__paragraph">Styled boxed version is just with added background white and box shadow to grid items.</p>
-    <p class="docs-page__paragraph">To achieve this, grid block should have the class: <code>grid grid--boxed grid--boxed-styled</code></p>
-
-    <div class="docs-page__code-window" doc-tabs>
-        <div class="docs-page__window-bar">
-            <a id="example" href="#" class="active">Example</a>
-            <a id="markup" href="#">Markup</a>
-        </div>
-        <div class="docs-page__window-content">
-            <div class="docs-page__code-example">
-                <div class="docs-page__content-row"> 
-                    <div class="grid grid--boxed grid--boxed-styled">
-                        <div class="grid__item gi-xsmall-12 gi-small-3 gi-medium-4 gi-large-2 gi-xlarge-3 gi-xxlarge-4">xsmall-12 small-3 medium-4 large-2 xlarge-3 xxlarge-4</div>
-                        <div class="grid__item gi-xsmall-12 gi-small-6 gi-medium-8 gi-large-8 gi-xlarge-3 gi-xxlarge-4">xsmall-12 small-6 medium-8 large-8 xlarge-3 xxlarge-4</div>
-                        <div class="grid__item gi-xsmall-12 gi-small-3 gi-medium-4 gi-large-2 gi-xlarge-6 gi-xxlarge-4">xsmall-12 small-3 medium-4 large-2 xlarge-6 xxlarge-4</div>
-                    </div>
-                </div>
-            </div>
-            <div class="docs-page__code-markup">
-                <pre class="prettyprint lang-html linenums">
-                    <div class="grid grid--boxed grid--boxed-styled">
-                        <div class="grid__item gi-xsmall-12 gi-small-3 gi-medium-4 gi-large-2 gi-xlarge-3 gi-xxlarge-4">xsmall-12 small-3 medium-4 large-2 xlarge-3 xxlarge-4</div>
-                        <div class="grid__item gi-xsmall-12 gi-small-6 gi-medium-8 gi-large-8 gi-xlarge-3 gi-xxlarge-4">xsmall-12 small-6 medium-8 large-8 xlarge-3 xxlarge-4</div>
-                        <div class="grid__item gi-xsmall-12 gi-small-3 gi-medium-4 gi-large-2 gi-xlarge-6 gi-xxlarge-4">xsmall-12 small-3 medium-4 large-2 xlarge-6 xxlarge-4</div>
-                    </div>
-                </pre>
-            </div>
-        </div>
-    </div>
-    <p class="docs-page__paragraph">More examples on the <a href="#/playground/layout" target="_blank">playground page</a>.</p>
-</section>