Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
CSS Grid
Search
Alda Rocha
March 08, 2017
Programming
1
220
CSS Grid
Palestra do @meetupCSS SP #frontendweek
Alda Rocha
March 08, 2017
Tweet
Share
More Decks by Alda Rocha
See All by Alda Rocha
Como viés influencia o que desenvolvemos
mjcoffeeholick
3
240
Viés
mjcoffeeholick
3
150
Os clichês de UX
mjcoffeeholick
0
170
Viés e UX
mjcoffeeholick
1
210
UXD: a manopla do infinito do design
mjcoffeeholick
0
120
Raio X de UX
mjcoffeeholick
1
1.2k
UXD: Manopla do infinito do design
mjcoffeeholick
6
340
Qual é a história que seu produto conta?
mjcoffeeholick
3
120
Como ter uma comunidade mais inclusiva
mjcoffeeholick
1
150
Other Decks in Programming
See All in Programming
KessokuでDIでもgoroutineを活用する / Go Connect #6
mazrean
0
110
コンテキストエンジニアリング Cursor編
kinopeee
1
700
TanStack DB ~状態管理の新しい考え方~
bmthd
2
290
CSC305 Summer Lecture 04
javiergs
PRO
1
100
kiroでゲームを作ってみた
iriikeita
0
180
サーバーサイドのビルド時間87倍高速化
plaidtech
PRO
0
440
技術的負債で信頼性が限界だったWordPress運用をShifterで完全復活させた話
rvirus0817
1
2k
Portapad紹介プレゼンテーション
gotoumakakeru
1
130
開発チーム・開発組織の設計改善スキルの向上
masuda220
PRO
13
6.9k
Webinar: AI-Powered Development: Transformiere deinen Workflow mit Coding Tools und MCP Servern
danielsogl
0
160
自作OSでDOOMを動かしてみた
zakki0925224
1
1.4k
【第4回】関東Kaggler会「Kaggleは執筆に役立つ」
mipypf
0
710
Featured
See All Featured
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
How to Think Like a Performance Engineer
csswizardry
25
1.8k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
For a Future-Friendly Web
brad_frost
179
9.9k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Docker and Python
trallard
45
3.5k
Designing for humans not robots
tammielis
253
25k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Transcript
CSS GRID One layout, multiple ways
O que é?
“A spec do CSS Grid Layout é uma das poucas
novas especificações que estão redefinindo como abordamos layout para a web. Junto com Flexbox e Box Alignment, ela será parte de um sistema moderno de layout para sites e aplicações web.” - Rachel Andrew
https://rachelandrew.co.uk/archives/2017/03/03/learning-css-grid-layout/
https://rachelandrew.co.uk/ @rachelandrew
None
Arte
None
None
Impresso
None
None
None
None
Vida
None
None
None
None
A internet é uma réplica do mundo real
None
None
None
None
None
None
https://www.amazon.com/New-Media-Art-Taschen-Basic/dp/3822830410
None
https://en.wikipedia.org/wiki/Holy_Grail_(web_design)
None
None
O físico impacta no virtual!
None
None
None
None
None
None
None
None
None
None
None
None
None
https://www.youtube.com/watch?v=16enLRDbOyY @jensimmons
Vantagens
Nos permite criar layouts complexos com facilidade. O CSS que
precisamos escrever é muito mais simples e fácil de manter.
Não é mais necessário usar float ou propriedades similares ao
criar layouts complexos. Completa separação entre markup e layout.
O que impacta?
“Vocês estando deixando o CSS muito complexo. Ele deve ser
simples.” - Bert Bos
https://youtu.be/RNNxggSLGdo
Simplicidade + Flexibilidade Ciclo
Infos
https://css-tricks.com/snippets/css/complete-guide-grid/
https://bocoup.com/blog/css-grid-responsive-and-accessibility
http://meyerweb.com/eric/thoughts/2017/03/07/welcome-to-the-grid/
https://developers.google.com/web/updates/2017/01/css-grid
https://www.sitepoint.com/introducing-the-css-grid-layout/
https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/
http://jensimmons.com/post/mar-1-2017/wow-grid-has-so-many- properties-do-we-need-them-all
http://labs.jensimmons.com/
http://jensimmons.com/post/feb-27-2017/learn-css-grid
http://labs.jensimmons.com/2016/
http://labs.jensimmons.com/2016/
http://jeffbridgforth.com/css-grid-first-steps/
http://gridbyexample.com/learn/2016/12/01/learning-grid/
https://la-cascade.io/grid-et-flexbox-le-duo-gagnant/
https://tableless.com.br/entendendo-sistemas-de-grid-css-do-zero/
http://loopinfinito.com.br/2013/10/08/css-grid-isso-muda-tudo-de-novo/
https://www.w3.org/TR/css3-grid-layout/
Se animou pra usar?
None
None
https://medium.com/nossa-coletividad/regrinhas-b%C3%A1sicas-de- conviv%C3%AAncia-em-meetups-89fde78b41d5#.7oomynmdp
Obrigada
Alda Rocha UX Designer e Web developer @mjcoffeeholick http:/ /mjcoffeeholick.github.io
Me add!