Fundação 6 - 10 novos recursos surpreendentes

Desenvolvedores do framework de front-end da Fundação não apenas sentaram-se em seus louros enquanto a equipe do Bootstrap estava trabalhando em seu novo e impressionante lançamento. No ano passado, eles fizeram uma turnê mundial para compartilhar seus conhecimentos com seus usuários e perguntar sobre como eles estavam usando o Foundation em seu trabalho na vida real..

Depois de voltar às suas mesas, eles agregaram as necessidades e desejos de seus usuários e embarcaram no planejamento da nova versão principal do framework: Foundation 6.

Ainda está em desenvolvimento, mas os planos são muito promissores. Os próximos recursos se concentram em três áreas principais: desempenho, personalização e acessibilidade. Vamos dar uma olhada em 10 desses recursos agora.

1. Fluxo de trabalho simplificado

Com base nas experiências de seus usuários, a equipe da Fundação desenvolveu um novo slogan, “Protótipo para Produção”, para a Foundation 6. Isso significa um novo fluxo de trabalho simplificado que permitirá aos designers e desenvolvedores ir direto do protótipo para a produção.

O objetivo da nova Fundação 6 é fornecer uma estrutura flexível e facilmente personalizável que torne possível escrever código limpo e semântico desde o início. A versão atual, Foundation 5 também permite prototipagem rápida, mas podemos esperar mais otimização do fluxo de trabalho na próxima versão.

2. Processo de instalação simplificado para a versão Sass

Uma das coisas mais impressionantes sobre o framework Foundation é que ele é construído com a linguagem de folha de estilo Sass, portanto, é possível personalizar rapidamente as regras de estilo padrão para as nossas necessidades reais.

O processo de configuração do Sass tem sido um pouco intimidador para muitos usuários, então a nova versão principal obter um processo de instalação simplificado para a versão Sass. Isso significa que a configuração do Sass requer muito menos dependências do que antes. Claro, se você preferir a versão CSS vanilla, você ainda pode optar por isso.

3. Uma nova pilha de configuração para os Maximalists

Além da versão regular do Sass, a Foundation 6 virá com um Versão Sass que fornecerá aos desenvolvedores opções de personalização poderosas.

ZURB, o criador da Fundação abrirá sua própria pilha de desenvolvimento para o público, incluindo o seu próprio gerador de site estático, servidor live-reload e cargas de técnicas de otimização interna incluindo a integração do UnCSS para remover estilos não utilizados e o UglifyJS para compactação JavaScript.

Então, basicamente, estaremos habilitados para trabalhar no mesmo ambiente de desenvolvimento que o ZURB usa internamente.

4. Diminuição do tempo de carregamento da página

A equipe da Fundação teve que enfrentar algumas críticas construtivas que alegaram que, na maioria dos projetos da Fundação, cerca de 90% do código CSS é inédito. Isso não foi verdade apenas para a Foundation, mas também para outras estruturas principais de CSS, como Bootstrap e TopCoat. Como parte de sua resposta, a Zurb decidiu reduzir significativamente o tamanho do arquivo do CSS gerado implementando uma redução de aproximadamente 40-50% no código.

É interessante notar que eles tentam se distanciar do Bootstrap, afirmando "Foundation não é um framework que terá classes estilísticas margin e padding ou round e radius". (Para referência, consulte as novas Classes de Utilitários do Bootstrap 4 em nosso post anterior).

5. Estilos Base Atuando como Wireframes

A outra parte do esforço de melhoria de desempenho é criar um estilo base que funcione como um wireframe em vez de um design final. Isso leva principalmente a um tema mais leve, mas também tem outra grande vantagem. Quanto mais regras de estilo forem movidas para componentes individuais, os desenvolvedores terão a chance de mais facilmente estilo seu design.

Espero que isso signifique que sites baseados em Foundation tem menos de uma aparência semelhante e padronizada, e os designers terão mais espaço para expcom belo e único solutíons que irão refutar preocupações recentes sobre uma web de aparência chata.

6. Importação Seletiva Facilitada

O Foundation 5 permite que os desenvolvedores escolham apenas os componentes que desejam usar. Fundação 6 levará este esforço para o próximo nível movendo o recurso de importação seletiva para o arquivo _settings.scss Sass.

Desta forma _settings.scss será um arquivo de configuração verdadeiramente universal, já que não só poderemos personalizar recursos como largura de linha ou fontes padrão com sua ajuda, mas também facilmente optando por fora dos componentes que não precisamos. Se fizermos isso, poderemos obter uma melhoria adicional no desempenho.

7. Mais magro e mais limpo Sass

No processo de redesenho, a equipe da Fundação repensou todos os aspectos da estrutura, para que também mudou a maneira como eles usaram a linguagem de folha de estilo Sass. Eles descobriram que, em alguns casos, eles usaram demais o Sass, o que levou ao supercomplicação desnecessária da saída do CSS. Com o objetivo de uma base de código mais enxuta e limpa em sua mente, eles também racionalizaram sua estrutura Sass.

Na Fundação 6, podemos espera diminuição do aninhamento e especificidade, consultas de mídia simplificadas (eles mesclaram o código repetitivo) e mixins de componentes em escala reduzida. O último significa que haverá menos mixagens de componentes, e os restantes terão menos parâmetros, o que levará a um código mais simples e mais lógico

Se você adora mixins, não se preocupe, cada componente ainda os terá, é apenas que eles serão redesenhados para serem mais eficientes e úteis do que são atualmente..

8. Mixins de grade aprimorados

Enquanto reduz mixins de componentes, a Foundation 6 virá com mixins de grade aprimorados que nos permitirá criar uma grade mais personalizada.

Zurb promete que seremos capazes de facilmente construir como sistema de grade complicado como nós queremos, incluindo linhas personalizadas mais sofisticadas e grades aninhadas, e a capacidade de converter as classes padrão em marcação semântica. Os mixins de grade melhorados farão a corrente criação de grade ainda mais intuitiva, flexível e mais rápida.

9. Integração perfeita de plugins JavaScript personalizados

O Foundation 5 atualmente tem muitos componentes JavaScript, como diálogos modais legais, dicas de ferramentas, barra de navegação pegajosa, mesas de luz e muitos outros que um site moderno precisa, mas o próximo lançamento importante nos permitirá escreva nossos plugins JavaScript personalizados aproveitando o núcleo da Fundação. É um enorme passo em frente em ambos facilidade de uso e desempenho.

No futuro, poderemos acessar os métodos de inicialização incorporados, alternar gatilhos e pontos de interrupção, e fazer uso de todos os outros recursos do JavaScript global da Foundation.

10. Acessibilidade total

Provavelmente, a característica mais surpreendente da nova Fundação 6 é que ela estará totalmente acessível. Todo componente e trecho de código virá com os atributos WAI-ARIA apropriados e funções de marco. Além disso, os desenvolvedores serão fornecido com um guia do usuário sobre como usar os padrões web da a11y.

Então, se queremos fornecer ao nosso cliente um site totalmente acessível, não precisamos fazer nada além de construir nosso projeto com a Foundation 6. Por favor, note que ainda precisaremos adicione as regras ARIA apropriadas às nossas páginas HTML por conta própria, embora o guia do usuário vindo da Zurb certamente facilite o processo de aprendizagem.