Nesse artigo vou mostrar como fazer um Layout minimo (do tipo artigo) responsivo, usando o mínimo de CSS possível e sem uma única linha de JavaScript, o objetivo é que mesmo sem conhecimento algum em CSS a pessoa consiga seguir tranquilamente (mas conhecimento em HTML é indispensável), obviamente isso só funciona em um layout e muita coisa não está implementada.
Pra começar vamos estilizar o corpo da página:
body {
margin:0px;
font-family: sans-serif;
}
Isso faz o seguinte:
-
bodydiz que é pra aplicar na tag body, ou seja tudo que estiver entre { e } será aplicada na tag e todas as suas filhas -
margindiz a margem da página ou seja a distância entre a borda da janela do navegador (nesse caso) e as tag filhas -
font-familydiz pro navegador a família da fonte, se nós aplicássemos uma fonte e o sistema do usuário não a tivesse o navegador usaria uma da mesma família, mantendo o padrão da página, na maioria das vezes se usa duas opções (apesar de existirem outras),serifque são fontes que possuem um traço no ficar de cada ponta esans-serif(ou sem serifa) que tem os cantos arredondados
Imagens
Uma das coisas que mais quebra layouts são as imagens, isso porque muitas vezes elas são maiores que a tela ou a largura da tag que as contém, pra corrigir basta limitar a propriedade max-width que representa a largura máxima da tag a 100% do tamanho da tag pai (ou tela dependendo do caso):
img {
max-width: 100%;
}
Fallback pro HTML 6
Uma tag bem útil no HTML é a <center>, ela centraliza o seu conteúdo, mas ela foi marcada como depreciada no HTML 5 o que significa que na próxima versão ela irá deixar de funcionar vamos nos precaver, a função CSS que faz uma tag ter o mesmo comportamento é a text-align: center, apesar do text- isso funciona com qualquer tipo de conteúdo:
center {
text-align: center
}
Agora mesmo com a tag <center> desaparecendo ela continuará funcionando
Finalizando
Por fim vamos justificar o texto e definir margens para a tag article <main>:
main {
text-align:justify;
margin-top:5%;
margin-left:10%;
margin-right:10%;
margin-bottom:3%;
}
Note que dessa vez nas margens usamos porcentagem ao invés de pixels (px), ou seja ao invés de ter um tamanho fixo ele se adaptará ao tamanho da tela do usuário
Conclusão
Esse é o menor exemplo possível de algo do gênero, ele não modifica o layout por exemplo, mas já é o suficiente pra se ter uma boa visualização em diferentes dispositivos.
Coisas a fazer:
Como eu disse esse CSS é o mínimo possível, pra ficar viável como um CSS Module algumas coisas precisam ser implementadas:
- Menu hamburger (ou seja num desktop ele aparece mas no mobile é necessário tocar em um botão)
- Barra fixa no topo e outra na parte inferior
- Rodapé
- Suporte a tables
Código fonte completo:
Código CSS:
body {
margin:0px;
font-family: sans-serif;
}
img {
max-width: 100%;
}
center {
text-align: center
}
main {
text-align:justify;
margin-top:5%;
margin-left:10%;
margin-right:10%;
margin-bottom:3%;
}
Conteúdo da tag <body> para exemplo:
<main>
<header>
<h1>Título do artigo</h1>
<h3>Subtítulo do artigo</h3>
</header>
<article>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel pretium sem, at sollicitudin nulla. Nunc pharetra justo quis eros pulvinar condimentum. Duis gravida, risus at pretium rhoncus, nunc nunc posuere augue, a finibus nunc eros sed augue. Nulla tristique libero sed dui elementum cursus. Fusce sed faucibus sapien. Duis malesuada volutpat elementum. Vestibulum blandit faucibus dictum. Vivamus ultricies augue in ornare aliquet.
</p>
<center>
<img src="GPS-2_0--splash-techno-dark.png"/>
</center>
<p>
Aliquam viverra augue a ex pharetra imperdiet. Fusce lobortis orci urna, non faucibus diam semper id. Aenean quis semper nunc, sed dapibus ex. Sed pulvinar ut ante quis blandit. Duis id turpis semper, aliquet nisi eget, posuere dui. Donec eget tempus turpis, finibus ultricies nisi. Integer pharetra elementum risus ac vehicula. Cras et vehicula nunc.
</p>
<center>
<img src="https://github.com/sudo-give-me-coffee/PhotoGIMP/raw/master/screenshot.png"/>
</center>
<p>
Nullam fermentum justo arcu, sed aliquam mi accumsan vitae. Proin in leo neque. Aenean iaculis eleifend odio, a varius diam ornare vitae. Morbi ac malesuada lectus, non rhoncus urna. Nunc sit amet pellentesque quam. Maecenas tristique imperdiet nisi a accumsan. Quisque auctor, eros ac blandit convallis, metus tortor cursus orci, quis blandit magna nibh quis turpis. Nullam tincidunt aliquam fermentum. Aliquam placerat blandit arcu, id malesuada nunc accumsan id. Vestibulum a sapien mauris. Sed tortor augue, pellentesque euismod tempus id, ullamcorper non diam. Cras facilisis elit id risus consectetur, ac congue arcu aliquet. Pellentesque iaculis dui tincidunt, suscipit libero a, pulvinar metus. Fusce in rutrum justo, nec eleifend dolor. Aliquam erat volutpat.
</p>
</article>
</main>