Welcome

Thank you for purchasing Duo Mobile

In this documentation, we'll be covering absolutely every aspect of our item, to help you achieve the perfect Mobile Website, PWA or Hybrid App. Our newest generation of frameworks released/updated after January 2021 are powered by Bootstrap 5, without jQuery Dependencies. You can still use jQuery by importing it above all scripts at the bottom of the page. All Bootstrap components will be fully compatible with our products, and also, our own custom built elements that will be super easy for you to use and understand.

Remember. If you get stuck, we're always here to help, but this documentation will most likely cover absolutely any question you may have. We've written this documentation to suit both developer and less experienced users.

Our goal is to give you the best possible experience, so don't be afraid to ask if you get stuck along the road.

Documentation Logic

Our entire system is created with components, as the quantity of elements needed to create this by hard coding them is simply not the optimal solution. In order to perfectly understand our product, we strongly recommend you read the documentation in the following order.

1. Structure Documentation (currently Viewing)
2. Component Documentation (Found Here)
3. FAQ Documentation (Found Here)

By understanding the core structure and utility classes and then the components, you will be a master of our file incredibly fast!
Components will make creating new pages easy and incredibly fast, offering you an unprecedented level of flexibility when it comes to adding your own ideas into our product.

Main Structure

The _starter.html page explained, and the basic page structures.

The basic structure of our products is represented in the _starter.html. Here you can populate it with components or page elements, Bootstrap features as you need to, but, we need to make sure you understand it to avoid errors.

Secondary Classes - Utility

The most important feature, that will allow you to endlessly style Sticky

Ultilty classes or, as they are known, secondary classes are re-usable pieces of CSS added to your HTML to ehnance and extended certain features. For example, you may want to re-use a color, so instead of re-writting CSS for each time we want that color, we create a class for it. These are the default Boostrap Classes available with the Boostrap framework - https://getbootstrap.com/docs/5.0/utilities/spacing/

But, beside these classes, we wanted to give you even more flexibility, while keeping the naming convention typical to Bootstrap, so you don't have to learn any new fancy and complicated codes.

Example of Utility Classes

Here is a perfect example where utility classes come super handy.

The above h1 has a few classes attached, each one has a different purpose. You can change font sizes, font weight, transform the text and even adjust paddings and margins. These are all utility classes and they are awesome! Let's dive into them.

Spacing - Paddings & Margins

If you are accustomed to Boostrap 5 Spacing, you can continue directly to this point

There are cases where you need to control the position of an element. A great example is cards where positioning is very important, but in order not to create "rigid" coded cards, we use the Boostrap Spacing properties.

These properties allow you to control the margin and padding both left, right top and bottom of any given element on screen. Let's dive in:

Target

• m - margins
• p - paddings

Placement

• t - top
• e - right / end - used for easier RTL (right to left text) integration
• b - bottom
• s - left / start used for easier RTL (right to left text) integration
• x - both left and right
• y - both top and bottom

Value

• 0 - no margin or padding
• 1 - 5px
• 2 - 10px
• 3 - 15px
• 4 - 30px
• 5 - 45px

You can combine the above elements to give your element spacing you require as follows

[target][placement]-[value]

So, for example, to create a margin bottom of 15 pixels you will use mb-3. This combination method applies to all the values above. You can also create negative values for margins, for example if you want to pull an element under another element. Let's say you want a paragraph to go a bit higher under a heading, in that case, simply add n to your value (n = negative) and the value there will become a negative value. For example mt-n2, will give the element a negative top margin of 10 pixels.

This is the standard method found and used in Boostrap's official documentation and offers immense flexibility to element positioning.

Aligning Text

To align text, simply use the following classes. These are self-explanatory in their names

text-center
text-start left / start used for easier RTL (right to left text) integration
text-end left / start used for easier RTL (right to left text) integration

Text Transform

To transform text, simply use the following classes. These are self-explanatory in their names

text-uppercase
text-lowercase
text-capitalize

Rounded Borders

To create a rounded border using our template, you simply have to use the parameters xs, s, m, sm, l, xl attached at the end of the rounded- class, just like for Bootstrap. The default Bootstrap classses are still working if you wish to use those as well.

rounded-0 - removes rounded corners from pre-existing rounded element
rounded-xs
rounded-s
rounded-m
rounded-l
rounded-xl

Shadows

Adding different shadows to your elements such as buttons, boxes, images, cards and other elements is done in the same fashion. Simply use the shadow- and the parameters xs, s, sm, m, l, xl at the end

shadow-0 - removes shadow from pre-existing shadow element
shadow-xs
shadow-s
shadow-m
shadow-l
shadow-xl

Gradient Shadows

Creating the gradient effect shadow under elements. Add these secondary classes to any element that has a background color or background gradient.

shadow-bg shadow-xs
shadow-bg shadow-s
shadow-bg shadow-m
shadow-bg shadow-l

Opacity

Opacity is great for controling overlay of cards or for reducing the contrast for text. These are very useful to have throughout the item and will be very useful in Cards. These values are increasing 10-20-30 etc, etc. The higher the number, the more visible it is, the lower the number the more invisible it is.

opacity-00
opacity-10
opacity-20
....
opacity-80
opacity-90

Font Weights

The font weight system available in bootstrap made it hard for users to easily determine the weight of a font that has for example 9 styles. Our system works on the simple contept that you place the font- followed by the weight of the font you wish to use. Lower is thiner, higher is bolder.

font-200
font-300
font-400
font-500
font-600
font-700
font-800
font-900

Font Sizes

We created these classes to increase the flexibility of your typography size. Sometimes, the included sizes are just not enough, and adding style="font-size:12px" is a hack and we like to keep our code professional and clean. To avoid this, we created an array of font sizes, from 8 pixels up to 40 pixels. To use them, simply add the font- followed by the font size you wish to use

font-8
font-9
font-10
..........
font-40

Reusable Backgrounds

You may have noticed throughout our code that we use bg-NUMBER for backgrounds. These are demo backgrounds that can be found in the zDemo.scss file or inside style.css/bootstrap.css. These are re-usable background images we use for cards. You can replace these images by searching for them in the CSS and replacing the images with your own

bg-1 to bg-30

Aditional Utilities

We also have some aditional utilities you can use, that we really can't add in any of the above elements. These utilties are either classes or, in case you see data- in front of them, they are attributes.

data-toggle-theme-switch - changes from dark to light or light to dark
border-0 - removes the border from an element, for example, great on List Groups on the last element.

Utilities Conclusions

The idea of creating something flexible was always in our mind, and from our customer feedback it was easy to understand that most users who just want a fast setup for their PWA don't know and don't want to use CSS. This gives users the option of having a copy paste design with as minimal use of CSS. Everything can be created using classes while writing your HTML, and everything in our product can be enhanced with these elements.

Color Highlights & Backgrounds

The power and ease of colors

When creating the colors for our products, we always think of flexibility and allowing you to easily create any color scheme you want without stress. Therefore, using SCSS, was the best solution to asure a fast, easy and reliable color scheme, while at the same time making the creation of new color schemes super easy.

There are 3 simple steps to follow to create a new color scheme using SCSS and, a single step to apply the main highlight to the entire page.

How do I change the bg-highlight and color-highlight globally?

It's as simple as ever. Simply go to the top of your .html file and change the body data-highlight="highlight-COLOR" to the color you want. Please read the following step to understand how our products understand and load the correct color scheme. We've included a small guide via this link to help you understand how to create SCSS colors and SCSS files. It's really simple to use!

What classes do you get?

You can now use your above generated code to

color-awesomeBuyer-light - applies to text and icons, will use hex1
color-awesomeBuyer-dark - applies to text and icons, will use hex2

bg-awesomeBuyer-light - applies to background elements such as card, will use hex1
bg-awesomeBuyer-dark - applies to background elements such as card, will use hex2

bg-fade-awesomeBuyer-light - faded version of the color resulted in above bg-awesomeBuyer-light, great for pastel colors.
bg-fade-awesomeBuyer-dark - faded version of the color resulted in above bg-awesomeBuyer-dark, great for pastel colors.

gradient-awesomeBuyer - applies to background elements such as card, will use a combination of all 3 hexes, starting with hex1, hex2, hex3 at the end.

border-awesomeBuyer - applies to bordered elements using hex1
border-fade-awesomeBuyer - faded version of the color resulted in above border-awesomeBuyer-light, great for pastel colors.

What colors are included by default?

In case you want to use these colors in the body tag or highlight tag, you will only need to enter their names as shown below, but if you want to use these colors to change the color of an element or the background of an element, use the awesomeBuyer structure explained above, and simply replace awesomeBuyer with any color from the list below.

NOTE:
All the colors in our pack can be found inside productFolder/scss/productName/_colors.scss file or inside style.css by searching for example for bg-ANY_NAME_FROM_LIST_BELOW-dark

Are there any Social Colors Included?

Yes, and you can add more with great ease. You will find just under the colorArray in custom.js the socialColorArray, which includes just one brand name and a color. This will generate color-BrandName and bg-BrandName. Add more simply by duplicating the code.

Menus

Action Sheets, Modals, Sidebars.

These menu systems are custom built to include effects and more beautiful interfaces than the default ones included by Bootstrap. They are incredibly well optimized to use full CSS3 and will work flawelessly even on low-end budget devices.

Menu Placement

The menus must be placed outside the div class="page-content" to assure they can go over the content nicely and in case you use effects they can control the page-content without breaking it. The following list of items must be placed outside the page-content class

• any item with the class="menu..."
• action sheets
• action modals
• sidebars
• snackbars
• toasts

General Menu Structure

Individual Examples included after this section

First of all, let's take a simple structure, without any menu settings attached. This is the starter of the menu. For simpler to read and follow we made each attribute in the below example on a separate line so we can explain them by number. Line 1 is the menu ID. This must be unique so we can use it to call it from the HTML button we want, or directly from JavaScript
Line 2 The height and width of the menu. Please Note! if you use offcanvas-top or offcavans-bottom you only require a height attribute. If you use offcanvas-start or offcanvas-end you only require a width attribute. If you use a offcanvas-modal then you require both the width and height attributes.
Line 3 These are the classes that control your menu type.
- You can replace offcanvas-type with offcanvas-top or offcanvas-bottom to create top or bottom action sheets. For these, you must set the height in Line 2.
- You can replace offcanvas-type with offcanvas-start or offcanvas-end to create left or right sidebars. For these, you must set the width in Line 2.
- You can replace offcanvas-type with offcanvas-modal to create modals. For these, you must set the width and height in Line 2.
- Menus support utility classes. to change the rounded corners, background colors and more. You can also add the class offcanvas-detached if you want the menu to be detached from the sides of the screen.

How do I trigger/show a menu like this?

To trigger the menu, all you have to do is add to the button you want the attribute id="UNIQUE_ID". Each menu must have a unique name in Line 1 and that name will be added to the data-bs-toggle="offcanvas" data-bs-target="#UNIQUE_ID" on the button you want to activate the menu from.

How do I show/hide a menu programatically

In custom.js, inside the init_template() function you can trigger menus by using the default Bootstrap 5 call methods - https://getbootstrap.com/docs/5.0/components/offcanvas/#via-javascript

Can I trigger menus from menus?

Yes! Inside your menu, add a button with the data-bs-toggle="offcanvas" data-bs-target="#menu-your-menu-id" attribute and that menu will be triggered.

How do I close a menu from inside the menu?

Add the data-bs-dismiss="offcanvas" to any button inside your menu. This will trigger it to close.

Examples

Bottom Menu

Used in Action Sheets, Share Menus, anything that comes from the bottom.

Top Menu

Used in Action Sheets, Share Menus, anything that comes from the top.

Sidebar Menu Left

Used in Sidebar Navigations or Instant Articles.

Sidebar Menu Right

Used in Sidebar Navigations or Instant Articles.

Modal Menu

Used in Any Modal Enviroument.

Bootstrap Modals & Menus

Can I still use Bootstrap default menus?

You can still use the Bootstrap system of menus, they will work and can be programatically triggered and activated just like expressed in bootstrap, but please keep the following things in mind

• Place all menu HTML code outside the page-content class
• Place your programatic trigger code inside custom.js inside the init_template() function

Menu - Duo Sidebar

The Elegant Sidebar Menu of Duo

The main sidebar menu is created in the same way as the Menu - Actions and Modals (link to see) explains. However, the difference is that the main sidebar can be loaded externally, therefore, allowing you to easily edit a single, external file and have the edits apply to all pages.

Line 1 - will be the unique ID that opens your sidebar
Line 2 - this is used to activate a menu item when the page is loaded. Open the menu-sidebar.html page and locate the menu list. You'll notice that each individual menu there has a unique ID. Place the unique ID on line 2, and this will be automatically activate when the page loads. In the example above, the menu item "Welcome" will be activated when the page loads
Line 3 - is the menu-sidebar.html, this is the file that will house the entire navigation. Please note. Only this file will support navigation with data-menu-activate.
Line 4 allows you to change the position of the main menu.

Note: If you are using Laravel, WordPress, Drupal, ReactJS, VueJS or Angular, this method will cause errors. To avoid these errors, you will have to remove Line 3 and copy the contents of menu-sidebar.html in Line 5 . This method is necessary for any code preprocessor or render system like the ones mentioned.

PWA

Using our Products as Progressive Web Apps

A progressive web app basically means you can "Install" the website to your home screen, have an icon and make it look exactly like it's a native application. However, these come with some things that you MUST know.

Requirements

In order for your website to trigger as a PWA, meaning, show the prompt to install it to your home screen, your page must meet the following criteria.

• Run at least Android 7 ( preferably 8 ) or iOS 12+
• Be installed on a SSL site ( meaning, your page must be SSL )
• Have the _manifest.json file and _service-work.js in the same folder as the HTML files.

PWA's for Android and iOS

Android devices have a much better integration for PWA's making them easier to maintain and use. In the case of Android the content is automatically refreshed whenever you open the PWA, always serving you fresh content.

In the case of iOS, Apple is holding strong to giving PWA's the true power they deserve. Apple only started reading manifest files and accepting service workers with iOS 12, and even then, with small issues. In the case of iOS, the device will hard cache a copy on itself.
This causes the problem of your PWA showing old content, but we managed to get over that with a very simple script that will force your iOS device to clear it's cache.

Can't install as PWA? _manifest.json & custom.js settings edits

In case you can't see the PWA boxes although everything is copied to your server, there are 2 edits that must be done. This can happen for some hosts without cause, or may not be needed at all for other hosts.

In manifest.json set your scope and start url to the destination of your files like so: Replace the addresses from our server with yours following the same structure as presented below. In custom.js, at the very top you will find the below shown code. Replace the code above with the full address to your page and service worker, as shown bellow.

Components & Pages

A tone of flexible components and pages await.

The components and pages available are so large we have a special page dedicated to them.

Components Documentation

Got stuck? No worries!

Don't worry if you can't figure something out. We are always here to help.

In case you have any issues that are not mentioned here, please send us a ticket via our Support Forum. We are always here to help and, unless we're sleeping, we answer all your questions in under 2 hours.

Send an Email Message - don't forget to include your purchase code in the message.

Open Support Ticket