O maravilhoso mundo do CSS

http://bit.ly/2AaR9BZ

Gustavo Quinalha

Front-end developer na Monk
gusquinalha@gmail.com

Meus slides



SLACK DEVPARANÁ

Cascading Style Sheets


Codepen
Tem o poder de fazer isso aqui
virar isso aqui

É o CSS que faz o UI/UX funcionar, é também o responsável pela acessibilidade, então precisamos muito focar nele.

Um bom design mostra a qualidade do serviço!


O seu back-end só vai fazer a diferença se seu front-end for realmente bom!

O seu front-end só vai fazer a diferença se seu back-end for realmente bom!

O melhor do CSS

  • Flexbox
  • Grid Layout
  • Animações (Keyframes, Transforms e Transitions)
  • SVG
  • Estilização (Shadows, gradients, borders)
  • O resto

Como pensam que é:

  • margin: 10px;
  • padding: 20px;
  • background: red;

Como realmente é:

  • Planejamento(Ui/Ux, Styleguide ❤)
  • Lógica
  • Redundância
  • Performance!important

CSS GRID LAYOUT

CSS Grid Layout tem um enorme poder para criar layouts, com um sistema bi-dimensional, diferente do flexbox. Ele foi criado para LAYOUTS, sendo simples ou complexo.

Flexbox layout is most appropriate to the components of an application, and small-scale layouts, while the Grid layout is intended for larger scale layouts. https://css-tricks.com/snippets/css/a-guide-to-flexbox/

ANIMAÇÕES

Codepen
Codepen

SVG

  • Animações
  • Logo e imagem responsiva
  • Font icons
  • Loaders
  • Diversos frameworks
Animações
Codepen
Logo responsiva
Codepen
Imagem responsiva
Font icons
Loaders

Codepen
Frameworks, libs..

ESTILIZAÇÃO

O RESTO

Flexbox

O Flexbox é um modulo da W3C responsável por fornecer uma maior eficiência para alinhar elementos tanto horizontalmente quanto verticalmente e distribuir espaço dentro de um container.

This module introduces a new layout mode, flex layout, which is designed for laying out more complex applications and webpages.

https://www.w3.org/TR/css-flexbox-1/

Exemplos

BELEZA, mas como funciona?

Main Axis: justify-content
Cross Axis: align-items

O flexbox é baseado em container e item, pai e filho. O pai é responsável pelo comportamento dos filhos.

Propriedades do container(pai):

  • Display: flex | inline-flex
  • Flex-direction: row | row-reverse | column | column-reverse
  • Flex-wrap: nowrap | wrap | wrap-reverse
  • Justify-content: flex-start | flex-end | center | space-between | space-around
  • Align-items: flex-start | flex-end | center | baseline | stretch

Propriedades do item(filho):

  • Order: integer
  • Flex-grow: number
  • Flex-shrink: number
  • Flex-basis: length | auto
  • Align-self: auto | flex-start | flex-end | center | baseline | stretch

Display(container)

block
item
item
flex
item
item

Flex-direction(container)

row
1
2
row-inverse
1
2
column
1
2
column-inverse
1
2

Flex-wrap(container)

no-wrap
item
item
wrap
item
item
wrap-reverse
item 1
item 2
Todos os itens possuem a propriedade flex-basis: 300px

Justify-content(container)

flex-start
item

Justify-content(container)

center
item

Justify-content(container)

flex-end
item

Justify-content(container)

space-between
item
item
item

Justify-content(container)

space-around
item
item
item

Align-items(container)

flex-start
item

Align-items(container)

center
item

Align-items(container)

flex-end
item
Align-items: center
Justify-content: center
item

Align-items(container)

baseline
item
item
item
item

Align-items(container)

stretch
item
item
item
item
item
item

Order(item)

1
2
3
4
5
1
2
3
4
5

Flex-grow(item)

flex-grow: 1
item
flex-grow: 1
flex-grow: 1
flex-grow: 1
flex-grow: 2

Flex-basis(item)

width: 1000px
width: 500px
flex-basis: 1000px
flex-basis: 500px

Align-self

flex-start
center
flex-end
baseline
stretch

O que mais podemos fazer?

E assim é feito o Bootstrap e o The grid.

GRID LAYOUT + FLEXBOX =

SUSPRESA

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.

Inspirações

LINKS

LINKS FLEXBOX

LINKS SVG

LINKS Animações

LINKS CSS GRID LAYOUT

LINKS GRADIENTS



Obrigado!