Úvod
O ústavu
Typografie

Basic template colors

Color
Color
Color
Color
Color
Color
Color
Color
Color
Color
Color
Color
Color
Color
Color
Color
Color
Color
Color
Color

Headings

Standard H headigs. Classes are not needed.

<h1>Headline</h1>

h1. Heading 1

h2. Heading 2

h3. Heading 3

h4. Heading 4

h5. Heading 5

h6. Heading 6

Paragraphs

Standard paragraphs by <p> tag.

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Links

Example of link inside text:

Examples:

clasic link

hover link

active link (class active)

Links to specific files with icon

With font awesome icons (automatic detection)

<a href="/file.pdf">file.pdf or other text</a>

Font Sizes

We use only rem metric, not px. All sizes of text are generated from basic font size.

0.8rem

1rem (standard base font)

1.1rem

1.2rem

1.3rem

1.4rem

1.5rem

...

up to 3rem

Lists

We used three types of list. Two basic, generated from text editor and one specific, used for contracts or other specific lists, that wants multiple number 1.1.1 etc.

<ul>

<li>text

<ul>

</ul>

</li>

</ul>

clasic dot

list
- list
- list
  - list
  - list
    - list
list
list

clasic number

list
1. list
2. list
  1. list
  2. list
    1. list
list
list

Green ico dot (add class="list-icon-dot")

list
- list
- list
  - list
  - list
    - list
list
list

contract (add class contract to ol tag)

list
1. list
2. list
  1. list
  2. list
    1. list
list
list

Tables

<table>

<caption>clasic</caption>

<thead>

<tr>

<td>clasic</td>

</tr>

</thead>

<tbody>

<tr>

<td>clasic</td>

</tr>

</tbody>

<tfoot>

<tr>

<td>clasic</td>

</tr>

</tfoot>

</table>

clasic

clasic
clasic	clasic	clasic
clasic	clasic	clasic
clasic	clasic	clasic

border (add class table-border to table tag)

border
border	border	border
border	border	border
border	border	border

border + separated (add class table-border table-separated to table tag)

border
border	border	border
border	border	border
border	border	border

Regular labs plugins

Sliders

{slider title="Test 1" open="false" class="icon"}

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer tempor. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Proin in tellus sit amet nibh dignissim sagittis. Pellentesque sapien. Vestibulum erat nulla, ullamcorper nec, rutrum non, nonummy ac, erat. Duis bibendum, lectus ut viverra rhoncus, dolor nunc faucibus libero, eget facilisis enim ipsum id lacus. Suspendisse nisl. Maecenas sollicitudin. Vestibulum erat nulla, ullamcorper nec, rutrum non, nonummy ac, erat. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Integer in sapien. Vivamus luctus egestas leo. Curabitur bibendum justo non orci. Duis ante orci, molestie vitae vehicula venenatis, tincidunt ac pede.

{slider-123 title="Test 1" open="false" class="icon"}

{slider-123 title="Test 2" class="icon"}

{/sliders-123}

{slider title="Test 2" class="icon"}

{slider-1 title="Test 1" open="false" class="icon"}

{slider-1 title="Test 2" class="icon"}

{slider-12 title="Test 1" open="false" class="icon"}

{slider-12 title="Test 2" class="icon"}

{/sliders-12}

{/sliders-1}

{/sliders}

Tabs

Test 1

Váš text...

Test

Tooltip

{tip title="Jsem nadpis" content="Jsem text tooltipu"}Hoover me!{/tip}

Modal

{modal html="This text is entered right inside the modal tag." title="Hello!"}Show some inline text{/modal}

Buttons

buttons styles aplicated to <a> and <button> tags. Simple use. Add class to a or button tag from example name.

<a href="/" class="btn btn-big btn-save">Text of button</a> or <button class="btn btn-big btn-delete">Text of button</button>

Default btn:

btn-primary-light btn-primary-dark btn-secondary-light btn-secondary-dark

Actions:

btn-save btn-delete btn-run btn-more btn-reset btn-disable

Sizes:

btn-small btn-standard btn-big

Forms

Input elements - radio:

Textarea input

Select elements

Default style for form elements

Select

optgroup

option

datalist

HTML5 slider

Joomla message types

Message

Odběr byl nastaven.

Notice

Odběr byl nastaven.

Warning

Odběr byl nastaven.

Error

Odběr byl nastaven.

Examples

Some examples

<h1>Headline</h1>

h1. Heading 1

h2. Heading 2

h3. Heading 3

h4. Heading 4

Test
Test

h4. Heading 4

Test
Test

Typografie

Basic template colors

h1. Heading 1

h2. Heading 2

h3. Heading 3

h4. Heading 4

h5. Heading 5

h6. Heading 6

Links to specific files with icon

Font Sizes

clasic dot

clasic number

Green ico dot (add class="list-icon-dot")

contract (add class contract to ol tag)

clasic

border (add class table-border to table tag)

border + separated (add class table-border table-separated to table tag)

Regular labs plugins

Sliders

Tabs

Test 1

Test

Tooltip

Modal

Input elements - radio:

Input elements - checkbox:

Easy form with reset

Input elements - submit:

Textarea input

Select elements

Default style for form elements

HTML5 slider

Joomla message types

Message

Notice

Warning

Error

h1. Heading 1

h2. Heading 2

h3. Heading 3

h4. Heading 4

h4. Heading 4

h4. Heading 4

h5. Heading 5

h6. Heading 6

Newsletter

Facebook

Bluesky