Manual of MU Unified Visual Style Components

Translated using

Machine-translated page for increased accessibility for English questioners.

Page in original, Czech language.

Manual of MU Unified Visual Style Components

Overview of marks

Content cover ( fi-row)
Grid ( fi-grid, fi-cell)
Auto Columns ( fi-cols, fi-cols-sep)
Hero box ( fi-hero, fi-hero-img)
Buttons ( fi-buttons, fi-button)
Source code ( fi-code)
Timeline ( fi-timeline, fi-timeline-item)

Component usage and extensions

Faculty extension components are HTML tags beginning with fi-, which are intended to simplify the entry of more complex structures from the official catalog. However, we only provide abbreviations for components that are expected to be used frequently in the Faculty Wiki.

Therefore, the superstructure can be combined with other JVS components. In addition, components that represent text can be customized using the class attribute. The official catalog provides several base classes that can be used to customize the properties of not only plain text, but also, for example, the title in the Hero Box.

Content wrapper

fi-row ( JVS documentation)
This component is one of the most important because it shapes the content of the page. It is not directly visible, but it limits the width of text or other graphical content by adding borders on both sides.

Optional attributes

box-content: Limits the width to two-thirds of the original value.

The default value of the box-content attribute depends on the content. If the content consists only of text nodes (i.e. plain text, or the tags strong, em etc.) then box-contentis automatically enabled, otherwise it is not applied.

Examples of

The first example is just a simple paragraph for comparison.

<p>text...</p>

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. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.

<fi-row><p>text...</p></fi-row>

Note that this example is only to illustrate the general case if non-text tags (e.g. img) were present in the paragraph. For plain text, box-content will automatically be turned on.

<fi-row box-content><p>text...</p></fi-row>

Tip: you can also use justifiedfor blocks of text.

<fi-row box-content><p class="justified">text...</p></fi-row>

Grid

fi-grid, fi-cell ( JVS documentation)
The fi-grid component allows you to split content into multiple "cells" ( fi-cell). The entire width of the page is divided into 12 columns. Each cell then occupies one or more columns, which can be set with the size attribute.

<fi-grid>
    <fi-cell size="6">buňka 1</fi-cell>
    <fi-cell size="4">buňka 2</fi-cell>
    <fi-cell size="2">buňka 3</fi-cell>
</fi-grid>

Optional attributes for `fi-grid`

default-size="(L,M,S,XS|N|default|twocols)": Default cell size. This is specified as four numbers 1 to 12 separated by a comma ( ,). These numbers successively represent the cell size on a computer ( L), tablet ( M), mobile portrait ( S) and mobile landscape ( XS). You can also specify just one number, N, which is then used for all four of these width/view types.
The value default represents 3,6,12,6, twocols means 6,6,12,6.
Cells of fi-cell can overlay this value with their own size attribute value.

Optional attributes for `fi-cell`

size="(L,M,S,XS|N|default|twocols)": The actual size of the cell. If the parent element fi-grid does not have an attribute default-size, then the attribute sizeis mandatory here. The other values ( default, twocols, ...) have the same meaning as for default-size.

size="12"

size="6"

size="4"

size="2"

Automatic columns

fi-cols, fi-cols-sep
fi-cols divides the content inside into columns, with the column separator being the fi-cols-sep tag. The width of the columns is determined automatically. If you want columns of different widths, use the grid ( fi-grid).

The columns are implemented as grid cells, so you can create only 1, 2, 3, 4 or 6 columns.

Examples

<fi-cols>
    jeden sloupec
</fi-cols>

one column

<fi-cols>
    první sloupec
    <fi-cols-sep></fi-cols-sep>
    druhý sloupec
</fi-cols>

first column

second column

<fi-cols>
    první sloupec
    <fi-cols-sep></fi-cols-sep>
    druhý sloupec
    <fi-cols-sep></fi-cols-sep>
    třetí sloupec
</fi-cols>

first column

second column

third column

Hero box

fi-hero, fi-hero-img ( JVS documentation)
Creates a large heading with a link, background, border, or image. To insert an image in the border, use the fi-hero-imgcomponent with the same attributes as the standard img. To insert a background image for the entire component, use the bg attribute.

Optional attributes

href="ADRESA": The header will have a link to the specified address.
bordered: A border will be created around the title.
bg="(fi|muni|URL)": Sets the background color, fi for faculty and muni for university. The value can also be the URL of the image to be used as the background.
bg-gradient: In combination with bg="URL", overlays a gradient image for better readability.
particles="(fi|muni)": Displays particles, fi for ones and zeros, muni for dragons in the university and faculty colors.

Do not use this component inside fi-row!

It is not recommended to combine the bg attribute with a value like URL and fi-hero-img.

Extension classes from the standard JVS kit can be specified in the class attribute , see the JVS kit documentation.

Setting the title

For convenience, the first heading in the fi-herocontent is automatically added to the box-hero__title class.

In addition, the light class for the headline is automatically overridden to box-hero__title--light.

Examples of

<fi-hero>
    <h2>Základní nadpis</h2>
</fi-hero>

<fi-hero bordered="1">
    <h2>Nadpis s&nbsp;okrajem</h2>
</fi-hero>

<fi-hero href="https://www.fi.muni.cz/">
    <h2>Nadpis s&nbsp;odkazem</h2>
</fi-hero>

Basic heading

Heading with border

Heading with link

<fi-hero bg="fi">
    <h2>Nadpis s&nbsp;fakultním pozadím</h2>
</fi-hero>

<fi-hero bg="muni">
    <h2>Nadpis s&nbsp;univerzitním pozadím</h2>
</fi-hero>

<fi-hero>
    <h2>Nadpis s&nbsp;obrázkem</h2>
    <fi-hero-img alt="obrázek nadpisu"
        src="https://fadmin.fi.muni.cz/noauth/gallery_data/fi_udalosti/01300172.004.cust.jpg"></fi-hero-img>
</fi-hero>

<fi-hero bg="https://fadmin.fi.muni.cz/noauth/gallery_data/fi_udalosti/01300260.005.cust.jpg">
    <h2>Nadpis s&nbsp;obrázkem v&nbsp;pozadí</h2>
</fi-hero>

<fi-hero bg="https://fadmin.fi.muni.cz/noauth/gallery_data/fi_udalosti/01300260.005.cust.jpg"
        bg-gradient>
    <h2>Nadpis s&nbsp;obrázkem v&nbsp;pozadí a gradientem</h2>
</fi-hero>

Title with faculty background

Heading with university background

Headline with image

Caption with background image

Headline with background image and gradient

<fi-hero particles="fi">
    <h2>Nadpis s&nbsp;fakultními částicemi</h2>
</fi-hero>

<fi-hero particles="muni">
    <h2>Nadpis s&nbsp;univerzitními částicemi</h2>
</fi-hero>

Caption with faculty particles

Caption with university particles

<fi-hero class="box-hero--size-m">
    <h2 class="light">Nadpis s&nbsp;vlastní třídou pro změnu výšky</h2>
    <p>Navíc s&nbsp;třídou pro jiný typ nadpisu.</p>
</fi-hero>

Heading with a custom class for height change

Additionally with a class for a different type of heading.

Buttons

fi-buttons, fi-button ( JVS documentation)
The first component creates a wrapper for the buttons, into which the buttons can then be inserted. The wrapper is important for multiple buttons side by side so that they are not too close together.

Mandatory attributes for `fi-button`

href="ADRESA": Button reference.
title="POPIS": Text in the button description.

Optional attributes for `fi-button`

small: Smaller button.
bordered: Button with colored border instead of background.
bg="(fi|muni)": Button color, fi for faculty (default), muni for university.

Examples

<fi-buttons>
    <fi-button title="Domů" href="/"></fi-button>
    <fi-button title="Domů" href="/" bg="muni"></fi-button>
    <fi-button title="Domů" href="/" bordered></fi-button>
    <fi-button title="Domů" href="/" bg="muni" bordered></fi-button>
</fi-buttons>

Home Home Home Home

Same as above plus the small attribute:

Home Home Home Home

Source Code

fi-code ( JVS documentation)
Inserts color-coded highlighted source code into the document. Uses highlight .js. If the attribute commented is specified, then the content of the tag in the comment is expected.

Optional attributes

commented: Allows easier writing of code containing multiple characters with special meaning in HTML (e.g., < or >). The content is expected to be wrapped in an HTML comment ( ), which can then directly write, for example, < instead of <.
syntax="LANGUAGE": Sets the highlighting to the specified language. If not specified, the highlighter will try to heuristically guess the language itself.

Examples

Simple code sample

<fi-code>
    # limit available resources
    help ulimit
    # cap the size of virtual memory to 20000 kB
    ulimit -v 20000
</fi-code>

# limit available resources
help ulimit
# cap the size of virtual memory to 20000 kB
ulimit -v 20000

Code sample in comment with language set to HTML

<fi-code commented syntax="html"><!--
    <fi-element attribute="value">
        inner contents
    </fi-element>
--></fi-code>

<fi-element attribute="value">
    inner contents
</fi-element>

Timeline

fi-timeline, fi-timeline-item ( JVS documentation)
Creates a timeline where the individual axis items are described by the tag fi-timeline-item.

Attributes for `fi-timeline`

type="(default|center|boxes)": Type of timeline, see examples. If not specified, defaultis used.

Mandatory attributes for `fi-timeline-item`

title="POPIS": A short description of the timeline point.

Optional attributes for `fi-timeline-item`

bg: Highlight the timeline point with a faculty background.
end: Indicates the last point of the timeline.
date="TEXT": Date.
href="ADRESA": The point will reference the specified address, but no other reference may appear in the description.

Examples

Default type ( `type="default"` or nothing)

<fi-timeline>
    <fi-timeline-item title="První bod"></fi-timeline-item>
    <fi-timeline-item title="Nějaký důležitý bod" date="19. ledna 2038"></fi-timeline-item>
    <fi-timeline-item title="Bod s&nbsp;odkazem" href="https://www.fi.muni.cz"></fi-timeline-item>
    <fi-timeline-item title="Poslední bod" end></fi-timeline-item>
</fi-timeline>

First point
Some important point19. ledna 2038
Point of reference
The last point

Center alignment ( `type="center"`)

<fi-timeline type="center">
    <fi-timeline-item title="První bod"></fi-timeline-item>
    <fi-timeline-item title="Nějaký důležitý bod" date="19. ledna 2038"></fi-timeline-item>
    <fi-timeline-item title="Bod s&nbsp;odkazem" href="https://www.fi.muni.cz"></fi-timeline-item>
    <fi-timeline-item title="Poslední bod" end></fi-timeline-item>
</fi-timeline>

First point
Some important point19. ledna 2038
Point of reference
The last point

Rectangular type ( `type="boxes"`)

<fi-timeline type="boxes">
    <fi-timeline-item title="Začátek">
        Popis začátku.
    </fi-timeline-item>
    <fi-timeline-item title="Nějaký důležitý bod" date="19. ledna 2038"></fi-timeline-item>
    <fi-timeline-item title="Bod s&nbsp;odkazem" href="https://www.fi.muni.cz"></fi-timeline-item>
    <fi-timeline-item title="Jiný důležitý bod" bg></fi-timeline-item>
    <fi-timeline-item title="Konec" end></fi-timeline-item>
</fi-timeline>

Start at
Description of start.
19. ledna 2038
Some important point
Point of reference
Another important point
End of

Manual of MU Unified Visual Style Components

Overview of marks

Component usage and extensions

Content wrapper

Optional attributes

Examples of

Grid

Optional attributes for fi-grid

Optional attributes for fi-cell

Automatic columns

Examples

Hero box

Optional attributes

Setting the title

Examples of

Basic heading

Heading with border

Heading with link

Title with faculty background

Heading with university background

Headline with image

Caption with background image

Headline with background image and gradient

Caption with faculty particles

Caption with university particles

Heading with a custom class for height change

Buttons

Mandatory attributes for fi-button

Optional attributes for fi-button

Examples

Source Code

Optional attributes

Examples

Simple code sample

Code sample in comment with language set to HTML

Timeline

Attributes for fi-timeline

Mandatory attributes for fi-timeline-item

Optional attributes for fi-timeline-item

Examples

Default type ( type="default" or nothing)

Center alignment ( type="center")

Rectangular type ( type="boxes")

Start at

Some important point

Point of reference

Another important point

End of

Optional attributes for `fi-grid`

Optional attributes for `fi-cell`

Mandatory attributes for `fi-button`

Optional attributes for `fi-button`

Attributes for `fi-timeline`

Mandatory attributes for `fi-timeline-item`

Optional attributes for `fi-timeline-item`

Default type ( `type="default"` or nothing)

Center alignment ( `type="center"`)

Rectangular type ( `type="boxes"`)