Fundação (estrutura) - Foundation (framework)
| Desenvolvedor (s) | ZURB |
|---|---|
| lançamento inicial | Setembro de 2011 |
| Versão estável | 6.6.3 / 8 de abril de 2020
|
| Repositório | Repositório de Fundação |
| Escrito em | HTML , CSS , Sass e JavaScript |
| Modelo | desenvolvimento web |
| Licença | Licença MIT |
| Local na rede Internet | get |
O Foundation é uma estrutura de front-end responsiva . O Foundation fornece uma grade responsiva e componentes de UI HTML e CSS , modelos e fragmentos de código, incluindo tipografia, formulários, botões, navegação e outros elementos de interface, bem como funcionalidade opcional fornecida por extensões JavaScript . Foundation é um projeto de código aberto , anteriormente mantido pela ZURB. Desde 2019, a Fundação é mantida por voluntários.
Origem
O Foundation surgiu como um projeto ZURB para desenvolver código front-end mais rápido e melhor. Em outubro de 2011, a ZURB lançou o Foundation 2.0 como código aberto sob a licença MIT . ZURB lançou o Foundation 3.0 em junho de 2012, 4.0 em fevereiro de 2013, 5.0 em novembro de 2013 e 6.0 em novembro de 2015. A equipe começou a trabalhar na próxima versão do Foundation for Sites 7, que provavelmente deixará de oferecer suporte para navegadores mais antigos e implementará tecnologias mais recentes como flexbox ou talvez sistema de grade calculado.
Foundation for Emails, anteriormente conhecido como ZURB Ink, foi lançado em setembro de 2013.
O Foundation for Apps foi lançado em dezembro de 2014.
Recursos
O Foundation foi projetado e testado em vários navegadores e dispositivos. É uma estrutura responsiva construída com Sass / SCSS. A estrutura inclui os padrões mais comuns necessários para o protótipo de um site responsivo. Através do uso de mixins Sass, os componentes Foundation são facilmente estilizados e simples de estender.
Desde a versão 2.0, ele também oferece suporte a design responsivo . Isso significa que o design gráfico das páginas da web se ajusta de forma dinâmica, levando em consideração as características do dispositivo utilizado (PC, tablet, celular). Além disso, desde o 4.0, ela adotou uma abordagem que prioriza os dispositivos móveis, projetando e desenvolvendo primeiro para dispositivos móveis e aprimorando as páginas da web e os aplicativos para telas maiores.
O Foundation é de código aberto e está disponível no GitHub . Os desenvolvedores são incentivados a participar do projeto e fazer suas próprias contribuições para a plataforma.
Estrutura e função
A fundação é modular e consiste essencialmente em uma série de folhas de estilo Sass que implementam os vários componentes do kit de ferramentas. As folhas de estilo do componente podem ser incluídas via Sass ou personalizando o download inicial do Foundation. Os desenvolvedores podem adaptar o próprio arquivo Foundation, selecionando os componentes que desejam usar em seu projeto.
Os ajustes são possíveis através de uma folha de estilo de configuração central. Mudanças mais profundas são possíveis alterando as variáveis Sass.
O uso da linguagem de folha de estilo Sass permite o uso de variáveis, funções e operadores, seletores aninhados, bem como os chamados mixins.
Desde a versão 3.0, a configuração do Foundation também tem uma opção especial "Personalizar" na documentação. Além disso, os desenvolvedores utilizam em um formulário para escolher os componentes desejados e ajustar, se necessário, os valores das várias opções às suas necessidades. O pacote gerado posteriormente já inclui a folha de estilo CSS pré-construída.
Sistema de grade e design responsivo
O Foundation vem com um layout de grade flexível de 940 pixels de largura. O kit de ferramentas é totalmente responsivo para fazer uso de diferentes resoluções e tipos de dispositivos: telefones celulares, formato retrato e paisagem, tablets e PCs com baixa e alta resolução (widescreen). Isso ajusta a largura das colunas automaticamente.
Noções básicas sobre folha de estilo CSS
O Foundation fornece um conjunto de folhas de estilo que fornecem definições básicas de estilo para todos os principais componentes HTML. Eles fornecem um navegador e uma aparência moderna e uniforme em todo o sistema para formatar texto, tabelas e elementos de formulário.
Componentes reutilizáveis
Além dos elementos HTML regulares, o Foundation contém outros elementos de interface comumente usados. Isso inclui botões com recursos avançados (por exemplo, agrupamento de botões ou botões com opção suspensa, listas de criação e navegação, guias horizontais e verticais, navegação, navegação estrutural, paginação etc.), rótulos, recursos tipográficos avançados e formatação para mensagens como avisos.
Componentes e plug-ins de JavaScript
Os componentes JavaScript do Foundation 4 foram movidos da biblioteca jQuery JavaScript para Zepto, presumindo-se que a alternativa fisicamente menor, mas compatível com a API para JQuery, seria mais rápida para o usuário. No entanto, o Foundation 5 voltou para a versão mais recente JQuery-2. "O jQuery 2.x tem a mesma API do jQuery 1.x, mas não oferece suporte ao Internet Explorer 6, 7 ou 8." o blog oficial do ZURB explica, e o escritor não assinado afirma que a mudança de volta foi devido a problemas de compatibilidade com esforços personalizados; e esse desempenho não foi tão bom, no teste de uso com o jQuery-2 mais recente.
Os componentes da base jQuery fornecem elementos gerais da interface do usuário e extensões de marca. A lista inclui: diálogo, dicas de ferramentas, carrosséis, alertas, limpeza, cookies, lista suspensa, formulários, joyride, magellan, órbita, espaço reservado, revelar, seção, barra superior, vídeo flexível e muitos outros. Plug-ins jQuery adicionais podem ser instalados na estrutura Foundation para fornecer funcionalidade avançada em qualquer área da IU, incluindo animação e elementos "fora da tela" como menus deslizantes.
Usar
Existem três níveis de integração para o Foundation: CSS, SASS e Ruby on Rails com o Foundation Rails Gem.
CSS
Para usar o Foundation CSS, os pacotes CSS padrão ou personalizados podem ser baixados da página de download e instalados nas pastas do servidor web apropriadas. O Foundation é então integrado à marcação de página HTML.
SASS
A instalação do Foundation SASS usa Ruby, Node.js e Git para instalar os fontes do Foundation. O Foundation então fornece uma interface de linha de comando para modificar e compilar o código-fonte em CSS para uso na marcação de página HTML.
Gem Foundation Rails
A gem Foundation Rails pode ser instalada adicionando "gem 'Foundation-rails'" ao Gemfile do aplicativo Rails.
