GALE styleguide


Typography

bold font-weight:700, normal font-weight:400, light font-weight: 300, thin font-weight:100 *

*These are the subclasses (combo classes) to add on to modify H tag or P tag font-weight if it's never been defined. Please don't change the base class.

bold-txt

light-txt

thin-txt

*This is the subclass (combo class) to make words all caps.

caps


H tag styles

GALE-global-h1-bold

H1 bold

GALE-global-h1-thin

H1 THIN

GALE-global-h2-bold

H2 BOLD

GALE-global-h12-thin

H2 THIN

GALE-global-h3

H3 NORMAL

GALE-global-h3-light

H3 LIGHT

GALE-global-h4

H4 NORMAL

GALE-global-h5

H5 NORMAL

GALE-global-h6

H6 NORMAL



P tag styles

font-size: 20px

GALE-global-p-large

bold-txt

P LARGE BOLD

GALE-global-p-large

P LARGE REGULAR

GALE-global-p-large

thin-txt

P LARGE LIGHT

font-size: 18px

GALE-global-p-normal

bold-txt

P NORMAL BOLD

GALE-global-p-normal

P NORMAL REGULAR

GALE-global-p-normal

thin-txt

P NORMAL LIGHT

font-size: 14px

GALE-global-p-small

bold-txt

P SMALL BOLD

GALE-global-p-small

P SMALL REGULAR

GALE-global-p-small

thin-txt

P SMALL LIGHT

font-size: 12px

GALE-global-p-misc

bold-txt

P SMALL BOLD

GALE-global-p-misc

P SMALL REGULAR

GALE-global-p-misc

thin-txt

P SMALL LIGHT

Container, spacing, and width rules

GALE-main

Main wrapper, which in setting the tag should set to main so it's better accessibility for screen reader.

GALE-section

container is having 90% width, but max-width is set to 1920px.

section-v-margin

this is a combo class for container class to have 120px vertical margin, will change to 90px once it's tablet and below.

section-b-margin

this is a combo class for container class to have 120px bottom margin, will change to 90px once it's tablet and below.

section-hero-large-t-margin

this is a combo class for container class to have 220px top margin so it has enough distance from navigation

section-hero-small-t-margin

this is a combo class for container class to have 164px top margin so it has enough distance from navigation


Margin rules

m as margin for four sides,
my as margin top & bottom,
mt as margin top,
mb as margin bottom,
ml as margin left,
mr as margin right,
and we should try to increase every other 8px, unless design has special treatment. examples:

m-8

this is margin for four sides as 8 px

my-8

this is margin top and bottom 8 px

mt-8

this is margin bottom 8 px

mb-16

this is margin top and bottom 16 px

ml-16

this is margin top 16 px

mr-16

this is margin bottom 16 px


Width rules

width-1/4

width: 25%

width-1/3

width: 33.333333%

width-1/2

width: 50%

width-2/3

width: 66.666667%;

width-3/4

width: 75%;

Max width constraint class

max-width--700

max-width: 700px;