Este post foi trazido a você com ajuda por MightyDeals
Mightydeals Fornece ofertas diárias para designers e desenvolvedores da web. Eles podem te pegar descontos até 97% de desconto em produtos e serviços para profissionais da web.
O Bootstrap é uma estrutura popular de desenvolvimento de front-end/UI moderna. É cheio de recursos e terá a maioria das coisas que você precisará para desenvolver sites e aplicativos responsivos. Bootstrap tem um layout responsivo de 12 grades, 13 plugins jQuery personalizados Para UIs comuns como carrosséis e janelas modais, um Customizador de Bootstrape mais.
O Bootstrap está bem documentado, e este projeto de código aberto tem muita cobertura em blogs e sites de tutoriais. Tutoriais de Bootstrap
Ferramentas e recursos de bootstrap
Fundação é outra estrutura popular de front-end. Com essa estrutura moderna do HTML5, você pode abordar o Web Design primeiro, ou de grandes exibições até tamanhos móveis. Tem recursos de prototipagem rápida, um Sistema de grade responsiva e muito mais.
A Foundation é da Zurb, uma empresa de designers de produtos focada no fornecimento de soluções baseadas na Web. Tutoriais da fundação
Ferramentas e recursos de fundação
O Skeleton é um caldeira CSS simples e limpa e limpa para sites e aplicativos HTML5. Tem as coisas que você precisa e nada mais. Alguns recursos notáveis: uma grade de layout responsiva, consultas de mídia padrão para suas propriedades de estilo CSS específico do dispositivo, uma classe CSS para elementos de imagem responsivos que escalam com a grade de layout, um modelo de PSD para zombar de seus designs da web e um html5 para navegadores da web antigos.
Se você deseja começar rapidamente com o design responsivo, deve procurar neste projeto de código aberto. Tutoriais do esqueleto
Ferramentas e recursos de esqueleto
Em 2010, o Boilerplate HTML5 tornou-se um dos primeiros e, posteriormente, as ferramentas de desenvolvimento de front-end de código aberto mais populares para obter sites HTML5 e aplicativos da Web em funcionamento rapidamente. É uma soluções de desenvolvimento da Web de compilação que permitem que nossos sites suportem os navegadores da web modernos. Incluído no Boilerplate HTML5 está um modelo HTML para dispositivos móveis, ícones de espaço reservado, CSS redefine para normalizar/padronizar os valores de propriedades da folha de estilo, consultas de mídia padrão para telas de visualização populares, um html5 shiv para navegadores da Web não modernos e muito mais.
Tutoriais de caldeira HTML5
Ferramentas e recursos de caldeira HTML5
| Ferramentas/Recursos | Descrição |
| Exibição de caldeira HTML5 | Blog do Tumblr com sites e aplicativos que usam Boilerplate HTML5 |
| Mobile Boilerplate | ramificação de boilerplate html5 especificamente para aplicativos móveis |
| Sites usando caldeira HTML5 | Lista de sites que usam placa de caldeira HTML5 |
| DOCs oficiais do HTML5 Boilerplate | |
Uma das crianças mais recentes do bloco, o HTML5 Kickstart é um pacote magro e médio de arquivos HTML, CSS e JavaScript que promete salvar as horas de trabalho dos desenvolvedores da interface do usuário. Com cerca de 300 KB, o HTML Kickstart empacota um soco: componentes da interface do usuário, como botões elegantes e barras de navegação, ícones escaláveis (usando a Font Awesome), um layout de grade responsivo, um componente de apresentação de slides habilitado para toque e assim por diante. Tutoriais do HTML Kickstart
Ferramentas e recursos do Kickstart HTML
A montagem é uma estrutura HTML5 de código aberto para a criação de aplicativos modernos. Esta biblioteca JavaScript usa a ligação declarativa que ajuda a manter facilmente os dados do aplicativo e a interface do usuário sincronizados. A Montage também possui um recurso chamado Blueprints para metadados de ligação associada em seus objetos de aplicativo – uma função bastante bacana para lidar com muitos elementos dinâmicos da página.
Tutoriais de montagem
Ferramentas e recursos de montagem
7. Sproutcore
O Sproutcore é uma estrutura front-end para a criação de aplicativos HTML5 rapidamente. Ele segue o padrão de arquitetura do MVC e promete a seus usuários a capacidade de criar experiências de usuário nativas para a Web. Tutoriais do Sproutcore
- Guias de Sproutcore (Sproutcore.com)
- Crie aplicativos móveis com Sproutcore (IBM.com)
Ferramentas e recursos do Sproutcore
| Ferramentas/Recursos | Descrição |
| Sproutcore Showcase | demos e exemplos nesta seção do site da Sproutcore |
| Documentos oficiais do crotcore | |
8. Zebra
A Zebra é uma estrutura rica de código aberto da interface do usuário que aproveita a tela HTML5 como a espinha dorsal de suas habilidades de renderização. Zebra diz que usá -lo “não é ciência do foguete” e que você pode começar em 5 minutos. Tutoriais da Zebra
Ferramentas e recursos da zebra
| Ferramentas/Recursos | Descrição |
| OOP Folha de dicas | Recurso útil para entender o conceito por trás da lógica de programação orientada a objetos da Zebra |
| Documentos oficiais da zebra | |
CreateJs é um conjunto de bibliotecas e ferramentas de JavaScript de código aberto para criar conteúdo rico e interativo HTML5. Consiste em 5 bibliotecas modulares JavaScript. Isso o ajudará a implementar efeitos de animação, suportando o áudio HTML5 em seu site e muito mais.
Adobe, Microsoft e AOL patrocinam este projeto. CreateJS Tutoriais
CreateJs Tools and Resources
10. Menos estrutura
Menos estrutura é uma estrutura moderna de front-end para a construção de projetos responsivos. Semelhante ao esqueleto (discutido acima), menos estrutura se concentra em ser apenas uma estrutura de grade de layout simples e simples. Possui 4 layouts pré-construídos: padrão, tablet, celular e móvel amplo.
Menos tutoriais da estrutura
Menos ferramentas e recursos da estrutura
| Ferramentas/Recursos | Descrição |
| Grade sem moldura | Conceito do sistema de grade, uma coleção de recursos e um bom ponto de partida para designers e desenvolvedores usando menos estrutura |
| Menos grade | Sobreposição de grade útil para ajudá -lo a desenvolver seus layouts |
| Menos guias 4 | Guias para o software Adobe Popular para ajudá -lo a zombar de seus layouts |
| Documentos oficiais de menos estrutura | |
Tabela de comparação
*Tamanho é determinado como o tamanho do arquivo de arquivo do pacote mestre no disco (no MS Windows)
Qual estrutura/ferramenta de estrutura/ferramentas responsivas HTML5 você usa?
Eu escolhi esses 10 com base em quantitativas (ou seja, atividade de desenvolvimento, popularidade etc.) e qualitativas (como reputação dos fundadores e simplesmente preferência pessoal). Estas são minhas melhores escolhas.
Eu gostaria de conhecer o seu. Por favor Escreva uma resenha sobre sua estrutura de desenvolvimento da web de front-end HTML5 favorita HTML5 ou Boilerplate e por favor também Discuta sua experiência pessoal com isso Nos comentários abaixo.
Perguntas Frequentes sobre Estruturas de Desenvolvimento Front-End HTML5
1. O que é o Bootstrap e por que é tão popular?
O Bootstrap é uma estrutura popular de desenvolvimento front-end/UI moderna que oferece recursos como um layout responsivo de 12 grades, plugins jQuery personalizados e um Customizador de Bootstrap. Ele é amplamente utilizado por designers e desenvolvedores da web devido à sua facilidade de uso e recursos abrangentes.
2. Qual é a diferença entre o Bootstrap e a Foundation?
A Foundation é outra estrutura popular de front-end que também oferece recursos de prototipagem rápida e um sistema de grade responsiva. A principal diferença entre o Bootstrap e a Foundation está no design e na abordagem de desenvolvimento, sendo a escolha entre as duas muitas vezes uma questão de preferência pessoal.
3. O que é o Skeleton e para quem é recomendado?
O Skeleton é uma estrutura CSS simples e limpa para sites e aplicativos HTML5 que oferece uma grade de layout responsiva e consultas de mídia padrão. É recomendado para aqueles que desejam começar rapidamente com o design responsivo, sem recursos desnecessários.
4. O que é o HTML5 Kickstart e quais são seus principais recursos?
O HTML5 Kickstart é um pacote magro de arquivos HTML, CSS e JavaScript que oferece componentes da interface do usuário, um layout de grade responsivo e ícones escaláveis. É projetado para economizar tempo e esforço dos desenvolvedores da interface do usuário, sendo uma opção popular para projetos web modernos.
5. Qual é a proposta da Montage como estrutura de desenvolvimento front-end?
A Montage é uma estrutura HTML5 de código aberto que utiliza a ligação declarativa para manter facilmente os dados do aplicativo e a interface do usuário sincronizados. Ela é conhecida por seus recursos avançados, como Blueprints para metadados de ligação, tornando-a uma escolha ideal para aplicativos modernos e dinâmicos.
