133 lines
No EOL
3.9 KiB
Markdown
133 lines
No EOL
3.9 KiB
Markdown
---
|
|
layout: page-fullwidth
|
|
title: "Grid & Colors"
|
|
subheadline: "Multi-Device Layouts"
|
|
description: "Create powerful multi-device layouts quickly and easily with the 12-column, nest-able Foundation grid. These are the dimensions."
|
|
date: 2014-07-05 07:00:00
|
|
categories:
|
|
- design
|
|
image:
|
|
thumb: "unsplash_7_thumb.jpg"
|
|
---
|
|
*Feeling Responsive* is built on Foundation. And of course, we make use of the wonderful grid system and so can you. Find out more about [constructing beautiful layouts][1] in the foundation documentation.
|
|
|
|
## Large Displays
|
|
|
|
### Two Columns
|
|
|
|
<div class="row">
|
|
<div class="large-6 columns">
|
|
<img src="http://placehold.it/500x281/6b6351/e1dcd7&text=Width+500+Pixel">
|
|
</div>
|
|
<div class="large-6 columns">
|
|
<img src="http://placehold.it/500x281/e05a10/e1e75e&text=Width+500+Pixel">
|
|
</div>
|
|
</div>
|
|
|
|
### Three Columns
|
|
|
|
<div class="row">
|
|
<div class="large-4 columns">
|
|
<img src="http://placehold.it/333x170/6b6351/e1dcd7&text=Width+333+Pixel">
|
|
</div>
|
|
<div class="large-4 columns">
|
|
<img src="http://placehold.it/333x170/e05a10/e1e75e&text=Width+333+Pixel">
|
|
</div>
|
|
<div class="large-4 columns">
|
|
<img src="http://placehold.it/333x170/fabb00/771e1e&text=Width+333+Pixel">
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
### Four Columns
|
|
|
|
<div class="row">
|
|
<div class="large-3 columns">
|
|
<img src="http://placehold.it/220x141/6b6351/e1dcd7&text=Width+220+Pixel">
|
|
</div>
|
|
<div class="large-3 columns">
|
|
<img src="http://placehold.it/220x141/e05a10/e1e75e&text=Width+220+Pixel">
|
|
</div>
|
|
<div class="large-3 columns">
|
|
<img src="http://placehold.it/220x141/fabb00/771e1e&text=Width+220+Pixel">
|
|
</div>
|
|
<div class="large-3 columns">
|
|
<img src="http://placehold.it/220x141/00792c/acca57&text=Width+220+Pixel">
|
|
</div>
|
|
</div>
|
|
|
|
|
|
## Colors
|
|
|
|
<div class="row">
|
|
<div class="large-3 columns bottom-30">
|
|
<img src="http://placehold.it/220/E4E4E4/ffffff&text=Grey+E4E4E4">
|
|
</div>
|
|
<div class="large-3 columns bottom-30">
|
|
<img src="http://placehold.it/220/D7D7D7/ffffff&text=Grey+D7D7D7">
|
|
</div>
|
|
<div class="large-3 columns bottom-30">
|
|
<img src="http://placehold.it/220/CBCBCB/ffffff&text=Grey+CBCBCB">
|
|
</div>
|
|
<div class="large-3 columns bottom-30">
|
|
<img src="http://placehold.it/220/BEBEBE/ffffff&text=Grey+BEBEBE">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="large-3 columns bottom-30">
|
|
<img src="http://placehold.it/220/A4A4A4/ffffff&text=Grey+A4A4A4">
|
|
</div>
|
|
<div class="large-3 columns bottom-30">
|
|
<img src="http://placehold.it/220/979797/ffffff&text=Grey+979797">
|
|
</div>
|
|
<div class="large-3 columns bottom-30">
|
|
<img src="http://placehold.it/220/8B8B8B/ffffff&text=Grey+8B8B8B">
|
|
</div>
|
|
<div class="large-3 columns bottom-30">
|
|
<img src="http://placehold.it/220/7E7E7E/ffffff&text=Grey+7E7E7E">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="large-3 columns bottom-30">
|
|
<img src="http://placehold.it/220/646464/ffffff&text=Grey+646464">
|
|
</div>
|
|
<div class="large-3 columns bottom-30">
|
|
<img src="http://placehold.it/220/575757/ffffff&text=Grey+575757">
|
|
</div>
|
|
<div class="large-3 columns bottom-30">
|
|
<img src="http://placehold.it/220/4B4B4B/ffffff&text=Grey+4B4B4B">
|
|
</div>
|
|
<div class="large-3 columns bottom-30">
|
|
<img src="http://placehold.it/220/3E3E3E/ffffff&text=Grey+3E3E3E">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="large-3 columns bottom-30">
|
|
<img src="http://placehold.it/220/313131/ffffff&text=Grey+313131">
|
|
</div>
|
|
<div class="large-3 columns bottom-30">
|
|
<img src="http://placehold.it/220/242424/ffffff&text=Grey+242424">
|
|
</div>
|
|
<div class="large-3 columns bottom-30">
|
|
<img src="http://placehold.it/220/171717/ffffff&text=Grey+171717">
|
|
</div>
|
|
<div class="large-3 columns bottom-30">
|
|
<img src="http://placehold.it/220/0B0B0B/ffffff&text=Grey+0B0B0B">
|
|
</div>
|
|
</div>
|
|
|
|
|
|
[1]: http://foundation.zurb.com/docs/components/grid.html
|
|
[2]: #
|
|
[3]: #
|
|
[4]: #
|
|
[5]: #
|
|
[6]: #
|
|
[7]: #
|
|
[8]: #
|
|
[9]: #
|
|
[10]: # |