O maravilhoso mundo do CSS


bit.ly/2hUozgR

Gustavo Quinalha

Meus slides


Codepen

O melhor do CSS


  • FLEXBOX
  • GRID LAYOUT
  • Animações/Transições
  • SVG
  • Games
  • Gradients/Shadows
  • O resto

Stylesheet != styleshit

  • Lógica
  • Planejamento
  • Styleguide
  • UI
  • Performance!important
  • Detalhes fazem a diferença
  • Bom senso
  • Redundância

Um completa o outro

EXEMPLOS


FLEBOX


SVG


  • Animações
  • Logo responsiva
  • Font Icons
  • Loaders
  • SMIL
  • Frameworks

Animações

Codepen
Codepen
Codepen
Codepen

Codepen

Codepen

Logo responsiva


Codepen

Codepen

Codepen

Font icons

Fontastic


Tutorial

Loaders


Codepen

Codepen

Codepen

Smil


Codepen

Codepen

Codepen

Gradients


Games



Codepen

Codepen

Codepen

CSS Grid Layout


Resultado


pré processadores


  • Bom em boas mãos
  • Se funcionou não significa que está certo
  • Confira o resultado!!!!!

NÃO EXISTE DESCULPA PRA USAR BOOTSTRAP

#zoas #masésério

Não reinvente a roda


blablabalabalalabalalala

VOCÊ PODE FAZER MELHOR!


Com base naquilo que já existe, você pode e deve criar algo melhor. Busque sempre acrescentar algo!

Ou viva na base de frameworks e plugins =)

Meus projetos


Sizify


https://gustavoquinalha.github.io/sizify

PDFy


https://gustavoquinalha.github.io/pdfy

Sendify


https://gustavoquinalha.github.io/sendify

Seotopper


https://gustavoquinalha.github.io/seotopper
https://github.com/gustavoquinalha/seotopper/tree/seotopper-cli

The grid


https://gustavoquinalha.github.io/the-grid

Monk framework


https://agenciamonk.github.io/

dragNDropJS - @usuarioJapa


https://github.com/usuarioJapa/dragNDropJS

Codepen

Perguntas?


Fique avontade para me mandar suas dúvidas no email gusquinalha@gmail.com ou você tambem pode abrir uma issue nesse repositório.

CSS Awards


LINKS


LINKS FLEXBOX

LINKS SVG

LINKS Animações

LINKS CSS GRID LAYOUT

LINKS GRADIENTS

Obrigado!