/ / Zurb Foundation 3 - Seções de largura total e largura máxima de mudança? - CSS, html5, frameworks, design responsivo, media-queries

Zurb Foundation 3 - Seções de largura total e largura máxima de mudança? - CSS, html5, frameworks, design responsivo, media-queries

Estou a usar Fundação ZURB 3 em um projeto meu. Eu amo sistemas de grade e sites responsivos, mas o meu problema é que eu ainda acredito fortemente que eles devem ser construídos em mais de 1000px.

Eu tenho algumas perguntas:

1) Em primeiro lugar gostaria de fazer certas seções (divs) largura total. Agora eu li eu posso apenas substituir <div class="row"> com <div class="container"> por exemplo, e isso irá gerar esse efeito. Agora, por algum motivo, isso não parece certo, devo apenas criar minha própria classe de largura total, ou qual seria a maneira correta de fazer isso?

2) Eu adoraria tê-lo baseado em um maiorresolução, talvez um máximo de 1440px de largura ou até mesmo um fluido de 100% de largura total. Como eu poderia fazer isso e / ou a Fundação não é a estrutura correta para mim? Eu amo o fato de que vem com todos os modelos, por isso é super rápido e amigável para fazer maquetes.

Desde já, obrigado.

Respostas:

11 para resposta № 1

Atualizar: Por favor, pare de votar neste post. A estrutura mudou significativamente desde que a pergunta foi respondida. Se você estiver usando o Foundation 4 ou superior, por favor, veja as respostas atualizadas e vote nelas.

Apenas para versões anteriores da Foundation 3 Adicione a seguinte substituição ao seu CSS (Isso deve aparecer depois ou no final de foundation.css)

.row {
width: 100%;
}

Isso substituirá o padrão da estrutura e fará com que o design fique em tela cheia. Sinta-se à vontade para alterar este valor para atender às suas necessidades.

Há também um download personalizado disponível em http://foundation.zurb.com/download.php (o que provavelmente faz a mesma coisa, substitui ou substitui a largura do .row)


7 para resposta № 2

Edição / substituição de base é fácil. Na Foundation 4 você pode editar seu arquivo _settings.scss. Descomente a $ row-width: emCalc (some_number.px); para uma largura de linha que você gostaria de usar.


1 para resposta № 3

Uncommenting $row-width: rem-calc(1000); funcionou para mim