Style Guide For Custom Apps

The style guide helps you through the process of developing a custom app in your HTML format and making the widget visible. It allows you to add some styles to your HTML.

Checkout this video for more details.

Limitations

1. Only supported HTML tags and attributes can be added.
2. Inline CSS and JavaScript are no longer supported.
3. Only links are supported as interactive elements.

Supported HTML tags and attributes

The HTML tags and attributes listed in the following are supported by the custom app.

Supported classes

Only the classes listed in the following are supported by the custom app.

Paragraph

The <p> tag can be used to construct a simple paragraph, as demonstrated in the following image.

Sample code

<h6>Paragraph</h6>

<p>A paragraph is a sentence or a group of sentences that supports one central, unified idea.</p>

Hyperlink

The <a> tag can be used to create an actionable link. You can use this link to navigate to another page on the BoldDesk.

1. HTTPS URLs are alone permitted in the href attribute. If the URL is incorrect, the full <a> tag is erased.
2. Only the _blank value is permitted in the target attribute. Target=” blank” is added by default to all <a> tags.
3. Only noreferrer noopener values are permitted in the rel attribute. All <a> tags have srel=”noreferrer noopener” by default.

Sample code

<h6>Links</h6>
 

<a href="https://www.bolddesk.com" target="_blank" rel="noreferrer noopener">Click Here</a>

Text color

Using predefined CSS classes, the color of the text can be changed in your HTML.

Sample code

<h6>Text colors</h6>
<p class="white bg-gray">This is white text</p>
<p class="gray">This is gray text</p>
<p class="black">This is black text</p>
<p class="red">This is red text</p>
<p class="green">This is green text</p>
<p class="blue">This is blue text</p>

Background color

The color of the backdrop can be altered in your HTML by using the predefined CSS classes.

Sample code

<h6>Background colors</h6>
<p class="bg-white">This is white background</p>
<p class="bg-gray white ">This is gray background</p>
<p class="bg-red white ">This is red background</p>
<p class="bg-green white ">This is green background</p>
<p class="bg-blue white ">This is blue background</p>

Font size

The font size can be changed in your HTML using the predefined CSS classes.

Sample code

<h6>Font size</h6>
<p class="font-12">Font size is 12px</p>
<p class="font-13">Font size is 13px</p>
<p class="font-14">Font size is 14px</p>
<p class="font-15">Font size is 15px</p>
<p class="font-16">Font size is 16px</p>

Badges

A single badge class is supported, which creates a square badge.

Sample code

<h6>Badges</h6>
<p>News <span class="bd-badge white bg-green">6</span></p>
<p>Comments <span class="bd-badge white bg-red">8</span></p>
<p><span class="bd-badge white bg-blue">Primary</span></p>
<p><span class="bd-badge white bg-gray">Secondary</span></p>
<p><span class="bd-badge white bg-green">Success</span></p>
<p><span class="bd-badge white bg-red">Danger</span></p>

Horizontal separator

The horizontal-separator class can be used to add a horizontal line with 1px, black color, and spacing.

Sample code

<h6>Horizontal line</h6>
<div class="horizontal-separator"></div>
<p>This text will be followed by a horizontal line</p>

Disabled text

The HTML element can be disabled using the disable class

sample code

<h6>Text formatting</h6>
<p class="disable">Disabled text</p>
<p>Normal text</p>

Width

The width class can be used to specify the width in your HTML.

Sample code

<h6>Width</h6>
<p class="bg-gray white width-100">The width of this element is 100%.</p>
<p class="bg-gray white width-75">The width of this element is 75%.</p>
<p class="bg-gray white width-50">The width of this element is 50%.</p>
<p class="bg-gray white width-25">The width of this element is 25%.</p>

No margin

To set the margin to zero, use the no-margin class.

Sample code

<h6>Margins</h6>
<p class="no-margin">I have 0px margin on all sides.</p>

List

Use bd-list and bd-list-item to display a collection of related objects in a list.

Sample code

<h6>Customer list</h6>
<ul class="bd-list">
    <li class="bd-list-item">John</li>
    <li class="bd-list-item">Mathew</li>
    <li class="bd-list-item">Peter</li>
    <li class="bd-list-item">Parker</li>
</ul>

Bullet list

Use bd-list, bd-list-item, and bd-bullet to display a collection of related objects in a bullet order list.

Sample code

<h6>Customer list</h6>
<ul class="bd-list">
    <li class="bd-list-item bd-bullet">John</li>
    <li class="bd-list-item bd-bullet">Mathew</li>
    <li class="bd-list-item bd-bullet">Peter</li>
    <li class="bd-list-item bd-bullet">Parker</li>
</ul>

Circle bullet list

Use bd-list, bd-list-item, and bd-bullet-circle to display a collection of related objects in a circle order list.

Sample code

<h6>Customer list</h6>
<ul class="bd-list">
    <li class="bd-list-item bd-bullet-circle">John</li>
    <li class="bd-list-item bd-bullet-circle">Mathew</li>
    <li class="bd-list-item bd-bullet-circle">Peter</li>
    <li class="bd-list-item bd-bullet-circle">Parker</li>
</ul>

Square bullet list

Use bd-list, bd-list-item, and bd-bullet-square to display a collection of related objects in a square order list.

Sample code

<h6>Customer list</h6>
<ul class="bd-list">
    <li class="bd-list-item bd-bullet-square">John</li>
    <li class="bd-list-item bd-bullet-square">Mathew</li>
    <li class="bd-list-item bd-bullet-square">Peter</li>
    <li class="bd-list-item bd-bullet-square">Parker</li>
</ul>

Number list

Use bd-list, bd-list-item, and bd-number-list to display a collection of related objects in a number order list.

Sample code

<h6>Customer list</h6>
<ol class="bd-list">
    <li class="bd-list-item bd-number-list">John</li>
    <li class="bd-list-item bd-number-list">Mathew</li>
    <li class="bd-list-item bd-number-list">Peter</li>
    <li class="bd-list-item bd-number-list">Parker</li>
</ol>

Collapsible section

The collapsible section can be created as demonstrated in the following images.

After expanded,

Sample code

<div class="bd-accordion-wrapper">
    <div class="bd-accordion">
        <input type="checkbox" id="acc-1" />
        <label class="bd-accordion-title" for="acc-1">Customer list</label>
        <div class="horizontal-separator"></div>
        <div class="bd-accordion-content">
            <ul class="bd-list">
                <li class="bd-list-item bd-bullet">John</li>
                <li class="bd-list-item bd-bullet">Peter</li>
                <li class="bd-list-item bd-bullet">Parker</li>
                <li class="bd-list-item bd-bullet">Mathew</li>
            </ul>
        </div>
    </div>
</div>