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;
