http://hipertextos.github.io/src/css/styles.css

Headings

h1 h2 h3 h4 h5 h6

Default

Sample

H1 heading small text

H2 heading small text

H3 heading small text

H4 heading small text

H5 heading small text

H6 heading small text

Markup

<!-- Snippets -->
<h1>H1 heading <small>small text</small></h1>
<h2>H2 heading <small>small text</small></h2>
<h3>H3 heading <small>small text</small></h3>
<h4>H4 heading <small>small text</small></h4>
<h5>H5 heading <small>small text</small></h5>
<h6>H6 heading <small>small text</small></h6>

Small default

Sample

H1 small heading

H2 small heading

H3 small heading

H4 small heading

H5 small heading

H6 small heading

Markup

<!-- Snippets -->
 <h1><small>H1 small heading</small></h1>
<h2><small>H2 small heading</small></h2>
<h3><small>H3 small heading</small></h3>
<h4><small>H4 small heading</small></h4>
<h5><small>H5 small heading</small></h5>
<h6><small>H6 small heading</small></h6>

.title

Sample

H1 .title small text

H2 .title small text

H3 .title small text

H4 .title small text

H5 .title small text

H6 .title small text

Markup

<!-- Snippets -->
<h1 class="title">H1 .title <small>small text</small></h1>
<h2 class="title">H2 .title <small>small text</small></h2>
<h3 class="title">H3 .title <small>small text</small></h3>
<h4 class="title">H4 .title <small>small text</small></h4>
<h5 class="title">H5 .title <small>small text</small></h5>
<h6 class="title">H6 .title <small>small text</small></h6>

.headline

Sample

H1 .headline small text

H2 .headline small text

H3 .headline small text

H4 .headline small text

H5 .headline small text

H6 .headline small text

Markup

<!-- Snippets -->
<h1 class="headline">H1 .headline <small>small text</small></h1>
<h2 class="headline">H2 .headline <small>small text</small></h2>
<h3 class="headline">H3 .headline <small>small text</small></h3>
<h4 class="headline">H4 .headline <small>small text</small></h4>
<h5 class="headline">H5 .headline <small>small text</small></h5>
<h6 class="headline">H6 .headline <small>small text</small></h6>

.section-title

Sample

H1 .section-title small text

H2 .section-title small text

H3 .section-title small text

H4 .section-title small text

H5 .section-title small text

H6 .section-title small text

Markup

<!-- Snippets -->
<h1 class="section-title">H1 .section-title <small>small text</small></h1>
<h2 class="section-title">H2 .section-title <small>small text</small></h2>
<h3 class="section-title">H3 .section-title <small>small text</small></h3>
<h4 class="section-title">H4 .section-title <small>small text</small></h4>
<h5 class="section-title">H5 .section-title <small>small text</small></h5>
<h6 class="section-title">H6 .section-title <small>small text</small></h6>

.outbox

Sample

H1 .outbox small text

H2 .outbox small text

H3 .outbox small text

H4 .outbox small text

H5 .outbox small text

H6 .outbox small text

Markup

<!-- Snippets -->
<h1 class="outbox flat turquoise">H1 .outbox <small>small text</small></h1>
<h2 class="outbox flat turquoise">H2 .outbox <small>small text</small></h2>
<h3 class="outbox flat turquoise">H3 .outbox <small>small text</small></h3>
<h4 class="outbox flat turquoise">H4 .outbox <small>small text</small></h4>
<h5 class="outbox flat turquoise">H5 .outbox <small>small text</small></h5>
<h6 class="outbox flat turquoise">H6 .outbox <small>small text</small></h6>

.outbox-left

Sample

H1 .outbox-left small text

H2 .outbox-left small text

H3 .outbox-left small text

H4 .outbox-left small text

H5 .outbox-left small text

H6 .outbox-left small text

Markup

<!-- Snippets -->
<h1 class="outbox-left flat turquoise">H1 .section-title + .outbox-left <small>small text</small></h1>
<h2 class="outbox-left flat turquoise">H2 .section-title + .outbox-left <small>small text</small></h2>
<h3 class="outbox-left flat turquoise">H3 .section-title + .outbox-left <small>small text</small></h3>
<h4 class="outbox-left flat turquoise">H4 .section-title + .outbox-left <small>small text</small></h4>
<h5 class="outbox-left flat turquoise">H5 .section-title + .outbox-left <small>small text</small></h5>
<h6 class="outbox-left flat turquoise">H6 .section-title + .outbox-left <small>small text</small></h6>

.outbox-right

Sample

H1 .outbox-right small text

H2 .outbox-right small text

H3 .outbox-right small text

H4 .outbox-right small text

H5 .outbox-right small text

H6 .outbox-right small text

Markup

<!-- Snippets -->
<h1 class="outbox-right flat turquoise">H1 .outbox-right <small>small text</small></h1>
<h2 class="outbox-right flat turquoise">H2 .outbox-right <small>small text</small></h2>
<h3 class="outbox-right flat turquoise">H3 .outbox-right <small>small text</small></h3>
<h4 class="outbox-right flat turquoise">H4 .outbox-right <small>small text</small></h4>
<h5 class="outbox-right flat turquoise">H5 .outbox-right <small>small text</small></h5>
<h6 class="outbox-right flat turquoise">H6 .outbox-right <small>small text</small></h6>

http://hipertextos.github.io/hipertextos/css/styles.css

Text

q i b em u small strong sub sup del ins kbd mark time abbr code

Default

Sample

This is a Q tag: inside a paragraph.

This is a I tag: inside a paragraph.

This is a B tag: inside a paragraph.

This is a EM tag: inside a paragraph.

This is a U tag: inside a paragraph.

This is a SMALL tag: inside a paragraph.

This is a STRONG tag: inside a paragraph.

This is a _{SUB tag:} inside a paragraph.

This is a ^{SUP tag:} inside a paragraph.

This is a ~~DEL tag:~~ inside a paragraph.

This is a INS tag: inside a paragraph.

This is KBD tag: inside a paragraph.

This is MARK tag: inside a paragraph.

Timetag inside a paragraph.

This is an ABBR tag inside a paragraph.

This is an CODE tag inside a paragraph.

Markup

<!-- Snippets -->
<p>This is a <q>Q tag:</q> inside a paragraph.</p>
<p>This is a <i>I tag:</i> inside a paragraph.</p>
<p>This is a <b>B tag:</b> inside a paragraph.</p>
<p>This is a <em>EM tag:</em> inside a paragraph.</p>
<p>This is a <u>U tag:</u> inside a paragraph.</p>
<p>This is a <small>SMALL tag:</small> inside a paragraph.</p>
<p>This is a <strong>STRONG tag:</strong> inside a paragraph.</p>
<p>This is a <sub>SUB tag:</sub> inside a paragraph.</p>
<p>This is a <sup>SUP tag:</sup> inside a paragraph.</p>
<p>This is a <del>DEL tag:</del> inside a paragraph.</p>
<p>This is a <ins>INS tag:</ins> inside a paragraph.</p>
<p>This is <kbd>KBD tag:</kbd> inside a paragraph.</p>
<p>This is <mark>MARK tag:</mark> inside a paragraph.</p>
<p><time>This is a TIME tag</time> inside a paragraph.</p>
<p><abbr title="Abbreviated text">This is an ABBR tag</abbr> inside a paragraph.</p>
<p><code>This is an CODE tag</code> inside a paragraph.</p>

http://hipertextos.github.io/hipertextos/css/styles.css

Special text

adress blockquote span pre

Default

Sample

This is an ADRESS tag

This is a BLOCKQUOTE tag: Quid te vis alicui præferre; cum plures doctiores te inveniantur, et magis in lege periti. Si vis utiliter aliquid scire et discere: ama nesciri et pro nihilo reputari.This is a CITE tag

This is a PRE tag: Quid te vis alicui præferre; cum plures doctiores te inveniantur, et magis in lege periti. Si vis utiliter aliquid scire et discere: ama nesciri et pro nihilo reputari.

This is a span tag (no variations)

Edit this with contentEditable attribute

Markup

<!-- Snippets -->
<address>This is an ADRESS tag</address>
<blockquote>This is a BLOCKQUOTE tag: Quid te vis alicui præferre; cum plures doctiores te inveniantur, et magis in lege periti. Si vis utiliter aliquid scire et discere: ama nesciri et pro nihilo reputari.<cite>This is a CITE tag</cite></blockquote>
<pre contenteditable="true"><code>This is a PRE tag: Quid te vis alicui præferre; cum plures doctiores te inveniantur, et magis in lege periti. Si vis utiliter aliquid scire et discere: ama nesciri et pro nihilo reputari.</code></pre>
<p><span>This is a span tag (no variations)</span></p>
<section contentEditable="true">Edit this with contentEditable attribute</section>

.book-quote, .lines-quote, .tweet-quote

Sample

This is a BLOCKQUOTE tag with a .book-quote class: Quid te vis alicui præferre; cum plures doctiores te inveniantur, et magis in lege periti. Si vis utiliter aliquid scire et discere: ama nesciri et pro nihilo reputari.This is a CITE tag

This is a BLOCKQUOTE tag with a .lines-quote class: Quid te vis alicui præferre; cum plures doctiores te inveniantur, et magis in lege periti. Si vis utiliter aliquid scire et discere: ama nesciri et pro nihilo reputari.This is a CITE tag

userThis is a BLOCKQUOTE tag with a .tweet-quote class: Quid te vis alicui præferre; cum plures doctiores te inveniantur, et magis in lege periti. Si vis utiliter aliquid scire et discere: ama nesciri et pro nihilo reputari. Jun 14, 1789

Markup

<!-- Snippets -->
<blockquote class="book-quote">This is a BLOCKQUOTE tag with a .book-quote class: Quid te vis alicui præferre; cum plures doctiores te inveniantur, et magis in lege periti. Si vis utiliter aliquid scire et discere: ama nesciri et pro nihilo reputari.<cite>This is a CITE tag</cite></blockquote>
<blockquote class="lines-quote">This is a BLOCKQUOTE tag with a .lines-quote class: Quid te vis alicui præferre; cum plures doctiores te inveniantur, et magis in lege periti. Si vis utiliter aliquid scire et discere: ama nesciri et pro nihilo reputari.<cite>This is a CITE tag</cite></blockquote>
<blockquote class="tweet-quote">This is a BLOCKQUOTE tag with a .book-quote class: Quid te vis alicui præferre; cum plures doctiores te inveniantur, et magis in lege periti. Si vis utiliter aliquid scire et discere: ama nesciri et pro nihilo reputari.<cite>This is a CITE tag</cite></blockquote>

.console

Sample

This is a PRE tag with a .console class: Quid te vis alicui præferre; cum plures doctiores te inveniantur, et magis in lege periti. Si vis utiliter aliquid scire et discere: ama nesciri et pro nihilo reputari.

Markup

<!-- Snippets -->
<pre class="console"><code>This is a PRE tag with a .console class: Quid te vis alicui præferre; cum plures doctiores te inveniantur, et magis in lege periti. Si vis utiliter aliquid scire et discere: ama nesciri et pro nihilo reputari.</code></pre>

http://hipertextos.github.io/hipertextos/css/styles.css

Paragraphs

p

Default and fundamentals

Sample

This is a default paragraph: Quid te vis alicui præferre; cum plures doctiores te inveniantur, et magis in lege periti. Si vis utiliter aliquid scire et discere: ama nesciri et pro nihilo reputari.

This is a paragraph with a .lead class: Quid te vis alicui præferre; cum plures doctiores te inveniantur, et magis in lege periti. Si vis utiliter aliquid scire et discere: ama nesciri et pro nihilo reputari.

This is a paragraph with a .prose class: Quid te vis alicui præferre; cum plures doctiores te inveniantur, et magis in lege periti. Si vis utiliter aliquid scire et discere: ama nesciri et pro nihilo reputari.

This is a paragraph with a .verse class: Quid te vis alicui præferre; cum plures doctiores te inveniantur, et magis in lege periti. Si vis utiliter aliquid scire et discere: ama nesciri et pro nihilo reputari.

This is a paragraph with a .reverse class: Quid te vis alicui præferre; cum plures doctiores te inveniantur, et magis in lege periti. Si vis utiliter aliquid scire et discere: ama nesciri et pro nihilo reputari.

This is a paragraph with a .universe class: Quid te vis alicui præferre; cum plures doctiores te inveniantur, et magis in lege periti. Si vis utiliter aliquid scire et discere: ama nesciri et pro nihilo reputari.

This is a paragraph with a .capitals class: Quid te vis alicui præferre; cum plures doctiores te inveniantur, et magis in lege periti. Si vis utiliter aliquid scire et discere: ama nesciri et pro nihilo reputari.

This is a paragraph with a .indented class: Quid te vis alicui præferre; cum plures doctiores te inveniantur, et magis in lege periti. Si vis utiliter aliquid scire et discere: ama nesciri et pro nihilo reputari.

This is a paragraph with a .conversation-a class: Quid te vis alicui præferre; cum plures doctiores te inveniantur, et magis in lege periti. Si vis utiliter aliquid scire et discere: ama nesciri et pro nihilo reputari.

This is a paragraph with a .conversation-b class: Quid te vis alicui præferre; cum plures doctiores te inveniantur, et magis in lege periti. Si vis utiliter aliquid scire et discere: ama nesciri et pro nihilo reputari.

This is a paragraph with a .truncate class and specific height: Quid te vis alicui præferre; cum plures doctiores te inveniantur, et magis in lege periti. Si vis utiliter aliquid scire et discere: ama nesciri et pro nihilo reputari.

This is a paragraph with a .boxing class: Quid te vis alicui præferre; cum plures doctiores te inveniantur, et magis in lege periti. Si vis utiliter aliquid scire et discere: ama nesciri et pro nihilo reputari.

Markup

<!-- Snippets -->
<p>This is a default paragraph: Quid te vis alicui præferre; cum plures doctiores te inveniantur, et magis in lege periti. Si vis utiliter aliquid scire et discere: ama nesciri et pro nihilo reputari.</p>
<p class="lead">This is a paragraph with a .lead class: Quid te vis alicui præferre; cum plures doctiores te inveniantur, et magis in lege periti. Si vis utiliter aliquid scire et discere: ama nesciri et pro nihilo reputari.</p>
<p class="prose">This is a paragraph with a .prose class: Quid te vis alicui præferre; cum plures doctiores te inveniantur, et magis in lege periti. Si vis utiliter aliquid scire et discere: ama nesciri et pro nihilo reputari.</p>
<p class="verse">This is a paragraph with a .verse class: Quid te vis alicui præferre; cum plures doctiores te inveniantur, et magis in lege periti. Si vis utiliter aliquid scire et discere: ama nesciri et pro nihilo reputari.</p>
<p class="antiverse">This is a paragraph with a .antiverse class: Quid te vis alicui præferre; cum plures doctiores te inveniantur, et magis in lege periti. Si vis utiliter aliquid scire et discere: ama nesciri et pro nihilo reputari.</p>
<p class="universe">This is a paragraph with a .universe class: Quid te vis alicui præferre; cum plures doctiores te inveniantur, et magis in lege periti. Si vis utiliter aliquid scire et discere: ama nesciri et pro nihilo reputari.</p>
<p class="capitals">This is a paragraph with a .capitals class: Quid te vis alicui præferre; cum plures doctiores te inveniantur, et magis in lege periti. Si vis utiliter aliquid scire et discere: ama nesciri et pro nihilo reputari.</p>
<p class="indented">This is a paragraph with a .indented class: Quid te vis alicui præferre; cum plures doctiores te inveniantur, et magis in lege periti. Si vis utiliter aliquid scire et discere: ama nesciri et pro nihilo reputari.</p>
<p class="conversation-a">This is a paragraph with a .conversation-a class: Quid te vis alicui præferre; cum plures doctiores te inveniantur, et magis in lege periti. Si vis utiliter aliquid scire et discere: ama nesciri et pro nihilo reputari.</p>
<p class="conversation-b">This is a paragraph with a .conversation-b class: Quid te vis alicui præferre; cum plures doctiores te inveniantur, et magis in lege periti. Si vis utiliter aliquid scire et discere: ama nesciri et pro nihilo reputari.</p>
<p class="truncate level-2">This is a paragraph with a .truncate class and specific height: Quid te vis alicui præferre; cum plures doctiores te inveniantur, et magis in lege periti. Si vis utiliter aliquid scire et discere: ama nesciri et pro nihilo reputari.</p>
<p class="boxing">This is a paragraph with a .boxing class: Quid te vis alicui præferre; cum plures doctiores te inveniantur, et magis in lege periti. Si vis utiliter aliquid scire et discere: ama nesciri et pro nihilo reputari.</p>

http://hipertextos.github.io/hipertextos/css/styles.css

Text components

span

Default

Sample

span (no changes)

Markup

<!-- Snippets -->
<span>span</span>

.label

Sample

Label Label Label Label Label Label Label

Markup

<!-- Snippets -->
<span class="label">Label</span>
<span class="label lines asphalt">Label</span>
<span class="label flat asphalt">Label</span>
<span class="label glossy asphalt">Label</span>
<span class="label shading asphalt">Label</span>
<span class="label inset asphalt">Label</span>
<span class="label unify asphalt">Label</span>

.badge

Sample

1 2 365 4 5 alert!!! 2

Markup

<!-- Snippets -->
<span class="badge">1</span>
<span class="badge lines asphalt">2</span>
<span class="badge flat red">365</span>
<span class="badge glossy turquoise">4</span>
<span class="badge shading orange">5</span>
<span class="badge inset turquoise">alert!!!</span>
<span class="badge unify asphalt">2</span>

http://hipertextos.github.io/hipertextos/css/styles.css

Breaks

br hr

Default

Sample

Markup

<!-- Snippets -->
<br>
<hr>
<hr class="line">
<hr class="double-line">
<hr class="dashed-line">
<hr class="dotted-line">
<hr class="thick">

http://hipertextos.github.io/hipertextos/css/styles.css

Lists

ol ul li dl dt dd details summary

Default

Sample

Default list
Element 2
Element 3
Element 4

Ordered list
Element 2
Element 3
Element 4

Definition lists: Definition description
Definition term: Definition description

This is a summary

Rest of details.

Markup

<!-- Snippets -->
<ul>
	<li>Default list</li>
	<li>Element 2</li>
	<li>Element 3</li>
	<li>Element 4</li>
</ul>

<ol>
	<li>Ordered list</li>
	<li>Element 2</li>
	<li>Element 3</li>
	<li>Element 4</li>
</ol>

<ul>
	<li><a href="#">Links inside a list</a></li>
	<li><a href="#">Link 2</a></li>
	<li><a href="#">Link 3</a></li>
	<li><a href="#">Link 4</a></li>
</ul>

<dl>
	<dt>Definition lists</dt>
	<dd>Definition description</dd>
	<dt>Definition term</dt>
	<dd>Definition description</dd>
</dl>

<details>
	<summary>
	This is a summary
	</summary>
	Rest of details.
</details>

.list-circle

Sample

.list-circle
Element 2
Element 3
Element 4

Markup

<!-- Snippets -->
 <ul class="list-circle">
	<li>.list-circle</li>
	<li>Element 2</li>
	<li>Element 3</li>
	<li>Element 4</li>
</ul>

.list-square

Sample

.list-square
Element 2
Element 3
Element 4

Markup

<!-- Snippets -->
<ul class="list-square">
	<li>.list-square</li>
	<li>Element 2</li>
	<li>Element 3</li>
	<li>Element 4</li>
</ul>

.list-unlisted

Sample

list-unlisted
Element 2
Element 3
Element 4

Markup

<!-- Snippets -->
<ul class="list-unlisted">
	<li>list-unlisted</li>
	<li>Element 2</li>
	<li>Element 3</li>
	<li>Element 4</li>
</ul>

.list-inline

Sample

.list-inline
Element 2
Element 3
Element 4

Markup

<!-- Snippets -->
<ul class="list-inline">
	<li>.list-inline</li>
	<li>Element 2</li>
	<li>Element 3</li>
	<li>Element 4</li>
</ul>
<ul class="list-inline">
	<li><a href="#">Links inside a .list-inline</a></li>
	<li><a href="#">Link 2</a></li>
	<li><a href="#">Link 3</a></li>
	<li><a href="#">Link 4</a></li>
</ul>

.list-block

Sample

.list-block
Element 2
Element 3
Element 4

Markup

.list-group

Sample

Markup

<!-- Snippets -->
<ul class="list-group">
	<li><a href="#">Links inside a .list-group</a></li>
	<li><a href="#" class="next">Link</a></li>
	<li><a href="#" class="prev"> Link</a></li>
	<li><a href="#">Link</a></li>
	<li><a href="#">Link</a></li>
</ul>

.media-object

Sample

Definition list inside .media: Text

Markup

<!-- Snippets -->
<div class="media-object">
	<dl>
		<img src="http://hipertextos.github.io/src/ics/hipertextos.png" >
		<dt>Definition list inside .media</dt>
		<dd>Text</dd>
		<dl>
			<img src="http://hipertextos.github.io/src/ics/hipertextos.png" >
			<dt>Title</dt>
			<dd>Text</dd>
			<dl>
				<img src="http://hipertextos.github.io/src/ics/hipertextos.png" >
				<dt>Title</dt>
				<dd>Text</dd>
				<dl>
					<img src="http://hipertextos.github.io/src/ics/hipertextos.png" >
					<dt>Title</dt>
					<dd>Text</dd>
				</dl>
			</dl>
		</dl>
	</dl>
</div>

-media-object-right

Sample

Definition list inside .media-right: Text

Markup

<!-- Snippets -->
<div class="media-object-right">
	...
</div>

http://hipertextos.github.io/hipertextos/css/styles.css

Forms

fieldset form input label legend option select textarea

Default

Sample

Default label

Default Checkbox

Default Radio

Default File

Markup

<!-- Snippets -->
<form>
	<fieldset>
		<legend>Default legend</legend>
		<p>Default form and fieldset</p>
	</fieldset>
</form>
<label>Default label</label>
<input name="some" value="" placeholder="input">
<input type="checkbox" name="some" value="">
<input type="radio" name="some" value="">
<input type="file" name="some" value="">
<select>
	<option value="-1">Default select</option>
	<option value="1">This is an option</option>
	<option value="2">This is an option</option>
	<option value="3">This is an option</option>
	<option value="4">This is an option</option>
	<option value="5">This is an option</option>
</select>
 <textarea placeholder="Default textarea"></textarea>

Sizes: .xxs, .xs, .s, .m, .l, .xl, .xxl

Markup

<!-- Snippets -->
<select class="xs">
	<option value="-1">This is a XS select</option>
	<option value="1">This is an option</option>
	<option value="2">This is an option</option>
	<option value="3">This is an option</option>
	<option value="4">This is an option</option>
	<option value="5">This is an option</option>
</select>
<hr>
<select class="s">
	<option value="-1">This is a S select</option>
	<option value="1">This is an option</option>
	<option value="2">This is an option</option>
	<option value="3">This is an option</option>
	<option value="4">This is an option</option>
	<option value="5">This is an option</option>
</select>
<hr>
<select>
	<option value="-1">This is a Default select</option>
	<option value="1">This is an option</option>
	<option value="2">This is an option</option>
	<option value="3">This is an option</option>
	<option value="4">This is an option</option>
	<option value="5">This is an option</option>
</select>
<hr>
<select class="l">
	<option value="-1">This is a L select</option>
	<option value="1">This is an option</option>
	<option value="2">This is an option</option>
	<option value="3">This is an option</option>
	<option value="4">This is an option</option>
	<option value="5">This is an option</option>
</select>
<hr>
<select class="xl">
	<option value="-1">This is a XL select</option>
	<option value="1">This is an option</option>
	<option value="2">This is an option</option>
	<option value="3">This is an option</option>
	<option value="4">This is an option</option>
	<option value="5">This is an option</option>
</select>
<hr>
<label class="xs">XS label</label><input class="xs" name="some" value="" placeholder="input"> <hr>
<label class="s">S label</label><input class="s" name="some" value="" placeholder="input"> <hr>
<label>Default label</label><input name="some" value="" placeholder="input"> <hr>
<label class="l">L label</label><input class="l" name="some" value="" placeholder="input"> <hr>
<label class="xl">XL label</label><input class="xl" name="some" value="" placeholder="input"> <hr>

<label class="xs">XS checkbox</label><input class="xs" type="checkbox" name="some" value="">
<label class="xs">XS radio</label><input class="xs" type="radio" name="some" value="">
<hr>
<label class="s">S checkbox</label><input class="s" type="checkbox" name="some" value="">
<label class="s">S radio</label><input class="s" type="radio" name="some" value="">
<hr>
<label>Default Checkbox</label><input type="checkbox" name="some" value="">
<label>Default Radio</label><input type="radio" name="some" value="">
<hr>
<label class="l">L checkbox</label><input class="l" type="checkbox" name="some" value="">
<label class="l">L radio</label><input class="l" type="radio" name="some" value="">
<hr>
<label class="xl">XL checkbox</label><input class="xl" type="checkbox" name="some" value="">
<label class="xl">XL radio</label><input class="xl" type="radio" name="some" value="">

.switcher

Sample

Markup

<!-- Snippets -->
<div class="switcher xs">
	<input type="checkbox" name="switcher" class="switcher-checkbox" id="myswitchergrid2">
	<label class="switcher-label" for="myswitchergrid2">
		<div class="switcher-inner"></div>
		<div class="switcher-switch"></div>
	 </label>
</div>
<div class="switcher s">
	...
</div>
<div class="switcher">
	...
</div>
<div class="switcher l">
	...
</div>
<div class="switcher xl">
	...
</div>
<div class="switcher block">
	...
</div>

.input-help

Sample

.input-help

.input-helpNumbers

.input-help

Markup

<!-- Snippets -->
<label class="xs">.input-help</label><input class="xs" name="some" value="" placeholder="input"><span class="input-help symbol-dollar xs"></span> <hr>
<label class="s">.input-help</label><input class="s" name="some" value="" placeholder="input"><span class="input-help symbol-euro s"></span> <hr>
<label class="">.input-help</label><input name="some" value="" placeholder="input"><span class="input-help">Numbers</span> <hr>
<label class="l">.input-help</label><span class="input-help symbol-edit l"></span> <input class="l" name="some" value="" placeholder="input"><hr>
<label class="xl">.input-help</label><input class="xl" name="some" value="" placeholder="input"><span class="input-help xl"><img src="http://hipertextos.github.io/src/ics/hipertextos.png"></span> <hr>

Form set example

Sample

Form layout

First name:

Last name:

Mail:

Adress:

Phone number:

Your option:

Gender: Male
Female

Info:

Choose:

Your text:

Terms: I agree ...

Quid te vis alicui præferre; cum plures doctiores te inveniantur, et magis in lege periti. Si vis utiliter aliquid scire et discere: ama nesciri et pro nihilo reputari.

Markup

<!-- Snippets -->
<form action="#">
	<fieldset>
		<legend>Form layout</legend>
		<div class="cell-6">
			<label>First name:</label> <input type="text" name="fname" placeholder="input">
		</div>
		<div class="cell-6">
			<label>Last name:</label> <input type="text" name="lname" placeholder="input">
		</div>
		<div class="cell-3">
			<label>Mail:</label> <input type="text" name="mail" placeholder="input">
		</div>
		<div class="cell-6">
			<label>Adress:</label> <input type="text" name="adress" placeholder="input">
		</div>
		<div class="cell-3">
			<label>Phone number:</label> <input type="text" name="phone" placeholder="input">
		</div>
		<hr>
		<div class="cell-6">
			<label>Your option:</label>
			<select>
				<option>Safari</option>
				<option>Chrome</option>
				<option>Firefox</option>
				<option>Dark side</option>
			</select>
		</div>
		<div class="cell-2">
			<label>Gender:</label>
			<span>Male <input class="" type="radio" name="some" value=""></span>
			<span>Female <input class="" type="radio" name="some" value=""></span>
		</div>
		<div class="cell-2">
			<label>Info:</label> <input type="text" name="phone" placeholder="input">
		</div>
		<div class="cell-2">
			<label>Choose:</label>
			<div class="switcher">
				<input type="checkbox" name="switcher" class="switcher-checkbox" id="myswitchergrid">
				<label class="switcher-label" for="myswitchergrid">
					<div class="switcher-inner"></div>
					<div class="switcher-switch"></div>
				 </label>
			</div>
		</div>	
		<div class="cell-12">
			<label>Your text:</label> 
			<textarea placeholder="textarea"></textarea>
		</div>	
		<div class="cell-12">
			<label>Terms:</label> 
			<span><input type="checkbox" name="phone">I agree ...</span>
			<p>Quid te vis alicui præferre; cum plures doctiores te inveniantur, et magis in lege periti. Si vis utiliter aliquid scire et discere: ama nesciri et pro nihilo reputari.</p>
			<input type="submit" name="phone">
		</div>						
	</fieldset>
</form>

.form-office

Sample

.form-office example

First name:

Last name:

Mail:

Adress:

Phone number:

Your option:

Gender: Male
Female

Info:

Choose:

Your text:

Terms: I agree ...

Quid te vis alicui præferre; cum plures doctiores te inveniantur, et magis in lege periti. Si vis utiliter aliquid scire et discere: ama nesciri et pro nihilo reputari.

Markup

<!-- Snippets -->
<form action="#" class="form-office">
	<fieldset>
		...
	</fieldset>
</form>

Form examples with color

Sample

Markup

<!-- Snippets -->
<form action="#">
	<fieldset>
		<legend>Fieldset example</legend>
		<label>First name:</label> <input type="text" name="fname" placeholder="input"><br />
		<label>Last name:</label> <input type="text" name="lname" placeholder="input"><br />
		<input type="submit" value="Submit">
	</fieldset>
</form>
<form action="#">
	<fieldset class="flat soft-red">
		...
	</fieldset>
</form>
<form action="#">
	<fieldset class="flat soft-turquoise">
		...
	</fieldset>
</form>

.form-search

Sample

Markup

<!-- Snippets -->
<form class="form-search" action="http://www.google.com/cse">
	<input type="hidden" name="cx" value="yourID" />
	<input type="text" name="q" />
	<input type="submit" name="sa" class="search" value="Search" />
</form>

http://hipertextos.github.io/hipertextos/css/styles.css

Tables

table tbody td th thead tfoot tr col colgroup

Default

Sample

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

Markup

<!-- Snippets -->
<table>
  <thead>
	<tr>
	  <th>#</th>
	  <th>First Name</th>
	  <th>Last Name</th>
	  <th>Username</th>
	</tr>
  </thead>
  <tbody>
	<tr>
	  <td>1</td>
	  <td>Mark</td>
	  <td>Otto</td>
	  <td>@mdo</td>
	</tr>
	<tr>
	  <td>2</td>
	  <td>Jacob</td>
	  <td>Thornton</td>
	  <td>@fat</td>
	</tr>
	<tr>
	  <td>3</td>
	  <td>Larry</td>
	  <td>the Bird</td>
	  <td>@twitter</td>
	</tr>
  </tbody>
</table>

.table-fluid

Sample

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

Markup

<!-- Snippets -->
<div class="table-fluid">
	<table>
  ...
	</table>
</div><!-- /#table-fluid -->

.table-stripped

Sample

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

Markup

<!-- Snippets -->
<div class="table-fluid">
	<table class="table-stripped">
  ...
	</table>
</div><!-- /#table-fluid -->

.table-bordered

Sample

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

Markup

<!-- Snippets -->
<div class="table-fluid">
	<table class="table-bordered">
  ...
	</table>
</div><!-- /#table-fluid -->

.table-expanded

Sample

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

Markup

<!-- Snippets -->
<div class="table-fluid">
	<table class="table-expanded">
  ...
	</table>
</div><!-- /#table-expanded -->

http://hipertextos.github.io/hipertextos/css/styles.css

Navigation

nav

Default

Sample

Markup

<!-- Snippets -->
<nav>
		<a href="#">nav</a>
		<a href="#">link</a>
		<a href="#">link</a>
		<a href="#">link</a>
</nav>
<hr>
<nav>
	<ul>
		<li><a href="#">nav</a></li>
		<li><a href="#">links in a list</a></li>
		<li><a href="#">link</a></li>
		<li><a href="#">link</a></li>
	</ul>
</nav>

Nav with color

Sample

Markup

<!-- Snippets -->
<nav class="flat grey">
		...
</nav>
<nav class="flat black">
		...
</nav>
<nav class="flat soft-red">
		...
</nav>

.nav-slider

Sample

Markup

<!-- Snippets -->
<nav class="slider">
		...
</nav>

.subnav

Sample

Markup

<!-- Snippets -->
<nav class="subnav">
		...
</nav>

.breadcrumb

Sample

Markup

<!-- Snippets -->
<nav class="breadcrumb">
	<a href="#">Link</a>
	...
</nav>
<hr>
<nav class="breadcrumb">
	<ul>
		<li><a href="#">link</a></li>
		<li><a href="#">link</a></li>
		...
	</ul>
</nav>

.pagination

Sample

Markup

<!-- Snippets -->
<nav class="pagination">
	<a href="#" class="prev">Prev</a>
	<a href="#">.pagination nav</a>
	<a href="#" class="next">Next</a>
</nav>
<hr>
<nav class="pagination">
	<a href="#" class="prev">Prev</a>
	<a href="#">1</a>
	<a href="#">2</a>
	<a href="#">3</a>
	<a href="#">4</a>
	<a href="#">...</a>
	<a href="#" class="next">Next</a>
</nav>

http://hipertextos.github.io/hipertextos/css/styles.css

Parts

article aside footer header main section

Default

Sample

header

main

article

section

Markup

<!-- Snippets -->
<header>header</header>
<main>main</main>
<footer>footer</footer>
<hr>
<article>article</article>
<aside>aside</aside>
<section>section</section>

.panel

Sample

article

section

Markup

<article class="panel">article</article>
<aside class="panel">aside</aside>
<section class="panel">section</section>

Article model

Sample

Single article

Article title (h3) inside a header

Published at May 4, 1977

Quid te vis alicui præferre; cum plures doctiores te inveniantur, et magis in lege periti. Si vis utiliter aliquid scire et discere: ama nesciri et pro nihilo reputari. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem.

Articles group

Posts are loaded form an RSS source with the ZrssFeed Plug-in by Zazar.

Markup

<!-- Snippets -->
<article>
	<header>
		<h3>Article title (h3) inside a header</h3>
		<h6>Published at <time>May 4, 1977</time></h6>
	</header>
	<div>
		<p class="lead">Quid te vis alicui præferre; cum plures doctiores te inveniantur, et magis in lege periti. Si vis utiliter aliquid scire et discere: ama nesciri et pro nihilo reputari. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem.</p>
		<p>Quid te vis alicui præferre; cum plures doctiores te inveniantur, et magis in lege periti. Si vis utiliter aliquid scire et discere: ama nesciri et pro nihilo reputari. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem.</p>
	</div>
	<aside>
		<p>This is a aside panel with additional info.</p>
	</aside>
	<footer>
		<h6>This is a footer</h6>
		<nav class="symbol-hyperlink">Share <a href="#">Facebook</a> <a href="#">Twitter</a> <a href="#">Google +</a></nav>
	</footer>
</article>

http://hipertextos.github.io/hipertextos/css/styles.css

Links & buttons

a button

Default

Sample

Regular link

Link

Regular Button

Link with .button class

.button

Link with .button-icon class

*B

Markup

<!-- Snippets -->
<a href="#" title="Regular link">Regular link</a> 
<button>Regular button</button>
<a href="#" class="button">.button</a>
<a href="#" class="button-icon">.button</a>

Images inside buttons

Sample

Pixel images

Button

Vector images

Button

Markup

<!-- Snippets -->
<a class="button"><img src="http://hipertextos.github.io/src/ics/hipertextos.png"> Button</a>
<a class="button-app"><img src="http://hipertextos.github.io/src/ics/hipertextos-invert.png"></a>
<a class="button-icon"><img src="http://hipertextos.github.io/src/ics/hipertextos.png"></a>
<a class="button-profile"><img src="http://hipertextos.github.io/src/ics/hipertextos.png"></a>
<a class="button"><img src="http://hipertextos.github.io/src/ics/hipertextos.svg" alt="hipertextos" title="Hipertextos"> Button</a>
<a class="button-app"><img src="http://hipertextos.github.io/src/ics/hipertextos.svg" alt="hipertextos" title="Hipertextos"></a>
<a class="button-icon"><img src="http://hipertextos.github.io/src/ics/hipertextos.svg" alt="hipertextos" title="Hipertextos"></a>
<a class="button-profile"><img src="http://hipertextos.github.io/src/ics/hipertextos.svg" alt="hipertextos" title="Hipertextos"></a>

.prev & .next

Sample

.prev .next

Markup

<!-- Snippets -->
<a href="#" class="prev">.prev</a>
<a href="#" class="next">.next</a>
<a href="#" class="button prev">.prev</a>
<a href="#" class="button next">.next</a>

.tip on hover with data-tooltip attribute

Sample

.tip-top .tip-bottom .tip-left .tip-right

Markup

<!-- Snippets -->
<a href="#" class="tip-top" data-tooltip="Pure CSS tooltips">.tip-top</a>
<a href="#" class="tip-bottom" data-tooltip="Pure CSS tooltips">.tip-bottom</a>
<a href="#" class="tip-left" data-tooltip="Pure CSS tooltips">.tip-left</a>
<a href="#" class="tip-right" data-tooltip="Pure CSS tooltips">.tip-right</a>

Smart links

Sample

Disabled link Current link Working link

.disabled .button .working .button .current .button

Links to images (.bmp, .gif, .jpg, .jpeg and .png)

Link to image

Links to media

Link to Video

Link to YouTube

Link to Vimeo

Markup

<!-- Snippets -->
<a href="#" title="Disabled link" class="disabled">Disabled link</a> 
<a href="#" title="Current link" class="current">Current link</a> 
<a href="#" title="Working link" class="working">Working link</a> 

<a href="#" title="Disabled link" class="button disabled">Disabled link</a> 
<a href="#" title="Current link" class="button current">Current link</a> 
<a href="#" title="Working link" class="button working">Working link</a>

.button $ .button-icon sizes

Sample

.button + .xs .button + .s Default .button .button + .l .button + .xl

.xs .s .m .l .xl

Markup

<!-- Snippets -->
<a class="button xs">.button + .xs</a>
<a class="button s">.button + .s</a>
<a class="button">Default .button</a>
<a class="button l">.button + .l</a>
<a class="button xl">.button + .xl</a>

<a class="button-icon xs">.xs</a>
<a class="button-icon s">.s</a>
<a class="button-icon">.m</a>
<a class="button-icon l">.l</a>
<a class="button-icon xl">.xl</a>

.button + .block

Sample

.button + .block + .xs .button + .block + .s .button + .block .button + .block +.l .button + .block + .xl

Markup

<!-- Snippets -->
<a class="button block xs">.button + .block + .xs</a>
<a class="button block s">.button + .block + .s</a>
<a class="button block">.button + .block</a>
<a class="button block l">.button + .block +.l</a>
<a class="button block xl">.button + .block + .xl</a>

.button with .caret inside

Sample

.button with caret .button with caret .button with caret .button with caret .button with caret

Markup

<!-- Snippets -->
<a class="button xs">.button with caret<span class="caret"></span></a>
<a class="button s">.button with caret<span class="caret"></span></a>
<a class="button">.button with caret<span class="caret"></span></a>
<a class="button l">.button with caret<span class="caret"></span></a>
<a class="button xl">.button with caret<span class="caret"></span></a>

.button & .button-icon corners

Sample

.button + .squared .button + .rounded .button + .ovaled .button + .circled

.s... .r... .o... .c...

Markup

<!-- Snippets -->
<a class="button squared">.button + .squared</a>
<a class="button rounded">.button + .rounded</a>
<a class="button circled">.button + .circled</a>

<a class="button-icon squared">.s...</a>
<a class="button-icon rounded">.r...</a>
<a class="button-icon circled">.c...</a>

.button-app

Sample

Pixel image

Vector image

Markup

<!-- Snippets -->
<h6>Pixel image</h6>
<a class="button-app xs"><img src="http://hipertextos.github.io/src/ics/hipertextos-invert.png"></a>
<a class="button-app s"><img src="http://hipertextos.github.io/src/ics/hipertextos-invert.png"></a>
<a class="button-app"><img src="http://hipertextos.github.io/src/ics/hipertextos-invert.png"></a>
<a class="button-app l"><img src="http://hipertextos.github.io/src/ics/hipertextos-invert.png"></a>
<a class="button-app xl"><img src="http://hipertextos.github.io/src/ics/hipertextos-invert.png"></a>
<h6>Vector image</h6>
<a class="button-app xs"><img src="http://hipertextos.github.io/src/ics/hipertextos.svg"></a>
<a class="button-app s"><img src="http://hipertextos.github.io/src/ics/hipertextos.svg"></a>
<a class="button-app"><img src="http://hipertextos.github.io/src/ics/hipertextos.svg"></a>
<a class="button-app l"><img src="http://hipertextos.github.io/src/ics/hipertextos.svg"></a>
<a class="button-app xl"><img src="http://hipertextos.github.io/src/ics/hipertextos.svg"></a>

.button-profile

Sample

Pixel image

Vector image

Markup

<!-- Snippets -->
<h6>Pixel image</h6>
<a class="button-profile xs" data-profile="Hipertextos"><img src="http://hipertextos.github.io/src/ics/hipertextos.png"></a>
<a class="button-profile s" data-profile="Hipertextos"><img src="http://hipertextos.github.io/src/ics/hipertextos.png"></a>
<a class="button-profile" data-profile="Hipertextos"><img src="http://hipertextos.github.io/src/ics/hipertextos.png"></a>
<a class="button-profile l" data-profile="Hipertextos"><img src="http://hipertextos.github.io/src/ics/hipertextos.png"></a>
<a class="button-profile xl" data-profile="Hipertextos"><img src="http://hipertextos.github.io/src/ics/hipertextos.png"></a>
<h6>Vector image</h6>
<a class="button-profile xs"><img src="http://hipertextos.github.io/src/ics/hipertextos.svg"></a>
<a class="button-profile s"><img src="http://hipertextos.github.io/src/ics/hipertextos.svg"></a>
<a class="button-profile"><img src="http://hipertextos.github.io/src/ics/hipertextos.svg"></a>
<a class="button-profile l"><img src="http://hipertextos.github.io/src/ics/hipertextos.svg"></a>
<a class="button-profile xl"><img src="http://hipertextos.github.io/src/ics/hipertextos.svg"></a>

.button-centered .button

Sample

.button -centered buttons

.1 .2 .3

Markup

<!-- Snippets -->
<div class="button-centered">
	<a class="button lines red">.button</a>
	<a class="button lines turquoise">-centered</a>
	<a class="button lines turquoise">buttons</a>
</div>
<div class="button-centered">
	<a class="button-icon flat soft-red">.1</a>
	<a class="button-icon flat soft-turquoise xl">.2</a>
	<a class="button-icon flat turquoise">.3</a>
</div>

.button color combinations

Sample

More buttons and colors combinations

Markup

<!-- Snippets -->
<a class="button lines soft-asphalt">.button + .lines + .[color]</a>
<a class="button unify soft-asphalt">.button + .unify + .[color]</a>
<a class="button flat soft-asphalt">.button + .flat + .[color]</a>
<a class="button flat white-hover soft-asphalt">.button + .flat + .white-hover + .[color]</a>
<a class="button flat black-hover soft-asphalt">.button + .flat + black-hover +.[color]</a>
<a class="button glossy soft-asphalt">.button + .glossy + .[color]</a>
<a class="button shading soft-asphalt">.button + .shading + .[color]</a>
<a class="button inset soft-asphalt">.button + .inset + .[color]</a>
<a class="button depth soft-asphalt">.button + .depth + .[color]</a>
<a class="button glass">.button + .glass</a>
<a class="button glass-soft">.button + .glass</a>
<a class="button glass-hard">.button + .glass</a>
<a class="button glass-dark">.button + .glass-dark</a>
<a class="button metal">.button + .metal</a>
<a class="button metal-soft">.button + .metal-soft</a>
<a class="button metal-hard">.button + .metal-grey</a>
<a class="button metal-dark">.button + .metal-dark</a>
<hr>
<a class="button-icon lines soft-asphalt">B</a>
<a class="button-icon unify soft-asphalt">B</a>
<a class="button-icon flat soft-asphalt">B</a>
<a class="button-icon flat white-hover soft-asphalt">B</a>
<a class="button-icon flat black-hover soft-asphalt">B</a>
<a class="button-icon glossy soft-asphalt">B</a>
<a class="button-icon shading soft-asphalt">B</a>
<a class="button-icon inset soft-asphalt">B</a>
<a class="button-icon depth soft-asphalt">B</a>
<a class="button-icon glass">B</a>
<a class="button-icon glass-soft">B</a>
<a class="button-icon glass-hard">B</a>
<a class="button-icon glass-dark">B</a>
<a class="button-icon metal">B</a>
<a class="button-icon metal-soft">B</a>
<a class="button-icon metal-hard">B</a>
<a class="button-icon metal-dark">B</a>
<hr>
<a class="button-icon l circled lines soft-asphalt">B</a>
<a class="button-icon l circled unify soft-asphalt">B</a>
<a class="button-icon l circled flat soft-asphalt">B</a>
<a class="button-icon l circled flat white-hover soft-asphalt">B</a>
<a class="button-icon l circled flat black-hover soft-asphalt">B</a>
<a class="button-icon l circled glossy soft-asphalt">B</a>
<a class="button-icon l circled shading soft-asphalt">B</a>
<a class="button-icon l circled inset soft-asphalt">B</a>
<a class="button-icon l circled depth soft-asphalt">B</a>
<a class="button-icon l circled glass">B</a>
<a class="button-icon l circled glass-soft">B</a>
<a class="button-icon l circled glass-hard">B</a>
<a class="button-icon l circled glass-dark">B</a>
<a class="button-icon l circled metal">B</a>
<a class="button-icon l circled metal-soft">B</a>
<a class="button-icon l circled metal-hard">B</a>
<a class="button-icon l circled metal-dark">B</a>

.button-group .button & .button-tools .button

Sample

.button -group buttons

A B C

.Button -group buttons

.button -tools buttons

A B C

.Button -tools buttons

Markup

<!-- Snippets -->
<div class="button-group">
	<a class="button lines red">.button</a>
	<a class="button lines turquoise">-group</a>
	<a class="button lines turquoise">buttons</a>
</div>
<div class="button-group">
	<a class="button flat red">.button</a>
	<a class="button flat turquoise">-group</a>
	<a class="button flat turquoise">buttons</a>
</div>
<div class="button-group">
	<a class="button glossy asphalt">A</a>
	<a class="button glossy asphalt">B</a>
	<a class="button glossy asphalt">C</a>
</div>
<div class="button-group">
	<a class="button shading hard-grey">.Button</a>
	<a class="button shading hard-grey">-group</a>
	<a class="button shading hard-grey">buttons</a>
</div>
<div class="button-group">
	<a class="button inset soft-turquoise">.Button</a>
	<a class="button inset soft-orange">-group</a>
	<a class="button inset soft-red">buttons</a>
</div>
<hr>
<div class="button-tools">
	<a class="button lines grey">.button</a>
	<a class="button lines grey">-tools</a>
	<a class="button lines grey">buttons</a>
</div>
<div class="button-tools">
	<a class="button flat orange">.button</a>
	<a class="button flat turquoise">-tools</a>
	<a class="button flat turquoise">buttons</a>
</div>
<div class="button-tools">
	<a class="button glossy grey">A</a>
	<a class="button glossy grey">B</a>
	<a class="button glossy grey">C</a>
</div>
<div class="button-tools">
	<a class="button shading turquoise">.Button</a>
	<a class="button shading red">-tools</a>
	<a class="button shading turquoise">buttons</a>
</div>
<div class="button-tools">
	<a class="button inset soft-turquoise">.Button</a>
	<a class="button inset soft-orange">-tools</a>
	<a class="button inset soft-red">buttons</a>
</div>
<hr>

http://hipertextos.github.io/hipertextos/css/styles.css

Containers

div

Default

Sample

div

Markup

<!-- Snippets -->
<div>div</div>

.container

Sample

div

Markup

<!-- Snippets -->
<div class="container flat grey">div</div>

.content

Sample

div

Markup

<!-- Snippets -->
<div class="content flat grey">div</div>

.fullscreen

Sample

Markup

<!-- Snippets -->
<div class="fullscreen flat grey">div</div>

http://hipertextos.github.io/hipertextos/css/styles.css

Grid & layouts

div

.cell-[1-12] 12-column grid

Sample

.cell-1

.cell-11

.cell-2

.cell-10

.cell-3

.cell-9

.cell-4

.cell-8

.cell-5

.cell-7

.cell-6

.cell-1

.cell-4

.cell-3

.cell-2

Markup

<!-- Snippets -->
<div class="layout">
	<div class="cell-1"> Content </div>	
	<div class="cell-11"> Content </div>	
	<div class="cell-2"> Content </div>	
	<div class="cell-10"> Content </div>
	...
</div>

.cell-x[1-10] 10-column grid

Sample

.cell-x1

.cell-x9

.cell-x2

.cell-x8

.cell-x3

.cell-x7

.cell-x4

.cell-x6

.cell-x5

.cell-x1

.cell-x2

.cell-x3

.cell-x4

Markup

<!-- Snippets -->
<div class="layout">
	<div class="cell-x1"> Content </div>	
	<div class="cell-x9"> Content </div>	
	...
</div>

.thumb-[1-12] 12-column grid

Sample

.thumb-1

.thumb-11

.thumb-2

.thumb-10

.thumb-3

.thumb-9

.thumb-4

.thumb-8

.thumb-5

.thumb-7

.thumb-6

.thumb-1

.thumb-4

.thumb-3

.thumb-2

Markup

<!-- Snippets -->
<div class="layout">
	<div class="thumb-1"> Content </div>	
	<div class="thumb-11"> Content </div>	
	...
</div>

.thumb-x[1-10] 10-column grid

Sample

.thumb-x1

.thumb-x9

.thumb-x2

.thumb-x8

.thumb-x3

.thumb-x7

.thumb-x4

.thumb-x6

.thumb-x5

.thumb-x1

.thumb-x2

.thumb-x3

.thumb-x4

Markup

<!-- Snippets -->
<div class="layout">
	<div class="thumb-x1"> Content </div>	
	<div class="thumb-x9"> Content </div>	
	...
</div>

Golden ratio layout

Sample

.cell-primary

.cell-secondary

.cell-primary

.cell-secondary

Markup

<!-- Snippets -->
<div class="col-gr">
	<div class="cell-primary"> Content </div>	
	<div class="cell-secondary"> Content </div>	
	...
</div>
<div class="col-gr">
	<div class="cell-primary"> Content </div>	
	<div class="cell-secondary box-right"> Content </div>	
	...
</div>

Nested columns

Sample

.cell-3

.cell-6

.cell-4

.cell-3

.cell-4

Markup

<!-- Snippets -->
<div class="layout">
	<div class="cell-3"> 
		<div class="cell-6"> Content </div>	
		<div class="cell-6"> Content </div>
	</div>	
	<div class="cell-6"> 
		<div class="cell-4"> Content </div>	
		<div class="cell-4"> Content </div>	
		<div class="cell-4"> Content </div>
	</div>	
	<div class="cell-3"> 
		<div class="cell-4"> Content </div>	
		<div class="cell-4"> Content </div>	
		<div class="cell-4"> Content </div>	
	</div>	
	...
</div>

.pushed-[1-12]

Sample

.cell-1 pushed-11

.cell-2 pushed-10

.cell-3 pushed-9

.cell-4 pushed-8

.cell-5 pushed-7

.cell-6 pushed-6

.cell-7 pushed-5

.cell-8 pushed-4

.cell-9 pushed-3

.cell-10 pushed-2

.cell-11 pushed-1

Markup

<!-- Snippets -->
<div class="layout">
	<div class="cell-1 pushed-11"> Content </div>	
	<div class="cell-2 pushed-10"> Content </div>	
	...
</div>

Blocking grid on small devices

Sample

.cell-1 .blocked-half

.cell-11 .blocked-half

.cell-2...

.cell-10 .blocked-quarter

.cell-3...

.cell-9 .blocked-quarter

.cell-4...

.cell-8 .blocked-quarter

.cell-5 .blocked-quarter

.cell-7 .blocked-quarter

.cell-6 .blocked-quarter

Markup

<!-- Snippets -->
<div class="layout">
	<div class="cell-1 blocked-half"> Content </div>	
	<div class="cell-11 blocked-half"> Content </div>	
	<div class="cell-61 blocked-quarter"> Content </div>	
	<div class="cell-6 blocked-quarter"> Content </div>	
	<div class="cell-6 blocked-quarter"> Content </div>	
	<div class="cell-6 blocked-quarter"> Content </div>	
	...
</div>

Regular .thumb inside .col-[value]

Sample

.col-12

.thumb

.col-10

.thumb

.col-e

.thumb

.col-6

.thumb

.col-5

.thumb

.col-4

.thumb

.col-3

.thumb

.col-2

.thumb

Markup

<!-- Snippets -->
<div class="col-4">
	<div class="thumb"> Content </div>	
	<div class="thumb"> Content </div>	
	<div class="thumb"> Content </div>	
	<div class="thumb"> Content </div>	
	...
</div>
<div class="col-6">
	<div class="thumb"> Content </div>	
	<div class="thumb"> Content </div>	
	<div class="thumb"> Content </div>	
	<div class="thumb"> Content </div>	
	<div class="thumb"> Content </div>	
	<div class="thumb"> Content </div>	
	...
</div>

Regular .cell inside .col-[value]

Sample

.col-12

.cell

.col-10

.cell

.col-e

.cell

.col-6

.cell

.col-5

.cell

.col-4

.cell

.col-3

.cell

.col-2

.cell

Markup

<!-- Snippets -->
<div class="col-4">
	<div class="cell"> Content </div>	
	<div class="cell"> Content </div>	
	<div class="cell"> Content </div>	
	<div class="cell"> Content </div>	
	...
</div>
<div class="col-6">
	<div class="cell"> Content </div>	
	<div class="cell"> Content </div>	
	<div class="cell"> Content </div>	
	<div class="cell"> Content </div>	
	<div class="cell"> Content </div>	
	<div class="cell"> Content </div>	
	...
</div>

.level-[value]

Sample

.col-12

.level-1

.level-2

.level-3

.level-4

.level-5

.level-6

.level-7

.level-8

.level-9

.level-10

.level-11

.level-12

Markup

	<!-- Snippets -->
	<div class="col-12">
		<div class="cell level-1"> Content </div>	
		<div class="cell level-2"> Content </div>	
		<div class="cell level-3"> Content </div>	
		<div class="cell level-4"> Content </div>	
		<div class="cell level-5"> Content </div>	
		<div class="cell level-6"> Content </div>	

		...
	</div>

.level-[value] + .level-blocked

Sample

.level-1

.level-2

.level-3

.level-4

.level-5

.level-6

.level-7

.level-8

.level-9

.level-10

.level-11

.level-12

Markup

<!-- Snippets -->
<div class="col-12">
	<div class="cell level-1 level-blocked"> Content </div>	
	<div class="cell level-2 level-blocked"> Content </div>	
	<div class="cell level-3 level-blocked"> Content </div>	
	<div class="cell level-4 level-blocked"> Content </div>	
	<div class="cell level-5 level-blocked"> Content </div>	
	<div class="cell level-6 level-blocked"> Content </div>	
	...
</div>

.columns-[value]

Sample

Quid te vis alicui præferre; cum plures doctiores te inveniantur, et magis in lege periti. Si vis utiliter aliquid scire et discere: ama nesciri et pro nihilo reputari. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem.

Markup

<!-- Snippets -->
<div class="columns-3">
	Content...
</div>

.columns-[value] + .columns-blocked

Sample

Quid te vis alicui præferre; cum plures doctiores te inveniantur, et magis in lege periti. Si vis utiliter aliquid scire et discere: ama nesciri et pro nihilo reputari. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem.

Markup

<!-- Snippets -->
<div class="columns-4 columns-blocked">
	Content...
</div>

http://hipertextos.github.io/hipertextos/css/styles.css

Font stacks

div

.elegant, .funny, .gothik, .hard, .modern, .monospace, .thin

Sample

Default font style

Quid te vis alicui præferre; cum plures doctiores te inveniantur, et magis in lege periti. Si vis utiliter aliquid scire et discere: ama nesciri et pro nihilo reputari.

Element 1
Element 2

.elegant font style

Quid te vis alicui præferre; cum plures doctiores te inveniantur, et magis in lege periti. Si vis utiliter aliquid scire et discere: ama nesciri et pro nihilo reputari.

Element 1
Element 2

.funny font style

Quid te vis alicui præferre; cum plures doctiores te inveniantur, et magis in lege periti. Si vis utiliter aliquid scire et discere: ama nesciri et pro nihilo reputari.

Element 1
Element 2

.gothik font style

Quid te vis alicui præferre; cum plures doctiores te inveniantur, et magis in lege periti. Si vis utiliter aliquid scire et discere: ama nesciri et pro nihilo reputari.

Element 1
Element 2

.hard font style

Quid te vis alicui præferre; cum plures doctiores te inveniantur, et magis in lege periti. Si vis utiliter aliquid scire et discere: ama nesciri et pro nihilo reputari.

Element 1
Element 2

.modern font style

Quid te vis alicui præferre; cum plures doctiores te inveniantur, et magis in lege periti. Si vis utiliter aliquid scire et discere: ama nesciri et pro nihilo reputari.

Element 1
Element 2

.monospace font style

Quid te vis alicui præferre; cum plures doctiores te inveniantur, et magis in lege periti. Si vis utiliter aliquid scire et discere: ama nesciri et pro nihilo reputari.

Element 1
Element 2

.thin font style

Quid te vis alicui præferre; cum plures doctiores te inveniantur, et magis in lege periti. Si vis utiliter aliquid scire et discere: ama nesciri et pro nihilo reputari.

Element 1
Element 2

Markup

<!-- Snippets -->
<section class="elegant">
...
</section>
<section class="thin">
...
</section>

http://hipertextos.github.io/hipertextos/css/styles.css

Text effects

div

.text-[effect]

Sample

.text-blur effect demostration

.text-blured effect demostration

.text-shading effect demostration

.text-bright effect demostration

.text-stroke effect demostration

.text-reflected effect demostration

Markup

	<!-- Snippets -->
	<h4 class="text-blur">.text-blur effect demostration</h4>
	<h4 class="text-blured">.text-blured effect demostration</h4>
	<h4 class="text-shading lines soft-grey"><strong>.text-shading effect demostration</strong></h4>
	<div class="grey"><h4 class="text-bright"><strong>.text-bright effect demostration</strong></h4></div>
	<h4 class="text-stroke">.text-stroke effect demostration</h4>
	<h4 class="text-reflected">.text-reflected effect demostration</h4>

http://hipertextos.github.io/hipertextos/css/styles.css

Symbols

div

.symbol-[html-entitie]

Sample

Units

.symbol-euro

.symbol-dollar

.symbol-pound

.symbol-cents

.symbol-meters

.symbol-km

.symbol-hours

.symbol-minutes

.symbol-seconds

.units-euro

.units-dollar

.units-pound

.units-cents

.units-meters

.units-km

.units-hours

.units-minutes

.units-seconds

Arrows

.symbol-bottom

.symbol-top

.symbol-left

.symbol-right

.symbol-left-hand

.symbol-right-hand

.symbol-top-hand

.symbol-bottom-hand

.symbol-left-arrow

.symbol-right-arrow

.symbol-top-arrow

.symbol-bottom-arrow

.symbol-bi-arrow

.symbol-left-arrows

.symbol-right-arrows

.symbol-top-arrows

.symbol-bottom-arrows

.symbol-bi-arrows

UI symbols

.symbol-add

.symbol-bullet

.symbol-close

.symbol-css

.symbol-edit

.symbol-email

.symbol-flag

.symbol-full

.symbol-gear

.symbol-hash

.symbol-html

.symbol-hipertextos

.symbol-js

.symbol-more

.symbol-ok

.symbol-paragraph

.symbol-remove

.symbol-return

.symbol-save

.symbol-section

.symbol-scissors

.symbol-tools

.symbol-unable

.symbol-wrong

Player symbols

.symbol-rew

.symbol-play

.symbol-forward

.symbol-stop

Alert symbols

.symbol-biohazard

.symbol-caduceus

.symbol-radioactive

.symbol-skull

.symbol-warning

Card symbols

.symbol-club

.symbol-diamond

.symbol-heart

.symbol-spade

I-Ching symbols

.symbol-iching-heaven

.symbol-iching-lake

.symbol-iching-fire

.symbol-iching-thunder

.symbol-iching-wind

.symbol-iching-water

.symbol-iching-mountain

.symbol-iching-earth

Chess symbols

.symbol-chess-white-king

.symbol-chess-white-queen

.symbol-chess-white-rook

.symbol-chess-white-bishop

.symbol-chess-white-knight

.symbol-chess-white-pawn

.symbol-chess-black-king

.symbol-chess-black-queen

.symbol-chess-black-rook

.symbol-chess-black-bishop

.symbol-chess-black-knight

.symbol-chess-black-pawn

Music symbols

.symbol-music-quarter

.symbol-music-eighth

.symbol-music-beamed-eighth

.symbol-music-beamed-sixteenth

.symbol-music-flat

.symbol-music-natural

.symbol-music-sharp

Ideologic symbols

.symbol-hammerandsickle

.symbol-cross

.symbol-david

.symbol-moonstar

.symbol-justice

.symbol-peace

.symbol-yingyang

Sky symbols

.symbol-cloud

.symbol-blackstar

.symbol-blacksun

.symbol-firstquartermoon

.symbol-lastquartermoon

.symbol-planet-earth

.symbol-planet-jupiter

.symbol-planet-mars

.symbol-planet-mercury

.symbol-planet-neptune

.symbol-planet-pluto

.symbol-planet-saturn

.symbol-planet-uranus

.symbol-planet-venus

.symbol-snow

.symbol-star

.symbol-umbrella

.symbol-whitestar

.symbol-zodiac-aries

.symbol-zodiac-taurus

.symbol-zodiac-gemini

.symbol-zodiac-cancer

.symbol-zodiac-leo

.symbol-zodiac-virgo

.symbol-zodiac-libra

.symbol-zodiac-scorpio

.symbol-zodiac-sagittarius

.symbol-zodiac-capricorn

.symbol-zodiac-aquarius

.symbol-zodiac-piscis

Other symbols

.symbol-airplane

.symbol-atom

.symbol-badge-star

.symbol-blackphone

.symbol-blog-layout

.symbol-command

.symbol-copyright

.symbol-css

.symbol-favorite

.symbol-female

.symbol-flower

.symbol-frowningface

.symbol-grid

.symbol-hipertextos

.symbol-html

.symbol-hotsprings

.symbol-hyperlink

.symbol-infinity

.symbol-js

.symbol-keyboard

.symbol-list

.symbol-male

.symbol-musicnote

.symbol-phone

.symbol-pic

.symbol-recycle

.symbol-recycle2

.symbol-registered

.symbol-smilingface

.symbol-snowman

.symbol-spark

.symbol-whitephone

Markup

<!-- Snippets -->
<h5 class="symbol-NAME">.symbol-NAME</h5>

Table of content

Default

Sample

H1 heading small text

H2 heading small text

H3 heading small text

H4 heading small text

H5 heading small text

H6 heading small text

Markup

Small default

Sample

H1 small heading

H2 small heading

H3 small heading

H4 small heading

H5 small heading

H6 small heading

Markup

.title

Sample

H1 .title small text

H2 .title small text

H3 .title small text

H4 .title small text

H5 .title small text

H6 .title small text

Markup

.headline

Sample

H1 .headline small text

H2 .headline small text

H3 .headline small text

H4 .headline small text

H5 .headline small text

H6 .headline small text

Markup

.section-title

Sample

H1 .section-title small text

H2 .section-title small text

H3 .section-title small text

H4 .section-title small text

H5 .section-title small text

H6 .section-title small text

Markup

.outbox

Sample

H1 .outbox small text

H2 .outbox small text

H3 .outbox small text

H4 .outbox small text

H5 .outbox small text

H6 .outbox small text

Markup

.outbox-left

Sample

H1 .outbox-left small text

H2 .outbox-left small text

H3 .outbox-left small text

H4 .outbox-left small text

H5 .outbox-left small text

H6 .outbox-left small text

Markup

.outbox-right

Sample

H1 .outbox-right small text

H2 .outbox-right small text

H3 .outbox-right small text

H4 .outbox-right small text

H5 .outbox-right small text

H6 .outbox-right small text

Markup

Default

Sample

Markup

Default

Sample

Markup

.book-quote, .lines-quote, .tweet-quote