# Documentation

Hey there! You’re looking at Mundana official documentation. Mundana is an HTML blogging template with flexible, ready to use UI components which will hep you build your blog faster. Let’s begin!

# Quick Start

If you are not planning to customize your style with SCSS, simply remove the `assets/scss/` folder and get started by opening the index.html file. So, this will be the structure of your template:

## File Structure

`

- assets/
  - css/
    - vendor/
      - prism.css
    - main.css
    - main.css.map
  - img/
  - js/
    - vendor/
      - jquery.min.js
      - bootstrap.min.js
      - popper.min.js
    - functions.js
  - index.html
  - article.html
  - category.html
  - templates.html
  - docs.html

`

## Basic Template

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8"/>
    <link rel="apple-touch-icon" sizes="76x76" href="./assets/img/favicon.ico">
    <link rel="icon" type="image/png" href="./assets/img/favicon.ico">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <title>Site Title</title>
    <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport'/>

    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,700|Source+Sans+Pro:400,700" rel="stylesheet">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

    <!-- CSS -->
    <link href="./assets/css/main.css" rel="stylesheet"/>

    </head>

    <body>

    <main> My content goes here </main>

    <!-- Javascript -->
    <script src="./assets/js/vendor/jquery.min.js" type="text/javascript"></script>
    <script src="./assets/js/vendor/popper.min.js" type="text/javascript"></script>
    <script src="./assets/js/vendor/bootstrap.min.js" type="text/javascript"></script>
    <script src="./assets/js/functions.js" type="text/javascript"></script>

    </body>

    </html>

That's it! Start editing your theme with an HTML editor, such as Brackets.

# Advanced Customization

If you are planning to customize the template with Gulp & SCSS, follow the guide below.

First, this is the structure of your template files:

## File Structure

`

- assets/
  - css/
    - vendor/
      - prism.css
    - main.css
    - main.css.map
  - img/
  - js/
    - vendor/
      - jquery.min.js
      - bootstrap.min.js
      - popper.min.js
    - functions.js
  - scss/
    - 1-frameworks/
      - bootstrap/
        - source/
        - bootstrap.scss
        - bootstrap-grid.scss
        - bootstrap-reboot.scss
        - bootstrap-user-variables.scss
      - _index.scss
    - 2-plugins
    - 3-base
    - 4-modules
    - 5-layout
    - main.scss
  - index.html
  - article.html
  - category.html
  - templates.html
  - docs.html
  - gulpfile.js
  - package.json
  - README.md

`

## Install Gulp

Gulp can automate tasks in your development workflow. Gulp is also required in order to work with `scss` files. In order to use Gulp you will need to download Node JS first:

Download Node JS

After Node is installed you can now proceed to Gulp installation. To do that simply run the following command in your terminal. This will install Gulp globally. Aferwards you can cd to you project’s folder where our KIT is installed.

`npm install gulp-cli -g`

## Customize with SCSS

It is highly recommended that all the customized styles to be stored only within the user’s files from the `scss` folder. Gulp is required for this.

1. Download the project’s zip.
2. Make sure you have node.js (https://nodejs.org/en/) installed.
3. Type `npm install` in terminal/console in the source folder where `package.json` is located.
4. Make sure you have gulp `npm install gulp`
5. Run in terminal `gulp open-app` for opening the Dashboard Page (default) of the product.
6. Run in terminal `gulp compile-scss` for a single compilation or `gulp watch` for continous compilation of the changes that you make in `*.scss` files. This command should be run in the same folder where `gulpfile.js` and `package.json` are located.

When working with SCSS, you only need to these 2 files:

- `assets/scss/frameworks/bootstrap/bootstrap-user-variables.scss` (here you can edit or add variables)
- `assets/scss/main.scss` (here you will customize your style)

Do not touch anything else! Everything you edit in these 2 files will be compiled in `main.css`.

# Components

## Colors

Options:

- Background: `bg-*color`
- Text: `text-*color`
- Alert: `alert-*color`
- Button: `btn-*color`
- Badge: `badge-*color`

##### Primary

##### Secondary

##### Info

##### Light Blue

##### Warning

##### Danger

##### Purple

##### Black

##### Cyan

## Alerts

Options:

- Background: `alert-*color`
- Text: `text-*color`
- Shadow: `shadow`, `shadow-sm`, `shadow-lg`

A simple primary alert-check it out!
A simple secondary alert-check it out!
A simple success alert-check it out!
A simple danger alert-check it out!
A simple warning alert-check it out!
A simple info alert-check it out!

## Avatars

Options:

- Round: `rounded-circle`
- Size: `width="*"`
- Shadow: `shadow`, `shadow-sm`, `shadow-lg`

## Badges

Options:

- Background: `badge-*color`
- Text: `text-*color`
- Shadow: `shadow`, `shadow-sm`, `shadow-lg`

Primary Secondary Success Danger Warning Info Profile 15%

## Buttons

Options

- Background: `btn-*color`
- Text: `text-*color`
- Size: `btn-sm`, `btn`, `btn-lg`
- Outline: `btn-outline-*color`
- Round: `btn-round`
- Width: `btn-block w-100`
- Shadow: `shadow`, `shadow-sm`, `shadow-lg`

Default
Outline
Round
Outline

## Carousel

Options

- Shadow: `shadow`, `shadow-sm`, `shadow-lg`
- Rounded: `rounded`

Images with non-equal heights may cause a jump effect. Here's the call for a smooth transition: `$('.carousel').on('slide.bs.carousel', function (event) { var height = $(event.relatedTarget).height(); var $innerCarousel = $(event.target).find('.carousel-inner'); $innerCarousel.animate({ height: height }); });`

##### Mountains, Nature Collection

##### Freedom, Sea Collection

##### Living the Dream, Lost Island

## Forms

Options

- Rounded: `input-round`

Inline Form

Sign Up Form

We'll never share your email with anyone else.
Check me out

Contact Form

## Icons

Anchor UI Kit comes with latest Font Awesome, the web’s most popular icon set and toolkit. Here are all the available icons.

Simple Icon Options

- Color: `text-*color`
- Size: `fa-2x`, `fa-3x`

Bordered Icon Options

- Color: `text-*color`
- Size: `iconsmall`, `iconmedium`, `iconlarge`
- Circle: `rounded-circle`
- Shadow: `shadow`, `shadow-sm`, `shadow-lg`

Background Fill Icon Options

- Background: `bg-*color`
- Size: `iconsmall`, `iconmedium`, `iconlarge`
- Circle: `rounded-circle`
- Shadow: `shadow`, `shadow-sm`, `shadow-lg`

Bordered Icons:

Background Icons:

## Modals

### Basic Modal

Do not keep silent when your own ideas and values are being attacked. If a dictatorship ever comes to this country, it will be by the fault of those who keep silent.

You can add any HTML in the body.

## Pagination

## Popovers

Options:

- Placement: `data-placement="top/right/bottom/left"`

Call: `$(function () { $('[data-toggle="popover"]').popover() }) $('.popover-dismiss').popover({ trigger: 'focus' })`

#### Click me

On Top On Right On Bottom On Left

## Table

# | First | Last | Handle
--- | --- | --- | ---
1 | Mark | Otto | @mdo
2 | Jacob | Thornton | @fat
3 | Larry | the Bird | @twitter

## Tooltips

Options:

- Placement: `data-placement="top/right/bottom/left"`

Call: `$(function () { $('[data-toggle="tooltip"]').tooltip() })`