What is a web grid? Which ones you can use?

1. let’s talk
GRID
ramses.cabello@gmail.com @ramsescabello

2. what is a grid?

3. what is a grid?

4. what is a grid?
in graphic design a
grid is a series of
vertical and
horizontal lines that
are used to subdivide
a space. this give us
an easier approach to
the page layout.

5. why grids?
it saves us
time
visual consistency
between different
pages

6. a web grid

7. a web grid
a web grid is a
framework.

8. a web grid
a web grid is a
framework.
a web grid creates
equal width columns,.

9. a web grid
a web grid is a
framework.
a web grid creates
equal width columns.
it helps out layout our
page structure.

10. a web grid
a web grid is a
framework.
a web grid creates
equal width columns.
it helps out layout our
page structure.
visual consistency.

11. a web grid
a web grid is a
framework.
a web grid creates
equal width columns.
it helps out layout our
page structure.
visual consistency.

13. examples

15. meet the grids

16. meet 960

17. lightweight
meet 960

18. lightweight
easy to use
meet 960

19. lightweight
easy to use
fast
meet 960

20. lightweight
easy to use
fast
fixed width
meet 960

21. lightweight
easy to use
fast
meet 960
fixed width
mobile ( ? )

22. DON’T
PANIC.

23. meet unsemantic
lightweight
easy to use
fast
responsive
1180px wide

24. unsemantic syntax
<div class="grid-container">
<div class="grid-100 mobile-grid-100">
<header>
Cabecera
</header>
</div>
</div>

25. unsemantic resources
http://unsemantic.com/

26. action!
http://bit.ly/1fg7dFi