Version 0.9
This commit is contained in:
parent
af69d3daac
commit
b268f85c0b
50 changed files with 421 additions and 207 deletions
|
@ -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" %}
|
||||
|
||||
|
|
|
@ -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' %}
|
|
@ -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 -->
|
||||
|
|
|
@ -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 & 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>
|
||||
|
|
|
@ -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&text=Width+500+Pixel">
|
||||
<img src="http://placehold.it/470x264/6b6351/e1dcd7&text=Width+470+Pixel">
|
||||
</div>
|
||||
<div class="large-6 columns">
|
||||
<img src="http://placehold.it/500x281/e05a10/e1e75e&text=Width+500+Pixel">
|
||||
<img src="http://placehold.it/470x264/e05a10/e1e75e&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&text=Width+333+Pixel">
|
||||
<img src="http://placehold.it/303x170/6b6351/e1dcd7&text=Width+303+Pixel">
|
||||
</div>
|
||||
<div class="large-4 columns">
|
||||
<img src="http://placehold.it/333x170/e05a10/e1e75e&text=Width+333+Pixel">
|
||||
<img src="http://placehold.it/303x170/e05a10/e1e75e&text=Width+303+Pixel">
|
||||
</div>
|
||||
<div class="large-4 columns">
|
||||
<img src="http://placehold.it/333x170/fabb00/771e1e&text=Width+333+Pixel">
|
||||
<img src="http://placehold.it/303x170/fabb00/771e1e&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&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&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&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&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&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&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&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&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&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&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&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&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&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&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&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&text=Grey+0B0B0B">
|
||||
</div>
|
||||
</div>
|
|
@ -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>"
|
||||
|
|
|
@ -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.
|
||||
|
||||
|
|
|
@ -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/"
|
||||
|
|
Reference in a new issue