Components

Each component explained in detail.

If you read the Structure documentation up until this point you will know that you can easily integrate components just by copy pasting them inside your page-content.

All components, unless specifically mentioned must be placed inside the page-content. Whenever a component requires a part of it to be placed outside the page-content, we will add a warning so you will know this requires a bit of attention. Not placing them in the correct place can lead to components not working properly.

TIP: Copy and Paste Components from the Sample Files included.

To use components as easy as possible, each component is written in a separate page, and added in it's own card.

We strongly recommend you take copy and paste each component from the .html file you want into your pages, and read this documentation for your desired component to understand how to customize it even more.

We will explain each component and how to use it, but you will see them even better while using the samples provided.

Missing Components in Documentation?

There are some components we didn't add here, for example, the typography page. These are elements that are simply copy and paste and really don't need any extra explanations. However, if you do not understand something, regardless how small it is, please don't hesitate to contact us. We are always here to assist!

Main Card Style

Unless you are using a special card design from the one in the pack, most elements are inserted into cards.
These cards are made to create the nice, rounded and shadow effect, and also to create the margins around the elements inside the card.

This is the default card structure.
Line 1 defines the div as a card. Adding card-style will create the rounded borders and shadows and also leave a margin between it and the edges
Line 2 is the content. This will create a margin inside the card itself, to keep things

Notice that we have a UTILITY_SPACING space left in the content. This can be used to add utilities as mentioned in the structure documentation for adjusting the space between the content and the card. For example, let's say you want to have no margin bottom for your content, then you would simply add mb-0 instead of UTILITY_SPACING. You can use any spacing property here as explained by us in the Structure Utility Classes Chapter ( click to view ) or as explained by Bootstrap Spacing Utility chapter.

There are more card styles, but we will get to those in the following chapters. We used this intro so we can explain the basic element you will most often use.

Accordions

Built using the Bootstrap Collapse System - Read more on Bootstrap Collapse Documentation

We will explain each accordion we have in our component-accordions.html page in part, but please check the page as well and use the component by copy pasting it from there and using this documentation as a guideline.

Accordion Cards

This card works on the same principle as the classic card, but, the button is now a Background Card, as explained in the cards chapter to follow.

Action Sheets & Modals

Custom built for beautiful effects and interactivity.

The Action Sheet box must be placed outside the page-content

The action sheets function on the Menu principle described in the Menu Structure in the Structure Documentation ( click ) These are in essence simple bottom, top or modal placed menus that get triggered by any button on the screen.

You can place any content you want inside action sheets, give them effects, and place them at the top, bottom or make them modal. Please check the Menu Structure to understand how to use these. After you understand how to trigger them, just copy and paste or build any component inside them, treating them as a individual entity.

Ads

Built and designed using better ad standards.

Ads can be placed inside the page content if the are not fixed or timed. For example, the most popular ads on mobile devices are the 300x50 and 300x250 banners. These can be created by adding the following code inside the page-content whenever you need them

Ad 300x50 - in Content

Ad 300x250 - in Contnet

These are classic boxes that are not fixed, and can be added in between the content area.

Sticky/Fixed 300x50 Ads

The following DIV must be placed outside the page-content

This ad will stay fixed above the footer bar.

Show on Scroll Ads

The following DIV must be placed outside the page-content

This add will appear when you are scrolling, but hide at the top and bottom of the page. This can be found inside component-fixed-ads.html

Timed Ads

The code below can be placed anywhere, but the Action Modal for the ad must be placed outside the page content.

The ad time box itself is simply a modal menu, that is triggered by the above code. The data-timed-ad will represent the timeout until the close button is visible. Please check the component-ad-timed.html to see the modal windows for these ads. Simply copy paste them and replace the content inside with your own.

Automatically triggering timed ads.

You can also trigger a timed ad automatically, by adding the following parameter to the code above

The data auto-show-ad is represented in seconds and will automatically show the ad in 10 seconds. To add this to the page without a button being visible, simply add an empty a href="#" with this data and don't add any color to it. Keep it somewhere on the page.

Back to Top

A simple and useful component

Back to Top badge must be outside the page-content

To use the Back to Top components, simply open component-back-to-top, and take the HTML code you wish for the badge you want and copy it outside the page-content. The code will handle the rest and will hide and show when it's needed.

Breadcrumbs

Navigation depth and returning.

This feature works using the Bootstrap default Breadcrumb component added inside the card. This feature has been requrested by many of our customers in the past. We must warn, that based on Mobile UX standards, your flow should never be so deep that it requires a breadcrumb. Use this component only where it's necessary.

Buttons and Icons

The default Bootstrap Buttons will work perfectly, this is just an enhanced style of the Bootstrap System

The buttons seen in Bootstrap's Documentation are great, but we wanted to give them a more mobile personallity and extend their design to make them look even better. With this being said, you can use any button from Bootstrap, or use the ones found in component-buttons.html

Replace UTLITY_CLASSES_HERE with your utility

Our button class is identical to that of Bootstrap, but, with a few utility classes added, we can extend the beauty of these buttons to limitless power. Add any of the following utility / secondary classes to the buttons you want. You can use multiple utility classes combined.

Control Sizes

• btn-xs
• btn-s
• btn-sm
• btn-m
• btn-l
• btn-xl
• btn-xxl

Placement

• btn-center-s
• btn-center-m
• btn-center-l
• btn-full

Color and Background - View available Colors

• bg-yourColor
• color-yourColor

Font Size, Shadows, Text Transform - View available Utility Classes

Instant Example
Let's say you want to create a medium sized button, that is full width with rounded corners and a large shadow, that uses the background of your page and has a white bolded and uppercased text. As you can see , the code is super simple and intuitive, simply adding the utility you want to give it a new style.

3D Buttons
To use 3D buttons, you have to use 2 bg-colors as a utility class colors. One dark color for the bg parameter and one light color for the border. Also, be sure to add the btn-3d class:

Icons

Icons are pretty much based in the same concept as buttons, the only difference is that icons don't support centering by using an icon class. You can center icons by adding them inside a paragraph and giving that paragraph the class "text-center".
Beside this, the icons are built in the same way. Let's take an example:

Add the class icon, followed by a sizing class, then the background you want. Inside the icon, just place a font-awesome icon

Control Sizes

• icon-xs
• icon-s
• icon-sm
• icon-m
• icon-l
• icon-xl
• icon-xxl

Cards

The most flexible Cards in the World.

Our card/caption system has been called by our customers as simply the best solution for creating incredibly powerful cards, while at the same time giving you incredible flexibility. The classic Bootstrap code for cards still applies if you wish to use their designs.
What we did, is take their code, and slightly enhance it to make it even better than it already is, by adding options for custom backgrounds, images, lazy loading, rounded borders, shadows, and much, much more.

Using cards, you can create any style of caption you want, in less than 5 minutes. These are incredibly powerful, and we'll explain each part.

Pages built using cards

• Logins & Registers
• Splash and Walkthroughs
• Event Cards
• About Us Page
• ... and more

There are 2 types of cards. The classic "Expanding Card", that expands depending on the content inside, and the "Height Control" card where you can use extra flexibility in their content.

Carousels

Slide anything. -> More about our carousel on https://splidejs.com/

For the carousel we're using a pure Vanilla JavaScript slider called Splide. This is one of the most powerful, flexible and most performant sliders out there that has no dependancy requirements. Please do not update the splide script without first getting in touch with us. We've made it in such fashion that the slider is more powerful and less memory hungy, therefore increasing performance even on lower end devices.

Developer Notes: For the full API of the slider, please visit this page -> https://splidejs.com/category/users-guide/

Examples:

Please open your components-carousles.html or component-sliders.html (names can varry) and check the provided examples. We always shwocase all possible options in that page. However, let's explain the basic structure of a carousel, so we can detail a few elements.

Code Explained

Although the code above is a bit larger than it's jQuery counterpart, it's fundamental structure is vital for use in Vanilla JavaScript as mentioned here -> https://splidejs.com/structure/. Let's explain step by step. The above code is the base for any slider, you can just copy and paste the code and update the values in line 1 as explained below

• Line 1: is the beginning of the slider div. This will define our slider type, arrows and dots. Replace the following classes seen on line one with the slider you want to use.
  
  • SLIDER-TYPE - Set the number of slides per view. Replace SLIDER-TYPE with either single-slider or double-slider or tripple-slider
    
  • ARROW-OPTIONS - Enable or disable the arrows of the slider. Replace with slider-no-arrows to hide the arrows or slider-has-arrows to show arrows.
    
  DOTS-OPTIONS - Enable or disable the dots under the slider. Replace with slider-no-dots to hide the dots or slider-has-dots to show dots.
  
  • UNIQUE-SLIDER-ID-1 - You must give each slider you have on your page a unique ID. Be sure that your sliders have a unique ID. Giving your slider the same ID will cause errors and the sliders will be disabled. Please be sure you give each slider a UNIQUE ID!
• Line 2 is the track. This is where the arrows and dots and controls are added to the slider and hidden until requrested. This element also has the purpose of setting a relative position to the inner elements. It is a required line
• Line 3 is the list of slides. Inside of this, you can add your individual items.
• Line 4 to Line 6is a single slide. The class name is necessary. Add anything you want inside here, and duplicate these lines to create more slides.

You can use single-slider to generate a slider that will have only 1 slide per view, or double-slider which will generate a slider that will have 2 slides per view. And tripple-slider that will have 3 slides per view. In our example, we used Fixed Height Cards to create the beautiful sliders you see throuhgout our page. These allow control over where the text is added and also support the Utility Classes for shadows, rounded borders, background colors, gradients and everything you can attach to a card.
To create a full height slider or a walkthrough slider, this must be combined with cards that have the data-card-height="cover"

<!-- Place the content or cards or images you want here this is a slide -->
This is the main area of your carousel. Regardless if you use a double-slider, single-slider or cover slider, each individual slide must be in it's own separate div. This means for example you can't start writing a heading, a paragraph and a button and expect the slider to know this is a slide. These must be wrapped in individual divs. In this area, the cards are the most useful component you can use. We recommend using Fixed Height Cards as these will give you the best control over the slider size and over each individual slide text element and image.

Please refer to the component-carousels.html page for more, and let us know if you have any issues, we'll gladly help out.

Charts and Graphs

Powered by charts.js - the best chart plugin system.

Charts.js offers the absolute best chart system in the world. You can see the JavaScript required to generate these in the custom.js file by searching (CTRL+F Windows or CMD +F Mac) for charts.
The codes there can be adapted for your use, and a full documentation on how to create your own charts and create simply insanely powereful solutions can be found on

Charts.JS - https://www.chartjs.org/docs/latest/ - Official Documentation

Chips

Small pieces of information

Chips are great for showing a tiny button that can house a small piece of information with an icon or an image. Check the component-chips.html page. These elements are self explanatory, and only require you to copy and paste them.

You can deploy menus from chips by using the data-menu attribute, or anyother snackbar or toast or collapsible as long as you follow the trigger structure mentioned in each chapter.

Collapse

Built using the Bootstrap Collapse System - Read more on Bootstrap Collapse Documentation

Collapsible elements are designed to house lists of links. These are super useful when you have a lot of listed information available for a single subject. In our example, inside component-collapse.html, we simply created a list group, and added the logic of Bootstrap 5 collapse. You can do the same by following the next logic

Any element can be made collapsible, as long as you have the data-bs-toggle="collapse" on the trigger, and the class collapse on what will be shown when pressing the trigger and make sure your href="UNIQUE_NAME" on the trigger is identical to the id="UNIQUE_NAME" on the element that will be shown when pressing the trigger.

For more advanced uses, please check the Bootstrap Collapse Documentation

Columns

Built using the Bootstrap Columns System - Read more on Bootstrap Columns Documentation

Our entire column system is based entirely on the Bootstrap system. Remember, our products are Mobile Templates, so we highly recommend that you don't exceed 4 columns, since Mobile screens start from about 340px, and having more than 4 columns can lead to text being broken.

This system is also applied for Gallery thumbnails, profile galleries. You can view demos of the columns inside the component-columns.html

Read more on Bootstrap Columns Documentation

Device Detection

Serve content based on Android, iOS or none of these devices.

To show different content for different operating systems the process is incredibly simple. All you have to do is add the class show-android to show for Android devices, or show-ios to show on iOS devices. You can also add the class show-no-device to show only for devices that aren't Android or iOS

Disqus and Facebook

Integrating Comment Systems

If you visit the component-disqus-comments.html or component-facebook-comments.html you will find that these systems are integrated by the embed codes provided by Facebook or Diqus.

How to Embed Facebook Comments - https://developers.facebook.com/docs/plugins/embedded-comments/
How to Embed Disqus Comments - https://blog.disqus.com/how-to-embed-disqus-comments-on-your-website

Dividers

Separating Content Elements.

Dividers serve the purpose of leaving a bit of space between your content elements. These are very simple to use and integrate in your page. Dividers can use the ultility classes for background colors by attaching the class bg-VALUE, and you can find the colors available in the Utility Colors Chapter

Dividers are very self explanatory little pieces of code you can find in the component-dividers.html page. If you use a divider and wish it to be full width simply use the divider bg-VLAUE class. If you want your divider to have the same left and right margin as your content, simply add divider-margins as a utility class.

Embeds and Embedly

Embed any content in your site.

There are two main methods to embed content in our product. One and the most classic known is by copying the embed HTML code.

The classic embed code above will automatically make the iframe responsive on Mobile Devices. Simply copy your iframe inside the div, and remove the width and height parameters that the iframe embed comes with.

Enter Embedly - Embed anything!

The component-embedly.html uses the most advanced embed system in the world at the moment available to HTML sites. Embedly generates an embed code for most websites you throw at it. You can simply visit https://embed.ly/code to generate an embed code and then copy it in the page.

File Upload - Web API

Upload and decode images using Web API's .

The file upload API allows you to upload images and decript their value, when they were taken, modified, size and file name. This is only a front-end element that can be found inside custom.js by searching (CTRL+F windows / CMD+F mac) for "upload-file" to find the JS behind it. You can use your own code logic to Programmatically adapt the JS for your needs.

By default, this component is found in component-file-upload.html, and you can use only the file-data div to use only the upload file input or use the upload-file-data under this as well to get the list information about what the image contains once the user uploads it.

You can learn more about the File Web API here - https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications

Geo Location - Web API

Get device approximate location.

The GeoLocation available to websites uses WebAPI, which triangulates based on WiFi and Cellular towers. This does not give full access to the internal device GPS like a native application would, meaning, the location outputed will not be 100% accurate. To get the device location, you will simply have to add get-location class to a button, and add a empty div or paragraph with the class location-coordinates

To output the location on a map, simply embed a responsive map, with any location you want and give it the class location-map.

Once the user taps the get-location button, they will be prompted to approve this ( which is mandatory and cannot be removed ). Once they approve this, the coordinates will be tracked and outputed to the location-coordinates element. If you use a map as well, our code will automatically add these coordinates to the map.

Inputs

Built using the Bootstrap Input System - Read more on Bootstrap Input Documentation.

Beside the classic inputs offered by Bootstrap, we created a few styles to complement the existing design found in our product. These are easy to use and you can simply copy paste them from the input-components.html. However, there are a few things to note.

How do I use these inputs?

Simply open component-inputs.html and copy and paste them in the form you want. The same applies to the checkboxes and radio buttons included.

What options are there?

You can replace:
OPTION-1 with has-borders or no-borders
OPTION-2 with has-icon or no-icon. If you select no-icon you must delete Line 2
VALIDATE-FIELD - if you don't want field validation, be sure you delete this attribute and also the validate-attribute on line 3. When using the fields without validation, lines 5 to 7 must also be deleted.

How are these validated?

We use regular expressions (RegEX) to validate the fields. With this being said, in case you require a more extensive plugin for validation, you can include any jQuery plugin you want by following the How do I add my own JavaScript code developer note.

Images

Preloading and styling your img

The image tag supports LazyLoad preloading to make it show after the other more important parts of the page are loaded. This is used to improve page speed and is recommended to be used wherever possible.

This should be the standard structure when you are preloading an image.
Class: img-fluid - is to be used when you want your image to maintain aspect ratio and expand to the full size of the container it's placed in.
Class: preload-img - is the class you should add to tell the code that this image will be preloaded.

Attribute: src="images/empty" - will be loaded by default when your page loads, this should be a very, very small image.
Attribute: data-src="image.png" - will be the actual image that will be loaded once your page finishes loading important elements.

You can style your images further by using the Utility Classes to make your images round, and more.

Link Lists / Groups

Built using the Bootstrap List Groups System - Read more on Bootstrap List Groups Documentation.

List groups from Bootstrap can be used as shown in the documentation example link above. However, to keep the design of our product more in theme with its style, you can use the examples below. These use the same class architecture as bootstrap, but offer more design features, and are also compatible with switches.

Creating a List Group / Link List

A link list is a list of items that include a single line of text or a secondary description line with an icon to the left and right side. These are super simple to use and support the utility classes for colors and also support badges and switches.

The above code will generate a list group, let's dive in the code and explain it line by line.

Line 1 defines this as being a list group and also, defines its size. You can replace the SIZE_VALUE with small or large. If you select the size as being large, then, you can use lines 5, 11,18,25. Otherwise, delete these lines. These are the second line of text in the case of large lists, like we use in our demo in the component list.

Lines 2 to 7 generate a list, with a colored icon. - the icon is part of the font-awesome group, and uses the color-VALUE found in the Utility Colors chapter. The last icon in this case is a simple arrow to the right side. This icon must be kept in all styles.

Lines 8 to 14 and 15 to 21 The same principle as the first group applies here, with the exception of the icon, which now has utility classes for rounded borders and the badge. The badge is a smple span class with a background color and a font size. This can be used to showcase a price, the fact that it's new, hot or other useful tiny messages

Lines 22 to 31 Works on the same principle as the previous ones, with an exception that we have inserted a switch in it. You can learn all about switches in the Switches chapter. The switch will be triggerable by the list as well by using the "data-trigger="unique-number" that will corespond to the switch input id.

For a better understanding of the list groups, simply check the component-link-lists.html, where all of these are exemplified. We also use these to list the pages and the components, so you can view live use cases for them as well.

Notifications & Alerts.

Alerts using the Bootstrap Alerts System - Read more on Bootstrap Alerts Documentation.
Notification boxes using the Bootstrap Toast System - Read more on Bootstrap Toasts Documentation

Classic Alerts

Using the default alerts of Boostrap means you can use any of the examples shown in the component-notifications.html, which include a span for an icon that can have any font awesome icon included in the pack. Also, you can view more examples of alerts on https://getbootstrap.com/docs/5.0/components/alerts/

Dropdown Notifications

The notification that dropdown from the top must be placed outside the page-content

Each notification that comes from the top of the page is placed outside the page content of the component-notifications.html page. These are designed to mimic the design of their mobile counterparts. Let's explain the general code of each these.

General Explanation

This will just explain the general logic of the notification system. Please check after the page-content class is closed in component-notifications.html to view more examples. Each notification includes simple elements inside you can easily modify using the Utility Classes to suit your needs.

Line 1- defines the ID of the notification. This will be used in case you want to trigger the notification from a button on the page. You can trigger it by adding data-toast="notification-1" .Be sure this is always a unique number. This is also used to dismiss the notification from a button, or in our case, if the user taps it.
Line 2- is the data-bs-dissmiss attribute which shares the same unique ID as line 1. This is used if you want to dismiss the notitifcation by tapping it.
Line 3- is the delay. this is how long the notification will be visible on screen before Line 4, if set to true, will hide it back.
Line 5- is the class used for the notification and the background color you wish to use.

What notification types can I use?

You can replace the class NOTIFICATION_TYPE with any of the following styles

• notification-android
• notification-ios
• notification-material

You can also remove this class completely and style your notification however you wish using the Utility Classes. The best way to understand these notifications is simply to copy paste them, and adapt the content to your needs.

Developer Notes

You can use programatic JS deployment for the dropdown notifications by checking the Toast JavaScript Behavior of Boostrap.

Offline Detection.

Automatic process of detecting when you are online/offline

The offline detection system is automatic, and shows a small red or green text depending if you're online or not. These messages can be edited from scripts/pwa.js by searching for (CTRL+F windows or CMD+F mac) for "Offline Alerts"

Preloaders.

Show a loader before your page loads.

The preloader is automatically added to each page using the AJAX transition system and hidden when the page load is completed.

The following code represents the preloader. Inside we have have the spinner-border. You can replace the color of the preloader by replacing color-highlight with any of the colors available in the Utility Colors.

Unlike our competitors who use a preloader just for the sake of having an image to hide their site loading and sometimes this actually shows before the page is loaded, our preloader is added to the window.load event and inside a special function that detects when your page has actually finished downloading and removes the preloader only then.

Developer Note: Preloader isn't disapearing

Possible Cause 1 - If your page shows an infinite preloader loop, you should inspect the console in your browser. This means the JavaScript is not running correctly and the functions that hide the preloader are not firing.

Possible Cause 2 - Preloaders can also not appear if you test in incompatible browsers that don't support CSS3. For example, internet explorer, but in this case we recomemnd using the item for it's intented purpose, as browsers that don't support CSS3 will cause sever problems with any modern code.

QR Generator.

Generate automatic QR Codes based on current link, or manual generation

We are using an API to instantly generate QR codes, so you don't need complicated PHP api's to generate scripts. This can generate ANY qr code by simply using the following structure. Simply copy and paste the code above and replace the ENTER_YOUR_FULL_URL_HERE with your address. Once you've done this save and render the page, the QR will automatically be displayed. The code above will automatically generate a QR code for the address on which the code is added to.

Sharing

Automatic Link Social Sharing

The automatic social sharing feature works great for your website when used in classic website mode. However, if you plan on using the page as a PWA, we still don't have access to API's to pick up the link of where your PWA is saved and share that link directly.

You can share the page where these buttons will be placed automatically by adding the following classes to the buttons you want to trigger sharing.

• shareToFacebook
• shareToTwitter
• shareToLinkedIn
• shareToPinterest
• shareToWhatsApp
• shareToMail

If you want to use or share a pre-defined URL, simply open custom.js and search (CTRL+F win or CMD+F mac) for Now, we must replace the default page link with the page you want to use. Replace the above code with the following/

Search

Understanding the Search Component

Our page uses an actual search system built in front end. If you integrate this with PHP and pre-populate it with data you will have a live, functional search system that can be conencted to a back-end. Of course, in the limit of normal use, in case of stronger needs you will require a custom AJAX solution. But let's dive in our search system.

How does it work?

The search page, in our example, uses a input field for typing your search query, and a result list that will automatically appear if the word matches. Please use the structure for the input fields and the search results box exactly as shown in the item. You can use Utility Classes to change the design, and you can replace the "found" elements with whatever design you wish as long as you keep them wrapped in the div following the code below.

Shown above is a search result. Inside this, you can add any component/element you want and it will be found if the user searches for any of the words inserted in the data-filter-name="your keywords here". Be sure the keywords are written in lowercase letters and separated with a space.

Sidebars

The most advanced Sidebar System on any Mobile Template

The Action Sheet box must be placed outside the page-content

Our sidebars are built to run smoothly, powered by CSS3 transitions, and automatic screen placement.
Unlike other frameworks, including Bootstrap, our code allows you to use any number of sidebars you want, with multiple effects and sizes. These are also not limited to the content inside, so for example, if you want, you can even add a slider inside.

A good example of the power of our sidebar system is the Instant Article page. Which is built entirely using the sidebar system described below.

To begin with, the Sidebars work on the same menu structure explained in the Menu Structure in the first documentation. They are defined as menu-box-right and menu-box-left but support different effects. Let's get into detail.

How to trigger a menu from a button/element

Any menu can be triggered by adding the data-menu="menu-UNIQUE-ID" to any element you want to use as a trigger.

How to Programmatically show/hide a menu

Menus can be triggered Programmatically by adding their ID in the following function in custom.js after line 88.

Menu Structure

First, please check the component-sidebars.html to view these in action. Please note that your menu code must be placed outside the page-content. Line 1 - is the unique name you have to give to your menu. This will be used to trigger the menu using the data-menu="unique-id" or via programatic use.
Line 2 - is the class that defines this as being a menu, and also, the position. Replace MENU_BOX_POSITION with menu-box-left or menu-box-right.
Line 3 - is the width you want for your sidebar. This value is set in pixels or in the case of full screen sidebars, 100%.
Line 4 - is the menu effect. You can replace MENU_EFFECT with menu-parallax or menu-push or menu-over. Please note that these effects do not apply in the case of 100% size of the sidebar.

That's it! Now you have a sidebar menu! Add any content you want inside it!

How do I close the sidebar when it's opened?

Inside your sidebar, add any button that has the class close-menu. That button will close any menu or use the programatic use explained above.

Can I open a sidebar, from a sidebar?

Yes! Inside your sidebar, add a button with the data-menu="your-menu-id" and that menu will be triggered.

Snackbars

Built using the Bootstrap Toast System - Read more on Bootstrap Toast Documentation

The Snackbars box must be placed outside the page-content

Snackbars are in essence larger toasts, so, to avoid adding extra JavaScript and writing extended functions for these, we created the snacbkars using the toasts system offered by Boostrap. This makes it easy for them to be used in Programatic Use and also keep the file size low, as the framework is already heavy on it's own

How do I trigger a snackbar?

Simply add data-toast="unique-snackbar-id" to any button you want to use to trigger the snackbar from.

How do I Programmatically trigger snackbars?

Please check the Programatic Use explained by Bootstrap. Their system will work for Snackbars.

Snackbar Structure

The code above will generate a snackbar. Please be sure this code is placed outside the page-content.
The code must have a unique-id that you will use to trigger the snackbar via programatic use or via the data-toast="unique-id" system. The data-bs-delay is represented in miliseconds and in the code above, means it will automatically disapear after 3 seconds.

Tabs

Custom built for maximum flexibility

As Bootstrap doesn't offer an actual tab system, we built a very simple and efficient one, where we used code as simple to use as possible. Let's explain.

.
Line 1 - Is the content class, but this can be any div. It's important to keep the each set of tabs inside a independet div.
Line 2 - Is the div that will hold the tab controls. You can use tabs-round to make the tabs with rounded corner. Sizes can be tabs-small or tabs-large.
Line 3 to Line 5 - are the tab buttons. You can duplicate these to create more. Be sure you keep the data-bs-target unique for each individual tab.
Line 6 - closes the tab control buttons.
Line 7 - stops the floating of the tab buttons from affecting the content
Line 8 - clears the floatation between tabs, and also adds a margin between the tab content and the tab buttons. You can use the Utility Classes to change this
Line 8 16 - are the tab content boxes. These are connected to their individual buttons using the unique name used in line 3 to 5, and will respond only to the unique identifier found in line 1. The id="tab-group-unique-1 must be identical for the entire group of tabs above. The tab-unique-number must be unique for each individual tab inside the group.

Toasts

Built using the Bootstrap Toast System - Read more on Bootstrap Toast Documentation

The Toast box itself must be placed outside the page-content

The default Bootstrap toasts can be used and triggered manually or Programmatically using our item by following the instructions mentioned on Bootstrap Toast Documentation.

Line 1 - contains the ID of the toast, this will be used to trigger it. Just use data-toast="unique-toast-id" on an element you wish to trigger the toast.
Line 1 - also contains the classes. The class toast is used to identify this for Bootstrap's JS. The toast-tiny is the class we use for styling.
Line 1 - also contains the toast-top or toast-bottom depending where you want your toast to show from and the last element is the background color you want which you can select from the Utility Colors
Line 2 and 3 - is the delay for the toast and the fact that this toast will auto hide. The time is expressed in miliseconds.
Line 4 - is the icon for your toast
Line 5 - is the text for your toast
Line 6 - is the ending of the toast.

Create as many toasts as you need just be sure the ID is unique for each.

How do I Programmatically trigger toasts?

Please check the Programatic Use explained by Bootstrap. Their system will work for Snackbars.

Toggles / Switches

Built using the Bootstrap Toggle Switches - Read more on Toggle Switches Documentation

Toggle switches are input elements which can be used to toggle content or to switch a state in the input. These are affected by the checked attribute just like a checkbox for example.

First of all, let's show you the main switches availabe. We use iOS and Android Styled Switches. Let's explain their structure, and then we can get to more complicated use cases for them.

Firstly, the toggles we used in this example are aligned using flexboxes, which you can learn more about and how to compose following the official Boostrap documentation.

Notice that the title is connected to the switch using the data-trigger-switch="toggle-id-1" | id="toggle-id-1" | for="toggle-id-1". You can create infinite number of toggles and connect them to a separate button on the screen that will activate them, as long as the above properties match eachother.

Line 1 - Creates a flexbox for the switch, so the icon and text can be aligned properly.
Line 2 - When clicking anywhere on the switch, the icon will still change, this happens because data-trigger-switch="toggle-id-1" is identical to the input id and for on lines 14 and 15. You can create as many switches as you want, but these ID's must be unique for each switch.
Line 3 - optional - is used when you want to toggle the content on line 19. This must be set to collapse together with the class of line 19
Line 4 - optional - is the unique ID that is used on line 19 as well. When clicking the switch the content on line 19 will show or hide.
Line 5 - Makes the entire line have a pointer hand effect. Easier to determine when working on desktop and editing the page.
Line 6 - Defines if the collapse content should be visible or not by default. If you set this to true, be sure you also add a checked value to line 14 so that the input toggle will show as activated
Line 7 - Defines that this switch will control the element on line 19 Line 8 - Is the closing of the attributes inside the main div. We used separate lines for easier visibility.
Line 9 to Line 11 - Are the toggle text on the starting side.
Line 12 to 17 - Are the actual input itself. You can define it as ios or android styled by replacing BRAND-input with ios-input or android-input. Please be sure your id and for match the value of line 2 and are unique for each switch you create.
Line 18 - Closes the main div that houses the entire switch.
Lines 19 to 26 - are the content that will be shown or hidden if you follow the instructions in Line 20 to 25 and the above mentioned lines to make sure you have unique identifiers for each toggle group. For live examples, be sure you check the component-toggles.html or component-switches.html (file names may differ)

To create an Android type switch or an iOS type switch, simply replace the BRAND-switch | BRAND-input on line 6 and line 7 with ios-switch | ios-input or android-switch | android-input

Programatic Use

To modify the checked value of a switch, you must use the Input Checkbox check property (link).

Vibrate

Using Native WebAPI Protocols

To begin with, we must mention that iOS does not allow access to their Taptic / Vibration API. Vibrations will only work for Android devices, and only on buttons, not as a programatic gesture. This is restricted on certain devices. If you own an Android device, chances are you saw with previous operating systems sites where the phone would start vibrating like crazy for no reason.

This is why the vibration API will only work on a gesture pre-made by the user, and cannot be Programmatically enabled.

To make any button or element the user taps on vibrate, all you have to do is add the attribute data-vibrate="5". The 5 represents 5 miliseconds. By default, mobile devices send vibrations of 5 to 125ms in length. For the best possible user experience it is recomemnded not to send vibrations longer than this, so the user feels like your app is native to his experience, rather than something new and intrusive.

Ending Words

Thank you for being a awesome customer

If you read the documentation thus far, you're probably a master of our components and can copy paste them to create the perfect interface for you. However, if you get stuck, please know, we are always here to help!

A few tips that we must give. In the component documentation, we have included referrences to the Bootstrap documentation whenever extra features are available. Don't be afraid to experiment with them and read more about these features on Bootstrap's site. You can furhter enhance the already existing components we have. This will also be good if you are a devloper and know or want to know JS behavior and how to increase the programatic power of our item.

Don't forget! Always write your Custom Javascript as mentioned in the Developer Notes Section to be sure you avoid issues with code and always place your code in the correct place. Our item will cause you no stress if these small things are followed.

Help! I got stuck! I don't know how to edit something!

If there is anything you don't find here, or you require clarifications for any element we have here, please open a support ticket on our forums. We will gladly help you out.

Our support times are blazing fast and we are patient with any question you may have. No question is small and no question is stupid. If you feel you don't understand something, please let us know!

It's an immense pleasure for us to know our customers know and master our products and can place their imagination in our product to make it their own!

So, please, if there is anything we may help you with from our product features, or pages, let us know!

We're always available for you on https://www.enableds.com ( the support page )

Structure Documentation
Pages Documentation