Skip to content Skip to navigation menu
Blount Style Guide
Blount Style Guide
v0.0.1
Basic CSS Typography Type Styles Type Faces Line Height Text Align Color Borders Padding Margin Widths Grids Responsive
Elements Nav Buttons Links Forms Lists Tables Anchors

Blount Style Guide (based on Tachyons)

This styleguide is useful to provide consistency in both design and markup for all pages within the new Blount website. Its usage ensure a consistent appearance and user experience. Additionally, this framework aims to promote good coding practices through the use of modular and reusable markup and styles. Blount Style Guide is based on Functional CSS with Tachyons so it is recommended to be familiarized with Tachyons CSS Toolkit.

Important rules for developers

1. NEVER modify Tachyons CSS
The _ui-src/responsive/themes/blount-v2/scss/vendor directory shall always remain untouched.

2. If new behavior needed...
First, check the guideline to see if the need is already covered. If it is not, proceed modifying blount template sass files which are located under the _ui-src/responsive/themes/blount-v2/scss directory. We try to reuse as much as possible, so when extending, also check if it can be solved overriding an existing Tachyons variable under _ui-src/responsive/themes/blount-v2/scss/abstract/_variables.scss file. If that is not the case, proceed respecting the style guide.

3. The less CSS we write, the more scalable it is
Avoid repeating css statements, if you find yourself repeating css code, think about how you can make it more abstract so that it is reusable. We are using a CSS framework that comes with pure atomic classes, this way we can keep css as light as possible. Functional CSS all the way.

Basic CSS

This section contains the suggested atomic CSS references based on Tachyons Framework and customized for our needs.

Typography

Level 1 Heading

Level 2 Heading

Level 3 Heading

Level 4 Heading

Level 5 Heading
Level 6 Heading
            
	.f1 { font-size: 3rem; }
	.f2 { font-size: 2.25rem; }
	.f3 { font-size: 1.5rem; }
	.f4 { font-size: 1.25rem; }
	.f5 { font-size: 1rem; }
	.f6 { font-size: .875rem; }

Source: _ui-src/responsive/lib/tachyons-sass/scss/_type-scale.scss

Type Styles

Italicize: to write or print (text) in italics.

Some text that needs to be super bold.

This text wants to be underlined.

This text should be crossed out.

This text should be capitalized.

This text should be uppercase.

                
        .i {         font-style: italic; }
        .b {         font-weight: bold; }
        .underline { text-decoration: underline; }
        .strike {    text-decoration: line-through; }
        .ttc {       text-transform: capitalize; }
        .ttu {       text-transform: uppercase; }

Source: _ui-src/responsive/lib/tachyons-sass/scss/_text-decoration.scss
Source: _ui-src/responsive/lib/tachyons-sass/scss/_font-style.scss

Type faces

Sans Serif

a b c d e f g h i j k l m n o p q r s t u v w x y z

a b c d e f g h i j k l m n o p q r s t u v w x y z

Medium

a b c d e f g h i j k l m n o p q r s t u v w x y z

a b c d e f g h i j k l m n o p q r s t u v w x y z

Light

a b c d e f g h i j k l m n o p q r s t u v w x y z

a b c d e f g h i j k l m n o p q r s t u v w x y z

Bold

a b c d e f g h i j k l m n o p q r s t u v w x y z

a b c d e f g h i j k l m n o p q r s t u v w x y z

Helvetica

a b c d e f g h i j k l m n o p q r s t u v w x y z

a b c d e f g h i j k l m n o p q r s t u v w x y z

                
        .sans-serif {
            font-family: PFDinTextPro-Regular,"Open Sans",Helvetica,Arial,sans-serif
        }
        .medium {
            font-family: PFDinTextPro-Medium,PFDinTextPro-Regular,"Open Sans",Helvetica,Arial,sans-serif
        }
        .light {
            font-family: PFDinTextPro-Light,PFDinTextPro-Regular,"Open Sans",Helvetica,Arial,sans-serif
        }
        .bold {
            font-family: PFDinTextPro-Bold,PFDinTextPro-Regular,"Open Sans",Helvetica,Arial,sans-serif
        }
        .helvetica {
            font-family: 'helvetica neue', helvetica, sans-serif;
        }

Source: _ui-src/responsive/themes/blount/scss/base/_typography.scss
Source: _ui-src/responsive/lib/tachyons-sass/scss/_font-family.scss

Line Height

Solid

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In lacus turpis, porta ac urna a, tincidunt imperdiet nulla. Suspendisse eu felis posuere, consectetur est non, luctus lectus. Nullam in eros et mauris vehicula blandit. Nunc in cursus dolor. Integer bibendum varius nulla nec hendrerit.

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In lacus turpis, porta ac urna a, tincidunt imperdiet nulla. Suspendisse eu felis posuere, consectetur est non, luctus lectus. Nullam in eros et mauris vehicula blandit. Nunc in cursus dolor. Integer bibendum varius nulla nec hendrerit.

Copy

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In lacus turpis, porta ac urna a, tincidunt imperdiet nulla. Suspendisse eu felis posuere, consectetur est non, luctus lectus. Nullam in eros et mauris vehicula blandit. Nunc in cursus dolor. Integer bibendum varius nulla nec hendrerit.

                
        .lh-solid { line-height: 1; }
        .lh-title { line-height: 1.25; }
        .lh-copy  { line-height: 1.5; }

Source: _ui-src/responsive/themes/blount/scss/base/_line-height.scss

Text Align

Left

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In lacus turpis, porta ac urna a, tincidunt imperdiet nulla. Suspendisse eu felis posuere, consectetur est non, luctus lectus. Nullam in eros et mauris vehicula blandit. Nunc in cursus dolor. Integer bibendum varius nulla nec hendrerit.

Right

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In lacus turpis, porta ac urna a, tincidunt imperdiet nulla. Suspendisse eu felis posuere, consectetur est non, luctus lectus. Nullam in eros et mauris vehicula blandit. Nunc in cursus dolor. Integer bibendum varius nulla nec hendrerit.

Center

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In lacus turpis, porta ac urna a, tincidunt imperdiet nulla. Suspendisse eu felis posuere, consectetur est non, luctus lectus. Nullam in eros et mauris vehicula blandit. Nunc in cursus dolor. Integer bibendum varius nulla nec hendrerit.

Justified

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In lacus turpis, porta ac urna a, tincidunt imperdiet nulla. Suspendisse eu felis posuere, consectetur est non, luctus lectus. Nullam in eros et mauris vehicula blandit. Nunc in cursus dolor. Integer bibendum varius nulla nec hendrerit.

                
    .tl  { text-align: left; }
    .tr  { text-align: right; }
    .tc  { text-align: center; }
    .tj  { text-align: justify; }

Source: _ui-src/responsive/lib/tachyons-sass/scss/_text-align.scss

Colors

PrimaryDefined by theme
SecondaryDefined by theme
Black--black: #000000;
Near Black--near-black: #2F2F2F;
Dark Gray--dark-gray: #535353;
Gray--gray: #707070;
Silver--silver: #A7A7A7;
Light Silver--light-silver: #ADADAD;
Moon Gray--moon-gray: #B7B7B7;
Light Gray--light-gray: #F5F5F5;
Near White--near-white: #EAEAEA;
White--white: #FFFFFF;
Safety Green--green: #78BE20;
Light Blue--light-blue: #2697D2;
Safety Yellow--yellow: #FAE100;
Safety Orange--orange: #FE5000;
Light Pink--light-pink: #FE5000;
 
                                
    .bg-primary { background-color: var(--brand-primary); }
    .bg-secondary { background-color: var(--brand-secondary); }
    .bg-black { background-color: var(--black); }
    .bg-near-black { background-color: var(--near-black); }
    .bg-dark-gray { background-color: var(--dark-gray); }
    .bg-gray { background-color: var(--gray); }
    .bg-silver { background-color: var(--silver); }
    .bg-light-silver { background-color: var(--light-silver); }
    .bg-moon-gray { background-color: var(--moon-gray); }
    .bg-light-gray { background-color: var(--light-gray); }
    .bg-near-white { background-color: var(--near-white); }
    .bg-white { background-color: var(--white); }
    .bg-green { background-color: var(--green); }
    .bg-light-blue { background-color: var(--light-blue); }
    .bg-blue { background-color: var(--blue); }
    .bg-yellow { background-color: var(--yellow); }
    .bg-orange { background-color: var(--orange); }

    .primary { color: var(--brand-primary); }
    .secondary { color: var(--brand-secondary); }
    .black { color: var(--black); }
    .near-black { color: var(--near-black); }
    .dark-gray { color: var(--dark-gray); }
    .gray { color: var(--gray); }
    .silver { color: var(--silver); }
    .light-silver { color: var(--light-silver); }
    .moon-gray { color: var(--moon-gray); }
    .light-gray { color: var(--light-gray); }
    .near-white { color: var(--near-white); }
    .white { color: var(--white); }
    .green { color: var(--green); }
    .light-blue { color: var(--light-blue); }
    .blue { color: var(--blue); }
    .yellow { color: var(--yellow); }
    .orange { color: var(--orange); }
    .light-pink { color: var(--light-pink); }

Source: _ui-src/responsive/lib/tachyons-sass/scss/_skins.scss
Source: _ui-src/responsive/themes/blount/scss/abstract/_variables.scss

Borders

ba = border on all sides
bt = border top
br = border right
bb = border bottom
bl = border left
bn = border none
                                
    .ba { border-style: solid; border-width: 1px; }
    .bt { border-top-style: solid; border-top-width: 1px; }
    .br { border-right-style: solid; border-right-width: 1px; }
    .bb { border-bottom-style: solid; border-bottom-width: 1px; }
    .bl { border-left-style: solid; border-left-width: 1px; }
    .bn { border-style: none; border-width: 0; }

Source: _ui-src/responsive/lib/tachyons-sass/scss/_borders.scss

Border Width

default (.bt.bw0)
1px (.bt)
.125rem (.bt.bw1)
.25rem (.bt.bw2)
              
    .bw0 { border-width: 0; }
    .bw1 { border-width: .125rem; }
    .bw2 { border-width: .25rem; }

Source: _ui-src/responsive/lib/tachyons-sass/scss/_border-widths.scss

Border Color

b--primary
b--secondary
b--black
b--near-black
b--dark-gray
b--gray
b--silver
b--light-silver
b--moon-gray
b--green
b--light-blue
b--yellow
b--orange
b--light-gray
b--near-white
b--white
                
    .b--primary { border-color: var(--primary); }
    .b--secondary { border-color: var(--secondary); }
    .b--black { border-color: var(--black); }
    .b--near-black { border-color: var(--near-black); }
    .b--dark-gray { border-color: var(--dark-gray); }
    .b--gray { border-color: var(--gray); }
    .b--silver { border-color: var(--silver); }
    .b--light-silver { border-color: var(--light-silver); }
    .b--moon-gray { border-color: var(--moon-gray); }
    .b--light-gray { border-color: var(--light-gray); }
    .b--near-white { border-color: var(--near-white); }
    .b--white { border-color: var(--white); }
    .b--green { border-color: var(--green); }
    .b--light-blue { border-color: var(--light-blue); }
    .b--yellow { border-color: var(--yellow); }
    .b--orange { border-color: var(--orange); }

Source: _ui-src/responsive/lib/tachyons-sass/scss/_border-colors.scss

Border Radius

br0
br1
br2
                
    .br0 {        border-radius: 0; }
    .br1 {        border-radius: .125rem; }
    .br2 {        border-radius: .25rem; }

Source: _ui-src/responsive/lib/tachyons-sass/scss/_border-radius.scss

Padding

Padding All

pa0
pa1
pa2
pa3
pa4
pa5
pa6
pa7
                
    .pa0 { padding: var(--spacing-none); }
    .pa1 { padding: var(--spacing-extra-small); }
    .pa2 { padding: var(--spacing-small); }
    .pa3 { padding: var(--spacing-medium); }
    .pa4 { padding: var(--spacing-large); }
    .pa5 { padding: var(--spacing-extra-large); }
    .pa6 { padding: var(--spacing-extra-extra-large); }
    .pa7 { padding: var(--spacing-extra-extra-extra-large); }

Source: _ui-src/responsive/lib/tachyons-sass/scss/_spacing.scss

Padding Horizontal

ph0
ph1
ph2
ph3
ph4
ph5
ph6
ph7
                
    .ph0 {
        padding-left: var(--spacing-none);
        padding-right: var(--spacing-none);
    }

    .ph1 {
        padding-left: var(--spacing-extra-small);
        padding-right: var(--spacing-extra-small);
    }

    .ph2 {
        padding-left: var(--spacing-small);
        padding-right: var(--spacing-small);
    }

    .ph3 {
        padding-left: var(--spacing-medium);
        padding-right: var(--spacing-medium);
    }

    .ph4 {
        padding-left: var(--spacing-large);
        padding-right: var(--spacing-large);
    }

    .ph5 {
        padding-left: var(--spacing-extra-large);
        padding-right: var(--spacing-extra-large);
    }

    .ph6 {
        padding-left: var(--spacing-extra-extra-large);
        padding-right: var(--spacing-extra-extra-large);
    }

    .ph7 {
        padding-left: var(--spacing-extra-extra-extra-large);
        padding-right: var(--spacing-extra-extra-extra-large);
    }

Source: _ui-src/responsive/lib/tachyons-sass/scss/_spacing.scss

Padding Vertical

pv0
pv1
pv2
pv3
pv4
pv5
pv6
pv7
                
    .pv0 {
        padding-top: var(--spacing-none);
        padding-bottom: var(--spacing-none);
    }
    .pv1 {
        padding-top: var(--spacing-extra-small);
        padding-bottom: var(--spacing-extra-small);
    }
    .pv2 {
        padding-top: var(--spacing-small);
        padding-bottom: var(--spacing-small);
    }
    .pv3 {
        padding-top: var(--spacing-medium);
        padding-bottom: var(--spacing-medium);
    }
    .pv4 {
        padding-top: var(--spacing-large);
        padding-bottom: var(--spacing-large);
    }
    .pv5 {
        padding-top: var(--spacing-extra-large);
        padding-bottom: var(--spacing-extra-large);
    }
    .pv6 {
        padding-top: var(--spacing-extra-extra-large);
        padding-bottom: var(--spacing-extra-extra-large);
    }

    .pv7 {
        padding-top: var(--spacing-extra-extra-extra-large);
        padding-bottom: var(--spacing-extra-extra-extra-large);
    }

Source: _ui-src/responsive/lib/tachyons-sass/scss/_spacing.scss

Padding Left

pl0
pl1
pl2
pl3
pl4
pl5
pl6
pl7
                
    .pl0 { padding-left: var(--spacing-none); }
    .pl1 { padding-left: var(--spacing-extra-small); }
    .pl2 { padding-left: var(--spacing-small); }
    .pl3 { padding-left: var(--spacing-medium); }
    .pl4 { padding-left: var(--spacing-large); }
    .pl5 { padding-left: var(--spacing-extra-large); }
    .pl6 { padding-left: var(--spacing-extra-extra-large); }
    .pl7 { padding-left: var(--spacing-extra-extra-extra-large); }

Source: _ui-src/responsive/lib/tachyons-sass/scss/_spacing.scss

Padding Right

pr0
pr1
pr2
pr3
pr4
pr5
pr6
pr7
                
    .pr0 { padding-left: var(--spacing-none); }
    .pr1 { padding-left: var(--spacing-extra-small); }
    .pr2 { padding-left: var(--spacing-small); }
    .pr3 { padding-left: var(--spacing-medium); }
    .pr4 { padding-left: var(--spacing-large); }
    .pr5 { padding-left: var(--spacing-extra-large); }
    .pr6 { padding-left: var(--spacing-extra-extra-large); }
    .pr7 { padding-left: var(--spacing-extra-extra-extra-large); }

Source: _ui-src/responsive/lib/tachyons-sass/scss/_spacing.scss

Padding Top

pt0
pt1
pt2
pt3
pt4
pt5
pt6
pt7
                
    .pt0 { padding-left: var(--spacing-none); }
    .pt1 { padding-left: var(--spacing-extra-small); }
    .pt2 { padding-left: var(--spacing-small); }
    .pt3 { padding-left: var(--spacing-medium); }
    .pt4 { padding-left: var(--spacing-large); }
    .pt5 { padding-left: var(--spacing-extra-large); }
    .pt6 { padding-left: var(--spacing-extra-extra-large); }
    .pt7 { padding-left: var(--spacing-extra-extra-extra-large); }

Source: _ui-src/responsive/lib/tachyons-sass/scss/_spacing.scss

Padding Bottom

pb0
pb1
pb2
pb3
pb4
pb5
pb6
pb7
                
    .pb0 { padding-left: var(--spacing-none); }
    .pb1 { padding-left: var(--spacing-extra-small); }
    .pb2 { padding-left: var(--spacing-small); }
    .pb3 { padding-left: var(--spacing-medium); }
    .pb4 { padding-left: var(--spacing-large); }
    .pb5 { padding-left: var(--spacing-extra-large); }
    .pb6 { padding-left: var(--spacing-extra-extra-large); }
    .pb7 { padding-left: var(--spacing-extra-extra-extra-large); }

Source: _ui-src/responsive/lib/tachyons-sass/scss/_spacing.scss

Margin

Margin All

ma0
ma1
ma2
ma3
ma4
ma5
ma6
ma7
                
    .ma0 { padding: var(--spacing-none); }
    .ma1 { padding: var(--spacing-extra-small); }
    .ma2 { padding: var(--spacing-small); }
    .ma3 { padding: var(--spacing-medium); }
    .ma4 { padding: var(--spacing-large); }
    .ma5 { padding: var(--spacing-extra-large); }
    .ma6 { padding: var(--spacing-extra-extra-large); }
    .ma7 { padding: var(--spacing-extra-extra-extra-large); }

Source: _ui-src/responsive/lib/tachyons-sass/scss/_spacing.scss

Margin Horizontal

mh0
mh1
mh2
mh3
mh4
mh5
mh6
mh7
                
    .mh0 {
        padding-left: var(--spacing-none);
        padding-right: var(--spacing-none);
    }

    .mh1 {
        padding-left: var(--spacing-extra-small);
        padding-right: var(--spacing-extra-small);
    }

    .mh2 {
        padding-left: var(--spacing-small);
        padding-right: var(--spacing-small);
    }

    .mh3 {
        padding-left: var(--spacing-medium);
        padding-right: var(--spacing-medium);
    }

    .mh4 {
        padding-left: var(--spacing-large);
        padding-right: var(--spacing-large);
    }

    .mh5 {
        padding-left: var(--spacing-extra-large);
        padding-right: var(--spacing-extra-large);
    }

    .mh6 {
        padding-left: var(--spacing-extra-extra-large);
        padding-right: var(--spacing-extra-extra-large);
    }

    .mh7 {
        padding-left: var(--spacing-extra-extra-extra-large);
        padding-right: var(--spacing-extra-extra-extra-large);
    }

Source: _ui-src/responsive/lib/tachyons-sass/scss/_spacing.scss

Margin Vertical

mv0
mv1
mv2
mv3
mv4
mv5
mv6
mv7
                
    .mv0 {
        padding-top: var(--spacing-none);
        padding-bottom: var(--spacing-none);
    }
    .mv1 {
        padding-top: var(--spacing-extra-small);
        padding-bottom: var(--spacing-extra-small);
    }
    .mv2 {
        padding-top: var(--spacing-small);
        padding-bottom: var(--spacing-small);
    }
    .mv3 {
        padding-top: var(--spacing-medium);
        padding-bottom: var(--spacing-medium);
    }
    .mv4 {
        padding-top: var(--spacing-large);
        padding-bottom: var(--spacing-large);
    }
    .mv5 {
        padding-top: var(--spacing-extra-large);
        padding-bottom: var(--spacing-extra-large);
    }
    .mv6 {
        padding-top: var(--spacing-extra-extra-large);
        padding-bottom: var(--spacing-extra-extra-large);
    }

    .mv7 {
        padding-top: var(--spacing-extra-extra-extra-large);
        padding-bottom: var(--spacing-extra-extra-extra-large);
    }

Source: _ui-src/responsive/lib/tachyons-sass/scss/_spacing.scss

Margin Left

ml0
ml1
ml2
ml3
ml4
ml5
ml6
ml7
                
    .ml0 { padding-left: var(--spacing-none); }
    .ml1 { padding-left: var(--spacing-extra-small); }
    .ml2 { padding-left: var(--spacing-small); }
    .ml3 { padding-left: var(--spacing-medium); }
    .ml4 { padding-left: var(--spacing-large); }
    .ml5 { padding-left: var(--spacing-extra-large); }
    .ml6 { padding-left: var(--spacing-extra-extra-large); }
    .ml7 { padding-left: var(--spacing-extra-extra-extra-large); }

Source: _ui-src/responsive/lib/tachyons-sass/scss/_spacing.scss

Margin Right

mr0
mr1
mr2
mr3
mr4
mr5
mr6
mr7
                
    .mr0 { padding-left: var(--spacing-none); }
    .mr1 { padding-left: var(--spacing-extra-small); }
    .mr2 { padding-left: var(--spacing-small); }
    .mr3 { padding-left: var(--spacing-medium); }
    .mr4 { padding-left: var(--spacing-large); }
    .mr5 { padding-left: var(--spacing-extra-large); }
    .mr6 { padding-left: var(--spacing-extra-extra-large); }
    .mr7 { padding-left: var(--spacing-extra-extra-extra-large); }

Source: _ui-src/responsive/lib/tachyons-sass/scss/_spacing.scss

Margin Top

mt0
mt1
mt2
mt3
mt4
mt5
mt6
mt7
                
    .mt0 { padding-left: var(--spacing-none); }
    .mt1 { padding-left: var(--spacing-extra-small); }
    .mt2 { padding-left: var(--spacing-small); }
    .mt3 { padding-left: var(--spacing-medium); }
    .mt4 { padding-left: var(--spacing-large); }
    .mt5 { padding-left: var(--spacing-extra-large); }
    .mt6 { padding-left: var(--spacing-extra-extra-large); }
    .mt7 { padding-left: var(--spacing-extra-extra-extra-large); }

Source: _ui-src/responsive/lib/tachyons-sass/scss/_spacing.scss

Margin Bottom

mb0
mb1
mb2
mb3
mb4
mb5
mb6
mb7
                
    .mb0 { padding-left: var(--spacing-none); }
    .mb1 { padding-left: var(--spacing-extra-small); }
    .mb2 { padding-left: var(--spacing-small); }
    .mb3 { padding-left: var(--spacing-medium); }
    .mb4 { padding-left: var(--spacing-large); }
    .mb5 { padding-left: var(--spacing-extra-large); }
    .mb6 { padding-left: var(--spacing-extra-extra-large); }
    .mb7 { padding-left: var(--spacing-extra-extra-extra-large); }

Source: _ui-src/responsive/lib/tachyons-sass/scss/_spacing.scss

Widths

Width Scales

.w1
.w2
.w3
.w4
.w5

Width Percentages

w-10
w-20
w-25
w-30
w-33
w-third
w-34
w-40
w-50
w-60
w-two-thirds
w-75
w-80
w-90
w-100 
                
        .w1 {    width: 1rem; }
        .w2 {    width: 2rem; }
        .w3 {    width: 4rem; }
        .w4 {    width: 8rem; }
        .w5 {    width: 16rem; }

        .w-10 {  width:  10%; }
        .w-20 {  width:  20%; }
        .w-25 {  width:  25%; }
        .w-30 {  width:  30%; }
        .w-33 {  width:  33%; }
        .w-34 {  width:  34%; }
        .w-40 {  width:  40%; }
        .w-50 {  width:  50%; }
        .w-60 {  width:  60%; }
        .w-70 {  width:  70%; }
        .w-75 {  width:  75%; }
        .w-80 {  width:  80%; }
        .w-90 {  width:  90%; }
        .w-100 { width: 100%; }

        .w-third { width: calc(100% / 3); }
        .w-two-thirds { width: calc(100% / 1.5); }
        .w-auto { width: auto; }

Source: _ui-src/responsive/lib/tachyons-sass/scss/_widths.scss

Grids

fl w-100
fl w-90
fl w-10
fl w-80
fl w-20
fl w-75
fl w-25
fl w-70
fl w-30
fl w-60
fl w-40
fl w-50
fl w-50
fl w-third
fl w-third
fl w-third
fl w-third
fl w-two-thirds
fl w-25
fl w-25
fl w-25
fl w-25
fl w-20
fl w-20
fl w-20
fl w-20
fl w-20
fl w-10
fl w-10
fl w-10
fl w-10
fl w-10
fl w-10
fl w-10
fl w-10
fl w-10
fl w-10

Source: _ui-src/responsive/lib/tachyons-sass/scss/_floats.scss
Source: _ui-src/responsive/lib/tachyons-sass/scss/_widths.scss

Responsive

There are modifiers which can be added onto the end of any class and will set up your media queries correspondingly.

The -ns modifier covers everything above mobile size.

The -m modifier covers tablets.

The -l modifier covers desktop sizes.

                
    .pa4-ns { ... } /** Will apply pa4 class to everything above mobile size **/
    .pa4-m { ... } /** Will apply pa4 class to tablet sizes **/
    .pa4-l { ... } /** Will apply pa4 class to desktop sizes **/

    .bt-ns { ... } /** Will apply bt (border top) class to everything above mobile size **/
    .bt-m { ... } /** Will apply bt (border top) class to tablet sizes **/
    .bt-l { ... } /** Will apply bt (border top) class to desktop sizes **/

Elements

This section contains a list of the different elements that are used across the website.

Nav and Headers

Red Simple Header

Header Text

Red Centered Header

Header Text

Dark Gray Small Header

Header Text

Dark Gray Centered Header

Header Text

Nav Bar Header

General buttons

Inverted Button Style

Button Text  »

Red Button Style

Button Text  »

Dark Button Style

Button Text  »

Links

RED SIMPLE

Primary text link

RED UNDERLINED

Primary text underlined link

LIGHT BLUE SIMPLE

Light blue text simple link

LIGHT BLUE UNDERLINED

Light blue text underlined link

Forms

Helper text for the form control.
Helper text for a form control. Can use this text to link to more info.

Lists

Complete List

Simple List

Tables

Double Header Table

Caption
Field Field Field Field
Hassan Johnson @hassan hassan@companywithalongdomain.co 14419232532474
Taral Hicks @hicks taral@companywithalongdomain.co 72326219423551
Tyrin Turner @tt ty@companywithalongdomain.co 92325170324444
Oliver Grant @oli oliverg@companywithalongdomain.co 71165170352909
Dean Blanc @deanblanc dean@companywithalongdomain.co 71865178111909

Simple Header Value Table

Caption
Hassan Johnson 14419232532474
Taral Hicks 72326219423551
Tyrin Turner 92325170324444
Oliver Grant 71165170352909
Dean Blanc 71865178111909

Cards

Photo of Card
Sample text here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam orci libero, scelerisque sit amet semper sed, porttitor ac ligula. Integer est purus, aliquam vitae consequat et.

Button Text
Photo of Card
Sample text here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam orci libero, scelerisque sit amet semper sed, porttitor ac ligula. Integer est purus, aliquam vitae consequat et.

Button Text
Photo of Card
Sample text here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam orci libero, scelerisque sit amet semper sed, porttitor ac ligula. Integer est purus, aliquam vitae consequat et.

Button Text
Photo of Card
Sample text here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam orci libero, scelerisque sit amet semper sed, porttitor ac ligula. Integer est purus, aliquam vitae consequat et.

Button Text
Photo of Card
Sample text here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam orci libero, scelerisque sit amet semper sed, porttitor ac ligula. Integer est purus, aliquam vitae consequat et.

Button Text
Photo of Card
Sample text here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam orci libero, scelerisque sit amet semper sed, porttitor ac ligula. Integer est purus, aliquam vitae consequat et.

Button Text
Photo of Card
Sample text here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam orci libero, scelerisque sit amet semper sed, porttitor ac ligula. Integer est purus, aliquam vitae consequat et.

Button Text
Photo of Card
Sample text here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam orci libero, scelerisque sit amet semper sed, porttitor ac ligula. Integer est purus, aliquam vitae consequat et.

Button Text
Photo of Card
Sample text here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam orci libero, scelerisque sit amet semper sed, porttitor ac ligula. Integer est purus, aliquam vitae consequat et.

Button Text
Photo of Card
Sample text here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam orci libero, scelerisque sit amet semper sed, porttitor ac ligula. Integer est purus, aliquam vitae consequat et.

Button Text

Image with text overlay

Image with text overlay sample (Full Width)

test
test

Header Text

Subheader Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed ultrices augue. Sed mauris ante, ullamcorper id magna eu, volutpat fringilla augue. Praesent malesuada a risus eu feugiat.

Go!

Image with adjacent text

text image

Header Text

Subheader Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed ultrices augue. Sed mauris ante, ullamcorper id magna eu, volutpat fringilla augue. Praesent malesuada a risus eu feugiat.

dasdasdadasd

Other Links

    text image

    Video with adjacent text

    Video Alternative Text

    Header Text

    Subheader Text

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sodales leo tincidunt, elementum massa in, bibendum purus. In posuere eleifend ultricies. Sed non ultricies diam. Vestibulum varius lacus ligula, non vestibulum libero dictum vitae.

    See more >>

    Including entities and icons with text

    HTML Entities

    An HTML entity is a piece of text ("string") that begins with an ampersand (&) and ends with a semicolon (;) . Entities are frequently used to display reserved characters (which would otherwise be interpreted as HTML code), and invisible characters (like non-breaking spaces). You can also use them in place of other characters that are difficult to type with a standard keyboard.

    For example, to render: "Sample Text ♪". You must use the following HTML markup: Sample Text ♪ More entities can be found here.

    Text with Icons

    Text can be used together with icons by using the font awesome library. E.g.: "Sample Text".
    To render these icons within text you must use the following HTML markup:

    Sample <i class="fas fa-home"></i> Text

    In order to know which class to put to the <i> tag, please check font awesome icons markup.

    Blount Icons

    We have developed a new font including Blount specific icons. This way they can be used accross the site the same way we can use font awesome icons. Here is a list with the icons and how to use them:

    • <i class="bi-chain"></i>

    • <i class="bi-field-tested-by-pros"></i>

    • <i class="bi-guard-mate-compatible"></i>

    • <i class="bi-intenz"></i>

    • <i class="bi-load-time"></i>

    • <i class="bi-chain-loop-bar-sprocket"></i>

    • <i class="bi-longer-life"></i>

    • <i class="bi-lubritec"></i>

    • <i class="bi-narrow-kerf"></i>

    • <i class="bi-narrow-kerf-with-TM"></i>

    • <i class="bi-wind"></i>

    • <i class="bi-power-torque"></i>

    • <i class="bi-powersharp"></i>

    • <i class="bi-powersharp-sharpener"></i>

    • <i class="bi-runtime"></i>

    • <i class="bi-weather-ready"></i>

    As icons are treated as text, we can modify color and font size as we desire. Here are some examples:

    • <i class="bi-narrow-kerf f1 green"></i>

    • Some sample text

      <p class="f4">Some sample <i class="bi-powersharp f3 primary"></i> text</p>

    • <i class="bi-powersharp-sharpener f2 orange"></i>

    • Some Title

      <h2 class="f4">Some Title <i class="bi-runtime f4 blue"></i></h2>

    Anchors

    The URL of the link must contain a reference to the target area id (this is typically the component ID). At the end of the target url, add a '#' character, followed by the ID of the component to which the user will be scrolled to. URL can be to a different page where the anchor is located, as long as there is an element containing that anchor which has an id (in most cases, this will be a component).

    For references on how to use the URLs on internal anchors please take a look at this confluence page.

    Buttons HTML

    • Button Text

      <a class="b--black b ba bg-white br05 dib f6 mv2 ph35 pv2 shadow-4 tc black hover-black no-underline" href="#targetID">Button Text</a>

    • Button Text

      <a class="b--primary b ba bg-primary br05 dib f6 no-underline mv2 ph35 pv2 shadow-4 tc white hover-white" href="#targetID">Button Text</a>

    • Button Text

      <a class="b--black b ba bg-black br05 dib f6 no-underline mv2 ph35 pv2 shadow-4 tc white" href="#targetID">Button Text</a>

    • Button Text

      <a class="b--primary b ba bg-white br05 dib f6 mv2 ph35 pv2 shadow-4 tc primary hover-primary no-underline" href="#targetID">Button Text</a>

    • Button Text

      <a class="b--gray b ba bg-white br05 dib f6 mv2 ph35 pv2 shadow-4 tc gray hover-gray no-underline" href="#targetID">Button Text</a>

    • Button Text

      <a class="b--light-gray b ba bg-light-gray dib f6 mv2 pa1 pv2 tc primary hover-primary mr2 w-7-rem h-35-rem lh2 no-underline" href="#targetID">Button Text</a>

    Links HTML

    Thank you :)

    ⇧ Back to top
    Back To Top