Reboot

Reboot, uma série de customizações para elementos em único arquivo CSS, ajuda o Bootstrap prover uma base elegante, consistente e simples de se construir em cima.

Abordagem

O Reboot é construído baseado no Normalize, possibilitando muitos elementos HTML sem estilos baseados em opiniões e usando apenas seletores de elementos. Por exemplo, nós customizamos alguns estilos do <table> para uma base mais simples e, então, te damos a oportunidade de usar .table, .table-bordered e outras classes.

Aqui estão nossas diretrizes e razões para termos escolhidos oquê sobrescrever, no Reboot:

  • Atualizar alguns valores padrões de navegadores para usar rems, invés de ems para espaçamento de componentes escaláveis;
  • Evitar margin-top. Margens verticais podem colapsar, resultando em resultados inesperados. Mais importante ainda: uma única direção de margem é mentalmente mais simples;
  • Para escalar facilmente através de diferentes tamanhos de dispositivos, elementos block devem usar rems em suas margens;
  • Manter o mínimo de declarações relacionadas a propriedade font, usando o valor inherit sempre que possível.

Padrões de páginas

Os elementos <html> e <body> são atualizados para possibilitarem melhores padrões, em toda a página. Mais especificamente:

  • box-sizing é configurado globalmente em todos elementos, incluindo *::before e *::after. Isso assegura que a largura declarada do elemento nunca exceda, devido a padding ou borda;
    • Nenhum tamanho de fonte base é declarado no <html>, mas assumimos o padrão do navegador (16px). É declarado font-size: 1rem no <body> para escalar o texto fácil e responsivamente usando media queries, enquanto é respeitado as preferências do usuário e garantindo uma abordagem mais acessível.
  • O <body> também configura font-family, line-height e text-align, globalmente. Isso é herdado mais tarde por alguns elementos de formulário, para previnir inconsistência em fontes.
  • Por segurança, o <body> tem background-color padrão de #fff declarado.

Pilha de fontes nativas

As fontes web padrões (Helvetica Neue, Helvetica e Arial) foram descartadas no Bootstrap 4 e substituídas com uma “pilha de fontes nativas” para otimizar rederização de texto em todo dispositivo e SO. Leia mais sobre pilhas de fontes nativas, nesse artigo da Smashing Magazine.

$font-family-sans-serif:
  // Safari para OS X e iOS (San Francisco)
  -apple-system,
  // Chrome < 56 para OS X (San Francisco)
  BlinkMacSystemFont,
  // Windows
  "Segoe UI",
  // Android
  "Roboto",
  // Fallback de fonts web básicas
  "Helvetica Neue", Arial, sans-serif,
  // Fonts de Emoji
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;

Esta font-family é aplicada ao <body> e herdada Bootstrap adentro, global e automaticamente. Para trocar a font-family global, basta atualizar a variável $font-family-base e recompilar o Bootstrap.

Cabeçalhos e parágrafos

Todos elementos de cabeçalho e parágrafo são resetados para terem margin-top removido. Cabeçalhos possuem margin-bottom: .5rem e parágrafos margin-bottom: 1rem para espaçamento mais fácil.

Cabeçalho Exemplo

<h1></h1>

 h1. Cabeçalho Bootstrap

<h2></h2>

 h2. Cabeçalho Bootstrap

<h3></h3>

 h3. Cabeçalho Bootstrap

<h4></h4>

 h4. Cabeçalho Bootstrap

<h5></h5>

 h5. Cabeçalho Bootstrap

<h6></h6>

 h6. Cabeçalho Bootstrap

Listas

Todas listas (<ul>, <ol> e <dl>) possuem seus valores para margin-top removidos e uma margin-bottom: 1rem. Listas aninhadas não possuem nenhuma margin-bottom.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem

Para estilização mais simples, hierarquia mais limpa e melhor espaçamento, listas de descrição possuem margens customizadas. <dd>s possuem margin-left com valor 0 e adicionam margin-bottom: .5rem. <dt>s estão formatadas em negrito.

Lista de descrições
Uma lista de descrições é perfeita para definir termos.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.

Textos pré-formatados

O elemento <pre> é configurado para remover sua margin-top e usar rem em sua margin-bottom.

.example-element {
  margin-bottom: 1rem;
}

Tabelas

Tabelas são ajustadas sutilmente para estilizar elementos <caption>, colapsar bordas e garantir que o text-align seja consistente. Mudanças adicionais para bordas, paddings e outras propriedades são adicionadas com a classe .table.

Este é um exemplo de tabela e isso é um exemplo de legenda para descrever conteúdos.
Cabeçalho da tabela Cabeçalho da tabela Cabeçalho da tabela Cabeçalho da tabela
Célula da tabela Célula da tabela Célula da tabela Célula da tabela
Célula da tabela Célula da tabela Célula da tabela Célula da tabela
Célula da tabela Célula da tabela Célula da tabela Célula da tabela

Formulários

Vários elementos de formulário são resetados para estilos mais básicos. Aqui vai algumas das mudanças mais notáveis:

  • Os <fieldset>s não possuem bordas, padding ou margem, então, eles podem ser usados facilmente como wrappers para grupos ou inputs individuais;
  • A tag <legend>, como os fieldsets, também foram re-estilizados para serem mostrados como um tipo de cabeçalho;
  • As <label>s são configuradas para terem display: inline-block e permitir que margens sejam aplicadas;
  • Os <input>s, <select>s, <textarea>s e <button>s são mais estilizados pelo Normalize, mas o Reboot remove suas margens e configura line-height: inherit, também;
  • Tags <textarea> são modificadas para apenas serem redimensionáveis verticalmente, já que horizontalmente costuma quebrar o layout da página.

Essas mudanças e outras, são mostradas abaixo.

Exemplo de legendas

100

Elementos variados

Address

O elemento <address> é atualizado para resetar os padrões da font-style de itálico para normal. A line-height é herdada e a margin-bottom: 1rem foi acrescentada. As tags <address> são para apresentar informações de contato para o ancestral mais próximo ou um determinado trabalho. Preserve sua formatação, colocando <br> no final de suas linhas.

Twitter, Inc.
Rua Market, 1355, Suíte 900
São Francisco, CA 94103
Tel: (123) 456-7890
Nome completo
fulano.ciclano@exemplo.com

Blockquote

O valor padrão das margens no <blockquote> é 1em 40px, então, nós resetamos para 0 0 1rem e conseguimos algo mais consistente em outros elementos.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Alguém famoso em Título da fonte

Elementos inline

O elemento <abbr> recebe estilos básicos para se destacar dentro do texto do parágrafo.

Nulla attr vitae elit libero, a pharetra augue.

Summary

O valor padrão da propriedade cursor é text, então, nós resetamos para pointer para dar a impressão que é possível interagir com elemento, clicando nele.

Alguns detalhes

Mais informações sobre os detalhes

Mais detalhes

Mais informações ainda sobre os detalhes.

Atributo HTML5 [hidden]

HTML5 acrescentou um novo atributo global denominado [hidden], o qual é estilizado como display: none, por padrão. Pegando uma ideia emprestada do PureCSS, nós aprimoramos esse valor padrão fazendo com que tenha a flag !important, previnindo que sua propriedade display seja sobrescrita, acidentalmente. Além do mais, o atributo [hidden] não é suportado nativamente no IE10 e esta declaração no nosso CSS contorna esse problema.

<input type="text" hidden>
Incompatibilidade jQuery

O atributo [hidden] não é compatível com os métodos JQuery $(...).hide() e $(...).show(). Portanto, atualmente, nós não usamos [hidden] no lugar de outras técnicas para gerenciar o display de elementos.

Para a simples troca de visibilidade de um elemento, sem modificar o valor do display e continuar permitindo que o elemento tenha efeito no fluxo do documento, use a class .invisible.