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.

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
• To add shadow effect, use shadow-bg shadow-bg-SIZE (xs, s, m , l)

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 ApexCharts - the best chart plugin system.

ApexCharts 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

ApexCharts - https://apexcharts.com/ - Official Documentation

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

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 programatically 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

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 add form-icon to use the first icon or, remove form-icon and the first icon inside the field
OPTION-2 add form-border if you only want to use the input with a single line under it, not boxed.
OPTION-3 add form-label-always-active if you want to always show the floating label. You can also use utility classes here.

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. The validation is done using HTML5 Patterns and the Bootstrap 5 Validation (link to official documentation)

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.

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.

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.

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