Introduction

In a concern for the internal development of BIMDATA, one of the objectives of the company is to refine the identity of the brand and apply it consistently to our various tools. So we created this style guide for this purpose. It allows us to build a central location where we host various components, code snippets, and so on.

Code Guidelines

Add Classes


                .flex-container{
                  @include flexbox; @include justify-content(space-around); @include flex-flow(row wrap);
                }
              

                flex-container_equal{
                  @include flexbox; @include justify-content(center);
                }

Color Scheme

Brand Colors

Primary Color HEX: #2f374a RGB: 47,55,74 SCSS: $color-primary
Secondary Color HEX: #f9c72c RGB: 249,199,44 SCSS: $color-secondary
Text Color HEX: #94979a RGB: 148,151,154 SCSS: $color-text
Background Color HEX: #f7f7f7 RGB: 247,247,247 SCSS: $color-background
Light Primary Color
HEX: #434e69 RGB: 67, 78, 105 SCSS: $color-primary-l10
HEX: #576588 RGB: 87, 101, 136 SCSS: $color-primary-l20
HEX: #6f7ea3 RGB: 111, 126, 163 SCSS: $color-primary-l30
Light Secondary Color
HEX: #fad45e RGB: 250, 212, 94 SCSS: $color-secondary-l10
HEX: #fce18f RGB: 252, 225, 143 SCSS: $color-secondary-l20
HEX: #fdeec1 RGB: 253, 238, 193 SCSS: $color-secondary-l30
Light Text Color
HEX: #aeb1b3 RGB: 174, 177, 179 SCSS: $color-text-l10
HEX: #c8cacc RGB: 200, 202, 204 SCSS: $color-text-l20
HEX: #e3e4e4 RGB: 227, 228, 228 SCSS: $color-text-l30
Light Black Color
HEX: #1a1a1a RGB: 26, 26, 26 SCSS: $color-black-l10
HEX: #333333 RGB: 51, 51, 51 SCSS: $color-black-l20
HEX: #4d4d4d RGB: 77, 77, 77 SCSS: $color-black-l30
Dark Primary Color
HEX: #252b3a RGB: 37, 43, 58 SCSS: $color-primary-d5
HEX: #1b202b RGB: 27, 32, 43 SCSS: $color-primary-d10
HEX: #11141b RGB: 17, 20, 27 SCSS: $color-primary-d15
HEX: #07090c RGB: 7, 9, 12 SCSS: $color-primary-d20
Dark Secondary Color
HEX: #ebb407 RGB: 235, 180, 7 SCSS: $color-secondary-d10
HEX: #d3a106 RGB: 211, 161, 6 SCSS: $color-secondary-d15
HEX: #ba8e05 RGB: 186, 142, 5 SCSS: $color-secondary-d20
Dark Text Color
HEX: #7a7e81 RGB: 122, 126, 129 SCSS: $color-text-d10
HEX: #616467 RGB: 97, 100, 103 SCSS: $color-text-d20
HEX: #484b4d RGB: 72, 75, 77 SCSS: $color-text-d30
Dark Background Color
HEX: #dedede RGB: 222, 222, 222 SCSS: $color-background-d10
HEX: #c4c4c4 RGB: 196, 196, 196 SCSS: $color-background-d20
HEX: #ababab RGB: 171, 171, 171 SCSS: $color-background-d30

UI Colors

Note Picto Color HEX: #2f374a
Warning Picto Color HEX: #f9c72c
Important Picto Color HEX: #4dbd74
Note Background Color HEX: #eff7ff
Warning Background Color HEX: #fff9e7
Important Background Color HEX: #eafff1

Typography

Typefaces

BIMDATA primary typeface is Roboto.

a b c d e f g h i j k l m n o p q r s t u v w x y z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9 
$font-primary

Font Sizes

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

20px — Titre premier niveau

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

18px — Titre deuxième niveau

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

16px — Titre troisième niveau

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

15px — Titre quatrième niveau

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

14px — Paragraphe 
h1{@include font-size(20px);}
h2{@include font-size(18px);}
h3{@include font-size(16px);}
h4{@include font-size(15px);}
p{@include font-size(14px);}

Font Weight

Aa

Roboto Bold

Aa

Roboto Medium

Aa

Roboto Regular 
h1, h3{font-family: $font-primary_bold;}
h2, h4{font-family: $font-primary_medium;}
p{font-family: $font-primary;}

Admonitions

Note

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Warning

Reiciendis, dolorum totam cumque consectetur repellat amet facere.

Important

Magnam, nostrum odit quae a rerum voluptas tucomtamque.


              <div class="admonition example note">
                <p class="admonition-title first">Note</p>
                <p class="admonition-text last">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
              </div>
              

              <div class="admonition example warning">
                <p class="admonition-title first">Warning</p>
                <p class="admonition-text last">Reiciendis, dolorum totam cumque consectetur repellat amet facere.</p>
              </div>
              

              <div class="admonition example important">
                <p class="admonition-title first">Important</p>
                <p class="admonition-text last">Magnam, nostrum odit quae a rerum voluptas tucomtamque.</p>
              </div>

Buttons

Button style

Button Action Primary
Button Action Secondary
Button Action Shadow
Button Action Picto 
<button class="btn btn-primary">button 01</button>
<button class="btn btn-secondary">button 02</button>
<button class="btn btn-shadow">button 03</button>
<button class="base-button-icon"><svg version="1.1" viewBox="" class="svg-icon svg-fill is-close" style=""></svg></button>

Buttons height

There are three different heights of buttons: small, medium and large. Use these names with the primary and secondary buttons seen above to adjust the height of your button.

<button type="button" class="btn btn-primary btn-primary_small">Button Primary Small</button>
<button type="button" class="btn btn-primary btn-primary_medium">Button Primary Medium</button>
<button type="button" class="btn btn-primary btn-primary_large">Button Primary Large</button>

Cards

Card

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit molestias distinctio nihil quasi ipsam sapiente doloribus velit porro ad dicta fugit in, nobis commodi similique adipisci ullam voluptatem accusantium. Debitis.


                  <div class="card">
                    <div class="card-header">
                      <h2>Title</h2>
                    </div>
                    <div class="card-body">
                      <p>some text here</p>
                    </div>
                  </div>

Base card

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi, enim. Exercitationem pariatur, quaerat architecto facilis cumque sapiente optio autem, accusantium, at qui quia laudantium facere similique quibusdam..


                  <div class="base-card">
                    <div class="base-card__header">
                      <div class="base-card__title-container">
                          <h2>Title</h2>
                      </div>
                    </div>
                    <div class="base-card__content">
                      <p>some text here</p>
                    </div>
                  </div>

Card Horizontal

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Try it

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Try it 

                    <div class="flex-container">
                      <div class="card-horizontal col-6">
                        <div class="card-horizontal_content">
                          <h3>Title</h3>
                          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                          <a href="#" rel="noopener noreferrer" class="action-button">Try it
                            <span class="arrow"></span>
                          </a>
                        </div>
                      </div>
                    </div>

Card Vertical

BIMDATA - picto building

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Try it
BIMDATA - picto building

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Try it
BIMDATA - picto building

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Try it 

                    <div class="flex-container_equal">
                      <div class="card-horizontal text-center">
                        <div class="card-horizontal_content">
                          <img src="dist/img/bimdata_picto-immeuble.svg" alt="BIMDATA - picto building">
                          <h2 class="text-center">Title</h2>
                          <span></span>
                          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                          <a href="#" rel="noopener noreferrer" class="btn btn-primary">Try it</a>
                        </div>
                      </div>
                    </div>

Forms

mon message d'erreur 

              <div class="base-input-text-material">
                <input type="text" name="name" required="" id="id_name">
                <span class="bar"></span>
                <label for="id_name">
                  mon super label
                </label>
                <span class="base-error-text">mon message d'erreur</span>
              </div>
              <div class="base-input-text-material">
                <input type="password" name="password1" required="" id="id_password1">
                <span class="bar"></span>
                <label for="id_password1">
                  Password <span class="asterisk">*</span>
                </label>
                <span class="show-password"></span>
                <span class="base-error-text"></span>
              </div>

Initials

GL
<div class="initials">GL</div>

Loaders

Loader Components

Loading


              <div class="loader">
                <div class="lds-dual-ring"></div>
              </div>

              <div class="loader loader-layout">
                <p class="loader-layout__text">Loading</p>
                <div class="lds-dual-ring"></div>
              </div>

Loader Blob


                <div class="loader-blobs">
                    <div class="blob-center"></div>
                    <div class="blob"></div>
                    <div class="blob"></div>
                    <div class="blob"></div>
                    <div class="blob"></div>
                    <div class="blob"></div>
                    <div class="blob"></div>
                    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
                      <defs>
                        <filter id="goo">
                          <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
                          <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" result="goo" />
                          <feBlend in="SourceGraphic" in2="goo" />
                        </filter>
                      </defs>
                    </svg>
                  </div>

Scrollbar

Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse, officiis repellendus? Doloremque quod corporis officia qui asperiores ea exercitationem alias pariatur veritatis amet aperiam recusandae vero, assumenda unde iste soluta! Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse, officiis repellendus? Doloremque quod corporis officia qui asperiores ea exercitationem alias pariatur veritatis amet aperiam recusandae vero, assumenda unde iste soluta! Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse, officiis repellendus? Doloremque quod corporis officia qui asperiores ea exercitationem alias pariatur veritatis amet aperiam recusandae vero, assumenda unde iste soluta!


                /* width */
                ::-webkit-scrollbar {
                  width: 7px;
                }

                /* Track */
                ::-webkit-scrollbar-track {
                  background: #D8D8D8;
                }

                /* Handle */
                ::-webkit-scrollbar-thumb {
                  background: $color-primary;
                }

                /* Handle on hover */
                ::-webkit-scrollbar-thumb:hover {
                  background: #555;
                }

Switch


                <div class="switch-component">
                  <label class="switch">
                    <input type="checkbox">
                    <span class="slider round"></span>
                  </label>
                </div>

Tables

Fields description
Field name Description
Name sets the name of your application
Response Type sets the way of authenticating, see the Authentication documentation content to learn more.
Scopes lists every granted access for your application on the data to learn more. 

              <table border="0">
                <caption>
                  <span class="caption-text">Fields description</span>
                </caption>
                <thead valign="bottom">
                  <tr class="row-odd">
                    <th class="head">Field name</th>
                    <th class="head">Description</th>
                  </tr>
                </thead>
                <tbody valign="top">
                  <tr class="row-even">
                    <td>Name</td>
                    <td>sets the name of your application</td>
                  </tr>
                  <tr class="row-odd">
                    <td>Response Type</td>
                    <td>sets the way of authenticating, see the Authentication documentation content to learn more.</td>
                  </tr>
                  <tr class="row-even">
                    <td>Scopes</td>
                    <td>lists every granted access for your application on the data to learn more.</td>
                  </tr>
                </tbody>
              </table>

Toolbar

Demo 

            <div class="col-12 toolbar-content example">
              <div class="top-toolbar__choice-list-items">
                <div class="choice-list">
                  <div class="choice-list__field-selected">
                    <span class="choice-list__field-selected__icon">
                      <svg version="1.1" viewBox="" class="icon svg-icon svg-fill" style=""> </svg>
                    </span>
                    <span class="choice-list__field-selected__text-selected">
                      Demo
                    </span>
                    <span class="choice-list__field-selected__display-icon">
                      <svg version="1.1" viewBox="" class="icon svg-icon svg-fill" style=""> </svg>
                    </span>
                  </div>
                </div>
              </div>
            </div>

Valide / Delete

done clear 

              <div class="base-valid-delete">
                <span class="check">
                  <svgicon name="check" height="15" width="18"></svgicon>
                </span>
                <span class="check-cross">
                  <svgicon name="close" height="13" width="13"></svgicon>
                </span>
              </div>