MOSS-UI

Moss

Scaffolding

Link

Blockquote

Default blockquote

This is a very long line that will still be quoted properly when it wraps. Oh boy let's keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can put Markdown into a blockquote.

Blockquote with text-set

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad mini

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad mini

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Table

name	age	gender	link
Karl	18	male	karl
Mia	22	female	mia

name	age	gender	link	head #1	head #2	head #3	head #4	head #5	head #6	head #7	head #8	head #9	head #10
Karl	18	male	karl	body #1	body #2	body #3	body #4	body #5	body #6	body #7	body #8	body #9	body #10
Mia	22	female	mia	body #1	body #2	body #3	body #4	body #5	body #6	body #7	body #8	body #9	body #10

Optional Classes

.pad with Container Elements

Container Elements: div, p and blockquote

div with .pad

p with .pad-lg

.pad with Section Elements

Semantic Section Elements: article, section and aside

article with .pad-sm

If case of section with pad, it's responsive.

section with .pad-lg

.accent

Heading with .accent

Code

Display inline or block fragment of computer code.

Inline code

It is inline code.
HTML, CSS, JavaScript
code in link

Code blocks

function getTarget() {
 const elm = document.querySelector('#target');
 return elm;
}

Variables

x = y + 2

User input

ctrl + p and Enter

Sample output

This text is meant to be treated as sample output from a computer program.

Badge

Default BadgeBadgeBADGE

in Text

text withbadgePrimaryDanger

in Button

in Link

LinkNew
Link badge

Rounded Badge

text and13
rounded badge

Button

Default Buttons with Color-set

Flat button

Text button

Hello World!

Other tag as button

link button
link flat button

Icon Button

Disabled

Button Group

Horizontal Button Group (default)

Group of Flat Buttons

Vertical Button Group

with Dropdown buttons

Card

Vertical Card (default)

card title

card contentLink

Card content

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Horizontal Card

Card content

card title

Card content

Title

Card Inline

Card content
Card content
Card content

Card content
Card content
Card content

Hoverable

Bordered

Bordered Vertical

Bordered Horizontal

Bordered Hoverable

Other Examples

Title

Description..

Form

Default Usage

Form

Name

Password

Disabled and Readonly

checkbox

disabled

radio-1

radio-2

disabled

Form Inline

Vertical Alignment

Input with Color-set

Input with Icons

Default

Icon positioning left or right or both

Inline input

Input sizes

Form Grid

Special replacement for .row for tighter form layouts.

`.row`

`.form-row`

Form Validation

This feature is referenced from the bootstrap. see here for more information.

Provide feedback to users when form field values are valid or invalid.

HTML5 constraint validation

First name

Looks good!

Last name

Looks good!

Username

Please choose a username.

Select

You must choose an option.

File

Select File

Textarea

Please fill textarea.

Agree to terms and conditions

You must agree before submitting.

Sever side

Input Group

Extend form controls by adding text, buttons.

@example.com

Grid

Container

Default Grid

col-1

4/12 columns

8/12 columns

Mobile Grid

col-sm-6

Tablet Grid

col-md-6

Desktop Grid

col-lg-6

Equal-width

1 of 2

1 of 3

Setting one column width

1 of 3

2 of 3 (half of full width)

3 of 3

Variable width by content

1 of 3

Variable width by content.

3 of 3

Equal-width multi-row

col

No gutters

gutters

no-gutters

Column wrapping

col-sm-8

col-sm-6

col-sm-4

Offsetting columns

col-md-4

col-md-4 offset-md-4

Order classes

First, but unordered

Second but last

Third, but first

Helper

SCSS Helpers

Image

Image Container

Avatar

Image Filter

List

.list

list item 1
list item 2
list item 3

.list-group

list item 1
list item 2
list item 3

.list-horizontal

list item 1
list item 2
list item 3

.breadcrumb

Collaborations

item1
item2
- sub1
- sub2
- scss
- parts
- list

Loader

Spin Loader

Grow Loader

Dots Loader

This is a vue component.

Roller Loader

This is a vue component.

Button with Loader

Pagination

Progress

Labels

33%

Height

Backgrounds

Multiple bars

12%

20%

Striped

Animated stripes

50%