Worklog PRO Timesheet for JIRA

Wonderful Typography

Mon, 16 Nov 2015 00:00:00 +0200

Table of Contents

Lato – A Sans Serif Typeface Family
About Volkhov <h2>
- Feeling Responsive uses Volkhov for… <h3>
  - Heading in Volkhov <h4>
  - Heading in Volkhov <h5>
Modular Scale
Typographical Elements
- <hr> Horizontal Line
- <pre> Displaying Code
- <blockquote> Quotation
- <blockquote> and <cite> together
- <ol> Ordered Lists
- <ul> Unordered Lists
- <dl> Definition Lists
- <a>
- <em>
- <strong>
- <small>
- <s>
- <cite>
- <q>
- <dfn>
- <abbr>
- <time>
- <code>
- <var>
- <samp>
- <kbd>
- <sub>
- <sup>
- <i>
- <b>
- <u>
- <mark>
- <br>
<h1>-Heading in Volkhov
- <h2>-Heading in Volkhov
  - <h3>-Heading in Volkhov
    - <h4>-Heading in Volkhov
      - <h5>-Heading in Volkhov
      - <h6>-Heading in Volkhov
- Tables

Lato – A Sans Serif Typeface Family

Lato is a sans serif typeface family started in the summer of 2010 by Warsaw-based designer Łukasz Dziedzic. »Lato« means »Summer« in Polish. In December 2010 the Lato family was published under the Open Font License by his foundry tyPoland, with support from Google.

I do not think of type as something that should be readable. It should be beautiful.Ed Benguiat

In the last ten or so years, during which Łukasz has been designing type, most of his projects were rooted in a particular design task that he needed to solve. With Lato, it was no different. Originally, the family was conceived as a set of corporate fonts for a large client — who in the end decided to go in different stylistic direction, so the family became available for a public release.

When working on Lato, Łukasz tried to carefully balance some potentially conflicting priorities. He wanted to create a typeface that would seem quite “transparent” when used in body text but would display some original traits when used in larger sizes. He used classical proportions (particularly visible in the uppercase) to give the letterforms familiar harmony and elegance. At the same time, he created a sleek sans serif look, which makes evident the fact that Lato was designed in 2010 — even though it does not follow any current trend.

The semi-rounded details of the letters give Lato a feeling of warmth, while the strong structure provides stability and seriousness. “Male and female, serious but friendly. With the feeling of the Summer,” says Łukasz. Learn more at www.latofonts.com

About Volkhov <h2>

Volkhov is a low-contrast seriffed typeface with a robust character, intended for providing a motivating reading experience. Volkhov was designed by Ivan Petrov.

Feeling Responsive uses Volkhov for… <h3>

<h1>-headings
<h2>-headings
<h3>-headings
<h4>-headings
<h5>-headings
<h6>-headings

Heading in Volkhov <h4>

As a four-weight family it is well-suited for complex text environments being economic and legible, contemporary and prominent. Many of its design solutions relate to this purpose: large open counters, rather short descenders, and brutal asymmetric serifs.

Heading in Volkhov <h5>

Spacing in Bold is slightly increased compared to the normal weight, because the bold mass is mostly grown inwards. The Italic has a steep angle and a distinctive calligraphically reminiscent character, as a counterpart to the rigorous Regular.

Modular Scale

Feeling Responsive explores the 2:3 perfect fifth modular scale created with www.modular-scale.com. This is the modular scale of Feeling Responsive.

44px @ 1:1.5 – Ideal text size
16px @ 1:1.5 – Important number

Modular Scale
44.000	1	2.75	338.462
36.000	0.818	2.25	276.923
29.333	0.667	1.833	225.638
24.000	0.545	1.5	184.615
19.555	0.444	1.222	150.423
16.000	0.364	1	123.077

Typographical Elements

Here you’ll find the complete list of HTML5-Tags and this is how they look like.

<hr> Horizontal Line

<pre> Displaying Code

<html>
    <head>
        <title>Code Blocks</title>
    </head>
    <body></body>
</html>

<blockquote> Quotation

Everything happens for a reason. (Britney Spears)

<blockquote> and <cite> together

Age is an issue of mind over matter. If you don’t mind, it doesn’t matter. Mark Twain

<ol> Ordered Lists

Ordered List
Second List Item
Third List Item
1. Second Level First Item
2. Second Level Second Item
3. Second Level Third Item
  1. And a third level First Item
  2. And a third level Second Item
  3. And a third level Third Item
Fourth List Item
Fifth List Item

<ul> Unordered Lists

Unordered List
Second List Item
Third List Item
- Second Level First Item
- Second Level Second Item
- Second Level Third Item
  - And a third level First Item
  - And a third level Second Item
  - And a third level Third Item
Fourth List Item
Fifth List Item

<dl> Definition Lists

Definition List: Bacon ipsum dolor sit amet spare ribs brisket ribeye, andouille sirloin bresaola frankfurter corned beef capicola bacon. Salami beef ribs sirloin, short loin hamburger shoulder t-bone.
Beef ribs jowl swine porchetta: Sirloin tenderloin swine frankfurter pork loin pork capicola ham hock strip steak ribeye beef ribs. Hamburger t-bone ribeye ham prosciutto bresaola.
Pancetta flank sirloin pork: short ribs shankle prosciutto landjaeger. Beef ribs turkey shoulder drumstick. Leberkas pork belly ribeye, bresaola jerky strip steak tenderloin bacon landjaeger short ribs beef ribs. Flank pork chop fatback tail kielbasa filet mignon jowl landjaeger bresaola tongue corned beef biltong.; Landjaeger spare ribs fatback corned beef tenderloin drumstick, swine chicken beef turkey biltong doner tri-tip filet mignon.

<a>

Links make the web exceptional.

<em>

Let’s emphasize how important responsive webdesign is.

<strong>

This looks like bold text.

<small>

This is small text.

<s>

It’s nice getting things done. Just strike through ~~finished tasks~~.

<cite>

Albert Einstein

<q>

If you use <q> your text gets automagically quotes around the text passage.

<dfn>

The <dfn> tag is a phrase tag. It defines a definition term.

<abbr>

The WHO was founded in 1948.

<time>

The concert took place on May 15.

<code>

Some code: lucida console displayed.

<var>

The <var> tag is a phrase tag. It defines a variable.

<samp>

Text surrounded by <samp> looks like this in monospace.

<kbd>

Copycats enjoy pressing CMD + c and CMD + v.

<sub>

This text _{lays low} and chills a bit.

<sup>

This text ^{gets high} above the clouds.

<i>

This looks italic.

<b>

This looks bold, too.

<u>

Underlining content for emphasize is not the best choice. You can't read it so well.

<mark>

Let’s mark this hint to give you a clue.

<br>

Need a break? I give you three!

<h1>-Heading in Volkhov

<h2>-Heading in Volkhov

<h3>-Heading in Volkhov

<h4>-Heading in Volkhov

<h5>-Heading in Volkhov

<h6>-Heading in Volkhov

Tables

Even tables are responsive thanks to foundation. A table can consist of these elements.

<table> defines an HTML table
HTML Tag	Defintion	Style
<caption>	defines a table caption	`font-weight: bold;`
<colgroup>	specifies a group of one or more columns in a table for formatting. The <colgroup> tag is useful for applying styles to entire columns, instead of repeating the styles for each cell, for each row.	no styling needed
<col>	specifies column properties for each column within a `<colgroup>` element	no styling needed
<thead>	is used to group header content in an HTML table	`font-weight: bold;`
<tbody>	is used to group the body content in an HTML table	no styling needed
<tr>	defines a row in an HTML table	no styling needed
<th>	defines a header cell in an HTML table	`font-weight: bold;`
<td>	defines a standard cell in an HTML table	`font-weight: normal;`
<tfoot>	is used to group footer content in an HTML table	no styling needed

Now with Comments!

Sun, 15 Nov 2015 00:00:00 +0200

If you want to use Disqus-Comments with Feeling Responsive, just open config.yml and add your disqus_shortname. More on how to use Disqus ›

By default comments are turned off. You can customize the default behaviour in config.yml. To turn on comments just add comments: true to front matter using the page layout layout: page.

No Header

Sun, 11 Oct 2015 00:00:00 +0300

Silence is beautiful. Sometimes you just want no distractions at all. Whether you like the content to speak for itself or enjoy pure typography on a plain background: Feeling Responsive got you covered. Just say no like this:

header: no

All Header-Styles

No Header but Article Image

Thu, 12 Mar 2015 00:00:00 +0200

First turn of the header with header: no. Than add an image to with the following code. The caption is optional.

header: no
image:
    title: unsplash_eagle.jpg
    caption: This is a caption for the header image with link
    caption_url: https://unsplash.com/

All Header-Styles

Header With Text

Tue, 10 Feb 2015 00:00:00 +0200

Front Matter Code

header:
    title: header with text
    image_fullwidth: unsplash_brooklyn-bridge_header.jpg
    caption: This is a caption for the header image with link
    caption_url: https://unsplash.com/

All Header-Styles

Header With Logo Only

Thu, 09 Oct 2014 00:00:00 +0300

No front matter code needed.

All Header-Styles

Header Image With Background Color

Thu, 09 Oct 2014 00:00:00 +0300

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.

Front Matter Code

WARNING: To make this work the value of background-color must be inbetween quotes.

header:
    image:  "header_unsplash_2-970x.jpg"
    background-color:  "#fabb00"
    caption: This is a caption for the header image with link
    caption_url: https://unsplash.com/

All Header-Styles

Header with a Full-Width-Image

Thu, 09 Oct 2014 00:00:00 +0300

It’s so easy to do. Just define in front matter your image.

Front Matter Code

header:
    image_fullwidth: "unsplash_brooklyn-bridge_header.jpg"
    caption: This is a caption for the header image with link
    caption_url: https://unsplash.com/

All Header-Styles

Header Image With Pattern

Wed, 08 Oct 2014 00:00:00 +0300

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.

Front Matter Code

header:
    image:  "header_unsplash_2-970x.jpg"
    pattern:  "pattern_concrete.jpg"
    caption: This is a caption for the header image with link
    caption_url: https://unsplash.com/

All Header-Styles

A Beautiful Gallery

Mon, 15 Sep 2014 00:00:00 +0300

You just need to choose a template like the page- or page-fullwidth-template and than use some foundation magic.

Clearing Lightbox is so flexible especially when using the block grid. For extensive documentation visit the foundation docs.

<ul class="clearing-thumbs small-block-grid-3" data-clearing>
  <li><a href="path/to/your/img"><img data-caption="caption 1" src="path/to/your/thumbnail"></a></li>
  <li><a href="path/to/your/img"><img data-caption="caption 2" src="path/to/your/thumbnail"></a></li>
  <li><a href="path/to/your/img"><img data-caption="caption 3" src="path/to/your/thumbnail"></a></li>
</ul>

Worklog PRO Timesheet for JIRA

Wonderful Typography

Lato – A Sans Serif Typeface Family

About Volkhov <h2>

Feeling Responsive uses Volkhov for… <h3>

Heading in Volkhov <h4>

Heading in Volkhov <h5>

Modular Scale

Typographical Elements

<hr> Horizontal Line

<pre> Displaying Code

<blockquote> Quotation

<blockquote> and <cite> together

<ol> Ordered Lists

<ul> Unordered Lists

<dl> Definition Lists

<a>

<em>

<strong>

<small>

<s>

<cite>

<q>

<dfn>

<abbr>

<time>

<code>

<var>

<samp>

<kbd>

<sub>

<sup>

<i>

<b>

<u>

<mark>

<br>

<h1>-Heading in Volkhov

<h2>-Heading in Volkhov

<h3>-Heading in Volkhov

<h4>-Heading in Volkhov

<h5>-Heading in Volkhov

<h6>-Heading in Volkhov

Tables

Now with Comments!

No Header

All Header-Styles

No Header but Article Image

All Header-Styles

Header With Text

Front Matter Code

All Header-Styles

Header With Logo Only

All Header-Styles

Header Image With Background Color

Front Matter Code

All Header-Styles

Header with a Full-Width-Image

Front Matter Code

All Header-Styles

Header Image With Pattern

Front Matter Code

All Header-Styles

A Beautiful Gallery

Clearing Lightbox Code

Other Post Formats