Colors
Primary
Secondary
Tertiary
Feedback
Hover
Console
Partnership - Coke/Byte
.bg {
&--scuf-orange { background-color: @scuforange }
&--off-black { background-color: @offblack; }
&--steel-gray { background-color: @steelgray; }
&--steel-gray80 { background-color: @steelgray80; }
&--steel-gray60 { background-color: @steelgray60; }
&--steel-gray40 { background-color: @steelgray40; }
&--steel-gray20 { background-color: @steelgray20; }
&--blue { background-color: @vividblue; }
&--vivid-blue { background-color: @vividblue; }
&--green { background-color: @vividgreen; }
&--vivid-green { background-color: @vividgreen; }
&--red { background-color: @brightred; }
&--bright-red { background-color: @brightred; }
&--dark-red { background-color: @darkred; }
&--rich-black { background-color: @richblack; }
&--light-gray { background-color: @lightgray; }
&--white { background-color: @modernwhite; }
&--modern-white { background-color: @modernwhite; }
&--dark-orange { background-color: @darkorange; }
&--dark-steel { background-color: @darksteel; }
&--dark-gray { background-color: @darkgray; }
&--console-ps5 { background-color: @console-ps5; }
&--console-ps4 { background-color: @console-ps4; }
&--console-xbox { background-color: @console-xbox; }
&--cokebyte-moderatecyan { background-color: @moderate-cyan; }
&--cokebyte-frostbitemagenta { background-color: @frostbite-magenta; }
}Breakpoints
We use 4 breakpoints in order to give the best experience for the users no matter what device they are using to browse our website. We're classifying the devices into 5 different categories. Breakpoints mark the end of a device category and the beginning of a new one. The dimensions below represent the width of a device. Here is the detail of what they are:
@breakpoint-xs: 576px;
@breakpoint-sm: 767px;
@breakpoint-md: 991px;
@breakpoint-lg: 1200px;Container
On our website, the container defines where the content will live, all the text, images, videos and other elements should remain in this "container". To note that background images or videos are not considered as content, so these specific elements could go outside of the container.
<----
Container max width: 1366px (including padding)
Container width: 100%
Padding left&right: 20px
---->
<----
Container max width: none
Container width: 100%
Padding left&right: 20px
---->
<div class="container">
.
.
.
</div>Fold
The fold is a term used by web designers and Internet marketers to describe a web browser window’s bottom border. “Above the fold” refers to web content that is visible above the border when a page first loads. “Below the fold” refers to the portion of the page that requires scrolling to see.
We decided to define a fold height for mobile, tablet, and desktop, this height is based on the different screen sizes that are visiting our website. The smallest height would be our fold to ensure that even the smallest device is seeing the main information that we want to display.
Top 5 screen sizes (width x height)
- 414x896 (17.43%*)
- 375x667 (12.75%*)
- 375x812 (10.57%*)
- 414x736 (6.12%*)
- 360x640 (4.36%*)
Top 5 screen sizes (width x height)
- 768x1024 (1.21%*)
- 1280x800 (0.25%*)
- 800x1280 (0.11%*)
- 962x601 (0.08%*)
- 1024x768 (0.07%*)
Top 5 screen sizes (width x height)
- 1920x1080 (7.84%*)
- 1366x768 (2.74%*)
- 1440x900 (1.98%*)
- 1536x864 (1.58%*)
- 1280x800 (0.71%*)
* Data collected from Google Analytics, over a 3 month period (Jan 2020 - Mar 2020), this is the % of users at a global level, all device combined.
Grid system
We are using a 12 columns grid system. Column size can change depending on the device. Column widths are defined by a percentage so they are totally responsive. See examples below.
<div class="bootstrap">
<div class="row">
<div class="col-*">
.
.
</div>
</div>
<!-- row--normal will apply a negative margin left&right -->
<div class="row row--normal">
<div class="col-*">
.
.
</div>
</div>
</div>Typography
Titles
.title--1 {
font-size: 54px;
font-family: 'Tomorrow', sans-serif;
font-weight: 500;
text-transform: uppercase;
line-height: 50px;
letter-spacing: 0px;
}.title--2 { font-size: 48px; }.title--3 { font-size: 36px; }.title--4 { font-size: 28px; }.title--5 { font-size: 20px; }.font-productive { font-family: 'Sofia Sans Semi Condensed', sans-serif; }Body styles
<p class="body text-capped">
<?= __('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eu massa velit. Proin turpis orci, mollis quis dapibus in, ultrices gravida augue. Nullam gravida ultrices sem, in pretium justo posuere sed. Nunc interdum orci eu risus malesuada, gravida blandit tellus porta.'); ?>
<span class="body--bold"><?= __('Donec tincidunt luctus est a pharetra.'); ?></span>
<?= __('Aenean a ipsum varius, dapibus nulla ac, gravida metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin accumsan dolor ut orci pellentesque varius. Fusce lacinia, velit ultricies varius fringilla, est est lobortis orci, tincidunt porta turpis lorem vitae lectus.'); ?>
</p>Spacing
We have 12 levels of spacing (from level 0 to level 11), higher the level higher the spacing. By defining levels, the spacing stays consistent throughout the website. Spacing can be defined by either padding, margin, or both. The padding represents the space between the content and the border of the element, whereas the margin represents the space outside of the border.
