Noir é um site 100% responsivo de barbearia, com dark-mode e 4 páginas feito em HTML, LESS e JavaScript, sem o uso de frameworks.
Esse site utiliza o pré-processador de CCS, LESS, para usar sua capacidade de fazer cálculos de CSS para a responsividiade. Como as unidades 'em' são baseadas no tamanho da fonte de seu elemento pai. Se o elemento pai não tiver um tamanho de fonte declarado em seu CSS, o próximo elemento pai com um tamanho de fonte declarado será sua base. Como não estou declarando um tamanho de fonte em nenhum container, literalmente tudo na página procurará um tamanho de fonte na tag 'body' e, como declaramos um tamanho de fonte de '20px', os containers se dividirão para obter o valor em 'em'. Então, apenas defino o tamanho da fonte na tag 'body' para '15px' em dispositivos móveis, tablets e desktops pequenos com até '1023px' de largura. Em seguida, em '1024px' de largura, é definido como '20px'.
As medidas de cada elemento que estariam em pixels agora estarão em 'ems' divididas em 20 (o tamanho de fonte padrão do projeto). Portanto, quando temos um elemento com '100px' de largura, no arquivo '.less' o escrevemos como '100/20em', e o compilador o compilará em css como '5em'. Como o cálculo do 'em' é baseado em '20px', quando alteramos o tamanho da fonte da tag 'body' para '15px', ele encolherá TUDO porque os cálculos do 'em' estão em um tamanho de fonte menor e diminuirão proporcionalmente.
Por exemplo, se um elemento tiver '20px' de largura, ele será escrito como '20/20em' em seu arquivo '.less' e compilado para '1em' em seu arquivo '.css'. Essa é a sua proporção. Quando alteramos o tamanho da fonte do 'body' (a tag pai principal de tudo) para um número menor no celular, por exemplo, ('15px'), estamos dimensionando o tamanho de '1em' para caber em uma fonte baseada em '15px' em vez de '20px'. '1em' seria tecnicamente '15/15em', o que significa que ao reduzir o tamanho da fonte da tag 'body' em '5px', TUDO que se baseia em seu tamanho de fonte de '20px' também se reduzirá em '5px' em escala.
Ambas as instâncias de '15/15' e '20/20' resultam em '1em'. O tamanho da fonte base do pai determina quão grande o valor '1em' é escalado para cima ou para baixo por padrão. Pense em 'ems' como a proporção da medida e seu tamanho de fonte pai, e o tamanho da fonte da tag 'body' está dizendo no total, em tudo, o quão grande ou pequeno eles precisam ser. Estamos definindo a proporção com base nos estilos e medidas da fonte padrão.
Quanto maior o tamanho da fonte da tag 'body', maior será a escala de '1em'. Tamanhos de fonte menores diminuem o tamanho de '1em'. É assim que podemos controlar a responsividade móvel. Assim, não precisa escrever estilos CSS separados para seu celular e fazer tamanhos maiores no desktop. Ao escrever todos os valores de 'px' de nossas propriedades 'css' em 'x/20em', tudo será reduzido no celular e crescerá para seu tamanho de escala final no tamanho de fonte de '20px'.
Para que esse projeto funcione corretamente e dimensione como deveria, utilizei esse sistema de cálculo '.less'. Portanto, se tiver um texto 'h1' que deveria ter '50px', eu escrevo como '50/20em'. Assim como eu faria normalmente. No entando, qualquer uma de suas propriedades e filhos precisam ser divididos pelo novo tamanho de fonte declarado. Portanto, se tiver uma margem inferior de '20px', será '20/50em', e não '20/20em'. Porque o pai tem seu próprio tamanho de fonte declarado agora.
Aqui está um exemplo de como isso fica em '.less' usando a tag 'h1':
h1 {
color: #fff;
font-size: 24/20em; <--- Novo tamanho de fonte declarado
line-height: 28/24; <--- Tudo dentro do h1 é dividido por este novo tamanho de fonte (line-height não precisa adicionar 'em')
margin-bottom: 15/24em; <--- Tudo dentro do h1 é dividido por este novo tamanho de fonte
span {
display: block;
color: #fff;
margin-bottom: 50/24em; <--- Tudo dentro do h1 é dividido por este novo tamanho de fonte
}
}
Além disso, se essa tag 'span' tiver um tamanho de fonte diferente da tag 'h1', eu declaro o novo tamanho da fonte dividido pelo novo tamanho da fonte do pai.
h2 {
font-size: 24/20em; <--- Novo tamanho de fonte
span {
display: block;
color: #fff;
font-size: 50/24em <--- Novo tamanho de fonte declarado, dividido pelo tamanho da fonte da tag pai
margin-bottom: 50/50em; <--- Tudo dentro da tag span é dividido por este novo tamanho de fonte
}
}
- Eu utilizei o pré-processador LESS para usar sua capacidade de fazer cálculos.
Para instalar o pré-processador LESS, primeiro você deve baixar e instalar o npm para poder instalar qualquer programa que desejar com uma linha de código. Após instalar o npm, instale o LESS usando o seguinte comando no seu terminal:
npm install less
- Eu uso o aplicativo Koala para compilar os arquivos LESS para CSS, com a função de compilação automática em tempo real.
Aqui está um link para baixar o Koala: http://koala-app.com/
Clique no ícone de '+' e selecione a pasta css do projeto para iniciar o processo de compilação de LESS para CSS. Enquanto o aplicativo estiver aberto, ele irá monitorar e compilar automaticamente.
Criado e distribuído sob a licença GPL v3, veja LICENSE.txt para mais informações.
As contribuições são o que torna a comunidade de código aberto um lugar incrível para aprender, se inspirar e criar. Qualquer contribuições que você fizer são muito apreciadas.
Se você tiver uma sugestão para melhorar o projeto, faça um fork do repositório e crie uma solicitação pull. Você também pode simplesmente abrir uma issue com a tag "melhoria". Se puder, por favor, dê para dar uma estrela ao projeto! Obrigado.
Página Home Light:
Página Home Dark:
