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
<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 class="nav-dropdown-toggle">
<a href="javascript:;">
Menu One
<span class="nav-caret"></span>
</a>
<ul>
<li>
<a href="javascript:;" class="disabled">
Disabled Menu Item
</a>
</li>
</ul>
</li>
<li class="nav-dropdown-toggle">
<a href="javascript:;">
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):
<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
- ordered list item 1
- ordered list item 2
- 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>
Controls
Steps
1
sample text
2
sample text
3
sample text
Section Dividers
Section 1
Section 1 text
Section 2
Section 2 text
Or
Section 3 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>
<div class="section-divider">
<div class="align-self-center border-bottom-light-gray"></div>
<div class="circle">Or</div>
<div class="align-self-center border-bottom-light-gray"></div>
</div>
<p>Section 3 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 id="dropdown">
<option value="option1" selected>Option 1</option>
<option value="option2">Option 2</option>
<option value="option3" disabled>Option 3</option>
</select>
<script type=">text/javascript">>
selectDropdown('#dropdown');
</script>
<input id="options" type="checkbox" value="option1"/>
<label for="options">Option 1</label>
<input id="options" type="checkbox" value="option2"/>
<label for="options">Option 2</label>
<input id="options" type="checkbox" value="option3"/>
<label for="options">Option 3</label>
<input id="radio1" type="radio" value="option1" name="radio"/>
<label for="radio1">Option 1</label>
<input id="radio2" type="radio" value="option2" name="radio"/>
<label for="radio2">Option 2</label>
<input id="radio3" type="radio" value="option3" name="radio"/>
<label for="radio3">Option 3</label>
<input type="text"/>
<p class="hint">Hint comes here</p>
<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:
<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
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
<span class="symbols ust"></span>0.005
<span class="symbols usb"></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>