update css
This commit is contained in:
Moritz »mo.« Sauer
parent
54411d7f9b
commit
25dab72954
7 changed files with 96 additions and 72 deletions
|
|
@ -1,8 +1,9 @@
|
|||
---
|
||||
layout: page-fullwidth
|
||||
title: "Grid & Colors"
|
||||
subheadline: "Multi-Device Layouts in Color"
|
||||
title: "Grid & Colors"
|
||||
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."
|
||||
breadcrumb: true
|
||||
categories:
|
||||
- design
|
||||
image:
|
||||
|
|
@ -11,9 +12,29 @@ image:
|
|||
---
|
||||
*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
|
||||
<div class="show-for-small">
|
||||
<div class="row">
|
||||
<div class="small-12 columns">
|
||||
<h3>Small Grid</h3>
|
||||
</div><!-- /.small-12.columns -->
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="small-6 columns">
|
||||
<img src="http://placehold.it/470x264/6b6351/e1dcd7&text=2+Columns">
|
||||
</div>
|
||||
<div class="small-6 columns">
|
||||
<img src="http://placehold.it/470x264/e05a10/e1e75e&text=2+Columns">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
### Two Columns
|
||||
<div class="show-for-large-up">
|
||||
<div class="row">
|
||||
<div class="small-12 columns">
|
||||
<h2>Large Displays</h2>
|
||||
<h3>Large Displays Two Columns</h3>
|
||||
</div><!-- /.small-12.columns -->
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="large-6 columns">
|
||||
|
|
@ -24,7 +45,15 @@ image:
|
|||
</div>
|
||||
</div>
|
||||
|
||||
### Three Columns
|
||||
<div class="row">
|
||||
<div class="small-12 columns">
|
||||
<h3>Large Displays Three Columns</h3>
|
||||
</div><!-- /.small-12.columns -->
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="row">
|
||||
<div class="large-4 columns">
|
||||
|
|
@ -38,9 +67,11 @@ image:
|
|||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
### Four Columns
|
||||
<div class="row">
|
||||
<div class="small-12 columns">
|
||||
<h3>Large Displays Four Columns</h3>
|
||||
</div><!-- /.small-12.columns -->
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="large-3 columns">
|
||||
|
|
@ -56,57 +87,51 @@ image:
|
|||
<img src="http://placehold.it/220x141/00792c/acca57&text=Width+220+Pixel">
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- /.hide-for-small -->
|
||||
|
||||
|
||||
## 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 t90">
|
||||
<div class="small-12 columns">
|
||||
<h2>Color Scheme and Colors Codes</h2>
|
||||
<p class="teaser"><em>Feeling Responsive</em> uses strong colors in combination with grey colors.</p>
|
||||
<h3>Colours</h3>
|
||||
</div><!-- /.small-12.columns -->
|
||||
</div>
|
||||
|
||||
<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 class="small-2 columns"><div style="background: #45B29D; height: 137px;"></div></div>
|
||||
<div class="small-2 columns"><div style="background: #334D5C; height: 137px;"></div></div>
|
||||
<div class="small-2 columns"><div style="background: #A1D044; height: 137px;"></div></div>
|
||||
<div class="small-2 columns"><div style="background: #EFC94C; height: 137px;"></div></div>
|
||||
<div class="small-2 columns"><div style="background: #E27A3F; height: 137px;"></div></div>
|
||||
<div class="small-2 columns"><div style="background: #DF4949; height: 137px;"></div></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
### Grey Scale
|
||||
<h3>Grey Scale</h3>
|
||||
|
||||
|
||||
<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 class="small-2 columns"><div style="background: #E4E4E4; height: 137px;"></div></div>
|
||||
<div class="small-2 columns"><div style="background: #D7D7D7; height: 137px;"></div></div>
|
||||
<div class="small-2 columns"><div style="background: #CBCBCB; height: 137px;"></div></div>
|
||||
<div class="small-2 columns"><div style="background: #BEBEBE; height: 137px;"></div></div>
|
||||
<div class="small-2 columns"><div style="background: #A4A4A4; height: 137px;"></div></div>
|
||||
<div class="small-2 columns"><div style="background: #979797; height: 137px;"></div></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 class="row t30">
|
||||
<div class="small-2 columns"><div style="background: #8B8B8B; height: 137px;"></div></div>
|
||||
<div class="small-2 columns"><div style="background: #7E7E7E; height: 137px;"></div></div>
|
||||
<div class="small-2 columns"><div style="background: #646464; height: 137px;"></div></div>
|
||||
<div class="small-2 columns"><div style="background: #575757; height: 137px;"></div></div>
|
||||
<div class="small-2 columns"><div style="background: #4B4B4B; height: 137px;"></div></div>
|
||||
<div class="small-2 columns"><div style="background: #3E3E3E; height: 137px;"></div></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 class="row t30">
|
||||
<div class="small-2 columns"><div style="background: #313131; height: 137px;"></div></div>
|
||||
<div class="small-2 columns"><div style="background: #242424; height: 137px;"></div></div>
|
||||
<div class="small-2 columns"><div style="background: #171717; height: 137px;"></div></div>
|
||||
<div class="small-2 columns end"><div style="background: #0B0B0B; height: 137px;"></div></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
|
|
|||
Reference in a new issue