[PoC] CSS responsivo mínimo (página de artigo)

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:

  • body diz que é pra aplicar na tag body, ou seja tudo que estiver entre { e } será aplicada na tag e todas as suas filhas

  • margin diz a margem da página ou seja a distância entre a borda da janela do navegador (nesse caso) e as tag filhas

  • font-family diz 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), serif que são fontes que possuem um traço no ficar de cada ponta e sans-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>
1 Curtida

Hoje em dia existem os frameworks da vida, tipo bootstrap, porem para quem ta começando ( como eu ) no mundo front-end o aconselhavel é aprender fazer tudo na mão sem usar nenhuma framework.

Adoro fazer as coisas com HTML e CSS, da para fazer muita coisa bem legal sem o Javascript, como paginas responsivas ( Como a do seu exemplo ), menus drop-down e etc. o único empecilho são certos navegadores que acabam não ficando igual, dai se torna necessário o uso do javascript para forçar eles a moldar a pagina como deve ser

Gostei do codigo, para uma pagina simples funciona bem.

Costumo usar um código parecido no estilo das paginas de temas wordpress que crio