1
0
Fork 0

Version 0.9

This commit is contained in:
Moritz »mo.« Sauer 2014-09-21 18:39:46 +02:00
parent af69d3daac
commit b268f85c0b
50 changed files with 421 additions and 207 deletions

View file

@ -9,7 +9,6 @@ tags:
- content
- post
image:
header: "no"
title: "unsplash_1.jpg"
credit: Unsplash.com
url: http://unsplash.com
@ -26,3 +25,7 @@ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<h3 class="t90">Related Articles</h3>
{% include list-posts.html entries='3' offset='1' category="design" %}

View file

@ -4,8 +4,6 @@ title: "Page Template"
meta_description: "This is an example of a beautiful aligned page in the middle. There is no sidebar to distract the reader. The difference to the Post-Template is, that you find no meta-information at the bottom of the post."
categories:
- design
image:
header: "no"
---
<p class="teaser">
This is an example of a beautiful aligned page in the middle. There is no sidebar to distract the reader. The difference to the <a href='{{ site.url }}/design/post/'>Post-Template</a> is, that you find <mark>no meta-information</mark> at the bottom of the post.</p>
@ -21,4 +19,4 @@ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
## More Articles
{% include blog-entries.html entries='3' offset='1' %}
{% include list-posts.html entries='3' offset='1' %}

View file

@ -6,20 +6,20 @@ description: "The full-width page format gives you all the space you need to sho
categories:
- design
image:
thumb: "unsplash_7_thumb.jpg"
header: "unsplash_leaf_header.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.
<div class="row">
<div class="medium-4 columns top-30">
<div class="medium-4 columns t30">
<img src="{{ site.url }}/assets/img/unsplash_1.jpg" alt="">
</div><!-- /.medium-4.columns -->
<div class="medium-4 columns top-30">
<div class="medium-4 columns t30">
<img src="{{ site.url }}/assets/img/unsplash_2.jpg" alt="">
</div><!-- /.medium-4.columns -->
<div class="medium-4 columns top-30">
<div class="medium-4 columns t30">
<img src="{{ site.url }}/assets/img/unsplash_4.jpg" alt="">
</div><!-- /.medium-4.columns -->
@ -27,13 +27,13 @@ image:
<div class="row">
<div class="medium-8 columns top-30">
<div class="medium-8 columns t30">
<img src="{{ site.url }}/assets/img/unsplash_6.jpg" alt="">
</div><!-- /.medium-8.columns -->
<div class="medium-4 columns top-30">
<div class="medium-4 columns t30">
<img src="{{ site.url }}/assets/img/unsplash_5.jpg" alt="">
<img class="top-30" src="{{ site.url }}/assets/img/unsplash_7.jpg" alt="">
<img class="t30" src="{{ site.url }}/assets/img/unsplash_7.jpg" alt="">
</div><!-- /.medium-4.columns -->
</div><!-- /.row -->

View file

@ -4,25 +4,25 @@ title: "Show your beautiful work!"
subheadline: "Portfolio"
description: "You don't need a special portfolio template with this theme. Just check out the great possibilities of the foundation grid and experiment with it."
image:
header: "no"
thumb: "unsplash_6_bus_thumb.jpg"
categories:
- design
---
<div class="row">
<div class="medium-6 columns bottom-30">
<div class="medium-6 columns b30">
<img src="{{ site.url }}/assets/img/webdesign_screenshot_nixdorf.jpg" alt="">
<p> Website: <a href="http://nixdorf-internatsberatung.de">Nixdorf Internatsberatung &amp; Schulberatung</a></p>
</div><!-- /.medium-6.columns -->
<div class="medium-6 columns bottom-30">
<div class="medium-6 columns b30">
<img src="{{ site.url }}/assets/img/webdesign_screenshot_jcorneille.jpg" alt="">
<p>Website: <a href="http://jcorneille.de">Grafik Design Jeannette Corneille</a></p>
</div><!-- /.medium-6.columns -->
</div><!-- /.row -->
<div class="row top-30">
<div class="row t30">
<div class="medium-4 columns">
<img src="{{ site.url }}/assets/img/webdesign_screenshot_stilwandel.jpg" alt="">
<p>Website: <a href="http://stilwandel-koeln.de">Stilwande-Koeln.de</a></p>

View file

@ -1,13 +1,13 @@
---
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
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:
thumb: "unsplash_7_thumb.jpg"
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.
@ -17,10 +17,10 @@ image:
<div class="row">
<div class="large-6 columns">
<img src="http://placehold.it/500x281/6b6351/e1dcd7&amp;text=Width+500+Pixel">
<img src="http://placehold.it/470x264/6b6351/e1dcd7&amp;text=Width+470+Pixel">
</div>
<div class="large-6 columns">
<img src="http://placehold.it/500x281/e05a10/e1e75e&amp;text=Width+500+Pixel">
<img src="http://placehold.it/470x264/e05a10/e1e75e&amp;text=Width+470+Pixel">
</div>
</div>
@ -28,13 +28,13 @@ image:
<div class="row">
<div class="large-4 columns">
<img src="http://placehold.it/333x170/6b6351/e1dcd7&amp;text=Width+333+Pixel">
<img src="http://placehold.it/303x170/6b6351/e1dcd7&amp;text=Width+303+Pixel">
</div>
<div class="large-4 columns">
<img src="http://placehold.it/333x170/e05a10/e1e75e&amp;text=Width+333+Pixel">
<img src="http://placehold.it/303x170/e05a10/e1e75e&amp;text=Width+303+Pixel">
</div>
<div class="large-4 columns">
<img src="http://placehold.it/333x170/fabb00/771e1e&amp;text=Width+333+Pixel">
<img src="http://placehold.it/303x170/fabb00/771e1e&amp;text=Width+303+Pixel">
</div>
</div>
@ -58,64 +58,69 @@ image:
</div>
## Colors
## Color Scheme and Colors Codes
{: .t90 }
<p class="teaser" markdown="1">
*Feeling Responsive* uses strong colors in combination with grey colors.
</p>
<div class="row">
<div class="large-3 columns bottom-30">
<div class="large-3 columns b30">
<img src="http://placehold.it/220/E4E4E4/ffffff&amp;text=Grey+E4E4E4">
</div>
<div class="large-3 columns bottom-30">
<div class="large-3 columns b30">
<img src="http://placehold.it/220/D7D7D7/ffffff&amp;text=Grey+D7D7D7">
</div>
<div class="large-3 columns bottom-30">
<div class="large-3 columns b30">
<img src="http://placehold.it/220/CBCBCB/ffffff&amp;text=Grey+CBCBCB">
</div>
<div class="large-3 columns bottom-30">
<div class="large-3 columns b30">
<img src="http://placehold.it/220/BEBEBE/ffffff&amp;text=Grey+BEBEBE">
</div>
</div>
<div class="row">
<div class="large-3 columns bottom-30">
<div class="large-3 columns b30">
<img src="http://placehold.it/220/A4A4A4/ffffff&amp;text=Grey+A4A4A4">
</div>
<div class="large-3 columns bottom-30">
<div class="large-3 columns b30">
<img src="http://placehold.it/220/979797/ffffff&amp;text=Grey+979797">
</div>
<div class="large-3 columns bottom-30">
<div class="large-3 columns b30">
<img src="http://placehold.it/220/8B8B8B/ffffff&amp;text=Grey+8B8B8B">
</div>
<div class="large-3 columns bottom-30">
<div class="large-3 columns b30">
<img src="http://placehold.it/220/7E7E7E/ffffff&amp;text=Grey+7E7E7E">
</div>
</div>
<div class="row">
<div class="large-3 columns bottom-30">
<div class="large-3 columns b30">
<img src="http://placehold.it/220/646464/ffffff&amp;text=Grey+646464">
</div>
<div class="large-3 columns bottom-30">
<div class="large-3 columns b30">
<img src="http://placehold.it/220/575757/ffffff&amp;text=Grey+575757">
</div>
<div class="large-3 columns bottom-30">
<div class="large-3 columns b30">
<img src="http://placehold.it/220/4B4B4B/ffffff&amp;text=Grey+4B4B4B">
</div>
<div class="large-3 columns bottom-30">
<div class="large-3 columns b30">
<img src="http://placehold.it/220/3E3E3E/ffffff&amp;text=Grey+3E3E3E">
</div>
</div>
<div class="row">
<div class="large-3 columns bottom-30">
<div class="large-3 columns b30">
<img src="http://placehold.it/220/313131/ffffff&amp;text=Grey+313131">
</div>
<div class="large-3 columns bottom-30">
<div class="large-3 columns b30">
<img src="http://placehold.it/220/242424/ffffff&amp;text=Grey+242424">
</div>
<div class="large-3 columns bottom-30">
<div class="large-3 columns b30">
<img src="http://placehold.it/220/171717/ffffff&amp;text=Grey+171717">
</div>
<div class="large-3 columns bottom-30">
<div class="large-3 columns b30">
<img src="http://placehold.it/220/0B0B0B/ffffff&amp;text=Grey+0B0B0B">
</div>
</div>

View file

@ -3,8 +3,6 @@ layout: video
title: "Video Template"
subheadline: "Video Template"
description: "If you want to show videos in a large manner, the video template is for your."
image:
header: "no"
categories:
- design
iframe: "<iframe width='970' height='546' src='//www.youtube.com/embed/WoHxoz_0ykI' frameborder='0' allowfullscreen></iframe>"

View file

@ -7,7 +7,6 @@ categories:
- design
image:
thumb: "unsplash_7_thumb.jpg"
header: "no"
---
You just need to choose a template like the [`page`][3]- or [`page-fullwidth`][4]-template and than use some foundation magic.

View file

@ -6,7 +6,7 @@ meta_description: "Feeling Responsive uses Volkhov for headlines, Lato for every
description: "<em>Feeling Responsive</em> uses Volkhov for headlines, Lato for everything else and if you are in need to show some code, it will be in Lucida Console."
image:
header: homepage_typography.jpg
thumb: unsplash_6_thumb.jpg
thumb: homepage_typography_thumb.jpg
homepage: homepage_typography.jpg
credit: Image by Antonio
url: "http://www.aisleone.net/"