Lista com os melhores Frameworks CSS

Nesse post eu fiz uma lista com os melhores frameworks CSS disponíveis hoje para auxiliar o desenvolvimento Front-End.

Nesse post eu fiz uma lista com os melhores frameworks CSS disponíveis hoje para auxiliar o desenvolvimento Front-End.

Essa lista e fiz com base nos links que eu tinha salvo no meu perfil do Delicious, quem quiser acessar o meu perfil para ver minha coleção de links pode clicar aqui.


Foundation 5

Foundation - Web Social Dev - Posts

O Foundation é um framework mobile-fisrt desenvolvido pela agência Zurb, de design de produtos. Ele é um dos frameworks mais avançados disponíveis hoje. Segundo a Zurb, “foram dedicados os 15 anos de trabalho e experiência da agência no desenvolvimento deste framework”, que é disponibilizado como uma ferramenta open source com comunidade ativa mantida pela Zurb. O Foundation é muito utilizado porém a quantidade de ferramentas de auxilio e tutoriais disponíveis para ele não se compara ao Bootstrap, pelo menos na nossa lingua (português).

Demo & Download GitHub

Bootstrap

Bootstrap - Web Social Dev - Posts

O Bootstrap é um framework mobile-first desenvolvido e mantido pela equipe de desenvolvimento do Twitter e pela comunidade de desenvolvedores que utilizam o framework. É um dos frameworks mais utilizados atualmente e um dos que mais possui derivados. Ele é tão utilizado que você pode encontrar facilmente ferramentas para auxiliar a utilização do próprio framework, assim como vários tutoriais espalhados pela web. A partir da versão 3.1 o framework foi disponibilizado em LESS e SASS. Também possui componentes, pode ser customizado antes de baixar e possui uma font de ícones embutida.

Demo & Download GitHub


UI-Kit

UI-Kit - Web Social Dev - Posts

O UI-Kit é um framework desenvolvido pela empresa YOOtheme, com licença do MIT. É um framework bem leve e de desenvolvimento modular. Utiliza o pré-processador LESS, possui componentes para auxiliar o desenvolvimento, é responsivo e pode ser customizado antes do download.

Demo & Download GitHub

Gumby

Gumby - Web Social Dev - Posts

O Gumby é um framework flexível, responsivo compilado com SASS, desenvolvido pela Digital Surgeons, com licença do MIT. Possui uma séria de complementos como parallax, ui-kit flat e alguns complementos baseados em soluções de outros desenvolvedores, que fazem dele um framework muito completo. Como todos os outros frameworks citados, ele também é customizável e possui uma fonte de ícones embutida.

Demo & Download GitHub


Pure

Pure Framework - Web Social Dev - Post

O Pure é um framework desenvolvido pela equipe de desenvolvedores do Yahoo com licença do Yahoo BSD License. É um framework super leve, não chega a ter nem 100kb o arquivo css pode ser linkado ao seu projeto através apenas de um link disponibilizado pela area de desenvolvedores do Yahoo. Ele é leve mas possui todos os elementos básicos que caracterizam um framework hoje, como botões, estilo de tipografia, grid e formularios personalizados. Também é possível customizar o framework antes de baixar o arquivo para uso local.

Demo & Download GitHub

Schema

Schema - Web Social Dev - Post

O Schema é um framework leve, responsivo, para desenvolvimento rápido. Possui alguns componentes de UI, mas não chega a ser tão completo quanto as outras opções. Ele segue a mesma linha do Pure, sendo ainda mais leve que este. Possui sistema de grids, tipografia, botões e formulários estilizados. Não possui customizador.

Demo & Download GitHub


Ink – Responsive Email Framework

Ink - Responsive Email Framework - Web Social Dev - Post

O Ink é um framework para agilizar o desenvolvimento de emails responsivos, desenvolvido pela Zurb, mesma mantenedora do Foundation. Possui os recursos mais atuais para elaboração de emails responsivos assim como templates básicos pré configurados, nos mesmos moldes do Foundation.

Demo & Download GitHub

Cool Kitten

Cool Kitten - Web Social Dev - Post

O Cool Kitten é um framework responsivo desenvolvido por @Jalxob. Ele não é um framework tão completo quanto os outros apresentados, porém é um dos que contém efeito parallax embutido no próprio código fonte, você não precisa de bibliotecas de terceiros para gerar o efeito.

Demo & Download GitHub


Kickstart

Kickstart - Web Social Dev - Post

O Kickstart é um framework bem completo desenvolvido por Joshua Gatcke, com licença do MIT. Como descrito na documentação do framework, ele é um pacote de elementos HTML5, CSS e JavaScript (Jquery), que também conta com uma fonte de ícones. Ele realmente é um pacote completo, se compara ao Bootstrap e ao Foundation no quesito componentes e funcionalidades.

Demo & Download GitHub

Responsee

Responsee - Web Social Dev - Post

O Responsee é um framework super leve desenvolvido pela Vision Design, com licença do MIT. A intenção deste framework é prover um desenvolvimento rápido e simples, como descrito no slogan do website: contrua um site responsivo em 10 minutos. As features deste framework são o design responsivo, fonte de ícones e templates pré-configurados e também conta com o template em PSD para designers. Este framework não possui um canal no GitHub.

Demo & Download


Semantic UI

Semantic UI - Web Social Dev - img Post

O Semantic UI é um framework desenvolvido por Jack Lukic. Basicamente, é um framework que utiliza toda semântica dos elementos do HTML5 para desenvolver um código mais simples, por exemplo, dando o devido nome as partes de um site como header, footer, nav, entre outros. O Semantic UI posssui um conjunto de componentes muito completo, se comparando ao Bootstrap e Foundation.

Demo & Download GitHub

Esses são alguns dos frameworks hoje disponíveis para utilização livre, e que tem suporte a desenvolvedores, exceto o Responsee, em comunidade aberta.

Vou atualizar a lista assim que coletar mais frameworks que valham a pena compartilhar.

Qualquer duvida estou à disposição nos comentários.

🙂


  • Muito bom esse post, acho o Bootstrap muito bom e completo, mas tem muito site usando, então acho bom essas alternativas… =D

    • obrigado Cezar, tem muitas alternativas a nível do bootstrap hoje, só procurar 🙂

  • Thiago Anselmo

    Amigo,

    Venho da área de redes de computadores, servidores etc…
    Tenho tido algumas dificuldades de desenvolver uma interface então resolvi ler livros e livros sobre CSS HTML5 então estou querendo usar um framework, para ganhar tempo, te pergunto, o que indicarias?

    Gostaria criar interfaces de gerenciamentos para server.

    • Thiago, desculpe a demora para responder.

      Vamos lá, eu recomendo para iniciar o bootstrap e o foundation, dando preferência para o foundation apenas por questões pessoais. O básico para se trabalhar com um framework é ter conhecimento em HTML e CSS a nível de saber criar um arquivo de estilo e linkar, bem como saber utilizar os parametros de class e id para aplicar estilos a um elemento, com base nisso você já consegue compreender como funciona um framework. Fora isso, é necessário conhecimento básico em JS apenas para entender o que ocorre em certas funções dos frameworks.

      É aquela história, você pode usar um framework para facilitar o seu trabalho, desde que você saiba como ele funciona/opera e como manusear o mesmo.

      Todos os frameworks são bem parecidos, vai de você se familizar com um deles, o bootstrap é o mais usado hoje, por isso tem taaantas coisas pra ele web a fora.

      Valeu Thiago 🙂

    • Creavistudio

      Olá Thiago. Existem também outros frameworks bons, o Skeleton ou Frameless, por exemplo. Aí conta a preferência do usuário. Mas eu também recomendo o Foundation e Boostrap, por serem, a meu ver os melhores. Seja como for, convem ler a documentação primeiro para teres uma basezita de segurança e endenter o código (que não é difíssil, sobretudo se entende inglês).
      Sucesso!

      • o Foundation e o Bootstrap tem comunidades de desenvolvimento super ativas, e o melhor de tudo, pensando no bem do framework, assim nos desenvolvedores podemos depositar todos os esforços por exemplo no desenvolvimento de scripts para sistemas ao invés de se preocupar com o básico do básico como grid, botões e outros snippets. Além disso, vários serviços fornecem, ao Bootstrap principalmente, vários recursos e modificações ao framework. Pra mim a melhor parte de se utilizar um framework CSS é o fato de desenvolvedores estarem ali todos os dias preocupados com aquela ferramenta, o que me dá segurança, porque imagina em um sistema de empresa se você vai ter tempo pra resolver problemas de layout.

  • Eric Willian

    Parabéns pelo post. Favoritei!

  • Hítalo Silva