O Foundation 6 está quase pronto para sair do beta, e é melhor do que seus antecessores em quase todos os modos imagináveis: é mais simples, mais simples e, de alguma forma, mais sofisticado. Zurb se superaram.

Como você verá quando finalmente instalá-lo - simples o suficiente no OSX ou no Linux, mas no Windows, o Node pode ser complicado - o Foundation 6 só pode ser instalado através do gerenciador de pacotes atualmente. Eu sinto que estou ficando velho, sonhando com os bons velhos tempos quando os frameworks CSS chegavam em arquivos .zip, e não a partir de um comando de terminal.

Ainda assim, eu não estava mentindo quando disse que a Foundation 6 é incrível. Bem, eu deveria dizer “Foundation for Sites”, porque Foundation não é mais apenas uma estrutura. Além da Foundation for apps, a Zurb também está ocupada fazendo algumas ferramentas para acelerar o desenvolvimento.

Esta versão tem tudo a ver com desempenho… você pode construir sites mais rapidamente, esses sites serão baixados mais rapidamente e o JavaScript será executado mais rapidamente.

Primeiro, há o Fundação CLI , que pode instalar qualquer versão do Foundation para você, com projetos iniciais. O CSS pré-compilado em Foundation for Sites estará disponível para download separadamente após a liberação final. Por enquanto, no entanto, o CLI é a maneira de obtê-lo e manter-se atualizado com as alterações anteriores à versão final.

Então há Panini , um compilador de páginas estáticas com modelos de Handlebars e vários outros recursos para ajudá-lo a construir rapidamente protótipos e / ou sites estáticos. Ele compila o Sass, coloca todo o JavaScript em um arquivo, ele pode compactar todo o seu código e muito mais.

Funcionalidades da Fundação 6

Agora, não tenha a idéia de que esta versão do Foundation é menos cheia de recursos - ainda tem tudo o que você precisa e muito mais -, mas deve-se notar que alguns elementos mais adequados a aplicativos do que sites foram removidos. Esses elementos são agora parte de Fundação para aplicativos .

O resto do trabalho nesta versão foi sobre como se livrar de código redundante e simplificar tudo o que restava.

Por exemplo, em vez de criar três componentes de menu diferentes para três designs de menu diferentes, há apenas um componente de menu, com diversas variações. Para a pessoa que escreve o HTML, há pouca diferença: adicione uma classe e você tem um menu; mudar algumas classes, e você tem um menu que parece totalmente diferente.

De fato, para todas as diferenças, muitas das classes e marcações vão parecer muito familiares, se não as mesmas. Tudo é construído no Sass para que você possa personalizá-lo como sempre.

Esta versão tem tudo a ver com desempenho. Depois de aprender, você pode criar sites mais rapidamente, esses sites serão baixados mais rapidamente e o JavaScript será executado mais rapidamente. A fundação agora tem cerca de metade do peso do tamanho do arquivo. Metade

Novas características

Suporte explícito para idiomas RTL

Versões mais antigas suportavam idiomas RTL (da direita para a esquerda) como o árabe em certa medida; mas eles precisavam de alguns ajustes. Fundação 6 tem suporte embutido.

Grade flexível

A grade do Flex é exatamente o que você pensa: é o componente Grid refeito com o Flexbox. Por um lado, isso oferece vários recursos e opções que uma grade regular baseada em flutuação não pode manipular. Por outro lado, provavelmente não é tão bem suportado, especialmente pelo IE. É um trade-off.

Classes auxiliares de tipografia

Alguns aprimoramentos legais foram incluídos para a tipografia em estilo de site. Especificamente, há classes auxiliares projetadas para tornar os layouts tipográficos um pouco mais fáceis de lidar:

  • Classes de alinhamento de texto
  • Classes Subheader - aplica uma cor mais clara a qualquer título com a classe .subheader .
  • Estilos de parágrafo principal
  • Listas sem marcadores
  • Estatísticas - aplica um tamanho de fonte maior a números importantes

Como mencionado acima, todos os componentes de navegação anteriores foram mesclados em um único componente flexível. Isso significa que todos os tipos de navegação serão compatíveis entre si. Isso também significa que você pode escolher diferentes tipos de navegação para diferentes tamanhos de tela.

Deseja navegação detalhada em um telefone inteligente e uma barra horizontal em uma área de trabalho? Facilmente feito com as classes específicas do tamanho da tela. Quer o seu "Top bar" de volta? Basta adicionar um wrapper div em torno dos componentes padrão do menu.

Mas, embora seja mais simples de usar no geral, ainda é carregado com recursos. Não deixe de conferir a documentação sobre menus e navegação .

Distintivo

Você conhece esses pequenos círculos ou quadrados - geralmente colocados em ou perto de ícones de algum tipo - com números minúsculos neles? Como quando você tem notificações no Facebook? Aqueles são chamados de crachás.

Você aprende algo novo a cada dia. Além disso, a Fundação os tem agora.

Pegajoso

Precisa fazer algo ficar na tela enquanto o usuário rola? Quer fazer parar em um certo ponto? Sticky é o seu plugin! Esta também é a coisa para usar se você quiser fazer o menu Magellan funcionar como no Foundation 5.

Toggler

No caso de dropdowns, acordeões, drilldowns, dicas de ferramentas e modais não são suficientes para você, aqui está uma maneira genérica de fazer as coisas aparecerem ou desaparecerem. É um evento de alternância simples baseado em JavaScript que pode ser aplicado basicamente a qualquer coisa.

Eu imagino que seja para aqueles momentos em que nenhum dos outros componentes se encaixa no propósito, ou seria um exagero. Ele integra a biblioteca do Motion UI, para que você possa animar o ato de desaparecer da maneira que desejar.

Objeto de mídia

Bem, o nome soa como se fosse um elemento onde você pode incorporar um vídeo ou um objeto Flash (yuck), e você poderia fazer isso, eu acho. O que realmente significa é exibir qualquer objeto de mídia, como uma imagem, junto com informações de texto.

Por exemplo, você pode colocar o avatar de um usuário ao lado de seu nome de usuário e seu comentário em uma seção de comentários. Ou você pode usá-lo para colocar a data de lançamento de um filme, os principais atores e outros metadados ao lado de uma revisão do filme. Verifique a documentação por exemplo.

Recursos que são basicamente os mesmos de antes

Todos os recursos foram atualizados ou reescritos. No entanto, muitos são funcionalmente inalterados. Verifique novamente a documentação para se certificar de que você tem as classes certas, confira alguns dos upgrades e vá. Aqui estão esses recursos mais ou menos iguais, em ordem alfabética:

  • Abide - validação de formulário
  • Acordeões
  • Estilos globais básicos
  • Navegação breadcrumb
  • Botões
  • Chamadas
  • Mixins de cor
  • Menus suspensos
  • Equalizador - alinhamento de colunas
  • Flex Video
  • Formulários
  • Trocar conteúdo responsivo
  • Rótulo
  • Magellan - não mais pegajoso por padrão
  • Consultas de mídia (deve-se notar que os pontos de quebra foram alterados)
  • Fora da tela
  • Paginação
  • Barras de progresso
  • Revelar
  • Sliders
  • Comuta
  • Tabelas
  • Guias
  • The Grid
  • Miniaturas
  • Tooltip
  • Estilos de tipografia
  • Visibilidade e classes de utilidade

Então, é realmente bom?

Sim. O foco renovado em sites de construção (em oposição a um framework que tenta atender às necessidades de sites e aplicativos) é refrescante, e o tamanho reduzido é sempre uma vantagem.

Ansioso para ele ir ao vivo muito em breve.