1. Responsive Code

Each page must have the HTML embed with the custom media query code. This code allows the use of the em sizing for font, padding, margin, width and height. This code is fully responsive resizing automatically on all breakpoints.

Each media query breakpoint uses a calc() function to set a minimum and a maximum font size with a variable view width for values in between. When at the lowest part of the breakpoint the minimum font is set. When the middle view width becomes a value larger than the minimum it will be set as the font size. When the view width is equal to the maximum font the font size will lock onto the maximum.

The code used can be explained here: https://www.smashingmagazine.com/2016/05/fluid-typography/

When it comes to converting a Trident Creative XD design to Webflow you will need to convert the pixels amounts into an em unit. We have create a calculator that will allow you to convert the exact pixel amount into an em amount that will maintain the responsive ratio of our design. For the calculator please visit this link. PX to EM calculator

<style>
@media screen and (max-width: 3680px) {
 body {

   font-size: calc(13px + (18 - 13) * (100vw - 1920px) / (3680 - 1920));
 }
}@media screen and (max-width: 1920px) {
 body {
    font-size: calc(13px + (18 - 13) * (100vw - 1440px) / (1920 - 1440));
 }
}
@media screen and (max-width: 1440px) {
 body {
   font-size: calc(13px + (18 - 13) * (100vw - 991px) / (1440 - 991));
 }
}@media screen and (max-width: 991px) {
 body {
   font-size: calc(13px + (18 - 13) * (100vw - 786px) / (991 - 786));
 }
}@media screen and (max-width: 766px) {
 body {
   font-size: calc(13px + (18 - 13) * (100vw - 480px) / (786 - 480));
 }
}@media screen and (max-width: 480px) {
 body {
   font-size: calc(13px + (18 - 13) * (100vw) / (480 - 0));
 }
}
</style>

2. WRAPPERS

Wrapper are global classes that deal with how elements are contained. Wrappers allow us to create consistency in how things are displayed on all devices. There are four main types of wrappers that we will address in this style document these include.

a. Sections

There are two types of sections that we need to consider when developing the styling of a Trident Creative web design. The first is the hero sections & the second will be on page sections.

i. Hero sections have two variations, the first variation will be the home page variation which will have a class name of section-home-hero. The second variation will be the sub page hero, this variation will have the class name of section-sub-hero. If you want to create further variations of these sections you should use the same logic and naming conventions.

ii. On page sections have three variations, each section has a similar naming convention i.e. section-lrg, section-med and section-sml. The only difference for each div is the amount of padding it has on the top and bottom with section-big having the most and section-sml having the least. If you want to create further variations of these sections you should use the same logic and naming conventions eg. section-xsml or section-xlrg.

Please refer to these sections for further information.

b. Containers

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

c. Columns

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

d. Content Wrappers

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

a. Sections
section-home-hero

Hero Sections Have Two Variations.

The

section-sub-hero

Hero Sections Have Two Variations.

The

section-lrg
This div has a class name of section-lrg and should have the largest padding on the top and bottom, currently it is set to 11.11em top and bottom as a base line. This is the equivalent spacing ratio as 200px on a 1920px view width if you wish to . The padding should be using em as the unit size, this will ensure that it remains responsive and continues the same ratio spacing as the view width scales up and down. Please refer to the section about the responsive code if you would like to understand the responsive scaling better.
section-med
This div has a class name of section-med and should have the largest padding on the top and bottom, currently it is set to 8.33em top and bottom as a base line. This is the equivalent spacing ratio as 150px on a 1920px view width if you wish to . The padding should be using em as the unit size, this will ensure that it remains responsive and continues the same ratio spacing as the view width scales up and down. Please refer to the section about the responsive code if you would like to understand the responsive scaling better.
section-sml
This div has a class name of section-sml and should have the largest padding on the top and bottom, currently it is set to 5.55em top and bottom as a base line. This is the equivalent spacing ratio as 100px on a 1920px view width if you wish to . The padding should be using em as the unit size, this will ensure that it remains responsive and continues the same ratio spacing as the view width scales up and down. Please refer to the section about the responsive code if you would like to understand the responsive scaling better.
b. Containers
container-big
container-med
container-sml
c. Columns
col-2
Responsive Column 2
Responsive Column 2
col-3
Responsive Column 3
Responsive Column 3
Responsive Column 3
Responsive Column 3
col-4
Responsive Column 4
Responsive Column 4
Responsive Column 4
Responsive Column 4
col-5
Responsive Column 5
Responsive Column 5
Responsive Column 5
Responsive Column 5
Responsive Column 5
col-6
Responsive Column 6
Responsive Column 6
Responsive Column 6
Responsive Column 6
Responsive Column 6
Responsive Column 6
d. Content Wrappers
content-block-white
content-block-clear

You can't see me but I'm here, add a background colour combo class if you need to add a colour to the background

3. Styling

A styling guide allows us to maintain consistent visuals throughout the design using combo classes for colours, typography and spacing. All other elements can use these classes to style the website maintain a consistent visual design and

a. Colours

There are two types of sections that we need to consider when developing the styling of a Trident Creative web design. The first is the background colours & the second will be font colours. Colours used on the website need to be allocated into the 5 colour types: Primary, Secondary, Tertiary, Dark, Light.

i. Background Colours should be assigned using the class bg-type: eg. bg-primary

ii. Font Colours follow the same 5 colour types using the class f-type: eg. f-primary

Please refer to these sections for further information.

b. Typography

i. Headers
ii. Paragraphs
iii. Alignment

c. Spacing

i. Padding
ii. Margin

a. Colours
i. Background Colour Combo Classes
bg-primary
bg-secondary
bg-tertiary
bg-dark
bg-light
ii. Font Colour Combo Classes
f-primary
f-secondary
f-tertiary
f-dark
f-light
b. Typography
i. Headers

h1

h2

h3

h4

h5
h6
ii. Paragraphs

p-big

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

p-med

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

p-sml

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

ii. Alignments
f-left-left
f-left-center
f-center-center
f-right-center
f-right-right
c. Spacing
i. Paddings
pad-top-lrg
pad-top-med
pad-top-sml
pad-bot-lrg
pad-bot-med
pad-bot-sml
pad-0
pad-left-lrg
pad-left-med
pad-left-sml
pad-right-lrg
pad-right-med
pad-right-sml
ii. Margins
mar-top-lrg
mar-top-med
mar-top-sml
mar-bot-lrg
mar-bot-med
mar-bot-sml
mar-0
mar-left-lrg
mar-left-med
mar-left-sml
mar-right-lrg
mar-right-med
mar-right-sml

4. Elements

Elements ...

a. Buttons

All buttons have a visual, hover and pressed state. There are Primary, Secondary and Tertiary coloured buttons as well as buttons designed to work on top of light or dark areas.

b. Images wrappers

...

c. CMS Slider

...

a. Buttons
i. Buttons Combo Classes
b. Image Wrappers

Short

arrows & pagination

Style Guide

c. CMS Slider