Fontes Tamanho | Espaços | Margens

Fontes

.font1l = Poppins light;
.font1 = Poppins normal;
.font1b = Poppins bold;
.font2l = Roboto light;
.font2 = Roboto normal;
.font2b = Roboto bold;
.font3l = Alumni Sans light;
.font3 = Alumni Sans normal;
.font3b = Alumni Sans bold;
.font4 = Meow Script;
.font5 = Dancing Script;
.font6 = Playwrite BR;

              
                
                    <div class="font1l">Poppins light</div>
                    <div class="font1">Poppins normal</div>
                    <div class="font1b">Poppins bold</div>
                    <div class="font2l">Roboto light</div>                  
                    <div class="font2">Roboto normal</div>                  
                    <div class="font2b">Roboto bold</div> 
                    <div class="font3l">Alumni Sans light</div>
                    <div class="font3">Alumni Sans normal</div>
                    <div class="font3b">Alumni Sans bold</div>
                    <div class="font4">Meow Script</div>                  
                    <div class="font5">Dancing Script</div>                  
                    <div class="font6">Playwrite BR</div>
Poppins light

Poppins normal

Poppins bold

Roboto light

Roboto normal

Roboto bold

Alumni Sans light

Alumni Sans normal

Alumni Sans bold

Meow Script

Dancing Script

Playwrite BR

Negrito

.fwb = font-weight: bold;
.fwn = font-weight: normal;
.fwl = font-weight: lighter;
.fw1 = font-weight: 100;
.fw2 = font-weight: 200;
.fw3 = font-weight: 300;
.fw4 = font-weight: 400;
.fw5 = font-weight: 500;
.fw6 = font-weight: 600;
.fw7 = font-weight: 700;
.fw8 = font-weight: 800;
.fw9 = font-weight: 900;

              
                
                    <div class="fwb">font-weight:bold;</div>
                    <div class="fw5">font-weight:500;</div>

Estilo [ Style ]

.fsi = font-style: italic;
.fsu = text-decoration: underline;

Italico
Sublinhado
              
                
                    <div class="fsi">Italico</div>
                    <div class="fsu">Sublinhado</div>

Alinhamento [ Align ]

.E = text-align: left;
.D = text-align: right;
.C = text-align: center;
.J = text-align: justify;


Transformar [ Transform ]

.L = text-transform: lowercase; - Fonte Minúscula
.U = text-transform: uppercase; - Fonte Maiúscula
.P = text-transform: capitalize; - Fonte 1º Letra Maiúscula


Minúscula
Maiúscula
1º letra maiúscula
              
                
                    <div class="L">Minúscula</div>
                    <div class="U">Maiúscula</div>
                    <div class="P">1º letra maiúscula</div>

Tamanhos

.f{5|200} = font-size


Tamanho 10
Tamanho 21
Tamanho 35
Tamanho 16
Tamanho 8
              
                
                    <div class="f14">Tamanho 14</div>
                    <div class="f22">Tamanho 22</div>
                    <div class="f5">Tamanho 5</div>
                    <div class="f20">Tamanho 20</div>

Altura da linha [ Line Height ]

.al{1|30} = line-height


Espaço 4

Espaço 10

Espaço 22
              
                
                    <div class="al10">Espaço 10</div>
                    <div class="al4">Espaço 4</div>

h1. Cabeçalho

h2. Cabeçalho

h3. Cabeçalho

h4. Cabeçalho

h5. Cabeçalho
h6. Cabeçalho
              
                
                    <h5>h5. Cabeçalho</h5>
                    <h6>h6. Cabeçalho</h6>
.h1 Cabeçalho
.h2 Cabeçalho
.h3 Cabeçalho
.h4 Cabeçalho
.h5 Cabeçalho
.h6 Cabeçalho
              
                
                    <div class="h1">.h1 Cabeçalho</div>
                    <div class="h2">.h2 Cabeçalho</div>

Espaços Padding

.e( e | d | t | f | x | y ){ 1|20|meio acrescenta _ } = padding;


[ e = esquerda, d = direita, t = topo, f = fim ];

Espaços 20px ( .e2 )
Espaços esqueda 55px ( .ee5_ )
Espaços esquerda e direita 15px ( .ex1_ )
Espaços fim e topo 30px ( .ey3 ) 
              
                
                    <div class="e4">
                        Espaços 4opx
                    </div>
                    <div class="ee2_">
                        Espaços esquerda 25px
                    </div>
                    <div class="ex3_">
                        Espaços esquerda e direita 35px
                    </div>
                    <div class="ey2">
                        Espaços final e topo 20px
                    </div>

Margens

.m( e | d | t | f | x |y ){ 1|20|meio acrescenta _ } = margin [ Margens ];


[ e = esquerda, d = direita, t = topo, f = final ];


Margens 30px
Margem esquerda 40px, final 30px
Margens esquerda e direita 45px
Margens direita topo final 20px 
              
                
                    <div class="m4">
                        Margens 40px
                    </div>
                    <div class="me4_ mf3">
                        Margens esquerda 45px, final 30px
                    </div>
                    <div class="mx3">
                        Margens esquerda e direita 30px
                    </div>
                    <div class="md3 mf3_">
                        Margens direita 30px e final 35px
                    </div>

                    <!-- obs.: lembrar que top e final não funciona em linha (inline)-->