Welcome

Thank you for purchasing StickyMobile

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 April 2020 are powered by Bootstrap. Therefore, 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. Pages 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.

Page Structure
 
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
<!-- Preloader will be added here-->
 
<div id="page">
 
    <!-- Header Bar will be added here -->
    <!-- Footer Bar will be added here -->
 
    <div class="page-content header-clear-VALUE">
 
        <!-- Add your Canvas Elements - meanign - Components and Page Elements Here-->
 
    </div>   
 
    <!-- Off Canvas Elements Here -->
 
</div>   
 
 

This is the main structure of our products. So following this structure is essential to the functioning of the products, especially since we use a lot of off-canvas elements to create a beautiful user experience.

Line 1 - is the preload component. Only this element will be outside of the div id page.
Line 2 - is the main page wrapper. Keep every element in your page here.
Line 5 - is where we place our header bar.
Line 6 - is where we place our footer bar.
Line 8 - is the page content. Inside this area we will include On Canvas Elements (all elements, with a few exceptions, explained below)
Line 12 - closes the page-content.
Line 14 - is where we house our off-canvas elements (menus, modals, snackbars, more explained below)
Line 16 - closes the div id page, and from this point, please do not add more content

TIP: The page-content class will start from the top of the page, so when you're adding content inside it this might be hidden by the header. To solve this just add the class header-clear / header-clear-small / header-clear-medium / header-clear-large instead of header-clear-VALUE to the page content depending on your needs.
What are on-canvas elements? ( the page-content )

The canvas is considered the place where you have all the elements you see on the page that don't move only when scrolling.
Everything you see inside the page-content class is considered an on-canvas element.
These elements are visible on the screen, at all times, and don't move except for when you are scrolling.

What are off-canvas elements? ( the area between the page-content and page)

These elements are defined as elements that appear from the left, right, top or bottom of the screen, coming from outside the visible area of the screen.
These elements are placed outside the page-content, and this is very important, since they interact with the page-content. For example, menus can push the page-content and create a dark overlay. For this reason, the following list of elements must always be placed outside the page-content

  • Header Bar
  • Footer Bar
  • Action Sheets
  • Action Modals
  • Sidebar Menus
  • Toasts
  • Snackbars
Body Tag

The body tag is used for controling the theme of the page and also the highlight and background color.

 
1
<body class="theme-light" data-background="none" data-highlight="red2">
 

The class we use to determine the color theme of our product. Use theme-dark for dark mode, theme-light for light mode and detect-theme to automatically detect your devices default theme settings. If this is not supported by your device, the page will automatically default to theme-light. Most modern devices now support automatic theme detection, and you can check this in component-auto-dark.html

Click to view Available Colors for data-background and data-highlight

Header

Our header is designed to be super easy to use and highly flexible for your use case. With this being said, the header currently supports a few styles, which we'll explain below, and which can be seen and used inside component-headers.html found in the pack.

 
1
2
3
4
5
6
7
<div class="header header-fixed header-logo-left">
    <a href="index.html" class="header-title">StickyMobile</a>
    <a href="#" class="header-icon header-icon-1"><i class="fas fa-envelope"></i><span class="badge bg-green1-dark">5</span></a>
    <a href="#" class="header-icon header-icon-2"><i class="fas fa-bars"></i></a>
    <a href="#" class="header-icon header-icon-3"><i class="fas fa-heart color-red2-light"></i></a>
    <a href="#" class="header-icon header-icon-4"><i class="fas fa-share-alt"></i></a>
</div>
 

Let's explain the header line by line, showcasing what it can do at the same time.

Line 1 is the main wrapping class. This contains the class header, to define the element, header-fixed, which will make the header fixed at the top of the screen and also, a class which is used to determine the style. You can use any of the following classes.

header-logo-left - Logo Left with 4 icons on the right side
header-logo-right - Logo Right with 4 icons on the left side
header-logo-center - Logo Center with 2 icons on left and 2 icons on right
header-logo-app - 1 icon on the left, logo and 3 icons on the right side.

Line 2 is the header logo. This can be an image or a text. You can select this as an image by setting the header-title class to header-logo. The image can be found in the main css file by searching for "header-logo" using CTRL+F or CMD+F and replacing the image there with your own.

Lines 3,4,5,6 are the header icons. These are numbered using header-icon-1 to 4 and you can change their position based on this number.

Structure Conclusion

The structure of the page is intended to be as simple as possible using the _starter.html page included, you will find the above elements inside, and you can start placing your content inside the page-content class right away! Continue with the documentation to learn about the menus and color classes.

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/4.4/utilities

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.

 
1
<h1 class="font-16 font-800 text-uppercase pt-3 mb-0">I'm a heading</h1>
 
 

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 4.4 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
  • r - right
  • b - bottom
  • l - left
  • 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-left
text-right

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

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

Before upgrading our framework to Bootstrap, our customers loved the fact that our products supported color highlights and backgrounds, a feature that is very limited in Bootstrap. With adpoting Bootstrap, we also added our color array system to it, to give you the option to create colors, even faster than with SCSS, and apply them on all aspects of your project.

Can I still use Bootstrap?

Of course! Our main colors are integrated in the classic code of Bootstrap. If you like using text-primary or bg-primary or other Bootstrap color systems, you can still do that, but we also added something we're sure you absolutely love.

What does it do?

Our system will automatically generate colors based on the hex (#000000) colors you insert. With this being said, you will obtain colors for text, backgrounds, borders, faded effects and gradients, all by adding 3 colors and saving the file. It really is that simple.

Where do I add my color codes?

Open custom.js. At the very top of the code you will see var colorsArray and a large list of colors. Don't be scared by this if you've never worked with it before, in fact, it's the easiest thing ever.

 
1
2
3
4
var colorsArray = [
    ["red1","#D8334A","#BF263C","#9d0f23"],
    ["red2","#ED5565","#DA4453","#a71222"]
];
 
 

The above code is a simplified version of the color array. Let's create your first color. To start with, duplicate line 2 of the code

 
1
2
3
4
5
var colorsArray = [
    ["red1","#D8334A","#BF263C","#9d0f23"],
    ["awesomeBuyer","#hex1","#hex2","#hex3"],
    ["red2","#ED5565","#DA4453","#a71222"]
];
 
 

Now that you duplicated that line and created the awesomeBuyer value, all you have to do is replace hex1, hex2 and hex3 with your colors

hex1 - is the light version of your desired color
hex2 - is the darker version of your desired color
hex3 - is the gradient version of your desired color, usually, this should be the darkest value

Our code will automatically match them to generate classes for these for borders, gradients and more. Now that you've done this, you'll save custom.js, and you can start using your new classes.

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.

bg-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-light - applies to bordered elements using hex1
border-awesomeBuyer-dark - applies to bordered elements using hex2

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

Why are these not added using CSS?

We did multiple performance tests on this system, and discovered that the CSS for the amount of colors we use to give our items the color pallete you love would weigh in excess of 50-80kb, which for a CSS file is just too too much, but, when adding these via an Object Array, the JavaScript code is only 5kb heavier.

These colors get injected in the page at the end of the body the moment the page starts, without affecting performance since they are generated as an object, but, offering the huge and vast amount of colors to give your page the personallity it needs.

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.
  • mint
  • plum
  • violet
  • magenta1
  • magenta2
  • magenta3
  • red1
  • red2
  • red3
  • green1
  • green2
  • green3
  • sky
  • blue1
  • blue2
  • yellow1
  • yellow2
  • yellow3
  • teal
  • orange
  • pumpkin
  • pink1
  • pink2
  • brown1
  • brown2
  • dark1
  • dark2
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.

How do I turn on Dark Mode? Or change the color highlight or page background?

The body tag is used for controling the theme of the page and also the highlight and background color.

 
1
<body class="theme-light" data-background="none" data-highlight="red2">
 

The class we use to determine the color theme of our product. Use theme-dark for dark mode, theme-light for light mode and detect-theme to automatically detect your devices default theme settings. If this is not supported by your device, the page will automatically default to theme-light. Most modern devices now support automatic theme detection, and you can check this in component-auto-dark.html

To change the body background, simply replace "none" in the body tag with any of the colors in the list above.
To change the color of color-highlight / bg-highlight simply replace "red2" with any of the colors from the list above.

What is bg-theme and color-theme?

Let's say you have a black card where you have a white text. When you go to dark mode, that text will become black and no longer readable. This is where the class color-theme is great. The color-theme and bg-theme are always the opposite color of the theme you have selected.

theme-dark - color-theme will be dark and bg-theme will be white
theme-light - color-theme will be light and bg-theme will be black

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.
`
 
1
2
3
4
5
6
7
<div id="MENU_UNIQUE_NAME"
class="menu MENU_STYLES MENU_BOX_POSITION"
data-menu-height="VALUE_IN_PX"
data-menu-width="VALUE_IN_PX"
data-menu-effect="MENU_EFFECT">
<!-- Place your menu, action sheet, action modal stuff here -->
</div>
 
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 is where we define what type of menu we want, and also add some style to it. First, add the class menu, this is required, now, you can replace

MENU_STYLES - utility classes such as rounded-VALUE or shadow-VALUE to change the shape of the menu. You can even make the menu detach from the sides of the screen, meaning, feel like floating by adding menu-box-detached utility class here.

MENU_BOX_POSITION - to control the placement of the menu

menu-box-left - to create a sidebar left

menu-box-left - to create a sidebar right

menu-box-bottom - to create a bottom menu / action sheet

menu-box-top - to create a top menu / action sheet

menu-box-modal - to create a modal window


Line 3 is used only if you are using a menu-box-top, menu-box-bottom or menu-modal. Replace the value with how high you want your menu to be
Line 4 is used only if you are using a menu-box-left or menu-box-right. Replace the value with how wide you want your menu to be
Line 5 Is the effect you wish your menu to have. This does not apply to menu-box-modal

MENU_EFFECT - supports any of the following menu effects

menu-push - will push the page-content with the height or width of the menu you selected

menu-parallax - will push the page-content 1/10 of the size of the menu, creating a parallax type effect

deleting line 5 - will come above your page-content


Line 6 This is where you place all the content you want to show in your menu
Line 7 is where you close the entire menu.

Now, let's show some direct examples, for everyone to understand
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 data-menu="MENU_UNIQUE_NAME". Each menu must have a unique name in Line 1 and that name will be added to the data-menu 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 after line 88 trigger menus by using the following codes
 
1
2
3
4
//show menu
$('#MENU_UNIQUE_NAME').showMenu();
//hide menu
$('#MENU_UNIQUE_NAME').hideMenu();
 
 
Can I trigger menus from menus?

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

How do I close a menu from inside the menu?

Add the class close-menu 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.

 
1
2
3
4
5
6
<div id="MENU_UNIQUE_NAME"
     class="menu menu-box-bottom menu-box-detached rounded-m"
     data-menu-height="300"
     data-menu-effect="menu-parallax">
    <!-- your menu stuff here-->
</div>
 
 
Top Menu

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

 
1
2
3
4
5
6
<div id="MENU_UNIQUE_NAME"
     class="menu menu-box-top menu-box-detached rounded-m"
     data-menu-height="300"
     data-menu-effect="menu-parallax">
    <!-- your menu stuff here-->
</div>
 
 
Sidebar Menu Left

Used in Sidebar Navigations or Instant Articles.

 
1
2
3
4
5
6
<div id="MENU_UNIQUE_NAME"
     class="menu menu-box-left"
     data-menu-width="300"
     data-menu-effect="menu-parallax">
    <!-- your menu stuff here-->
</div>
 
 
Sidebar Menu Right

Used in Sidebar Navigations or Instant Articles.

 
1
2
3
4
5
6
<div id="MENU_UNIQUE_NAME"
     class="menu menu-box-right"
     data-menu-width="300"
     data-menu-effect="menu-parallax">
    <!-- your menu stuff here-->
</div>
 
 

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

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.

How to update content instantly on iOS
To change the content of your PWA in case it shows older versions, you will have to trigger an update. To do this, simply open _manifest.json and scripts/pwa.js and locate the pwa version.
 
1
2
// this is inside pwa.js
var pwaVersion = '3.0';
 
 
 
1
2
// this is inside _manifest.json
"version": "3.0",
 
 
You can see that both versions are set to 3.0 in the above example. When you update your content, make sure you update the version numbers here as well. This will trigger iOS to refresh/reload and delete the existing cache. This is not necessary normally since iOS automatically clears it's cache once a day, but you can use this method in case you want to see content updated directly.

PWA's Install Boxes

At the bottom of the _starter.html file and inside the index.html file you will see the menu-install-pwa-android and menu-install-pwa-ios. These menu boxes must be placed on the page where you want the PWA install window to show, just outside the page-content. Normally, these get added to the index.html file.

Note: The PWA install menus are controled by the Service Worker, which will only trigger them if your page meets the Requirements mentioned above.

Can't install as PWA? _manifest.json & _pwa.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 PWA.js, where your service worker is called to the page, at the very top, remove the code, and replace it with the one below.
 
1
2
3
4
5
//Loading the Service Worker
if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('/products/duodrawer/_service-worker.js', {scope: '/products/duodrawer/'});
  });
Replace the addresses inside with your server addresses following the logic in the example presented above.

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 Pages Documentation

Frequent Questions!

Here are the most comon questions we get regarding our product.

When I try to go to an external link, the page refreshes. Why?

We describe the functionallity of the AJAX page changer in this question. But, to make things short, the page will attempt to load the external link inside the div id page, causing the page to reload. In order to avoid this, simply add the class default-link to any link you aim towards an external page.

SCSS - Detailed

Firstly, if you're an absolute beginner in SCSS, don't be afraid. It's more like a CSS with re-usable variables, in the short way. You can read a small tutorial here

If you're already accustomed to SCSS, When editing our page, you can either edit the style.css element, by using CTRL+F or CMD+F to find the class you are looking for, or by using SCSS. We structured the SCSS to keep Bootstrap's SCSS files in there and intact, in case you want to dive deep into customizing, and also included our own elements inside.

This is the structure of the SCSS folder
../bootstrap/
../components/
../pages/
../plugins/
../sticky/
../_bootstrap.scss
../style.scss

Let's explain.

../bootstrap/ - contains the default Bootstrap SCSS system, unalatered. You can go to /bootstrap/bootstrap.scss to remove elements you don't need or follow the Bootstrap SCSS logic to edit this file
../components/ - contains all our custom built adition to the component system already presented by bootstrap
../pages/ - contains all our custom built pages
../sticky/ - contains all elements that sticky depends on to run effectively, including the dark mode, header, footer, menu, logos but also the structure and utility classes. This will also contain the variables we used for fonts, borders, shadows and the dark mode color

Why are you not using separate style.css files and plugin.js files?

Even though on paper your Mobie Device has the power of a laptop, they all use Mobile Modems and these are very poor in loading performance if pages are not properly optimized. Having multiple CSS files will allow you to organize and group your JS/CSS files properly in development. However, this also means that there are multiple HTTP requests to make. HTTP requests are more expensive in terms of loading time as it has to contact the server and fetch the file.

In any modern code editor ( we recommend http://brackets.io, it's fast, free and has Live Preview mode) you can use CTRL+F on Windows or CMD+F on Mac to search for any class name you want in style.css

Remember, this is a Mobile product, and although you or I can have iPhone XXXXSSS and Galaxy Note Infinity, there are devices out there with less powerful modems. We want to keep the calls to a minimum to ensure the fastest loading time possible.

How do I change my Logo or other things without SCSS

Open the style.css and use CTRL+F or CMD+F to edit find header-logo, or footer-logo. You can find the class names that you wish to search for by right clicking in Google Chrome and clicking "Inspect Element". In the inspection window you will see the class name and on what line it can be found in style.css

Why is the page structure built like this?

When creating our previous framework, we used a very small and fast loading system that didn't necessarily require AJAX to work, but when working with Bootstrap, performance for mobile devices is an issue. The structure is designed like this for 2 reasons.

1. To enable our AJAX page transition system to change the content of a div, not the body which would cause errors on Mobiles
2. To allow for effects when opening action sheets and action modals, a thing that is not offered in Bootstrap.

For most users, the structure is simple to follow. Think of the div id page as the body. Everything goes inside it. Think of the page-content as the place where only the content that is on screen will go. It's the simplest possible alteration we can think of that won't requrie you to learn complex code structures.

The AJAX system is here to make pages load much faster and smoother.

Can I still use Bootstrap default components?

Yes, absolutely you can! Just be sure that if you use Modals, Toasts, Snackbars you place these outside your div class="page-content" and make sure your call codes for these are inserted inside custom.js inside the init_template() function. You can read more about this in the How do I add my own JavaScript Code section.

How does AJAX work in your product

The AJAX system we use is for page transitions and also for massively optimizing page speed. This works on a very simple concept. When you first access the site, for example, you land on index.html. Our AJAX system will automatically "remember" (not cache) the styles and scripts sections of your page. When you click a button to go to awesomeBuyer.html for example, the code will only replace the content found inside the div id="page".

Once the awesomeBuyer.html page is injected inside the div id="page" the init_template() function from custom.js will be destroyed and re-fired. This assures maximum performance while making sure all your JavaScript still runs perfectly.

This means, there are no calls made to the JS or Style files, and they are still used as the ones originally loaded when you entered the site. For certain devices that make calls on each page such as Androids and most of the times iOS, this increases the speed of the page dramatically.

How do I add my own JavaScript Code?

To run any script and style on all pages, especially when using AJAX there is a correct way of doing it.

  1. Place all your JavaScript scripts(plugins) inside ALL html files, just above custom.js at the bottom of the page
  2. Place your JavaScript custom code / call codes inside custom.js inside the init_template() function.

This is essential so the page will be able to access the script if you come from it directly or from a different page, and the init_template() function fires / is triggered when you are landing on a new page.

My JavaScript code only works if I refresh the page

The above chapter section shows exactly how you should place your JavaScript code for it to run perfectly.

How do I disable the AJAX system?

If you disable AJAX page transitions your page will feel a bit slower, basically loading just like anyother HTML, CSS and JS site running Bootstrap. However, this may be necessary if you are coding for WordPress, Laravel, Droopal, Joomla or any other CMS where you must pre-build pages.

To disable AJAX all you have to do is open custom.js and set: isAJAX = false - at the very top of custom.js

How do I disable the PWA system?

All you have to do is open custom.js and set: isPWA = false - at the very top of custom.js

Dark Mode, Colors & Background Cookie?

Our page will remember the settings you have for the color highlight and the background color if you set them from the bottom menu, and even for the dark mode or light mode. This is automatically done with Cookies based on the color highlight or background you've selected from the page. To remove these cookies simply clear the cookies from the page. If your page doesn't use the menus for changing the colors and backgrounds, cookies won't be created.

How do I Programatically trigger custom menus?

Our menus can be triggered programatically just like other Bootstrap elements with a simple function. In custom.js, inside the init_template() function after line 88 trigger menus by using the following codes

 
1
2
3
4
//show menu
$('#MENU_UNIQUE_NAME').showMenu();
//hide menu
$('#MENU_UNIQUE_NAME').hideMenu();
 
 

How do I Programatically trigger other elements?

Follow the documentation from Bootstraps's 4.4 Official Website to trigger the menu you need. All our components except for the custom menus follow the official Bootstrap programatic logic.

My page is not fast enough! Can you help?

We'll gladly analyze your page and give you the exact tips and changes you need to make to get the most out of your page. Here is a short list of things you should implement in your page.

  • Use GTmetrix to analyze your page to get accurate results of what needs to be done to increase the speed score.
  • Use A good CDN - CloudFlare ( 100% free )
  • Open Style.css or the SCSS files and remove all unused components from your product. They are easily stacked to be found and removed.
  • Don't use images wider than 500 pixels. It brings no benefit and slows the page
  • Optimize your images by passing them through TinyPNG to reduce their weight but keep quality
  • After you finish editing the CSS, minify it using CSSMinifier
  • After you finish editing the JS (only custom.js and pwa.js) minify it using JavaScript Minifier

Please note! - PageInsights and Lighthouse Audit offer incorrect results most of the time! These heavily rely on how many people do tests in the moment you're doing yours,and lighthouse depends on the power of your machine. We got a score of 89% on a Macbook Air, 93% on a Macbook Pro and 99% on iMac. To get a full result, together with great tips, please use GTmetrix. They provide unbiased ( impartial ) results based on actual code techniques used for best performance. Lighthouse and PageInsights will always favor Google products and give you impossible to achieve results ( unless you are using AMP or your page is very, very small and without features)

If you've done this and it's still not as fast as it should be, feel free to contact us, and we'll gladly assist you, analyze your page and give you all the tips you need to achieve the best performance possible.

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.

Open Support Ticket