Começamos brincando com nosso módulo de postagem do blog, mexendo no espaçamento. Também adicionamos o pequeno quadrado colorido no canto superior esquerdo do módulo, um significante visual do tipo de conteúdo que ele é.
A próxima alteração que fazemos é diminuir algumas das lacunas externas em tamanhos de tela mais estreitos. Em telas grandes, o conteúdo é 80% largo (bordas de 10% de largura), mas parece melhor ir mais para 90% em telas menores (bordas de 5% de largura).
Adicionamos uma pequena transição para quando a consulta de mídia chegar, o que pode ser um truque de designer muito divertido. Eu gosto neste vídeo, mas eventualmente isso foi retirado do design. Ele pode ficar instável quando há muito mais conteúdo na página e bastante perturbador.
Alteramos nosso sistema de grade para ter um ponto de interrupção no menor tamanho. É super fácil, nós apenas paramos de flutuar nas colunas e as tornamos width: 100%;Yay para não pensar demais em grades! Batalhamos alguns problemas de especificidade no caminho.
Abrimos o simulador iOS real para verificar a grade funcionando em um dispositivo móvel “real”. Nós lutamos um pouco para encontrar a metatag adequada, mas, no final das contas, encontramos a correta em CSS-Tricks.com. Funciona! Mas é claro que temos alguns problemas de posicionamento que precisamos resolver. Para registro, essa metatag é:
Nós mexemos, mexemos, mexemos com espaçamentos e tamanhos até que as coisas pareçam OK. As coisas estão parecendo bem responsivas no final!