![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7350879/pasted-from-clipboard.png)
![](https://fontmeme.com/permalink/200511/8adf4dde25bebb866f7abee2d2847dba.png)
An Unexpected Journey
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7348069/image_from_ios.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7348113/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7348114/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7348177/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7348182/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7348211/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7348399/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7348407/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7348069/image_from_ios.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7348113/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7348114/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7348115/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7348116/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7348177/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7348182/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7348211/pasted-from-clipboard.png)
Instead of being pleasant,
designing Duda sites
has become a pain point
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7348407/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7348449/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7348453/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7348458/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7348461/pasted-from-clipboard.png)
Meanwhile...
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7348561/lecture1.gif)
Meanwhile #2...
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7348820/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7349590/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7349590/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7349590/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7349590/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7349153/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7349156/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7349172/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7349174/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7349178/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7349181/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7349185/pasted-from-clipboard.png)
1. Anatomy of a Duda website
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7349153/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7349156/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7349172/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7349174/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7349178/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7349181/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7349185/pasted-from-clipboard.png)
1. Anatomy of a Duda website
Rows
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7349153/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7349156/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7349172/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7349174/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7349178/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7349181/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7349185/pasted-from-clipboard.png)
1. Anatomy of a Duda website
Rows
and Columns
Can't span multiple rows
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7349153/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7349156/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7349172/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7349174/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7349178/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7349181/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7349185/pasted-from-clipboard.png)
1. Anatomy of a Duda website
1. Anatomy of a Duda website
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7349336/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7349343/pasted-from-clipboard.png)
1. Anatomy of a Duda website
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7349379/29.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7349567/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7349557/pasted-from-clipboard.png)
2. Alignment
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7349399/pasted-from-clipboard.png)
2. Alignment
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7349486/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7349488/pasted-from-clipboard.png)
![](http://reactiongifs.me/wp-content/uploads/2013/09/enough-internet-Dean-Winchester-supernatural.gif)
3. "Responsiveness"
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7349502/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7349514/pasted-from-clipboard.png)
3. "Responsiveness"
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7349502/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7349514/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7349519/pasted-from-clipboard.png)
4. Inline Editing
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7349579/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7349590/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7344325/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7349615/trans.png)
- haven't changed!
4. Inline Editing
- haven't changed!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7349637/l3vQZ8ko4l0nvjm2Q.gif)
Just ask Idan if he wants to implement Inner Row again...
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7344325/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7346278/pasted-from-clipboard.png)
![](http://www.undp.org.fj/gifs/wp-content/uploads/2015/02/adventure.gif)
Then Amir told me...
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7346271/Untitled.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7346278/pasted-from-clipboard.png)
1. Build beautiful websites
2. Build them easily
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7350082/pasted-from-clipboard.png)
ed.inlineEditGrid.js
(3. Slay existing code)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7350200/pasted-from-clipboard.png)
Build beautiful websites
Build them easily
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7350122/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7350124/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7350129/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7350132/pinchable.gif)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7350133/warpable.gif)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7350135/draggable.gif)
Now all that's left is to assemble the gang
![](https://media1.tenor.com/images/971464a50ecdde0db12fde133a829b06/tenor.gif)
CSS Grid to the rescue!
![](https://media.giphy.com/media/ntHRTkAOukqYg/giphy.gif)
![](https://img.mako.co.il/2012/07/23/shu-ruv2_c.jpg)
What is CSS Grid?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7349900/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7376149/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/3906841/05ccf16bec84d675fdf636a7c1b386bf.jpg)
![](https://s-media-cache-ak0.pinimg.com/564x/e3/c4/85/e3c485fc81f65326d05776ed34be7bcc.jpg)
Grid System
First we define the Grid columns and rows.
Columns:
Rows:
33% 33% 33%
50% 50%
First we define the Grid columns and rows.
Columns:
Rows:
25% 50% 25%
50% 50%
First we define the Grid columns and rows.
Columns:
Rows:
25% 50% 25%
25% 25% 25% 25%
Our content then goes inside those cells
Columns:
Rows:
25% 50% 25%
25% 25% 25% 25%
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7349777/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7349779/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7349783/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7349784/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7349794/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7346820/2020-05-10_2143.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7346822/2020-05-10_2145.png)
When looking at a design,
we can break it into multiple grid cells
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7346822/2020-05-10_2145.png)
6
8
2
Grid location
2
2
6
8
2
Row:
2
8
Column:
2
6
Start
End
2
8
2
6
Start
End
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7346822/2020-05-10_2145.png)
6
8
2
Grid location
2
Row:
2
8
Column:
2
6
Start
End
Start
End
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7346822/2020-05-10_2145.png)
6
8
2
Grid location
2
Row:
2
8
Column:
2
6
/
/
span 4
span 4
span 6
span 6
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7346822/2020-05-10_2145.png)
Row:
2
Column:
2
/
/
span 4
span 6
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7347125/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7346822/2020-05-10_2145.png)
Row:
2
Column:
2
/
/
span 4
span 6
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7347125/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7347133/pasted-from-clipboard.png)
Row:
Column:
7
13
4
11
4
7
/
/
span 6
span 7
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7346822/2020-05-10_2145.png)
Row:
2
Column:
2
/
/
span 4
span 6
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7347125/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7347127/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7347133/pasted-from-clipboard.png)
Row:
4
Column:
7
/
/
span 6
span 7
Row:
Column:
5
9
9
15
9
5
/
/
span 4
span 6
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7346822/2020-05-10_2145.png)
Row:
2
Column:
2
/
/
span 4
span 6
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7347125/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7347127/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7347133/pasted-from-clipboard.png)
Row:
4
Column:
7
/
/
span 6
span 7
Row:
Column:
9
5
/
/
span 4
span 6
Overlapping is allowed!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7346820/2020-05-10_2143.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7346822/2020-05-10_2145.png)
Row:
2
Column:
2
/
/
span 4
span 6
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7347125/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7347127/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7347133/pasted-from-clipboard.png)
Row:
4
Column:
7
/
/
span 6
span 7
Row:
Column:
9
5
/
/
span 4
span 6
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7348736/pasted-from-clipboard.png)
Sometimes you can practically visualize the grid
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7349949/pasted-from-clipboard.png)
Grids are usually used for page layout or lists
![](https://29comwzoq712ml5vj5gf479x-wpengine.netdna-ssl.com/wp-content/uploads/2017/03/grid-responsive.gif)
![](https://i2.wp.com/css-tricks.com/wp-content/uploads/2019/05/email-newsletter.gif?ssl=1)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7349960/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7349969/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7349973/pasted-from-clipboard.png)
...And are highly responsive
![](https://29comwzoq712ml5vj5gf479x-wpengine.netdna-ssl.com/wp-content/uploads/2017/03/grid-responsive.gif)
![](https://i2.wp.com/css-tricks.com/wp-content/uploads/2019/05/email-newsletter.gif?ssl=1)
Let's talk about Flex
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7349989/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7350000/pasted-from-clipboard.png)
Flex allows you to arrange elements in a container
Let's talk about Flex
Flex allows you to arrange elements in a container
Center them
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7349989/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7350000/pasted-from-clipboard.png)
Let's talk about Flex
Flex allows you to arrange elements in a container
Center them
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7349989/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7350000/pasted-from-clipboard.png)
, move to the sides
Let's talk about Flex
Flex allows you to arrange elements in a container
Center them
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7349989/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7350000/pasted-from-clipboard.png)
, move to the sides
Let's talk about Flex
Flex allows you to arrange elements in a container
Center them
, move to the sides
, and space them
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7349989/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7350000/pasted-from-clipboard.png)
Let's talk about Flex
Flex allows you to arrange elements in a container
Center them
, move to the sides
, and space them
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7349989/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7350000/pasted-from-clipboard.png)
...in all directions!
Let's talk about Flex
Flex allows you to arrange elements in a container
Center them
, move to the sides
, and space them
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7349989/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7350000/pasted-from-clipboard.png)
...in all directions!
Let's talk about Flex
Flex allows you to arrange elements in a container
Center them
, move to the sides
, and space them
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7349989/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7350000/pasted-from-clipboard.png)
...in all directions!
Let's talk about Flex
It also works vertically, magically solving
our alignment problem
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7350063/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7350276/pasted-from-clipboard.png)
1. Play with inline editing utils
2. Research inspiration
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7350325/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7350331/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7350341/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7350400/image__2_.png)
3. Debate. A lot.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7350367/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7350379/pasted-from-clipboard.png)
What kind of page hierarchy do we want?
Is the main element Grid? Flex? Something else?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7350305/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7350427/pasted-from-clipboard.png)
How will we handle overlapping?
How will it behave when we'll add a new item to a list?
Is it a full page? Just a section?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7350484/pasted-from-clipboard.png)
3. Debate. A lot.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7350371/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7350443/arrow.png)
how?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7350443/arrow.png)
flex/grid?
4. Build a playground and iterate
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7350455/image__3_.png)
5. Make sure we're able to build the same sections as today
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7350469/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7350483/dlogo.png)
The root element is the DudaFlex Section
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7350496/pasted-from-clipboard.png)
Section
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7350483/dlogo.png)
Each section holds Grid Containers
Section
Container 1
Container 2
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7350656/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7350658/cont1.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7350483/dlogo.png)
Containers hold areas, which are flex
Container 1
Container 2
Area 1
Area 2
Area 3
Area 4
Area 5
Area 6
Area 7
Area 8
Area 9
Section
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7350696/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7350483/dlogo.png)
Containers hold areas, which are flex
Container 1
Container 2
Area 1
Area 2
Area 3
Area 4
Area 5
Area 6
Area 7
Area 8
Area 9
Section
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7350696/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7350701/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7350483/dlogo.png)
Inside of areas there are widgets, or flex groups of widgets
Container 1
Container 2
Area 1
Area 2
Area 3
Area 4
Area 5
Area 6
Area 7
Area 8
Area 9
Section
Image
Button
Gallery
Opening Hours
Group 1
Button
Image
Form
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7350822/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7350483/dlogo.png)
This is now the model:
Container 1
Container 2
Area 1
Area 2
Area 3
Area 4
Area 5
Area 6
Area 7
Area 8
Area 9
Section
Image
Button
Gallery
Opening Hours
Group 1
Button
Image
Form
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7350825/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7350830/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7350483/dlogo.png)
the entire model is saved to Firebase and rendered in real-time on the client.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7350548/pasted-from-clipboard.png)
Let that sink in for a second.
![](https://i.pinimg.com/originals/bd/3e/de/bd3edeafc2f2022333ed7381414f47bc.gif)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7376754/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7376754/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7376754/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7376754/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7376067/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7376069/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7376071/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7376082/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7376088/pasted-from-clipboard.png)
Demo Time!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7376067/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7376069/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7376071/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7376082/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7376088/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/4457093/3ohs86qwN8WkQ4O5A4.gif)
This POC utilizes some very fun stuff
CSS Layout
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7376116/pasted-from-clipboard.png)
Cutting Edge Web
Firebase
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7376169/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7376174/pasted-from-clipboard.png)
Netlify
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7376198/pasted-from-clipboard.png)
Models
Quick Cycles
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7376202/pasted-from-clipboard.png)
Media Queries
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7376222/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7376232/pasted-from-clipboard.png)
![](https://i.kym-cdn.com/photos/images/newsfeed/000/640/962/d91.gif)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7375793/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7375797/pasted-from-clipboard.png)
![](https://i.giphy.com/5wWf7GW1AzV6pF3MaVW.gif)
You're awesome!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7346910/Keira.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7346911/Hagrid_potter.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7346912/Greed.png)
![](https://media.tenor.com/images/d2cdbc9a64857acdfa4b1b4385a57073/tenor.gif)
QUESTIONS?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7350845/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7376106/pasted-from-clipboard.png)
Duda Flex
By Liad Yosef
Duda Flex
An unexpected journey
- 12,917