Release 0.92 2014-12-21
This commit is contained in:
parent
3068e7a7aa
commit
a56896dda4
114 changed files with 10775 additions and 2079 deletions
|
@ -12,15 +12,15 @@ image:
|
|||
|
||||
<div class="row">
|
||||
<div class="medium-4 columns t30">
|
||||
<img src="{{ site.url }}/assets/img/unsplash_1.jpg" alt="">
|
||||
<img src="{{ site.url }}/images/unsplash_1.jpg" alt="">
|
||||
</div><!-- /.medium-4.columns -->
|
||||
|
||||
<div class="medium-4 columns t30">
|
||||
<img src="{{ site.url }}/assets/img/unsplash_2.jpg" alt="">
|
||||
<img src="{{ site.url }}/images/unsplash_2.jpg" alt="">
|
||||
</div><!-- /.medium-4.columns -->
|
||||
|
||||
<div class="medium-4 columns t30">
|
||||
<img src="{{ site.url }}/assets/img/unsplash_4.jpg" alt="">
|
||||
<img src="{{ site.url }}/images/unsplash_4.jpg" alt="">
|
||||
</div><!-- /.medium-4.columns -->
|
||||
|
||||
</div><!-- /.row -->
|
||||
|
@ -28,12 +28,12 @@ image:
|
|||
|
||||
<div class="row">
|
||||
<div class="medium-8 columns t30">
|
||||
<img src="{{ site.url }}/assets/img/unsplash_6.jpg" alt="">
|
||||
<img src="{{ site.url }}/images/unsplash_6.jpg" alt="">
|
||||
</div><!-- /.medium-8.columns -->
|
||||
|
||||
<div class="medium-4 columns t30">
|
||||
<img src="{{ site.url }}/assets/img/unsplash_5.jpg" alt="">
|
||||
<img class="t30" src="{{ site.url }}/assets/img/unsplash_7.jpg" alt="">
|
||||
<img src="{{ site.url }}/images/unsplash_5.jpg" alt="">
|
||||
<img class="t30" src="{{ site.url }}/images/unsplash_7.jpg" alt="">
|
||||
</div><!-- /.medium-4.columns -->
|
||||
|
||||
</div><!-- /.row -->
|
||||
|
|
|
@ -11,12 +11,12 @@ categories:
|
|||
|
||||
<div class="row">
|
||||
<div class="medium-6 columns b30">
|
||||
<img src="{{ site.url }}/assets/img/webdesign_screenshot_nixdorf.jpg" alt="">
|
||||
<img src="{{ site.url }}/images/webdesign_screenshot_nixdorf.jpg" alt="">
|
||||
<p> Website: <a href="http://nixdorf-internatsberatung.de">Nixdorf Internatsberatung & Schulberatung</a></p>
|
||||
</div><!-- /.medium-6.columns -->
|
||||
|
||||
<div class="medium-6 columns b30">
|
||||
<img src="{{ site.url }}/assets/img/webdesign_screenshot_jcorneille.jpg" alt="">
|
||||
<img src="{{ site.url }}/images/webdesign_screenshot_jcorneille.jpg" alt="">
|
||||
<p>Website: <a href="http://jcorneille.de">Grafik Design Jeannette Corneille</a></p>
|
||||
</div><!-- /.medium-6.columns -->
|
||||
</div><!-- /.row -->
|
||||
|
@ -24,17 +24,17 @@ categories:
|
|||
|
||||
<div class="row t30">
|
||||
<div class="medium-4 columns">
|
||||
<img src="{{ site.url }}/assets/img/webdesign_screenshot_stilwandel.jpg" alt="">
|
||||
<img src="{{ site.url }}/images/webdesign_screenshot_stilwandel.jpg" alt="">
|
||||
<p>Website: <a href="http://stilwandel-koeln.de">Stilwande-Koeln.de</a></p>
|
||||
</div><!-- /.medium-4.columns -->
|
||||
|
||||
<div class="medium-4 columns">
|
||||
<img src="{{ site.url }}/assets/img/webdesign_screenshot_tarnkappe.jpg" alt="">
|
||||
<img src="{{ site.url }}/images/webdesign_screenshot_tarnkappe.jpg" alt="">
|
||||
<p>Website: <a href="http://tarnkarppe.info">Tarnkappe.info</a></p>
|
||||
</div><!-- /.medium-4.columns -->
|
||||
|
||||
<div class="medium-4 columns">
|
||||
<img src="{{ site.url }}/assets/img/webdesign_screenshot_schriefer.jpg" alt="">
|
||||
<img src="{{ site.url }}/images/webdesign_screenshot_schriefer.jpg" alt="">
|
||||
<p>Website: <a href="http://www.psychotherapie-schriefer.de/">Praxis für psychologische Psychotherapie Simone Schriefer</a></p>
|
||||
</div><!-- /.medium-4.columns -->
|
||||
</div><!-- /.row -->
|
||||
|
|
|
@ -65,64 +65,48 @@ image:
|
|||
*Feeling Responsive* uses strong colors in combination with grey colors.
|
||||
</p>
|
||||
|
||||
### Colours
|
||||
|
||||
<div class="row">
|
||||
<div class="large-3 columns b30">
|
||||
<img src="http://placehold.it/220/E4E4E4/ffffff&text=Grey+E4E4E4">
|
||||
</div>
|
||||
<div class="large-3 columns b30">
|
||||
<img src="http://placehold.it/220/D7D7D7/ffffff&text=Grey+D7D7D7">
|
||||
</div>
|
||||
<div class="large-3 columns b30">
|
||||
<img src="http://placehold.it/220/CBCBCB/ffffff&text=Grey+CBCBCB">
|
||||
</div>
|
||||
<div class="large-3 columns b30">
|
||||
<img src="http://placehold.it/220/BEBEBE/ffffff&text=Grey+BEBEBE">
|
||||
<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">
|
||||
<img src="http://placehold.it/220/A4A4A4/ffffff&text=Grey+A4A4A4">
|
||||
</div>
|
||||
<div class="large-3 columns b30">
|
||||
<img src="http://placehold.it/220/979797/ffffff&text=Grey+979797">
|
||||
</div>
|
||||
<div class="large-3 columns b30">
|
||||
<img src="http://placehold.it/220/8B8B8B/ffffff&text=Grey+8B8B8B">
|
||||
</div>
|
||||
<div class="large-3 columns b30">
|
||||
<img src="http://placehold.it/220/7E7E7E/ffffff&text=Grey+7E7E7E">
|
||||
</div>
|
||||
<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">
|
||||
<img src="http://placehold.it/220/646464/ffffff&text=Grey+646464">
|
||||
</div>
|
||||
<div class="large-3 columns b30">
|
||||
<img src="http://placehold.it/220/575757/ffffff&text=Grey+575757">
|
||||
</div>
|
||||
<div class="large-3 columns b30">
|
||||
<img src="http://placehold.it/220/4B4B4B/ffffff&text=Grey+4B4B4B">
|
||||
</div>
|
||||
<div class="large-3 columns b30">
|
||||
<img src="http://placehold.it/220/3E3E3E/ffffff&text=Grey+3E3E3E">
|
||||
</div>
|
||||
<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">
|
||||
<img src="http://placehold.it/220/313131/ffffff&text=Grey+313131">
|
||||
</div>
|
||||
<div class="large-3 columns b30">
|
||||
<img src="http://placehold.it/220/242424/ffffff&text=Grey+242424">
|
||||
</div>
|
||||
<div class="large-3 columns b30">
|
||||
<img src="http://placehold.it/220/171717/ffffff&text=Grey+171717">
|
||||
</div>
|
||||
<div class="large-3 columns b30">
|
||||
<img src="http://placehold.it/220/0B0B0B/ffffff&text=Grey+0B0B0B">
|
||||
</div>
|
||||
<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>
|
||||
|
||||
|
||||
|
|
|
@ -11,12 +11,12 @@ image:
|
|||
You just need to choose a template like the [`page`][3]- or [`page-fullwidth`][4]-template and than use some foundation magic.
|
||||
|
||||
<ul class="clearing-thumbs small-block-grid-3" data-clearing>
|
||||
<li><a href="{{ site.url }}/assets/img/unsplash_1.jpg"><img data-caption="All images by Unsplash.com" class="th" src="{{ site.url }}/assets/img/unsplash_1_thumb.jpg"></a></li>
|
||||
<li><a href="{{ site.url }}/assets/img/unsplash_2.jpg"><img data-caption="All images by Unsplash.com" class="th" src="{{ site.url }}/assets/img/unsplash_2_thumb.jpg"></a></li>
|
||||
<li><a href="{{ site.url }}/assets/img/unsplash_3.jpg"><img data-caption="All images by Unsplash.com" class="th" src="{{ site.url }}/assets/img/unsplash_3_thumb.jpg"></a></li>
|
||||
<li><a href="{{ site.url }}/assets/img/unsplash_4.jpg"><img data-caption="All images by Unsplash.com" class="th" src="{{ site.url }}/assets/img/unsplash_4_thumb.jpg"></a></li>
|
||||
<li><a href="{{ site.url }}/assets/img/unsplash_5.jpg"><img data-caption="All images by Unsplash.com" class="th" src="{{ site.url }}/assets/img/unsplash_5_thumb.jpg"></a></li>
|
||||
<li><a href="{{ site.url }}/assets/img/unsplash_6.jpg"><img data-caption="All images by Unsplash.com" class="th" src="{{ site.url }}/assets/img/unsplash_6_bus_thumb"></a></li>
|
||||
<li><a href="{{ site.url }}/images/unsplash_1.jpg"><img data-caption="All images by Unsplash.com" class="th" src="{{ site.url }}/images/unsplash_1_thumb.jpg"></a></li>
|
||||
<li><a href="{{ site.url }}/images/unsplash_2.jpg"><img data-caption="All images by Unsplash.com" class="th" src="{{ site.url }}/images/unsplash_2_thumb.jpg"></a></li>
|
||||
<li><a href="{{ site.url }}/images/unsplash_3.jpg"><img data-caption="All images by Unsplash.com" class="th" src="{{ site.url }}/images/unsplash_3_thumb.jpg"></a></li>
|
||||
<li><a href="{{ site.url }}/images/unsplash_4.jpg"><img data-caption="All images by Unsplash.com" class="th" src="{{ site.url }}/images/unsplash_4_thumb.jpg"></a></li>
|
||||
<li><a href="{{ site.url }}/images/unsplash_5.jpg"><img data-caption="All images by Unsplash.com" class="th" src="{{ site.url }}/images/unsplash_5_thumb.jpg"></a></li>
|
||||
<li><a href="{{ site.url }}/images/unsplash_6.jpg"><img data-caption="All images by Unsplash.com" class="th" src="{{ site.url }}/images/unsplash_6_bus_thumb"></a></li>
|
||||
</ul>
|
||||
|
||||
## Clearing Lightbox Code
|
||||
|
|
27
_posts/design/2014-10-08-header-pattern.md
Normal file
27
_posts/design/2014-10-08-header-pattern.md
Normal file
|
@ -0,0 +1,27 @@
|
|||
---
|
||||
layout: post
|
||||
title: "Header Image With Pattern"
|
||||
subheadline: "Headers With Style"
|
||||
meta_description:
|
||||
description: "Feeling Responsive allows you to use all different kinds of headers. This example shows a header image in front of a pattern behind it."
|
||||
categories:
|
||||
- design
|
||||
tags:
|
||||
- design
|
||||
- pattern
|
||||
- header
|
||||
header:
|
||||
image: "header_unsplash_2-970x.jpg"
|
||||
pattern: "pattern_concrete.jpg"
|
||||
color: ""
|
||||
---
|
||||
It's so easy to do. Just define in front matter an image and a pattern image. Instead of a pattern you can also use a color. Have a look at the [example with a background color]({{ site.url }}/design/header-color/).
|
||||
|
||||
|
||||
## Header Image With Pattern
|
||||
|
||||
~~~
|
||||
header:
|
||||
image: "header_unsplash_2-970x.jpg"
|
||||
pattern: "pattern_concrete.jpg"
|
||||
~~~
|
25
_posts/design/2014-10-09-header-color.md
Normal file
25
_posts/design/2014-10-09-header-color.md
Normal file
|
@ -0,0 +1,25 @@
|
|||
---
|
||||
layout: post
|
||||
title: "Header Image With Background Color"
|
||||
subheadline: "Headers With Style"
|
||||
description: "Feeling Responsive allows you to use all different kinds of headers. This example shows a header image with a defined background color via front matter."
|
||||
categories:
|
||||
- design
|
||||
tags:
|
||||
- design
|
||||
- background color
|
||||
- header
|
||||
header:
|
||||
image: "header_unsplash_2-970x.jpg"
|
||||
background-color: "#304558"
|
||||
---
|
||||
It's so easy to do. Just define in front matter an image and a background color. Instead of a color you can also use a pattern image. Have a look at the [example with a background pattern]({{ site.url }}/design/header-pattern/).
|
||||
|
||||
## Header Image With Background Color
|
||||
|
||||
~~~
|
||||
header:
|
||||
image: "header_unsplash_2-970x.jpg"
|
||||
background-color: "#fabb00"
|
||||
~~~
|
||||
|
Reference in a new issue