Guia de aprendizado
Design responsívo: bordas
Bordas aplicam um contorno externo aos blocos de conteúdos, dando destaque visual a eles. Para se trabalhar com bordas no modelo de doze grades é importante compreender o conceito de tamanho de caixa. O tamanho de caixa mostra o comprimento total, em largura, de um bloco de conteúdo pela fórmula:
largura_total = largura + largura_das_bordas + largura_das_margens
Em que a largura das bordas é a soma do comprimento da borda esquerda com o comprimento da borda direita. Analogamente, a largura das margens compreende a soma do comprimento da margem esquerda com a margem direita. Assim, se você quer trabalhar com largura relativa, a propriedade box-sizing deve considerar o comprimento da borda desse elemento, por meio do valor border-box.
O framework Sketch padronizou todos os elementos HTML com essa propriedade e seu respectivo valor para facilitar a aplicação de bordas em blocos de conteúdo.
Bordas: espessura da borda
Para criar bordas de diferentes espessuras, o framework Sketch fornece as seguintes classes, que são ilustradas pela tabela abaixo:
| Classe | Espessura da borda |
|---|---|
| no-border | 0px (sem bordas) |
| smallest-border-frame | 0.2px |
| smaller-border-frame | 0.5px |
| small-border-frame | 1px |
| medium-border-frame | 5px |
| large-border-frame | 10px |
| larger-border-frame | 15px |
| largest-border-frame | 20px |
| long-border-frame | 25px |
| longer-border-frame | 30px |
| longest-border-frame | 35px |
Para inserir borda apenas em um lado de um bloco de conteúdo basta trocar o sufixo -frame por um dos seguintes sufixos: -left, -right, -top, -bottom. Veja alguns exemplos de criação de blocos de conteúdo com bordas:
Exemplo 1: bordas de pequena espessura
<div class="container normal-height small-border-frame"></div>Esse código irá resultar em um bloco de conteúdo com bordas de pequena espessura:
Exemplo 2: bordas de grande espessura
<div class="container normal-height longest-border-frame"></div>Esse código irá resultar em um bloco de conteúdo com bordas de grande espessura:
Exemplo 3: borda apenas para o canto superior do bloco de conteúdo
<div class="container normal-height no-border large-border-top bg-color-powder-blue"></div>Esse código irá resultar em um bloco de conteúdo com borda superior de larga espessura:
Exemplo 4: borda apenas para o canto direito do bloco de conteúdo
<div class="container normal-height no-border large-border-right bg-color-plum"></div>Esse código irá resultar em um bloco de conteúdo com borda direita de larga espessura:
Exemplo 5: borda apenas para o canto inferior do bloco de conteúdo
<div class="container normal-height no-border large-border-bottom bg-color-gold"></div>Esse código irá resultar em um bloco de conteúdo com borda inferior de larga espessura:
Exemplo 6: borda apenas para o canto esquerdo do bloco de conteúdo
<div class="container normal-height no-border large-border-left bg-color-salmon"></div>Esse código irá resultar em um bloco de conteúdo com borda esquerda de larga espessura:
Dica:
Note nos exemplos de 3 a 6 que foi utilizada a classe no-border. Essa classe foi utilizada para indicar que o bloco de conteúdo, inicialmente, não teria espessura alguma em sua borda. Após isso, foi utilizada uma classe que designava espessura de borda para apenas um de seus lados. Isso garante que apenas um de seus lados tenha borda.
Bordas e seus estilos
Pode ser que o designer/desenvolvedor queira utilzar um estilo de borda diferente do utilizado nos exemplos. Imagine que eu queira utilizar uma borda tracejada ao invés de sólida, para os exemplos 1 e 6. Em um cenário mais amplo, pode ser que eu queira utilizar alguns dos estilos propostos pela tebela abaixo:
| Classe | Estilo da borda |
|---|---|
| solid-border | borda com linha sólida (valor padrão) |
| double-border | borda dupla com linha sólida |
| dotted-border | borda com pontilhada |
| dashed-border | borda tracejada |
| groove-border | aplica efeito 3D na borda com realce à direita |
| ridge-border | aplica efeito 3D na borda com realce à esquerda |
| inset-border | concebe um efeito de graduação com bordas que vão da cor mais escura para a mais clara |
| outset-border | aconcebe um efeito de graduação com bordas que vão da cor mais clara para a mais escura |
Seguindo-se para o primeiro caso mencionado, bordas tracejadas para os exemplos 1 e 6, teriamos o seguinte:
Exemplo 7: bloco de conteúdo com bordas tracejadas de pequena espessura
<div class="container normal-height small-border-frame dashed-border"></div>Esse código irá resultar no seguinte conteúdo:
Exemplo 8: borda tracejada apenas para o canto esquerdo do bloco de conteúdo
<div class="container normal-height no-border large-border-left dashed-border bg-color-salmon"></div>Esse código irá resultar em um bloco de conteúdo com borda tracejada esquerda de larga espessura:
Atenção:
A aplicação de cores às bordas será detalhada e exemplificada durante a seção "Cores".
Bordas: bordas arredondadas
É possível aplicar arredondamentos às bordas por meio das classes ilustradas pela tabela abaixo:
| Classe | Arredondamento em pixels |
|---|---|
| no-rounding | 0px |
| small-rounding | 10px |
| medium-rounding | 30px |
| large-rounding | 50px |
| circle | 100% |
Veja os exemplos abaixo
<div class=\panel normal-height medium-border-frame small-rounding bg-color-pale-turquoise"> <p class="absolute absolute-middle"> small-rounding </p></div><div class="panel normal-height medium-border-frame small-rounding bg-color-light-sky-blue"> <p class="absolute absolute-middle"> medium-rounding </p></div><div class="panel normal-height medium-border-frame small-rounding bg-color-deep-sky-blue"> <p class="text-color-white absolute absolute-middle"> large-rounding </p></div><div class="panel normal-height medium-border-frame small-rounding bg-color-midnight-blue"> <p class="text-color-white absolute absolute-middle"> circle </p></div>Esse código irá gerar os seguintes resultados:
small-rounding
medium-rounding
large-rounding
circle