Get Started

Introduction

...

Usage

First of all, you need Node.js and Gulp installed globally. Then you can install by running the following command in your terminal:

sh -c "$(curl -fsSL https://raw.githubusercontent.com/mantis-stack/mantis-ui/master/install.sh)"

Otherwise you can install "manually" doing the following steps:

Clone the repo: git clone git@github.com:mantis-stack/mantis-ui.git project-name
Enter the folder: cd project-name
Install Node dependencies: npm install
Finally install Bower components: bower install

But I recommend you to install the easiest way.

Gulp commands

Default: gulp: Run gulp to compile and watch files running on localhost:3000

Build: gulp build: Run gulp build to compile the files

Dist: gulp dist: Run gulp dist to compile, optimize and minify files

Clean: gulp clean: Run gulp clean to delete the build/ folder (same as rm -rf public)

Structure

Once the installation is finished, the structure will look like this:

node_modules/
src/
├── dependencies/
├── copy/
│   ├── fonts/
│   │   └── *.{eot|svg|ttf|woff}
│   ├── **/*
├── css/
│   ├── components/
│   │   └── *.styl
│   ├── core/
│   │   └── *.styl
│   └── style.styl
├── fonts/
│   └── *.{eot|svg|ttf|woff}
├── html/
│   ├── incs/
│   │   └── *.pug
│   ├── layouts/
│   │   └── *.pug
│   └── index.pug
├── img/
│   ├── backgrounds/
│   │   └── *.{jpg|png|svg}
│   ├── favicons/
│   │   └── *.{png|svg}
│   ├── sprite/
│   │   └── *.svg
│   └── *.{jpg|png|svg}
└── js/
    ├── app/
    │   ├── index.js
    │   └── *.js
    ├── modules/
    │   └── *.js
    └── app.js
.babelrc
.bowerrc
.editorconfig
.eslintrc
.gitattributes
.gitignore
bower.json
content.json
gulpfile.babel.js
gulpfile.paths.js
logo.png
logo.svg
package.json
README.md

Typography

Headings

Heading	Example
`.ui h1` or `.h1`	Heading 1
`.ui h2` or `.h2`	Heading 2
`.ui h3` or `.h3`	Heading 3
`.ui h4` or `.h4`	Heading 4
`.ui h5` or `.h5`	Heading 5
`.ui h6` or `.h6`	Heading 6

Inline Text Elements

Styling elements for common inline HTML5 elements.

You can use the mark tag to highlight text.

ui. mark or .mark

~~This line of text is meant to be treated as deleted text.~~

ui. del or .del

~~This line of text is meant to be treated as no longer accurate.~~

ui. s or .s

This line of text is meant to be treated as an addition to the document.

ui. ins or .ins

This line of text will render as underlined

ui. u or .u

This line of text is meant to be treated as fine print.

ui. small or .small

This line rendered as bold text.

ui. strong or .strong

This line rendered as italicized text.

ui. em or .em

Lorem ipsum dolor sit amet, HTML adipisicing elit.

ui. abbr or .abbr

Output: Lorem ipsum dolor sit amet, consectetur adipisicing elit.

ui. samp or .samp

For example, <section> should be wrapped as inline.

ui. code or .code

To edit settings, press ctrl + ,

ui. kbd or .kbd

Block Text Elements

Paragraphs

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex tenetur consequatur culpa provident aut beatae quibusdam quasi, quas explicabo, quae nam et incidunt neque optio enim ut distinctio temporibus accusantium?

p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex tenetur consequatur culpa provident aut beatae quibusdam quasi, quas explicabo, quae nam et incidunt neque optio enim ut distinctio temporibus accusantium?

Blockquotes

For quoting blocks of content from another source within your document. Use .ui blockquote or .blockquote to make a quoting.

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Someone famous like Acauã Montiel

blockquote
    p.blockquote__quote Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    footer.blockquote__footer Someone famous like #[cite.blockquote__cite(title='Acauã Montiel') Acauã Montiel]

Code

For coding blocks. Use .ui pre or .pre.

import init from '../modules/init';

export default class App {
    constructor() {
        this.id = Date.now();
    }

    init(callback) {
        init.call(this, callback);
    }
}

pre.
    import init from '../modules/init';

    export default class App {
        constructor() {
            this.id = Date.now();
        }

        init(callback) {
            init.call(this, callback);
        }
    }

Text Utilities

Themes

.text--muted Muted - Lorem ipsum dolor sit amet, consectetur adipisicing elit.

.text--alert Alert - Lorem ipsum dolor sit amet, consectetur adipisicing elit.

.text--warning Warning - Lorem ipsum dolor sit amet, consectetur adipisicing elit.

.text--info Info - Lorem ipsum dolor sit amet, consectetur adipisicing elit.

.text--success Success - Lorem ipsum dolor sit amet, consectetur adipisicing elit.

.text--primary Primary - Lorem ipsum dolor sit amet, consectetur adipisicing elit.

.text--secondary Secondary - Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Miscelaneous

Text left

.text--left

Text center

.text--center

Text right

.text--right

Text justify - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus laborum aspernatur quibusdam sed incidunt vitae eum id tempore recusandae magni atque, cupiditate fugiat magnam nostrum sint natus enim corporis quam.

.text--justify

Text nowrap - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus laborum aspernatur quibusdam sed incidunt vitae eum id tempore recusandae magni atque, cupiditate fugiat magnam nostrum sint natus enim corporis quam.

.text--nowrap

Text break - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus laborum aspernatur quibusdam sed incidunt vitae eum id tempore recusandae magni atque, cupiditate fugiat magnam nostrum sint natus enim corporis quam.

.text--break

Text ellipsis - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus laborum aspernatur quibusdam sed incidunt vitae eum id tempore recusandae magni atque, cupiditate fugiat magnam nostrum sint natus enim corporis quam.

.text--ellipsis

Text uppercase

.text--uppercase

Text lowercase

.text--lowercase

Text capitalize

.text--capitalize

Lists

Unordered

Use .ui ul or .ul to make unordered lists

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
  - Phasellus iaculis neque
  - Ac tristique libero volutpat at
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

ul
    li Lorem ipsum dolor sit amet
    li Consectetur adipiscing elit
    li Integer molestie lorem at massa
    li Facilisis in pretium nisl aliquet
    li Nulla volutpat aliquam velit
        ul
            li Phasellus iaculis neque
            li Purus sodales ultricies
                ul
                    li Phasellus iaculis neque
                    li Ac tristique libero volutpat at
            li Vestibulum laoreet porttitor sem
            li Ac tristique libero volutpat at
    li Faucibus porta lacus fringilla vel
    li Aenean sit amet erat nunc
    li Eget porttitor lorem

Ordered

Use .ui ol or .ol to make ordered lists

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
1. Phasellus iaculis neque
2. Purus sodales ultricies
3. Vestibulum laoreet porttitor sem
4. Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

ol
    li Lorem ipsum dolor sit amet
    li Consectetur adipiscing elit
    li Integer molestie lorem at massa
    li Facilisis in pretium nisl aliquet
    li Nulla volutpat aliquam velit
        ol
            li Phasellus iaculis neque
            li Purus sodales ultricies
            li Vestibulum laoreet porttitor sem
            li Ac tristique libero volutpat at
    li Faucibus porta lacus fringilla vel
    li Aenean sit amet erat nunc
    li Eget porttitor lorem

Definition List

Use .ui dl or .dl to make definition lists

Definition lists: A definition list defines terms and their corresponding descriptions.
This is a term: This is a description.
This is a term: This is a description.

dl
    dt Definition lists
    dd A definition list defines terms and their corresponding descriptions.
    dt This is a term
    dd This is a description.
    dt This is a term
    dd This is a description.

Buttons

Mantis UI includes several predefined button styles, themes, sizes and states. You just need to add .bt class in a button, a or input(type="button|submit|reset") and choose which modifier best fits your needs.

Themes

button.bt Default
button.bt.bt--alert Alert
button.bt.bt--warning Warning
button.bt.bt--info Info
button.bt.bt--success Success
button.bt.bt--primary Primary
button.bt.bt--secondary Secondary

Styles

button.bt Default
button.bt.bt--fussy Fussy
button.bt.bt--quiet Quiet

Sizes

button.bt.bt--small Small
button.bt Default
button.bt.bt--large Large
button.bt.bt--giant Giant

button.bt.bt--block.bt--small Block Small
button.bt.bt--block Block Default
button.bt.bt--block.bt--large Block Large
button.bt.bt--block.bt--giant Block Giant

States

button.bt Default
button.bt.bt--active Active
button.bt(disabled) Disabled

Button Group

You can make button groups by wrapping the buttons using the .bt-group class.

.bt-group
    button.bt Button 1
    button.bt Button 2
    button.bt Button 3

.bt-group-vertical
    button.bt Button
    button.bt Button
    button.bt Button with more content
    button.bt Button

.bt-group.bt-group--giant
	button.bt Button
	button.bt Button

.bt-group.bt-group--large
	button.bt Button
	button.bt Button

.bt-group
	button.bt Button
	button.bt Button

.bt-group.bt-group--small
	button.bt Button
	button.bt Button

.bt-group-vertical.bt-group--giant
	button.bt Button
	button.bt Button

.bt-group-vertical.bt-group--large
	button.bt.bt--fussy Button
	button.bt.bt--fussy Button

.bt-group-vertical
	button.bt.bt--quiet Button
	button.bt.bt--quiet Button

.bt-group-vertical.bt-group--small
	button.bt Button
	button.bt Button

Get Started

Introduction

Usage

Gulp commands

Structure

Typography

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Inline Text Elements

Block Text Elements

Paragraphs

Blockquotes

Code

Text Utilities

Themes

Miscelaneous

Lists

Unordered

Ordered

Definition List

Buttons

Themes

Styles

Sizes

States

Button Group