/framework-fed

Framework FED

Primary LanguageCSS

Framework FED

Estruturação

(?) - opcional

config.rb
/css
  fonts (?)
estrutura.txt
humans.txt
imagens
index.html
js
  libs
    jquery-1.10.2.js
    modernizr-custom.js
  main.js
  plugins.js
scss
  _elementos.scss
  _fontes.scss
  _reset.scss
  _medium.scss
  _large.scss
  _templates.scss
  geral.scss
  impressao.scss

Features

  • Simples. Ao contrário da grande variedade de frameworks presentes no mercado, o Framework FED preza pela simplicidade e flexibilidade uso, sem engessar a forma como os layouts são montados;
  • Todo construído com base no pré-processador SASS, separando o código de desenvolvimento daquele gerado para produção;
  • Em conjunto com SASS, a biblioteca Compass adiciona diversos facilitadores para criação de elementos visuais de forma intuitiva;
  • Mobile First + Responsive Web Design: framework desenvolvido com lógica para melhor performance e escabilidade de acordo com as diferentes resoluções de tela. As regras gerais são usadas por todas as telas e, a medida que for necessário, novas regras são adicionadas para incrementar o layout. Os breakpoints são definidos através de variáveis, facilitando futuros ajustes durante o andamento do projeto;
  • Schema ready: tag body utilizando padrão Schema para classificação das páginas. Verificar documentação completa em schema.org.

Plugins recomendados

  • Adaptive Images: serve imagens de diferentes resoluções dependendo do dispositivo utilizado;
  • Swiper: carrossel de imagens e conteúdo preparado para touchscreen;
  • GreenStock JS: biblioteca de animação em JS, com performance superior a jQuery e ao próprio CSS3;
  • Magnific Popup: plugin para criação de lightboxes em geral;
  • Packery: gera layouts flexíveis baseados em conteúdo modular (ex: Pinterest).
  • ScrollMagic: para layouts com efeitos no scroll da página.

Precisa de suporte para IE8 e inferiores?

Recursos para que este framework se adeque a navegadores rudimentares:

  • Conditional Comments: item importante é o uso de classes na tag HTML para distinguir as diferentes versões do Internet Explorer. Sendo assim, ao desenvolver para versões antigas, recomenda-se o uso do seguinte código no cabeçado lhos HTMLs:
  <!DOCTYPE html>
  <!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
  <!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
  <!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
  <!--[if gt IE 8]><!--> <html class="no-js" lang="pt-br"> <!--<![endif]-->