Binary Style

The goal of the project is to serve as base style for all Binary projects, and to ensure consistency and maintainability of the brand presentation.

Usage

  • Include jQuery (Version 2.1.1) in your project
  • Include these files in your project:
        <link href="https://style.binary.com/binary.css" rel="stylesheet" />
        <script src="https://style.binary.com/binary.js"></script>
    
  • If you need Date and Time Pickers, Tabs or Accordion include the following files in your project, this will include a copy of jquery-ui@v1.12.1 and customized styles.
        <link href="https://style.binary.com/binary.more.css" rel="stylesheet" />
        <script src="https://style.binary.com/binary.more.js"></script>
    

NPM Usage

  • Install jQuery:
        npm install --save jquery
    
  • The library is available on npm:
        npm install --save binary-style
    
  • Import these files in your project:
        import 'jquery';
        import 'binary-style';
        import 'binary-style/binary.css';
    
  • If you need Date and Time Pickers, Tabs or Accordion import the following files as well, this will include a copy of jquery-ui@v1.12.1 and customized styles.
        import 'binary-style/binary.more';
        import 'binary-style/binary.more.css';
    

Header

  • English
  • English
  • Indonesia
  • Deutsch
  • Español
  • Français
  • Italiano
  • Polski
  • Português
  • Русский
  • Tiếng Việt
  • 简体中文
  • 繁體中文
                    
  <div class="topbar primary-bg-color-dark">
    <div class="languages">
      <ul id="display_language">
        <li class="EN">
          <span class="world world-white"></span>
          <span class="language">English</span>
          <span class="nav-caret"></span>
        </li>
      </ul>
      <ul id="select_language">
        <li class="EN">
          <span class="world world-black"></span>
          <span class="language">English</span>
          <span class="nav-caret"></span>
        </li>
        <li class="ID">Indonesia</li>
        <li class="DE">Deutsch</li>
        <li class="EN invisible">English</li>
        <li class="ES">Español</li>
        <li class="FR">Français</li>
        <li class="IT">Italiano</li>
        <li class="PL">Polski</li>
        <li class="PT">Português</li>
        <li class="RU">Русский</li>
        <li class="VI">Tiếng Việt</li>
        <li class="ZH_CN">简体中文</li>
        <li class="ZH_TW">繁體中文</li>
      </ul>
    </div>
  </div>
  <div class="dark-blue header">
    <div class="container">
    <div class="logo-wrapper">
    <a href="https://binary.com" class="logo-parent">
      <div class="logo">
        <div>&alt;/div>
      </div>
      <div class="mobile-hide binary-logo-text">
        <img class="responsive" src="./images/logo/type.svg">
      </div>
    </a>
    </div>
    <ul class="top-nav-menu mobile-hide">
    <li>
      <a href="javascript:;" class="nav-dropdown-toggle">
        Menu One
        <span class="nav-caret"></span>
      </a>
      <ul>
        <li>
          <a href="javascript:;" class="disabled">
            Disabled Menu Item
          </a>
        </li>
      </ul>
    </li>
    <li>
      <a href="javascript:;" class="nav-dropdown-toggle">
        Menu Two
        <span class="nav-caret"></span>
      </a>
      <ul>
        <li>
          <a href="javascript:;">
            Menu Item
            <span class="nav-submenu-caret"></span>
          </a>
          <ul>
            <li>
              <a href="javascript:;">
                Menu Item
                <span class="nav-submenu-caret"></span>
              </a>
              <ul>
                <li>
                  <a href="javascript:;">Menu Item</a>
                </li>
              </ul>
            </li>
            <li>
              <a href="javascript:;">
                Menu Item
                <span class="nav-submenu-caret"></span>
              </a>
              <ul>
                <li>
                  <a href="javascript:;">Menu Item</a>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
      <div id="main-logout">
        <ul id="main-account" class="nav-menu main-nav">
          <li class="account">
            <a href="javascript:;">
              <div class="main-account">
                <div class="account-type">Real Account</div>
                <div class="account-id">CR9010912</div>
                <div class="topMenuBalance">USD 0.00</div>
              </div>
              <div class="nav-caret"></div>
            </a>
          </li>
        </ul>
        <ul id="all-accounts-top" class="nav-menu main-nav"
        style="opacity: 0;">
          <li class="account">
            <a href="javascript:;">
              <div class="main-account">
                <div class="account-type">Real Account</div>
                <div class="account-id">CR9010912</div>
                <div class="topMenuBalance">USD 0.00</div>
              </div>
              <div class="nav-caret"></div>
            </a>
            <ul>
              <a class="link" href="javascript:;">
                <li class="topMenuProfile">Profile</li>
              </a>
              <a class="link" href="javascript:;">
                <li class="topMenuSecurity">Security & Limits</li>
              </a>
              <div class="separator-line-thin-gray"></div>
              <div class="login-id-list">
                <a href="javascript:;" value="VRTC1191226">
                  <li>
                    <div>Virtual Account</div>
                    <div>VRTC1191226</div>
                  </li>
                </a>
                <div class="separator-line-thin-gray"></div>
              </div>
              <a href="javascript:;">
                <li>Sign out</li>
              </a>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </div>
                    
                            

Logo and Favicons

Logo (separate)

Logo (combined)

Favicon

                    
    Logo (separate):
    <a class="logo-parent" href="https://binary.com">
        <div class="logo">
            <div></div>
        </div>
        <div class="mobile-hide binary-logo-text">
            <div></div>
        </div>
    </a>
    Logo (combined):
    <img src="https://style.binary.com/
                images/logo/binary_logo_dark.svg" />
    Favicon:
    <link rel="apple-touch-icon" sizes="57x57"
    href="https://style.binary.com/images/
               favicons/apple-touch-icon-57x57.png">
    <link rel="apple-touch-icon" sizes="114x114"
    href="https://style.binary.com/images/
               favicons/apple-touch-icon-114x114.png">
    <link rel="apple-touch-icon" sizes="72x72"
    href="https://style.binary.com/images/
               favicons/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="144x144"
    href="https://style.binary.com/images/
               favicons/apple-touch-icon-144x144.png">
    <link rel="apple-touch-icon" sizes="60x60"
    href="https://style.binary.com/images/
               favicons/apple-touch-icon-60x60.png">
    <link rel="apple-touch-icon" sizes="120x120"
    href="https://style.binary.com/images/
               favicons/apple-touch-icon-120x120.png">
    <link rel="apple-touch-icon" sizes="76x76"
    href="https://style.binary.com/images/
               favicons/apple-touch-icon-76x76.png">
    <link rel="apple-touch-icon" sizes="152x152"
    href="https://style.binary.com/images/
               favicons/apple-touch-icon-152x152.png">
    <link rel="apple-touch-icon" sizes="180x180"
    href="https://style.binary.com/images/
               favicons/apple-touch-icon-180x180.png">
    <link rel="icon" type="image/png" sizes="192x192"
    href="https://style.binary.com/images/
               favicons/favicon-192x192.png">
    <link rel="icon" type="image/png" sizes="160x160"
    href="https://style.binary.com/images/
               favicons/favicon-160x160.png">
    <link rel="icon" type="image/png" sizes="96x96"
    href="https://style.binary.com/images/
               favicons/favicon-96x96.png">
    <link rel="icon" type="image/png" sizes="16x16"
    href="https://style.binary.com/images/
               favicons/favicon-16x16.png" >
    <link rel="icon" type="image/png" sizes="32x32"
    href="https://style.binary.com/images/
               favicons/favicon-32x32.png" >

                  
                

Colors

Dark Blue
#15212d

Brand Blue
#2a3052

Brand Orange
#e98024

Title

Header 1

Header 1 Dark

Header 2

Header 3

                    
    <h1>Title</h1>
    <h1 class="dark">Title</h1>
    <h2>Title</h2>
    <h3>Title</h3>
                  
                

Text

paragraph with strong text

This is small font

This is extra small font

  • unordered list item 1
  • unordered list item 2
  • unordered list item 3
  • unordered list item 1
  • unordered list item 2
  • unordered list item 3
  • unordered list item 1
  • unordered list item 2
  • unordered list item 3
  1. ordered list item 1
  2. ordered list item 2
  3. ordered list item 3
                    
    <p>paragraph with<strong>strong text</strong></p>
    <p class="font-s">This is small font</p>
    <p class="font-xs">This is extra small font</p>
    <ul>
    <li>unordered list item 1</li>
    <li>unordered list item 2</li>
    <li>unordered list item 3</li>
    </ul>
    <ul class="bullet">
    <li>unordered list item 1</li>
    <li>unordered list item 2</li>
    <li>unordered list item 3</li>
    </ul>
    <ul class="checked">
    <li>unordered list item 1</li>
    <li>unordered list item 2</li>
    <li>unordered list item 3</li>
    </ul>
    <ol>
    <li>ordered list item 1</li>
    <li>ordered list item 2</li>
    <li>ordered list item 3</li>
    </ol>
                  
                

Link and Buttons

                        
      <p>paragraph with <a href="#">link</a></p>
      <p>
          <a class="button" href="#">
              <span>button link</span>
          </a>
      </p>
      <p>
          <a class="button-secondary" href="#">
              <span>button link</span>
          </a>
      </p>
      <p>
          <a class="button-disabled">
              <span>Disabled</span>
          </a>
      </p>
      <p>
          <button type="button" name="button">button</button>
      </p>
                      
                    

Messages

success message

notice message

error message

text with default tooltip

text with long tooltip
                        
    <p class="success-msg">success message</p>
    <p class="notice-msg">notice message</p>
    <p class="error-msg">error message</p>
    <span data-balloon="message">
      text with default tooltip
    </span>
    <span data-balloon="large size tooltip at bottom"
      data-balloon-length="large" data-balloon-pos="down"
      class="no-underline">
        text with long tooltip
    </span>
                      
                    

Controls

Steps

1

sample text

2

sample text

3

sample text

Section Dividers

Section 1

Section 1 text

Section 2

Section 2 text

                        
    <div class="steps">
        <div class="step">
            <div class="border-bottom"></div>
            <div class="circle">1</div>
            <div style="padding: 20px 10px;">
                <div class="center-text">
                    <img src="http://placehold.it/50x50" />
                </div>
                <p>sample text</p>
            </div>
        </div>
        <div class="step">
            <div class="border-bottom"></div>
            <div class="circle">2</div>
            <div style="padding: 20px 10px;">
                <div class="center-text">
                    <img src="http://placehold.it/50x50" />
                </div>
                <p>sample text</p>
            </div>
        </div>
        <div class="step">
            <div class="border-bottom"></div>
            <div class="circle">3</div>
            <div style="padding: 20px 10px;">
                <div class="center-text">
                    <img src="http://placehold.it/50x50" />
                </div>
                <p>sample text</p>
            </div>
        </div>
    </div>

    <div class="section-divider">
        <div class="align-self-center border-bottom-light-gray"></div>
        <div class="faded">Section 1</div>
        <div class="align-self-center border-bottom-light-gray"></div>
    </div>
    <p>Section 1 text</p>
    <div class="section-divider">
        <div class="align-self-center border-bottom-light-gray"></div>
        <div class="faded">Section 2</div>
        <div class="align-self-center border-bottom-light-gray"></div>
    </div>
    <p>Section 2 text</p>
                      
                    

Spinner

use over a transparent background:

use over a dark background:

                        
    use over a transparent background:
    <div class="barspinner dark">
        <div class="rect1"></div>
        <div class="rect2"></div>
        <div class="rect3"></div>
        <div class="rect4"></div>
        <div class="rect5"></div>
    </div>
    use over a dark background:
    <div class="barspinner white">
        <div class="rect1"></div>
        <div class="rect2"></div>
        <div class="rect3"></div>
        <div class="rect4"></div>
        <div class="rect5"></div>
    </div>
                      
                    

Table

Header Header
Footer Footer
1 data 1
2 data 2
                        
      <table>
          <thead>
              <tr>
                  <th>Header</th>
                  <th>Header</th>
              </tr>
          </thead>
          <tfoot>
              <tr>
                  <th>Footer</th>
                  <th>Footer</th>
              </tr>
          </tfoot>
          <tbody>
              <tr>
                  <td>1</td>
                  <td>data 1</td>
              </tr>
              <tr>
                  <td>2</td>
                  <td>data 2</td>
              </tr>
          </tbody>
      </table>
                      
                    

Form

Hint comes here

                        
  <select>
    <option value="" selected="selected">Option 1</option>
    <option value="">Option 2</option>
     <option value="">Option 3</option>
  </select>

  <input type='text'/>
  <p class='hint'>Hint comes here</p>

  <textarea name="name" rows="8" cols="40"></textarea>
                      
                    

Accordion

Section 1

Contents of section 1

Section 2

Contents of section 2
                        
  <div id="accordion">
    <h3>Section 1</h3>
    <div>Contents of section 1</div>
    <h3>Section 2</h3>
    <div>Contents of section 2</div>
  </div>

  <script type="text/javascript">
    $('#accordion').accordion({
      heightStyle : 'content',
      collapsible : true,
      active      : false
    });
  </script>
                      
                    

Tabs

Tabs:

Contents of tab 1
Contents of tab 2

Tabs with subsections:

                        
  Tabs:
  <div class="has-tabs">
    <ul>
      <li><a href="#tab_1">Tab 1</a></li>
      <li><a href="#tab_2">Tab 2</a></li>
    </ul>
    <div id="tab_1">
      Contents of tab 1
    </div>
    <div id="tab_2">
      Contents of tab 2
    </div>
  </div>

  <script type="text/javascript">
    $('.has-tabs').tabs();
  </script>

  Tabs with subsections:
  <div class="content-tab-container
                      tab-with-subsection">
    <div class="tab-menu">
      <div class="tab-menu-wrap">
        <ul class="tm-ul">
          <li id="first-tab"
                 class="tm-li active first">
            <span class="menu-wrap-a">
              <span class="menu-wrap-b">
                <a class="tm-a first
                            a-active">Tab 1</a>
              </span>
            </span>
            <ul class="tm-ul-2">
              <li id="first-tab-subsection-one"
                     class="tm-li-2 first">
                <span class="tm-a-2 a-active">
                  Subsection of tab 1
                </span>
              </li>
            </ul>
          </li><li id="second-tab"
                            class="tm-li">
            <a href="javascript:;"
                  class="tm-a">Tab 2</a>
          </li>
        </ul>
      </div>
    </div>
    <div class="tab-content">
      <div class="tab-content-wrapper
                          menu-has-sub-item">
        <div id="first-tab-subsection-one-content"
                class="toggle-content">
          Contents of tab 1
        </div>
        <div id="second-tab-content"
                class="toggle-content invisible">
          Contents of tab 2
        </div>
      </div>
    </div>
  </div>
                      
                    

Icons

                        
  <div class="f-item chartOptions_button">
    <span class = "templateButton"
          data-balloon="Candles" data-balloon-pos="down">
      <div class="img">
        <div
        class="candlestick-icon">
        </div>
      </div>
    </span>
  </div>
  <div class="f-item chartOptions_button button_selected">
    <span class = "templateButton"
          data-balloon="Candles" data-balloon-pos="down">
      <div class="img">
        <div
        class="candlestick-icon">
        </div>
    </span>
  </div>
                      
                    

Symbols

12,345.00

12,345.00

12,345.00

12,345

12,345.00

0.005

0.005

0.005

0.005

0.005

                                
    <span class="symbols aud"></span>12,345.00
    <span class="symbols eud"></span>12,345.00
    <span class="symbols gbp"></span>12,345.00
    <span class="symbols jpy"></span>12,345
    <span class="symbols usd"></span>12,345.00
    <span class="symbols btc"></span>0.005
    <span class="symbols bch"></span>0.005
    <span class="symbols eth"></span>0.005
    <span class="symbols etc"></span>0.005
    <span class="symbols ltc"></span>0.005
                                
                            

Date and Time Pickers

Date Picker:

Time Picker:

                                
  Date Picker:
  <input type="text" id="date-picker" size="12" readonly="readonly"/>
  Time Picker:
  <input type="text" id="time-picker" size="12" maxLength="5"/>
  <script type="text/javascript">
  var date = new Date();
  $('#date-picker').datepicker({
    dateFormat: 'dd M, yy',
    changeMonth: true,
    changeYear: true,
    minDate: date,
  });
  $("#time-picker")
    .on('click', function() {
      date = new Date();
      $(this).timepicker('destroy').timepicker({
        minTime: {
          hour: date.getHours(),
          minute: date.getMinutes()
        }
      });
    })
    .on('keypress', debounce(function(time) {
      var regex = new RegExp(time);
      if (!/^(0[0-9]|1[0-9]|2[0-3]):[0-5][0-9]$/.test(regex)) {
        $('#time-picker').parent().append($('

', {class: 'error-msg', text: 'Time is invalid'})); } })); }); </script>