Typro Framework

Important! Work in progress.

Typography On top

Paragraphs

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam bibendum elit eget erat. Aliquam erat volutpat. Nullam justo enim, consectetuer nec, ullamcorper ac, vestibulum in, elit. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Nam sed tellus id magna elementum tincidunt. Vestibulum fermentum tortor id mi. Aenean id metus id velit ullamcorper pulvinar. Vestibulum fermentum tortor id mi. Nam sed tellus id magna elementum tincidunt. Morbi imperdiet, mauris ac auctor dictum, nisl ligula egestas nulla, et sollicitudin sem purus in lacus.

<p>Lorem ipsum dolor ...</p>

<p>Nam sed tellus id ...</p>

Phrases (Emphasis, etc.)

	Tag	Example
Emphasis	`<em>`	Lorem ipsum dolor sit amet... `<em>Lorem ipsum dolor sit amet...</em>`
Strong	`<strong>`	Lorem ipsum dolor sit amet... `<strong>Lorem ipsum dolor sit amet...</strong>`
Strong emphasis	`<strong><em>`	*Lorem ipsum dolor sit amet...* `<strong><em>Lorem ipsum dolor sit amet...</em></strong>`
Abbreviation	`<abbr title="...">`	Lorem ipsum dolor sit amet... `<abbr title="This is abbreviation">Lorem ipsum dolor sit amet...</abbr>`

Lists

Unordered

<ul>

Lorem ipsum
Dolor sit amet
Nam sed tellus

Lorem ipsum
Dolor sit amet
- Lorem ipsum
- Dolor sit amet
- Nam sed tellus
Nam sed tellus

Ordered

<ol>

Lorem ipsum
Dolor sit amet
Nam sed tellus

Lorem ipsum
Dolor sit amet
1. Lorem ipsum
2. Dolor sit amet
3. Nam sed tellus
Nam sed tellus

Ordered & Unordered

<ul> + <ol>

Lorem ipsum
Dolor sit amet
- Vestibulum fermentum
- Aenean id
- Morbi imperdiet
Nam sed tellus

Definition list

<dl>

Maecenas aliquet <dt>: Maecenas fermentum, sem in pharetra pellentesque, velit turpis volutpat ante. <dd>
Lorem ipsum dolor: Nam sed tellus id magna elementum tincidunt. Vestibulum fermentum tortor id mi.

Pokud chcete zobrazit obsah elementu <dt> tučně, použijte ve svém stylopisu

dt {
	font-weight: bold;
}

<dl>
	<dt>Maecenas aliquet</dt>
	<dd>
		Maecenas fermentum, sem in pharetra
		pellentesque, velit turpis volutpat ante.
	</dd>
	<dt>Lorem ipsum dolor</dt>
	<dd>
		Nam sed tellus id magna elementum
		tincidunt. Vestibulum fermentum tortor
		id mi.
	</dd>
</dl>

Blockquote

<blockquote>

This is a blockquote with two paragraphs.

640 K should be enough for everyone


<blockquote cite="http://www.microsoft.com">
	<p>This is a blockquote with two paragraphs.</p>
	<p>640 K should be enough for everyone</p>
</blockquote>

Codes On top

Inline

<code>

Lorem ipsum dolor font-weight: bold; sit amet.

Source:

<p>
	Lorem ipsum dolor
	<code>font-weight: bold;</code>
	sit  amet.
</p>

Block

<pre> or <pre><code>

<?php
	echo "Hello";
?>

Source:

<pre><code>
	&lt;?php
		echo "Hello";
	?>
</code></pre>

Tables On top

Normal table

1.	John	Doe	10,-	Homepage
2.	John	Constantine	45454,-	Homepage
3.	Jack	Sparrow	100215,-	Homepage

<table>
	<tr>
		<td>1.</td>
		<td>John</td>
		<td>Doe</td>
		<td>10,-</td>
		<td><a href="#">Homepage</a></td>
	</tr>
	...
</table>

Table with head

Position	Name	Surname	Price ^$	Link
1.	John	Doe	10,-	Homepage
2.	John	Constantine	45454,-	Homepage
3.	Jack	Sparrow	100215,-	Homepage

<table>
	<tr>
		<th>Position</th>
		<th>Name</th>
		<th>Surname</th>
		<th>Price <sup>$</sup></th>
		<th>Link</th>
	</tr>
	<tr>
		<td>1.</td>
		...
	</tr>
	...
</table>

Table without border

Use <table class="no-border">

1.	John	Doe	10,-	Homepage
2.	John	Constantine	45454,-	Homepage
3.	Jack	Sparrow	100215,-	Homepage

And with head (<th>):

Position	Name	Surname	Price ^$	Link
1.	John	Doe	10,-	Homepage
2.	John	Constantine	45454,-	Homepage
3.	Jack	Sparrow	100215,-	Homepage

<table>
	<tr>
		<td>1.</td>
		<td>John</td>
		<td>Doe</td>
		<td>10,-</td>
		<td><a href="#">Homepage</a></td>
	</tr>
	...
</table>

Table with caption

Use element <caption>

This is table caption
1.	John	Doe	10,-	Homepage
2.	John	Constantine	45454,-	Homepage
3.	Jack	Sparrow	100215,-	Homepage

<table class="no-border">
	<caption>This is table caption</caption>
	<tr>
		<td>1.</td>
		<td>John</td>
		<td>Doe</td>
		<td>10,-</td>
		<td><a href="#">Homepage</a></td>
	</tr>
	...
</table>

Flash messages On top

Typro se snaží zjednodušit i tvorbu tzv. flash messages. Nabízí styly pro různé typy zpráv a také JavaScriptovou obsluhu uzavíracího tlačítka (vyžaduje jQuery). Zprávy mají i předpřipravený rámeček - stačí ho aktivovat pomocí border-width: 1px; (viz např. u flash-message-ok).

Any flash message

<div class="flash-message">
	<p>Any flash message</p>
	<a href="#" class="flash-message-close" title="Close"><span>Close</span></a>
</div>

Any ok flash message with border (border-width: 1px;).

<div class="flash-message-ok">
	<p>Any <strong>ok</strong> flash message with border (<code>border-width: 1px;</code>).</p>
	<a href="#" class="flash-message-close" title="Close"><span>Close</span></a>
</div>

Any info flash message

<div class="flash-message-info">
	<p>Any <strong>info</strong> flash message</p>
	<a href="#" class="flash-message-close" title="Close"><span>Close</span></a>
</div>

Any important flash message

<div class="flash-message-important">
	<p>Any <strong>important</strong> flash message</p>
	<a href="#" class="flash-message-close" title="Close"><span>Close</span></a>
</div>

Any error flash message

<div class="flash-message-error">
	<p>Any <strong>error</strong> flash message</p>
	<a href="#" class="flash-message-close" title="Close"><span>Close</span></a>
</div>

Grid On top

Requires module idea.typro.grid

Basic

Lorem ipsum

Dolor sit amet

<div class="grid-row">
	<div class="grid-col grid-wp50">
		Lorem ipsum
	</div>
	
	<div class="grid-col grid-wp50">
		Dolor sit amet
	</div>
</div>

Grid cell

Lorem ipsum

Dolor sit amet

Use class .grid-cell

<div class="grid-row">
	<div class="grid-col grid-wp50">
		<div class="grid-cell">
			Lorem ipsum
		</div>
	</div>
	
	<div class="grid-col grid-wp50">
		<div class="grid-cell">
			Dolor sit amet
		</div>
	</div>
</div>

Fluid column

Lorem ipsum

Dolor sit amet

This element must be located at the end of parent element (.grid-row).

Important! Use classes .grid-fluid and .grid-rcol

<div class="grid-row">
	<div class="grid-col grid-wp25">
		Lorem ipsum
	</div>
	
	<div class="grid-rcol grid-wp25">
		Dolor sit amet
	</div>
	
	<div class="grid-fluid">
		This element must be located
		at the end of parent
		element (<code>.grid-row</code>).
	</div>
</div>

Offsetting columns

Lorem ipsum

width 50%
.grid-wp50

Dolor sit amet

width 30%
.grid-wp30
left offset 20%
.grid-of20

Lorem ipsum

width 25%
.grid-wp25

Dolor sit amet

width 40%
.grid-wp40
left offset 20%
.grid-of20

Lorem ipsum

width 25%
.grid-wp25
right offset 50%
.grid-rof50

Dolor sit amet

width 25%
.grid-wp25

General syntax (using class .grid-of<offset size>):

<div class="grid-row">
	<div class="grid-col grid-wp25 grid-of20">
		Lorem ipsum
	</div>
	
	<div class="grid-col grid-wp50">
		Dolor sit amet
	</div>
</div>

Nesting columns

Lorem ipsum

Dolor sit amet

Lorem ipsum

Dolor sit amet

General syntax:

<div class="grid-row">
	<div class="grid-col grid-wp50">
		Lorem ipsum
		<div class="grid-row">
			<div class="grid-col grid-wp50">
				Lorem ipsum
			</div>
	
			<div class="grid-col grid-wp50">
				Dolor sit amet
			</div>
		</div>
	</div>
	
	<div class="grid-col grid-wp50">
		Dolor sit amet
	</div>
</div>