NioSaaS NioSaaS
 

NioSaaS Online Guide

NioSaaS includes an online documentation which can help you rapidly develop your web pages.

Read this section to know about NioSaaS and its features.

Typography Styles

Heading Styles

All HTML headings, <h1> through <h6>, are available.

<h1>Heading One</h1>
<h2>Heading Two</h2>
<h3>Heading Three</h3>
<h4>Heading Four</h4>
<h5>Heading Five</h5>
<h6>Heading Six</h6>

Heading One

Heading Two

Heading Three

Heading Four

Heading Five
Heading Six

Use .title to any element, where additionally add .title-{style} to more styling.
{style} can be any of: sub, sub-alt, lead, head, intro, line, line-full, line-sm, line-lg, line-thiner, around, bdr.

Use <h1> through <h6> or <span> tag to more stand out title style. Margin may not apply if use <span> tag.

<h3 class="title title-lead">Lead Title</h3>
<h3 class="title title-head">Head Title</h3>
<h3 class="title title-line">Title + Line</h3>
<h3 class="title title-line-full">Title + Full Line</h3>
<h3 class="title title-bdr">Title + Border</h3>
<h3 class="title title-sub">Sub Title</h3>
<h3 class="title title-sub-alt">Sub Title Alt</h3>
<span class="title title-around">Title Around</span>
<span class="title title-around bg-theme tc-light">Title Around</span>

Note: .title-around supports all background color class .bg-{*}.

Lead Title

Head Title

Title + Line

Title + Full Line

Title + Border

Sub Title

Sub Title Alt

Title Around Title Around
List Styles <ul> .ulist
  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
    • Integer molestie lorem at massa
    • Integer molestie lorem at massa
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Facilisis in pretium nisl aliquet

Supported class
.ulist-square .ulist-circle

Ordered List Styles <ol> .olist
  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Facilisis in pretium nisl aliquet

Supported class
.olist-alpha .olist-roman

No List Styles <ul> .no-ulist
  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
Default Styles <ul>
  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit

Item gap main if you use .no-ulist

Typography Inline Style Helpers
Description Preview Styles Classes Addtional
Convert the text to uppercase

Uppercase Text

 .typ-uppercase .ucap
Convert the text to lowercase

Lowercase Text

 .typ-lowercase .lcap
Convert the text to Title Case

Capitilize text

 .typ-capitalize .ccap
Apply font weight to the text

Bold Text

 .typ-bold .typ-{300|400|500|700}
Convert the text to italic type

Italic Text

 .typ-italic -
Add underline to the text

Underline Text

 .typ-underline .typ-ins
Strikethrough to the text

Strikethrough Text

 .typ-del .typ-strike
Fade the text/element to 0.5 opacity

Faded Text

 .typ-faded -
Highlight or mark text in line You can use Mark Text in line .typ-mark .typ-highlight
Typography Color Helpers
Change text color to success color

A successful text colour

 .txt-success -
Change text color to alert color

An alert text colour

 .txt-warning -
Change text color to danger color

An error text colour

 .txt-danger -
Change text color to info color

An information text colour

 .txt-info -
Change text color to grey color

A grey text colour

 .txt-grey -
Change text color to dark color

A grey text colour

 .tc-dark -

Button Styles

Button Styles

Use .btn class to any element for making button.

<a class="btn">Button Text</a>
<a class="btn btn-alt">Button Text</a>
<a class="btn btn-accent">Button Text</a>
<a class="btn btn-light">Button Text</a>
<a class="btn btn-outline">Button Text</a>
<a class="btn btn-outline btn-alt">Button Text</a>
<a class="btn btn-outline btn-accent">Button Text</a>
Button Text Button Text Button Text Button Text Button Text Button Text Button Text Button Text Button Text Button Text

Use .title to any element, where additionally add .title-{style} to more styling.
{style} can be any of: sub, sub-alt, lead, head, intro, line, line-full, line-sm, line-lg, line-thiner, around, bdr.

Use <h1> through <h6> or <span> tag to more stand out title style. Margin may not apply if use <span> tag.

<h3 class="title title-lead">Lead Title</h3>
<h3 class="title title-head">Head Title</h3>
<h3 class="title title-line">Title + Line</h3>
<h3 class="title title-line-full">Title + Full Line</h3>
<h3 class="title title-bdr">Title + Border</h3>
<h3 class="title title-sub">Sub Title</h3>
<h3 class="title title-sub-alt">Sub Title Alt</h3>
<span class="title title-around">Title Around</span>
<span class="title title-around bg-theme tc-light">Title Around</span>

Note: .title-around supports all background color class .bg-{*}.

Lead Title

Head Title

Title + Line

Title + Full Line

Title + Border

Sub Title

Sub Title Alt

Title Around Title Around

Colors and Background Styles

Background Classes
  • .bg-black
  • .bg-dark
  • .bg-dark-alt
  • .bg-grey
  • .bg-grey-alt
  • .bg-orange
  • .bg-sunglow
  • .bg-red
  • .bg-rose
  • .bg-coral
  • .bg-yellow
  • .bg-green
  • .bg-emerald
  • .bg-lime
  • .bg-mint
  • .bg-teal
  • .bg-blue
  • .bg-dodger
  • .bg-maya
  • .bg-sky
  • .bg-royal
  • .bg-purple
  • .bg-pink
  • .bg-lighter
  • .bg-light
  • .bg-light-alt
  • .bg-light-grey
  • .bg-dim-orange
  • .bg-dim-sunglow
  • .bg-dim-red
  • .bg-dim-rose
  • .bg-dim-coral
  • .bg-dim-yellow
  • .bg-dim-green
  • .bg-dim-emerald
  • .bg-dim-lime
  • .bg-dim-mint
  • .bg-dim-teal
  • .bg-dim-blue
  • .bg-dim-dodger
  • .bg-dim-maya
  • .bg-dim-sky
  • .bg-dim-royal
  • .bg-dim-purple
  • .bg-dim-pink
Theme / Scheme Background Classes
  • .bg-{primary | theme}
  • .bg-{primary | theme}-alt
  • .bg-light-{primary | theme}
  • .bg-accent
  • .bg-accent-alt
  • .bg-light-accent
Color Classes
  • .tc-black
  • .tc-dark
  • .tc-dark-alt
  • .tc-grey
  • .tc-grey-alt
  • .tc-orange
  • .tc-sunglow
  • .tc-red
  • .tc-rose
  • .tc-coral
  • .tc-yellow
  • .tc-green
  • .tc-emerald
  • .tc-lime
  • .tc-mint
  • .tc-teal
  • .tc-blue
  • .tc-dodger
  • .tc-maya
  • .tc-sky
  • .tc-royal
  • .tc-purple
  • .tc-pink
  • .tc-light
  • .tc-copy
  • .tc-copy-alt
  • .tc-copy-ext
  • .tc-heading
Theme / Scheme Color Classes
  • .tc-{primary | theme}
  • .tc-{primary | theme}-alt
  • .tc-light-{primary | theme}
  • .tc-accent
  • .tc-accent-alt
  • .tc-light-accent
Class name Description
.no-shadow shadow: none
.no-text-shadow text-shadow: none
.no-scroll overflow: hidden
.no-shrink flex-shrink: 0
.no-grow flex-shrink: 0
.no-letter-spacing letter-spacing: 0
.no-underline text-decoration: none on :hover and :focus