---
layout: page-fullwidth
title:  "Grid & Colors"
subheadline:  "Multi-Device Layouts in Color"
description: "Create powerful multi-device layouts quickly and easily with the 12-column, nest-able Foundation grid. To optimize the size of your images, you find the correct dimensions beneath. Further below you find the <a href='#color-scheme-and-colors-codes'>colorscheme and colors</a> used for <em>Feeling Responsive</em> and their color codes."
categories:
    - design
image:
   header: "unsplash_brooklyn-bridge_header.jpg"
   thumb: "unsplash_brooklyn-bridge_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/470x264/6b6351/e1dcd7&amp;text=Width+470+Pixel">
  </div>
  <div class="large-6 columns">
      <img src="http://placehold.it/470x264/e05a10/e1e75e&amp;text=Width+470+Pixel">
  </div>
</div>

### Three Columns

<div class="row">
  <div class="large-4 columns">
      <img src="http://placehold.it/303x170/6b6351/e1dcd7&amp;text=Width+303+Pixel">
  </div>
  <div class="large-4 columns">
      <img src="http://placehold.it/303x170/e05a10/e1e75e&amp;text=Width+303+Pixel">
  </div>
  <div class="large-4 columns">
      <img src="http://placehold.it/303x170/fabb00/771e1e&amp;text=Width+303+Pixel">
  </div>
</div>



### Four Columns

<div class="row">
  <div class="large-3 columns">
      <img src="http://placehold.it/220x141/6b6351/e1dcd7&amp;text=Width+220+Pixel">
  </div>
  <div class="large-3 columns">
      <img src="http://placehold.it/220x141/e05a10/e1e75e&amp;text=Width+220+Pixel">
  </div>
  <div class="large-3 columns">
      <img src="http://placehold.it/220x141/fabb00/771e1e&amp;text=Width+220+Pixel">
  </div>
  <div class="large-3 columns">
      <img src="http://placehold.it/220x141/00792c/acca57&amp;text=Width+220+Pixel">
  </div>
</div>


## Color Scheme and Colors Codes
{: .t90 }

<p class="teaser" markdown="1">
*Feeling Responsive* uses strong colors in combination with grey colors.
</p>

### Colours

<div class="row">
<div class="large-2 columns b30"  style="background: #45B29D; height: 166px;"></div>
<div class="large-2 columns b30"  style="background: #334D5C; height: 166px;"></div>
<div class="large-2 columns b30"  style="background: #A1D044; height: 166px;"></div>
<div class="large-2 columns b30"  style="background: #EFC94C; height: 166px;"></div>
<div class="large-2 columns b30"  style="background: #E27A3F; height: 166px;"></div>
<div class="large-2 columns b30"  style="background: #DF4949; height: 166px;"></div>
</div>



### Grey Scale


<div class="row">
<div class="large-3 columns b30"  style="background: #E4E4E4; height: 220px;"></div>
<div class="large-3 columns b30"  style="background: #D7D7D7; height: 220px;"></div>
<div class="large-3 columns b30"  style="background: #CBCBCB; height: 220px;"></div>
<div class="large-3 columns b30"  style="background: #BEBEBE; height: 220px;"></div>
</div>

<div class="row">
<div class="large-3 columns b30"  style="background: #A4A4A4; height: 220px;"></div>
<div class="large-3 columns b30"  style="background: #979797; height: 220px;"></div>
<div class="large-3 columns b30"  style="background: #8B8B8B; height: 220px;"></div>
<div class="large-3 columns b30"  style="background: #7E7E7E; height: 220px;"></div>
</div>

<div class="row">
<div class="large-3 columns b30"  style="background: #646464; height: 220px;"></div>
<div class="large-3 columns b30"  style="background: #575757; height: 220px;"></div>
<div class="large-3 columns b30"  style="background: #4B4B4B; height: 220px;"></div>
<div class="large-3 columns b30"  style="background: #3E3E3E; height: 220px;"></div>
</div>

<div class="row">
<div class="large-3 columns b30"  style="background: #313131; height: 220px;"></div>
<div class="large-3 columns b30"  style="background: #242424; height: 220px;"></div>
<div class="large-3 columns b30"  style="background: #171717; height: 220px;"></div>
<div class="large-3 columns b30"  style="background: #0B0B0B; height: 220px;"></div>
</div>


 [1]: http://foundation.zurb.com/docs/components/grid.html
 [2]: #
 [3]: #
 [4]: #
 [5]: #
 [6]: #
 [7]: #
 [8]: #
 [9]: #
 [10]: #