Ignorar e seguir para o conteúdo Ignorar e seguir para o menu de navegação
Blount Style Guide
Guia de estilo Blount
v0.0.1
CSS básico Tipografia Estilo de tipo Faces de tipo Altura da linha Alinhamento do texto Cor Bordas Preenchimento Margem Larguras Grades Responsivo
Elementos Nav Botões Links Formulários Listas Tabelas Âncoras

Guia de estilo Blount (com base no Tachyons)

Este guia de estilo é útil para manter a consistência tanto no design quanto na marcação de todas as páginas no novo site da Blount. Sua utilização garante consistência para a aparência e a experiência do usuário. Além disso, esta estrutura vida promover boas práticas de criação de código por meio do uso de marcação e estilos modulares e reutilizáveis. O Guia de estilo da Blount tem como base o Functional CSS com Tachyons, então recomendamos que você esteja familiarizado com o Kit de ferramentas Tachyons CSS.

Regras importantes para desenvolvedores

1. NUNCA modifique o Tachyons CSS
O diretório _ui-src/responsive/themes/blount-v2/scss/vendor sempre deve permanecer inalterado.

2. Caso seja necessário adicionar um novo comportamento…
Primeiramente, verifique a diretriz para saber se a necessidade já está coberta. Caso não esteja, prossiga com a modificação dos arquivos sass de modelo blount, localizados no diretório _ui-src/responsive/themes/blount-v2/scss. Tentamos reutilizar o máximo possível, então ao ampliar, verifique também se é possível solucionar mediante a substituição de uma variável Tachyons existente no arquivo _ui-src/responsive/themes/blount-v2/scss/abstract/_variables.scss. Caso não seja, prossiga respeitando o guia de estilo.

3. Quanto menos CSS criarmos, mais dimensionável ele é
Evite repetir declarações de css, caso perceba que está repetindo código css, pense sobre como torná-lo mais abstrato, de modo que possa ser reutilizável. Estamos usando uma estrutura CSS que vem com classes atômicas, assim, podemos manter o css com a maior leveza possível. Functional CSS para tudo.

CSS básico

Essa seção contém as referências sugeridas de CSS atômico com base no Tachyons Framework e personalizadas de acordo com nossas necessidades.

Tipografia

Cabeçalho de nível 1

Cabeçalho de nível 2

Cabeçalho de nível 3

Cabeçalho de nível 4

Cabeçalho de nível 5
Cabeçalho de nível 6
            
	.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

Estilo de tipo

Aplicar itálico: escrever ou imprimir (texto) em itálico.

Algum texto que precise ter um super negrito.

Esse texto quer estar sublinhado.

Esse texto deve estar cruzado.

Esse texto deve estar capitalizado.

Esse texto deve estar todo em letras maiúsculas.

                
        .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

Faces de tipo

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

Média

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

Leve

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

Negrito

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

Altura da linha

Sólido

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.

Título

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.

Copiar

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

Alinhamento do texto

À esquerda

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.

À direita

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.

Centro

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.

Justificado

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

Cores

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

Bordas

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

Largura da borda

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

Cor da borda

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

Raio da borda

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

Preenchimento

Preenchimento tudo

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

Preenchimento 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

Preenchimento 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

Preenchimento esquerdo

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

Preenchimento direito

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

Preenchimento superior

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

Preenchimento inferior

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

Margem

Margem tudo

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

Margem 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

Margem 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

Margem esquerda

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

Margem direita

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

Margem superior

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

Margem inferior

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

Larguras

Escalas de largura

.w1
.w2
.w3
.w4
.w5

Percentuais de largura

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

Grades

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

Responsivo

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 **/

Elementos

Essa seção contém uma lista dos diferentes elementos usados no site.

Navegação e cabeçalhos

Cabeçalho vermelho simples

Header Text

Cabeçalho vermelho centralizado

Header Text

Cabeçalho pequeno cinza escuro

Header Text

Cabeçalho centralizado cinza escuro

Header Text

Cabeçalho da barra de navegação

Botões gerais

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

Formulários

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

Listas

Lista completa

Lista simples

Tabelas

Tabela com cabeçalho duplo

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

Tabela de valor com cabeçalho simples

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

Cartões

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

Imagem com sobreposição de texto

Amostra de imagem com sobreposição de texto (largura total)

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!

Imagem com texto adjacente

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

    Vídeo com texto adjacente

    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 >>

    Incluindo entidades e ícones com texto

    Entidades HTML

    Uma entidade HTML é um fragmento de texto (“string”) que começa com um E comercial (&) e termina com um ponto e vírgula (;). As entidades são usadas frequentemente para exibir caracteres reservados (que de outra maneira, seriam interpretados como código HTML) e caracteres invisíveis (como espaços não separáveis). Você também pode usá-los no lugar de outros caracteres que são difíceis de digitar com um teclado padrão.

    Por exemplo, para obter: “Amostra de texto ♪”. É necessário usar a seguinte marcação HTML: Amostra de texto ♪ Há mais entidades disponíveis aqui.

    Texto com ícones

    É possível usar o texto com ícones usando a biblioteca font awesome. P. ex.: “Amostra de texto”.
    Para produzir esses ícones no texto, é necessário usar a seguinte marcação HTML:

    Amostra <i class="fas fa-home"></i> de texto

    Para saber qual classe colocar na tag <i>, consulte marcação de ícones font awesome.

    Ícones da Blount

    Desenvolvemos uma nova fonte, incluindo os ícones específicos da Blount. Dessa maneira, eles podem ser usados em todo o site assim como usamos os ícones font awesome. Segue uma lista com os ícones e como usá-los:

    • <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>

    Como ícones são tratados como texto, podemos modificar a cor e o tamanho da fonte conforme desejarmos. Aqui estão alguns exemplos:

    • <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>

    Âncoras

    O URL do link precisa conter uma referência para o ID da área de destino (normalmente um ID de componente). Ao fim do URL de destino, adicione um caractere “#”, seguido pelo ID do componente para o qual o usuário será levado. O URL pode ser para uma página distinta, na qual a âncora está localizada, desde que exista um elemento contendo essa âncora que tenha um ID (na maioria dos casos, será um componente).

    Para referências sobre como usar esses URLs em âncoras internas, consulte esta página de confluência.

    HTML de botões

    • 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>

    HTML de links

    Obrigado :)

    ⇧ Voltar para o início
    Voltar para o início