Uimini

# Typography

The rem unit is relative to the font-size of the root element html. That means that we can define a single font size on the root element, and define all rem units to be a percentage of that.

For use it add class ui-html and ui-body for parents, see more in font size and font sections bellow.

# Font size

Use class .ui-html for apply main sizes.

For example: <html class="ui-html"></html>.

This approach makes it easy to change or combine different frameworks in an application or a website.

.ui-html {
  font-size: 18px; /* px only */
  line-height: 1.6;
}

# Font

Use class .ui-body for apply colors, smoothing fonts, etc.

For example: <body class="ui-body"></body>.

.ui-body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica,
    'Apple Color Emoji', Arial, sans-serif, 'Segoe UI Emoji', 'Segoe UI Symbol';
}

# Text and Link

Provides multiple types of text and link.

Uimini (default)

Uimini (secondary)

Uimini (primary)

Uimini (mark)

Uimini (success)

Uimini (dangerous)

Uimini (warning)

Uimini (disabled)

Uimini (link)
<p class="ui-text">Uimini (default)</p>
<p class="ui-text isSecondary">Uimini (secondary)</p>
<p class="ui-text isPrimary">Uimini (primary)</p>
<mark class="ui-text isMark">Uimini (mark)</mark>
<p class="ui-text isSuccess">Uimini (success)</p>
<p class="ui-text isDangerous">Uimini (dangerous)</p>
<p class="ui-text isWarning">Uimini (warning)</p>
<p class="ui-text isDisabled">Uimini (disabled)</p>
<a class="ui-link" href="#" target="_blank">Uimini (link)</a>

# Titles

Size of title depends of size in ui-html. By default it's scale from 18px.

Heading 1

2.2rem40px

Heading 2

1.7rem32px

Heading 3

1.4rem26px

Heading 4

1.2rem22px

Heading 5

1rem18px
<p class="ui-title-1">Heading 1</p>
<p class="ui-title-2">Heading 2</p>
<p class="ui-title-3">Heading 3</p>
<p class="ui-title-4">Heading 4</p>
<p class="ui-title-5">Heading 5</p>

# Lists

Ul and Ol lists for display data.

# Ul list example:

List with dot mark.

  • ul option 1
  • ul option 2
  • ul option 3
<ul class="ui-ul">
  <li>ul option 1</li>
  <li>ul option 2</li>
  <li>ul option 3</li>
</ul>

# Ol list example:

List with number mark.

  1. ol option 1
  2. ol option 2
  3. ol option 3
<ol class="ol-ul">
  <li>ol option 1</li>
  <li>ol option 2</li>
  <li>ol option 3</li>
</ol>

← Button →