Quando o Contexto esperado não existe, isto é, o elemento-contêiner
não apresenta largura definida, é preciso procurar no elemento imedia-
tamente ascendente até que se encontre a definição de uma largura.
Ou seja, como o Contexto de .content-main, que é o elemento .content,
não possui declaração explícita de largura, é preciso verificar o próximo elemento-ascendente. No caso, é o .container. Este sim com declaração (prévia) de largura
de 960px. Por isso, neste caso, o Contexto será de 960:
/* Antes */
.content-main {
float: left;
width: 593px; /* Medida maior da Proporção Áurea aplicada ;-) */
47
3.5. Convertendo um layout fixo em layout fluído
Casa do Código
}
/* Depois */
.content-main {
float: left;
width: 61.7708%; /* 593 (.content-main) / 960 (.container) */
}
O elemento .hero (e seu descendente .brief), dentro de .content-main, tam-
bém precisa ter suas medidas convertidas. Algo interessante a se levar em conta é
que o cálculo da relatividade de .hero .brief é 5 / 593 = 0.008431. Contudo,
apesar de esta ser uma ciência (pretensiosamente) exata, há muito do fator humano envolvido. Portanto, quando estiver desenvolvendo grids flexíveis e algum resultado, apesar de preciso, não for do agrado, não há nada de mais em (caso isso seja respon-sabilidade sua) arredondar este valor.
/* Antes */
.hero {
margin: 25px 0;
}
.brief {
margin: 5px 0;
}
/* Depois */
.hero {
margin: 4.2158% 0; /* 25 / 593 */
}
.brief {
margin: 1% 0; /* 5 / 593 */
/* = 0.8431%, que, opcionalmente, pode ser arredondado para 1% */
}
Prosseguindo com a conversão dos outros elementos descendentes de
.content-main:
/* Antes */
.last-contents {
font-size: 12px;
48
Casa do Código
Capítulo 3. layout fluído
}
.last-content-call {
float: left;
margin: 15px 15px 15px 0;
width: 280px;
}
.last-content-call .brief {
margin: 5px;
}
/* Depois */
.last-contents {
font-size: .75em; /* 12 / 16 */
}
.last-content-call {
float: left;
margin: 2.5295% 2.5295% 2.5295% 0; /* 15 / 593 (.content-main) */
width: 47.2175%; /* 280 / 593 */
}
.last-content-call .brief {
margin: 1.7857% 0; /* 5 / 280 */
}
A conversão da barra lateral, com todos seus descendentes, fica assim:
/* Antes */
.content-sidebar {
background-color: #F0F0F0;
float: right;
padding: 10px;
width: 322px;
}
.main-nav ul {
list-style-type: none;
}
.main-nav li {
49
3.5. Convertendo um layout fixo em layout fluído
Casa do Código
background-color: #F9F9F9;
float: left;
margin: 15px;
outline: 1px solid #DEDEDE;
text-align: center;
width:
130px;
}
.main-nav a {
display: block;
padding: 10px;
text-decoration: none;
}
/* Depois */
.content-sidebar {
background-color: #F0F0F0;
float: right;
padding: 1.0416%; /* 10 / 960 */
width: 33.5416%; /* 322 / 960 */
}
.main-nav ul {
list-style-type: none;
}
.main-nav li {
background-color: #F9F9F9;
float: left;
margin: 4.6583%; /* 15 / 322 (.content-sidebar) */
outline: 1px solid #DEDEDE;
text-align: center;
width: 40.3726%; /* 130 / 322 */
}
.main-nav a {
display: block;
padding: 7.6923%; /* 10 / 130 */
text-decoration: none;
}
50
Casa do Código
Capítulo 3. layout fluído
Por fim, nosso humilde rodapé:
/* Antes */
.main-footer {
background-color: #F0F0F0;
clear: both;
float:left;
font-size: 12px;
margin: 15px 0;
padding: 15px;
text-align: center;
width: 100%;
}
/* Antes */
.main-footer {
background-color: #F0F0F0;
float:left;
font-size: .75em; /* 12 / 16 */
margin: 1.5625% 0; /* 15 / 960 */
padding: 1.5625%; /* 15 / 960 */
text-align: center;
width: 100%;
}
Ao pegar nosso CSS convertido e o abrir como estilização do HTML que já te-
mos, num primeiro momento, não dá pra notar nada de mais. Com exceção de
alguns poucos pixels pra lá ou pra cá, está a mesma coisa que visualizamos em nosso layout fixo.
51
3.5. Convertendo um layout fixo em layout fluído
Casa do Código
Mas, ao redimensionar a janela, os caminhos da responsividade para a web co-
meçam a ser revelados:
Perceba que, ao redimensionar a janela do browser - e, claro, caso aconteça o
52
Casa do Código
Capítulo 3. layout fluído
fato de alguma pessoa já acessar nossa página-exemplo usando resoluções das mais
diversas -, o que acontece é que a apresentação está agradavelmente padronizada e
responsiva!
Com isso você dá o primeiro grande passo para a construção de layouts respon-
sivos para a web, meus parabéns!
Mas apesar de já ser um enorme passo em nossa jornada responsiva, nem so-
mente de um grid flexível se dá o desenvolvimento de um site responsivo. Como
vimos, ainda existe mais princípios de um web design responsivo a serem explora-
dos: recursos flexíveis e Media Queries.
53
Capítulo 4
Imagens e recursos flexíveis
4.1
CSS para imagens flexíveis
Continuando com o desenvolvimento de nosso HTML de exemplo, suponhamos que
agora foi decidido que cada .last-content-call terá, logo abaixo do título, uma
imagem para ilustrar seu conteúdo. Como já estamos num viés de desenvolvimento