Suave UI

UI Framework for AngularJS

0.3.1
Project on Github Download latest version

Styles

Suave UI have a lot of predefined styles designed to help you create UI quickly and efficiently. All framework's CSS-properties have su-prefix. Hereinafter represented all these abbreviations with descriptions.

Font size

Paragraphs and lists accept su-big class to make font size bigger than regular.

Similar su-small class makes font size smaller.

Lists

  • To make lists
  • like this
  • use class
    • su-dash
    • for <UL> elements
<ul class="su-dash">

    <li>...</li>
</ul>

Frames

Frame is a design element. Frames accept styles of Interaction Elements to display colorful stripe.

This is
sample frame

<div class="su-frame">...</div>

This is sample frame with
su-positive class

<div class="su-frame su-positive">...</div>

Horizontal ruler

This is how regular <hr> seems like:

Ruler can be dark:

<hr> accept su-big class to make ruler more expressive:

Abbreviations

Basic abbreviations:

AbbreviationValueAbbreviationValue
.su-flfloat: left;.su-ctext-align: center;
.su-frfloat: right;.su-ltext-align: left;
.su-dndisplay: none;.su-rtext-align: right;
.su-clearclear: both;.su-ibdisplay: inline-block;

Margins/Paddings:

AbbreviationValueAbbreviationValue
.su-m*margin-bottom: *px;.su-p*padding-bottom: *px;
.su-mt*margin-top: *px;.su-pt*padding-top: *px;
.su-ml*margin-left: *px;.su-pl*padding-left: *px;
.su-mr*margin-right: *px;.su-pr*padding-right: *px;

where * is 0, 5, 8, 10, 15, 18, 20, 30, 40, 50, 60, 70, 80, 90 or 100.