Skip to content

Instantly share code, notes, and snippets.

@dancasttro
Created September 17, 2014 11:35
Show Gist options
  • Save dancasttro/9b15e1065a57b9c802ae to your computer and use it in GitHub Desktop.
Save dancasttro/9b15e1065a57b9c802ae to your computer and use it in GitHub Desktop.
Estudos CSS
Frameworks CSS
http://getbootstrap.com/
http://foundation.zurb.com/
http://icalialabs.github.io/furatto/index.html
http://purecss.io/
http://metro-webdesign.info
http://gumbyframework.com/
http://startbootstrap.com/ (templates do bootstrap free)
http://www.blacktie.co/ (templates bootstrap free)
Pre-processadores
http://sass-lang.com/ (mais utilizado atualmente)
http://lesscss.org/ (mais fraco dos 3)
http://learnboost.github.io/stylus/ (mais novo e python style)
Ferramentas
http://daneden.github.io/animate.css/ (para fazer animações)
http://css3generator.com/ (vários efeitos criados automaticamente, útil para ver como são feitos)
http://gridulator.com/ (para montar os grids em png, para montagem)
http://icomoon.io/app/#/select (criar icon fonts para css)
http://coveloping.com/tools (um monte de ferramenta de frontend)
http://www.createcss3.com/ (cria coisas em sass, para ir aprendendo a sintaxe)
http://caniuse.com/#cats=CSS (saber qual browser aceita oq)
http://bootsnipp.com/ (snippets para Bootstrap)
http://www.fontsquirrel.com/ (criar fontfaces)
https://www.google.com/fonts (fontes do google)
Blogs/Sites para ter exemplos
http://tympanus.net/codrops/ (blog mais motherfucker do mundo)
http://24ways.org/topics/code/ (várias dicas legais de tudo aqui)
http://desandro.github.io/3dtransforms/ (introdução a 3d transforms em css)
http://css-tricks.com/
http://codepen.io/ (só parada top feita aqui)
http://www.free-css.com/ (pode baixar templates prontos e entender como certas coisas foram feitas)
http://www.csswinner.com/ (melhores sites do mundo)
http://www.awwwards.com/ (outro para inspiração)
http://uptodate.frontendrescue.org/ (SITE FODA, SÓ ISSO)
Apresentações
https://speakerdeck.com/jonrohan/githubs-css-performance (slide explicando sobre como o github melhorou performance e talz)
http://animateyourhtml5.appspot.com/pres/index.html#1 (como fazer animações no html5, inclui css)
http://www.youtube.com/watch?v=GeBM8qaJXCE (a mulher mais foda do css do mundo)
Sites para aprender um pouco
http://pt-br.learnlayout.com/ (bem simples, mas mostra uns conceitos legais)
https://www.codeschool.com/courses/css-cross-country (curso)
http://tableless.com.br/design-responsivo-na-pratica-do-rascunho-ao-digita/#.UqJyAmRDvWp
http://ie.microsoft.com/testdrive/Graphics/FullPageAnimations/1_Introduction.html (animações de página, maneirinho, mesmo sendo da M$)
http://www.smashingmagazine.com/2011/09/14/the-guide-to-css-animation-principles-and-examples/ (guia de animação em css)
Livros
http://www.ebook3000.com/CSS3-for-Web-Designers_179297.html (mais completo de css3)
Boas Práticas
http://thesassway.com/beginner/how-to-structure-a-sass-project
http://learn.shayhowe.com/advanced-html-css/performance-organization/
http://www.slideshare.net/maxdesign/css-oocss-and-smacss (Apresentação sobre algumas práticas)
http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/ (outra prática, particularmente não gosto, mas muitos usam…)
https://speakerdeck.com/addyosmani/automating-front-end-workflow (todos deveriam aprender a automatizar seu workflow)
https://github.com/csswizardry/CSS-Guidelines
https://github.com/necolas/idiomatic-css
https://github.com/shayhowe/modular-html-css-workshop
http://browserdiet.com/pt/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment