Style Guide

An overview of the main style elements available in the builder.

Colors

Brand

Primary

Secondary

Accent

Backgrounds

BG Primary

BG Secondary

BG Dark

BG Dark Accent

auxiliary

Border

Shadow

Overlay

Hover

Contextual

Info

Info Inverse

Success

Success Inverse

Danger

Danger Inverse

Warning

Warning Inverse

Text Colors

Text Color Default

Title Color

Subtitle

Text Inverse

Title Inverse

Typography

Headers

Headline H1

Headline H2

Headline H3

Headline H4

Headline H5
Headline H6

Header H1

Header H2

Header H3

Header H4

Header H5
Header H6

BORDERED: Use the "border" helper classes to set border to element. 

Header Bordered

SPACING: Use the "margin" and "padding" helper classes to set custom spacing to element. 

Header Bordered

BASE: To use a Section Header simply assign the "section-header" class to the container of a h1, h2 ... h6 elements.

Section Header H1

Section Header H2

Section Header H3

Section Header H4

Section Header H5
Section Header H6

ALIGNMENT: Use the "text-left / center / right" helper classes along with the "section-header" class to change element text-align. 


Header Left
Header Center
Header Right

BORDERED: Use the "border" helper classes along with the "section-header" class to set border to element. 


Header Left
Header Center
Header Right
Paragraph

Lorem ipsum dolor sit amet, conpsecteqtur adipiscing elit. Pellentesque id gravida tellus, non placerat lacus. Sed et erat suscipit, fringilla tellus quis, malesuada sapien. Nulla tempor ullamcorper nisi, sed condimentum urna feugiat ut.

INLINE TEXT ELEMENTS

Links are used to connect web pages.

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

Variables: y = mx + b

To switch directories, type ctrl + , followed by the name of the directory.

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

You can use the mark tag to highlight text.

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

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

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

This line of text will render as underlined

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

This line rendered as bold text.

This line rendered as italicized text.

Blockquotes
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Someone famous in Source Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Someone famous in Source Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Someone famous in Source Title
Pre
<pre>...</pre>
<blockquote>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 <small class="source">Someone Author</small>
</blockquote>
Pre + Code
<pre><code>...</code></pre>
<blockquote>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 <small class="source">Someone Author</small>
</blockquote>

Badges

Lorem ipsum dolor sit amet, conpsecteqtur adipiscing elit. Pellentesque id gravida tellus, non placerat lacus. Sed et erat suscipit, fringilla tellus quis, malesuada sapien. Nulla tempor ullamcorper nisi, sed condimentum urna feugiat ut. Phasellus ut mattis justo. Fusce quis mattis ante. Aliquam id eleifend nibh. Quisque sed erat rhoncus, finibus urna at, congue tellus. Pellentesque ultrices urna orci, ut sollicitudin sapien viverra ac.

text <span class="badge">text</span>


Note: Use utility classes to assign colors to badges.
text <span class="badge bg-primary text-inverse">text</span>

Buttons

PRESET: DEFAULT
PRESET: Pill
PRESET: Circle
Important:

Button presets are for defining sizes and shapes, not colors. As they can be used in many colors it is important to remember that the presets are global. Thus, whenever you change the color of a button, you must select the preset to assign the format to, then select preset "none" to edit it without affecting preset settings.

 

So how do you individually customize a item that uses a preset?

  1. Select preset to select format
  2. Change back to "None" and see that the format will be kept
  3. Now it is possible to change the button individually based on a preset

Even so, it is important to note that this button will not be affected if a preset is changed.

Collapse

Preset: Default

Etiam tincidunt lacus vitae accumsan commodo. Nulla sed magna ullamcorper, vestibulum nibh non, varius sapien. Praesent cursus suscipit semper. Nullam varius erat lectus, ut pulvinar ipsum dignissim quis. Phasellus ut mattis justo. Fusce quis mattis ante.

Phasellus ut mattis justo. Fusce quis mattis ante. Aliquam id eleifend nibh. Quisque sed erat rhoncus, finibus urna at, congue tellus. Pellentesque ultrices urna orci, ut sollicitudin sapien viverra ac.

Preset: Primary

Etiam tincidunt lacus vitae accumsan commodo. Nulla sed magna ullamcorper, vestibulum nibh non, varius sapien. Praesent cursus suscipit semper. Nullam varius erat lectus, ut pulvinar ipsum dignissim quis. Phasellus ut mattis justo. Fusce quis mattis ante.

Phasellus ut mattis justo. Fusce quis mattis ante. Aliquam id eleifend nibh. Quisque sed erat rhoncus, finibus urna at, congue tellus. Pellentesque ultrices urna orci, ut sollicitudin sapien viverra ac.

Tabs

PRESET: Primary Top (default)

Etiam tincidunt lacus vitae accumsan commodo. Nulla sed magna ullamcorper, vestibulum nibh non, varius sapien. Praesent cursus suscipit semper. Nullam varius erat lectus, ut pulvinar ipsum dignissim quis. Phasellus ut mattis justo. Fusce quis mattis ante.

PRESET: Primary Left

Etiam tincidunt lacus vitae accumsan commodo. Nulla sed magna ullamcorper, vestibulum nibh non, varius sapien. Praesent cursus suscipit semper. Nullam varius erat lectus, ut pulvinar ipsum dignissim quis. Phasellus ut mattis justo. Fusce quis mattis ante.

Etiam tincidunt lacus vitae accumsan commodo. Nulla sed magna ullamcorper, vestibulum nibh non, varius sapien. Praesent cursus suscipit semper.

PRESET: Primary Right

Etiam tincidunt lacus vitae accumsan commodo. Nulla sed magna ullamcorper, vestibulum nibh non, varius sapien. Praesent cursus suscipit semper. Nullam varius erat lectus, ut pulvinar ipsum dignissim quis. Phasellus ut mattis justo. Fusce quis mattis ante.

PRESET: Secondary Top

Etiam tincidunt lacus vitae accumsan commodo. Nulla sed magna ullamcorper, vestibulum nibh non, varius sapien. Praesent cursus suscipit semper. Nullam varius erat lectus, ut pulvinar ipsum dignissim quis. Phasellus ut mattis justo.

PRESET: Secondary Left

Etiam tincidunt lacus vitae accumsan commodo. Nulla sed magna ullamcorper, vestibulum nibh non, varius sapien. Praesent cursus suscipit semper. Nullam varius erat lectus, ut pulvinar ipsum dignissim quis. Phasellus ut mattis justo. Fusce quis mattis ante.

PRESET: Secondary Right

Etiam tincidunt lacus vitae accumsan commodo. Nulla sed magna ullamcorper, vestibulum nibh non, varius sapien. Praesent cursus suscipit semper. Nullam varius erat lectus, ut pulvinar ipsum dignissim quis. Phasellus ut mattis justo. Fusce quis mattis ante.

PRESETS - Custom Formats

These are predefined formats that can be set as default for a plugin.
To create a preset just edit the item, select the preset option and click add. However, it is very important to note that when we use a preset, its presets are global, that is, if you change a button defined with a preset, all others that are configured with the same preset will be changed as well.

 

So how do you individually customize a item that uses a preset?

 

  1. Select preset to select format
  2. Change back to "None" and see that the format will be kept
  3. Now it is possible to change the button individually based on a preset

Even so, it is important to note that this button will not be affected if a preset is changed.

Utility Classes

BLOG APP

Auxiliary classes for Blog App

Single Post Layout

.hide-image-intro

Hides the main image on the publication page. View image only in post listings.

Post List

.hide-first-item

Hides the first image from the post list.

.hide-first-2-item

Hides the first two images from the post list.

.hide-first-3-item

Hides the first three images from the post list.

.hide-first-4-item

Hides the first four images from the post list.

Posts List - Classic Layout

.image-to-right

Position the image on the right side.

.list-bordered

Show a border between items

.list-bordered.dashed

Set border style as Dashed

.list-bordered.dotted

Set border style as Dotted

BASE CLASSES

Auxiliary classes for any elements

Text Colors

.text-primary

Etiam tincidunt lacus vitae accumsan commodo. Nulla sed magna ullamcorper, vestibulum nibh non, varius sapien.

.text-secondary

Etiam tincidunt lacus vitae accumsan commodo. Nulla sed magna ullamcorper, vestibulum nibh non, varius sapien.

.text-accent

Etiam tincidunt lacus vitae accumsan commodo. Nulla sed magna ullamcorper, vestibulum nibh non, varius sapien.

.text-success

Etiam tincidunt lacus vitae accumsan commodo. Nulla sed magna ullamcorper, vestibulum nibh non, varius sapien.

.text-danger

Etiam tincidunt lacus vitae accumsan commodo. Nulla sed magna ullamcorper, vestibulum nibh non, varius sapien.

.text-muted

Etiam tincidunt lacus vitae accumsan commodo. Nulla sed magna ullamcorper, vestibulum nibh non, varius sapien.

.text-inverse

Etiam tincidunt lacus vitae accumsan commodo. Nulla sed magna ullamcorper, vestibulum nibh non, varius sapien.

.title-inverse

Etiam tincidunt lacus vitae accumsan commodo. Nulla sed magna ullamcorper, vestibulum nibh non, varius sapien.

Text Size

.text-xs, .small
<small>

Text Extra Small - 80%

Line Height: 1.3

Etiam tincidunt lacus vitae accumsan commodo. Nulla sed magna ullamcorper.

Praesent cursus suscipit semper. Nullam varius erat lectus, ut pulvinar ipsum dignissim quis.

Etiam tincidunt lacus vitae Phasellus ut mattis justo. Fusce quis mattis ante.

.text-sm

Text Small - 90%

Line Height: 1.3

Etiam tincidunt lacus vitae accumsan commodo. Nulla sed magna ullamcorper, vestibulum nibh non, varius sapien.

.text-md

Text Medium - 100%

Line Height: 1.3

Etiam tincidunt lacus vitae accumsan commodo. Nulla sed magna ullamcorper, vestibulum nibh non, varius sapien.

.text-lg
<big>

Text Large - 125%

Line Height: 1.3

Etiam tincidunt lacus vitae accumsan commodo.

Nulla sed magna ullamcorper, vestibulum nibh non, varius sapien.

.text-xl

Text Extra Large - 150%

Line Height: 1.3

Etiam tincidunt lacus vitae accumsan commodo. Nulla sed magna ullamcorper, vestibulum nibh non, varius sapien.

Text Alignment

.text-left

Left Alignment

Etiam tincidunt lacus vitae accumsan commodo. Nulla sed magna ullamcorper, vestibulum nibh non, varius sapien.

.text-center

Center Alignment

Etiam tincidunt lacus vitae accumsan commodo. Nulla sed magna ullamcorper, vestibulum nibh non, varius sapien.

.text-right

Right Alignment

Etiam tincidunt lacus vitae accumsan commodo. Nulla sed magna ullamcorper, vestibulum nibh non, varius sapien.

.text-justify

Justified Alignment

Etiam tincidunt lacus vitae accumsan commodo. Nulla sed magna ullamcorper, vestibulum nibh non, varius sapien. Praesent cursus suscipit semper. Nullam varius erat lectus, ut pulvinar ipsum dignissim quis. Phasellus ut mattis justo. Fusce quis mattis ante.

Text Transform

.text-uppercase

Uppercase

.text-lowercase

Lowercase

.text-capitalize

capitalize (set uppercase in first character)

Font Weight

.font-weight-bold

Etiam tincidunt lacus vitae accumsan commodo.

.font-weight-normal

Etiam tincidunt lacus vitae accumsan commodo.

Margin

.margin

Set default space as margin on all sides

.margin-sm

Set small space as margin on all sides

.margin-lg

Set large space as margin on all sides

.no-margin

Remove margin on all sides

Options

To set the margin at specific corners use the suffixes: top, right, bottom, left.

Ex: margin-top / margin-sm-bottom / margin-lg-left / no-margin-bottom

Padding

.padding

Set default space as padding on all sides

.padding-sm

Set small space as padding on all sides

.padding-lg

Set large space as padding on all sides

.no-padding

Remove padding on all sides

Options

To set the padding at specific corners use the suffixes: top, right, bottom, left.

Ex: padding-top / padding-sm-bottom / padding-lg-left / no-padding-bottom

BORDER

.border

Borders on all sides


.border-top

Border on top of element


.border-right

Right side border of element


.border-bottom

Border at bottom of element


.border-left

Border on left side of element


.no-border

Remove border on all side of element


Options

To remove border at specific corners use the suffixes: top, right, bottom, left.

Ex: no-border-top / no-border-right / no-border-bottom/ no-border-left

.border-primary

Border in primary color


.border-secondary

Border in secondary color


.border-accent

Border in accent color


.border-info

Border in info color


.border-success

Border in success color


.border-danger

Border in danger color


.border-warning

Border in warning color


BORDER Radius

.squared

.rounded-sm

.rounded-md

.rounded-lg

.rounded-xl

.rounded-pill

.rounded-circle

.rounded default

The default rounding is based on one of the available rounding (0, sm, md, lg, xl). It serves to set the default of items such as buttons, form fields, and more.

Background Color

.bg-primary

.bg-secondary

.bg-accent

.bg-body

.bg-light

.bg-dark

.bg-dark-accent

.bg-info

.bg-info-inverse

.bg-success

.bg-success-inverse

.bg-danger

.bg-danger-inverse

.bg-warning

.bg-warning-inverse