Development

Button

Euroflorist DS uses different predefined button styles, each serving its own purpose.

Use one of those tags: <a>, <button>, <input> to create button, avoid tags which are not focusable. Thanks to that website accessibility will be increased.

Default

<button type="button" class="btn btn-primary">Primary</button>

Default disabled

<button type="button" class="btn btn-primary" disabled>Button</button>

Ghost

<button type="button" class="btn btn-ghost">Button</button>

Ghost disabled

<button type="button" class="btn btn-ghost" disabled>Button</button>

Outline

<button type="button" class="btn btn-outline-dark">Button</button>

Outline disabled

<button type="button" class="btn btn-outline-dark" disabled>Button</button>

Checkbox

Euroflorist DS define one type of checkbox, which is prepared for all states and can be modified for need.

Default

<div class="form-check">
    <input class="form-check-input" type="checkbox" id="default-checkbox">
    <label class="form-check-label" for="default-checkbox">Default checkbox</label>
</div>

Disabled

<div class="form-check">
    <input class="form-check-input" type="checkbox" id="disabled-checkbox-1" disabled checked>
    <label class="form-check-label" for="disabled-checkbox-1">Disabled checkbox</label>
</div>

<div class="form-check">
    <input class="form-check-input" type="checkbox" id="disabled-checkbox-2" disabled>
    <label class="form-check-label" for="disabled-checkbox-2">Disabled checkbox</label>
</div>

Collapse

The collapse element was created to show and hide content. To use it in the project copy template below.

Id attribute for the .collapse element should be unique and put as a value for the href attribute of .panel-title element.

To initialize collapse use a function with parameter as a selector of .panel element. There can be an id (for single elements) or a class (for group elements). For class name, it is recommended to write a prefix js-.

Initialize modal via JavaScript:

CollapsePanel.init('#product-panel');
Product information
The epitome of spring. Hot pinks mingled with yellow freesia, fragrant blue hyacinth, tulips and orange roses to make a stunning arrangement, sure to impress. Packed up whilst still the flowers are still in bud so the flowers remain fresh for longer.The epitome of spring. Hot pinks mingled with yellow freesia, fragrant blue hyacinth, tulips and orange roses to make a stunning arrangement, sure to impress. Packed up whilst still the flowers are still in bud so the flowers remain fresh for longer. The epitome of spring. Hot pinks mingled with yellow freesia, fragrant blue hyacinth, tulips and orange roses to make a stunning arrangement, sure to impress. Packed up whilst still the flowers are still in bud so the flowers remain fresh for longer. 
<div id="product-panel" class="panel">
    <div class="panel-heading">
        <a class="panel-title" role="button" href="#product-info">Product information</a>
    </div>
    <div id="product-info" class="collapse">
        <div class="panel-body">
            The epitome of spring. Hot pinks mingled with yellow freesia, fragrant blue hyacinth, tulips
            and orange roses to make a stunning arrangement, sure to impress. Packed up whilst still the
            flowers are still in bud so the flowers remain fresh for longer.The epitome of spring. Hot pinks 
            mingled with yellow freesia, fragrant blue hyacinth, tulips and orange roses to make a stunning arrangement,
            sure to impress. Packed up whilst still the flowers are still in bud so the flowers remain fresh for longer.
            The epitome of spring. Hot pinks mingled with yellow freesia, fragrant blue hyacinth, 
            tulips and orange roses to make a stunning arrangement, sure to impress. 
            Packed up whilst still the flowers are still in bud so the flowers remain fresh for longer.
        </div>
    </div>
</div>

Cursor

Generic cursor classes allow to quickly change a cursor behavior without creating dedicated classes in code for elements, which need that type of cursor.

The following table presents the values for the CSS property cursor :
.clickable pointer
.not-allowed not-allowed 
<div class="clickable"></div>
<div class="not-allowed"></div>

Display

Generic display classes allow to quickly change property without creating dedicated classes in code for elements, which need that type of cursor.

The following table presents the values for the CSS property display :
.block block
.inline inline
.inline-block inline-block

Block

<div class="block"></div>
<div class="block"></div>
<div class="block"></div>

Inline

<div class="inline"></div>
<div class="inline"></div>
<div class="inline"></div>

Inline-block

<div class="inline-block"></div>
<div class="inline-block"></div>
<div class="inline-block"></div>

Dropdown

A dropdown receives user input, allowing it to choose one of several options. The DS library included three types of dropdown presented below.

Native

The native dropdown should be used for checkout flow or for dropdowns where is a lot of options. It will be more friendly user experience.

<div class="dropdown dropdown-select">
    <select class="dropdown-select-btn">
        <option value="native-1">Item 1</option>
        <option value="native-2">Item 2</option>
        <option value="native-3">Item 3</option>
        <option value="native-4">Item 4</option>
        <option value="native-5">Item 5</option>
        <option value="native-6">Item 6</option>
        <option value="native-7">Item 7</option>
        <option value="native-8">Item 8</option>
        <option value="native-9">Item 9</option>
        <option value="native-10">Item 10</option>
    </select>
</div>

Custom

The custom dropdown can be used, that contains a few options, for example, sorting function.

Initialize modal via JavaScript:

new SingleDropdown('#dropdown');

<div class="dropdown">
    <select id="dropdown" class="dropdown-select-btn">
        <option value="native-1">Item 1</option>
        <option value="native-2">Item 2</option>
        <option value="native-3">Item 3</option>
        <option value="native-4">Item 4</option>
        <option value="native-5">Item 5</option>
        <option value="native-6">Item 6</option>
        <option value="native-7">Item 7</option>
        <option value="native-8">Item 8</option>
        <option value="native-9">Item 9</option>
        <option value="native-10">Item 10</option>
    </select>
</div>

Multiselect

The custom multi-select dropdown can be used, where user can choose more than one option, for example, filter function. It is important to include title attribute in select tag because the value of this attribute will be used as a placeholder text.

Initialize modal via JavaScript:

new MultipleDropdown('#multi-dropdown');

<div class="dropdown">
    <select id="multi-dropdown" title="Select Multiple" multiple class="dropdown-select-btn">
        <option value="native-1">Item 1</option>
        <option value="native-2">Item 2</option>
        <option value="native-3">Item 3</option>
        <option value="native-4">Item 4</option>
        <option value="native-5">Item 5</option>
        <option value="native-6">Item 6</option>
        <option value="native-7">Item 7</option>
        <option value="native-8">Item 8</option>
        <option value="native-9">Item 9</option>
        <option value="native-10">Item 10</option>
    </select>
</div>

Float

Change how an element is positioned within the layout using float and clear generic classes.

Using float classes remember to add .clearfix to the parent element.

The following table presents the CSS property float:
.float-none none
.float-left left
.float-right right 
<div class="clearfix">
    <div class="float-none"></div>
    <div class="float-left"></div>
    <div class="float-right"></div>
</div>

Form Field

Default form field size uses a height of 48px, small forms use a height of 36px (add .form-control-sm).

Default

<div class="form-group">
    <input class="form-control" type="text">
    <label class="form-label" for="">Text label</label>
</div>

<div class="form-group has-success">
    <input class="form-control" type="text">
    <label class="form-label" for="">Text label</label>
</div>

<div class="form-group has-error">
    <input class="form-control" type="text">
    <label class="form-label" for="">Text label</label>
</div>

<div class="form-group">
    <input class="form-control" type="text" disabled="">
    <label class="form-label" for="">Text label</label>
</div>

With helper text

Helper text
Helper text
Helper text
Helper text 
<div class="form-group-container">
    <div class="form-group">
        <input class="form-control" type="text">
        <label class="form-label" for="">Text label</label>
    </div>
    <span class="form-group-message">Helper text</span>
</div>

<div class="form-group-container">
    <div class="form-group has-success">
        <input class="form-control" type="text">
        <label class="form-label" for="">Text label</label>
    </div>
    <span class="form-group-message">Helper text</span>
</div>

<div class="form-group-container">
    <div class="form-group has-error">
        <input class="form-control" type="text">
        <label class="form-label" for="">Text label</label>
    </div>
    <span class="form-group-message">Helper text</span>
</div>

<div class="form-group-container">
    <div class="form-group">
        <input class="form-control" type="text" disabled="">
        <label class="form-label" for="">Text label</label>
    </div>
    <span class="form-group-message">Helper text</span>
</div>

Textarea

Helper text
Helper text
Helper text 
<div class="form-group">
    <div class="group">
        <label class="form-label-normal" for="">Text label</label>
        <textarea class="form-control form-control-textarea"></textarea>
    </div>
    <span class="form-group-message form-group-message-right">Helper text</span>
</div>

<div class="form-group form-group-textarea has-success">
    <div class="group">
        <label class="form-label-normal" for="">Text label</label>
        <textarea class="form-control form-control-textarea"></textarea>
    </div>
    <span class="form-group-message form-group-message-right">Helper text</span>
</div>

<div class="form-group form-group-textarea has-error">
    <div class="group">
        <label class="form-label-normal" for="">Text label</label>
        <textarea class="form-control form-control-textarea"></textarea>
    </div>
    <span class="form-group-message form-group-message-right">Helper text</span>
</div>

Grid System

Euroflorist DS Framework includes a responsive, mobile-first fluid grid system based on 12 columns. Predefined classes are easy to implement layout options.

Implementing

There are few rules to properly create page layouts through a series of rows and columns.

  • Columns must be placed within a .row element for right alignment.
  • Rows can be used to create horizontal groups of columns.
  • Grid columns are created by specifying the number of twelve available columns you wish to span. For example: .col-xs-6 (50% of the width).
  • If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.

Classes

Euroflorist DS Grid System contains a group of flexible classes to prepare layout fitted to mobile devices the same as on desktop.

Wrap your grid by element with one of those class:
.container fixed-width (max-width: 1200px)
.container-fluid full-width

Build the responsive layout base on below classes:
.col-xs-* Extra small <768px
.col-sm-* Small devices ≥768px
.col-md-* Medium devices ≥992px
.col-lg-* Large devices ≥1200px

Hide or show elements using classes below:
.display Show for all resolution
.display-none Hide for all resolution
.display-tablet-block Show resolution ≥768px
.display-tablet-none Hide resolution ≥768px
.display-desktop-block Show resolution ≥992px
.display-desktop-none Hide resolution ≥992px
.display-lg-block Show resolution ≥1200px
.display-lg-none Hide resolution ≥1200px

Example

<div class="row">
    <div class="col-md-1"></div>
    <div class="col-md-1"></div>
    <div class="col-md-1"></div>
    <div class="col-md-1"></div>
    <div class="col-md-1"></div>
    <div class="col-md-1"></div>
    <div class="col-md-1"></div>
    <div class="col-md-1"></div>
    <div class="col-md-1"></div>
    <div class="col-md-1"></div>
    <div class="col-md-1"></div>
    <div class="col-md-1"></div>
  </div>
  <div class="row">
    <div class="col-md-8"></div>
    <div class="col-md-4"></div>
  </div>
  <div class="row">
    <div class="col-md-4"></div>
    <div class="col-md-4"></div>
    <div class="col-md-4"></div>
  </div>
  <div class="row">
    <div class="col-md-6"></div>
    <div class="col-md-6"></div>
  </div>

Image

Images are made responsive with .img-responsive thanks to that class the image will be scaling with the parent element.

... 
<div>
    <img class="img-responsive" src="kss-assets/image/placeholder_gray_200x200.png" alt="...">
</div>

List styles

List inline

Remove a list’s bullets and apply some light margin with a combination of two classes, .list-inline and .list-inline-item.

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

List unstyled

Remove bullets from an unordered list or numbers from an ordered list by applying .list-unstyled to the <ul>.

  • First
  • Second
  • Third
<ul class="list-unstyled">
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
</ul>

Modal

Modals are built with HTML, CSS, and JavaScript and they’re positioned over everything else in the document. That means there is a need to build an HTML structure of modal (based on the examples below) and put it in DOM, no matter in which place because modal will be moved to the bottom of HTML document.

In the button, which fire modal, there should be the date attribute data-modal with the modal's id as a value. Example:

<button id="idButton" type="button" data-modal="modal">Modal</button>

Initialize modal via JavaScript:

new Modal('#idButton');

If there is a need to fire modal by different buttons - use the dedicated class name. Example:

<button class="js-modal-btn" type="button" data-modal="modal">Modal</button>
<button class="js-modal-btn" type="button" data-modal="modal">Modal</button>
<script>
  new Modal('.js-modal-btn');
</script>

Default

<button id="modalBtn" type="button" class="btn btn-primary" data-modal="modal">Modal</button>

<div class="modal" id="modal">
    <div class="modal-dialog">
        <div class="modal-body">
            <button type="button" class="close" data-dismiss="modal">
                <i class="icon-cross"></i>
            </button>
            <h3 class="modal-title">This is a title heading</h3>
            <p class="modal-content">Välkommen! Det är jag som är FloristFia och det här min oas, en plats
                för dig som tycker om blommor och vill ha inspiration till allt vackert du kan göra med
                dem. Här delar jag med mig av mina bästa tips och visar hur du gör allt från vackra
                bordsdukningar till ljuvliga buketter med säsongens blommor.</p>
            <div class="modal-btn">
                <button type="button" class="btn btn-ghost-dark btn-sm" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-secondary btn-sm">Save</button>
            </div>
        </div>
    </div>
</div>

Small

<button id="modalBtn2" type="button" class="btn btn-primary" data-modal="modal2">Small Modal</button>

<div class="modal" id="modal2">
    <div class="modal-dialog">
        <div class="modal-body">
            <button type="button" class="close" data-dismiss="modal">
                <i class="icon-cross"></i>
            </button>
            <p class="modal-content">Välkommen! Det är jag som är FloristFia och det här min oas, en plats
                för dig som tycker om blommor.</p>
        </div>
    </div>
</div>

Content

<button id="modalBtn3" type="button" class="btn btn-primary" data-modal="modal3">Content Modal</button>

<div class="modal" id="modal3">
    <div class="modal-dialog">
        <div class="modal-body">
            <button type="button" class="close" data-dismiss="modal">
                <i class="icon-cross"></i>
            </button>
            <h3 class="modal-title">This is a title heading</h3>
            <p class="modal-content">
                <input class="form-control form-control-sm" type="text" placeholder="Input modal">
            </p>
            <div class="modal-btn">
                <button type="button" class="btn btn-ghost-dark btn-sm" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-secondary btn-sm">Save</button>
            </div>
        </div>
    </div>
</div>

Position

Change an element’s position using generic positioning classes.

<div class="relative">
    <div class="absolute"></div>
</div>

Prevent events

Generic utilities class no-events causes the element to not be the target of pointer events.

<input class="no-events btn btn-primary" type="button" onclick="Alert(Euroflorist.com);" value="Click on me">

Radio Button

Euroflorist DS define one type of checkbox, which is prepared for all states.

Default

<div class="form-radio">
    <input class="form-radio-input" type="radio" name="default-radio" id="default-radio-1"  value="option-1" checked>
    <label class="form-radio-label" for="default-radio-1">Default Radio Button 1</label>
</div>

<div class="form-radio">
    <input class="form-radio-input" type="radio" name="default-radio" id="default-radio-2" value="option-2">
    <label class="form-radio-label" for="default-radio-2">Default Radio Button 2</label>
</div>

Spinner

Spinner is a simple circle spinning around its own centre.

<i class="spinner"></i>

Text alignment

Use text alignment utilities to left align, centre, right align text or justify text.

Center

Everyone’s favourite flower is back, but only for a short time. This simply beautiful bouquet of blush pink peonies, complemented with gypsophila is the ideal gift this peony season.

<p class="text-center">Everyone’s favourite flower is back, but only for a short time. This simply beautiful bouquet of
    blush pink peonies, complemented with gypsophila is the ideal gift this peony season.</p>

Justify

Everyone’s favourite flower is back, but only for a short time. This simply beautiful bouquet of blush pink peonies, complemented with gypsophila is the ideal gift this peony season.

<p class="text-justify">Everyone’s favourite flower is back, but only for a short time. This simply beautiful bouquet of
    blush pink peonies, complemented with gypsophila is the ideal gift this peony season.</p>

Left

Everyone’s favourite flower is back, but only for a short time. This simply beautiful bouquet of blush pink peonies, complemented with gypsophila is the ideal gift this peony season.

<p class="text-left">Everyone’s favourite flower is back, but only for a short time. This simply beautiful bouquet of
    blush pink peonies, complemented with gypsophila is the ideal gift this peony season.</p>

Right

Everyone’s favourite flower is back, but only for a short time. This simply beautiful bouquet of blush pink peonies, complemented with gypsophila is the ideal gift this peony season.

<p class="text-right">Everyone’s favourite flower is back, but only for a short time. This simply beautiful bouquet of
    blush pink peonies, complemented with gypsophila is the ideal gift this peony season.</p>

Tooltip

Euroflorist Design System is using Tippy.js library to create simple static text tooltips. Hover over the buttons below to see the four tooltips directions: top, right, bottom, and left.

<button type="button" class="btn btn-primary" data-tippy="Tooltip" data-tippy-content="Tooltip" data-tippy-arrow="true"
    data-tippy-placement="top">
    Tooltip on top
</button>

<button type="button" class="btn btn-primary" data-tippy="Tooltip" data-tippy-content="Tooltip" data-tippy-arrow="true"
    data-tippy-placement="bottom">
    Tooltip on down
</button>

<button type="button" class="btn btn-primary" data-tippy="Tooltip" data-tippy-content="Tooltip" data-tippy-arrow="true"
    data-tippy-placement="left">
    Tooltip on left
</button>

<button type="button" class="btn btn-primary" data-tippy="Tooltip" data-tippy-content="Tooltip" data-tippy-arrow="true"
    data-tippy-placement="right">
    Tooltip on right
</button>