CSSEHFODA

Depois de um post no meu blog, falando um pouco sobre a minha relação com CSS e como ele me faz brilhar os olhinhos, resolvi criar esse repositório para guardar links fodas de CSS, como outros posts, dicas, frameworks, tutoriais e outras coisas legais...

.CSSEHFODA:after {
    content: 'pra caralho!';
}

Índice

• Artigos
• Vídeos
• Livros
• Tutoriais
• Desafios
• Jogos
• Pens e Inspirações
• Frameworks
• Pré-processadores
• Metodologias e Arquiteturas
• Novidades
• Ferramentas

Artigos

Artigos sobre CSS que valem a pena a leitura

2017

• CSS EH FODA por Marcela Bomfim
• How to create fancy revealing animations with these simple CSS tricks - Hackernoon - pen inspirado no artigo
• 15 Useful CSS Tricks You Might Have Overlooked por Preethi Ranjit

2016

• Falando sobre RSCSS por Willian Justen

2015

• Alguns seletores css importantes para aprender por Willian Justen

• 8 Rules to Improve Your CSS por Mateusz Czajka

2011

• Os 30 Seletores CSS Que Você Deve Memorizar por Jeffrey Way - traduzido por Erick Patrick

_{⇧ voltar}

Vídeos

Vídeos tutoriais, talks, entrevistas ...

2017

• Hangout: Acelerando o tempo com CSS Grid Layout duração: 1h07m05s por Simone Amorim
• Raphael Fabeni - CSS Tips duração: 48m24s
• Diogo Moretti - CSS {Grid} Layout: It's evolution baby duração: 40m24s

2014

• Raphael Fabeni - Os Paranauês do CSS3

2012

• Bernard De Luna - Performance em CSS

_{⇧ voltar}

Podcasts

Podcasts, episódios específicos, entrevistas ...

2016

• CSS: Cansei de Ser Simples – Hipsters #09 - duração 49m por - Hipsters ponto Tech, com Diego Eis e Sergio Lopes.

2014

• Hack ‘n’ Cast – HTML & CSS - duração 1h03m07s

_{⇧ voltar}

Livros

Pra quem gosta de ler sobre assuntos técnicos também

• CSS Guidelines
• Transforms In CSS: Revamp The Way You Design
• Enduring CSS
• CSS3 Succinctly
• Learn CSS Layout. The Pedantic Way
• The Magic Of CSS
• A Pocket Guide To CSS Animations
• Scalable And Modular Architecture For CSS

_{⇧ voltar}

Tutoriais

Aprenda e pratique CSS da melhor maneira

• Flexbox do jeito certo
• Um mundo de possibilidades com flexbox
• O maravilhoso mundo do CSS
• As funcionalidades CSS para shapes, clipping e masking
• Mastering the :nth-child
• Aprenda Layout com CSS
• O fodástico :not()

_{⇧ voltar}

Desafios

Aprenda e pratique CSS da melhor maneira

• 100dayscss
• Daily CSS Images
• Enjoy CSS

_{⇧ voltar}

Jogos

Aprenda e pratique CSS da melhor maneira

• CSS Dinner
• Flexbox Froggy
• Flexbox Defense
• Grid Garden
• Flexplorer

_{⇧ voltar}

Pens e Inspirações

Quando você olha e pensa: "Como essa pessoa fez isso?"

• Bandeira do Brasil com CSS por Mariana Brito
• Bart Simpson in pure css por Flo Preynat
• Gato com CSS por Mariana Brito
• Cat Swinging on String por David Khourshid
• Meshi the CSS Dog por David Khourshid
• X-Men por Ryan Spilhaus
• Batman vs Twitter por Mariana Brito
• Pure CSS Animated Eric Cartman por Aline Bastos
• StarWars BB-8 CSS Illustration + Animation por Dev Tips
• Duck Hunt por Zosia Korcz

Frameworks

Para facilitar no seu desenvolvimento

• Bootstrap - The most popular HTML, CSS, and JS framework.
• Zurb Foundation - The most advanced responsive front-end framework in the world.
• Bulma - A modern CSS framework based on Flexbox.
• Pure.css - A set of small, responsive CSS modules that you can use in every web project.
• Materialize - A modern responsive front-end framework based on Material Design
• Semantic UI - A UI component framework based around useful principles from natural language.

_{⇧ voltar}

Pré-processadores

Mais produtividade para você

• Sass - Mature, stable, and powerful professional grade CSS extension language.
• LESS - Backwards compatible with CSS and the extra features it adds use existing CSS syntax.
• PostCSS - Transforming CSS with JS plugins.
• Stylus - EXPRESSIVE, DYNAMIC, ROBUST CSS

_{⇧ voltar}

Metodologias e Arquiteturas

Como você organiza o seu CSS ?

• BEM
• ITCSS
• RSCSS - (ptbr)
• Atomic Design
• CSS Sustentável

_{⇧ voltar}

Guidelines

Como seguir um padrão no CSS ?

• Airbnb
• Cssguidelines
• CSS-TRICKS
• Wordpress
• Google
• Sass Guideline
• Codeguide

_{⇧ voltar}

Novidades

Twitter, newsletter, blogs... Saiba como ficar por dentro das novidades sobre CSS

• CSS Animation Weekly - Newsletter semanal com animações em CSS

_{⇧ voltar}

Ferramentas

Conteúdo que auxilia a criação dos seus estilos

• Animista - Animações sob demanda
• Clippy - Gere valores para serem usados na propriedade clip-path

_{⇧ voltar}

---

Colaboradores

@marcelabomfim, @BritoMari, @safirelauene, @alinebastos, @gustavoquinalha, @tjoaquini, @G4brym, @anderson-sousa e você!

Sinta-se livre para participar! Abra uma issue ou envie um Pull Request.