O centro da Fundação 4 alinha apenas na tela pequena - sass, zurb-foundation, css-frameworks

Novo em usar a Zurb Foundation e começar comversão 4, não consigo encontrar uma maneira de ter a grade alinhada ao centro apenas em telas pequenas e, em seguida, reverter para a grade padrão em telas grandes. Existem classes nativas fornecidas com a Foundation 4 que podem fazer isso?

Eu dei uma olhada na documentação deles sobre http://foundation.zurb.com/docs/components/grid.html que demonstra as classes "pequeno-centrada" e "grande-centrada" que funcionam como planejado, mas há uma linha dizendo

Versões pequenas realizarão todos os pontos de interrupção, se não forem substituídas por uma versão grande.

Para mim isso soa como se eu precisasse criar uma classe que substituísse o alinhamento central da classe "small-center" em telas grandes, ou que houvesse uma classe existente - isso eu não consigo encontrar.

Aqui está um código de exemplo com o qual estou testando:

<div class="row">
<div class="large-2 columns">
<span>text</span>
</div>
<div class="large-6 columns">
<span>text</span>
</div>
<div class="large-4 columns">
<span>text</span>
</div>
</div>

O sistema de grade funciona como esperado e planejado, mas quero que todas as três colunas centralizem o alinhamento em telas pequenas.

Se eu precisar criar minhas próprias classes e estilos, alguém saberá do SCSS que pode estar disponível para a comunidade que já está lidando com esse problema?

Respostas:

Acontece que isso não é suportado fora da caixa. Há uma correção simples, porém, e isso é adicionando a substituição como eu sugeri no meu comentário.

@media only screen and (min-width: 48em) {
.column.large-left,
.columns.large-left {
float: left !important;
}
}

Observe o uso de em essa é a maneira padrão de fazer as coisas. Isso deve cuidar do smal-centered questão. Você então só tem que adicionar essa classe a qualquer small-centered elementos que você não quer centrado. Você pode vê-lo em ação aqui.

Você não pode fazer isso com classes não-semânticas da Foundation.

Você terá que fazer isso manualmente e (espero) semanticamente:

@media only screen and (max-width: 767px) {
.some-container { text-align: center; }
}

Você precisa fazer o checkout de arquivos CSS e procurar mediaqueries que são apenas para telas pequenas e, em seguida, adicionar propriedades para essa coluna específica.