Welcome

Thank you for purchasing Apptastic

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 October 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.

Secondary Classes - Utility

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

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.

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

Our color system works on CSS and SCSS, so whichever you are comfortable with you can easily use. You can find the colors inside the styles/highlights folders or inside the scss/highlights.

How do I change the color highlight of the page?

Using SCSS, simply open the scss/highlights/_colors.scss and replace the $defaultGradient, $colorHighlightLight and $colorHighlightDark with your colors. These will automatically apply to all elements that use gradient-highlight bg-highlight and color-highlight classes, plus the footer menu active state and sidebar menu active state. The $defaultGradient colors are the composed by the colorHighlightLight and colorHighlightDark.

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 below, and simply replace awesomeBuyer with any color from the list below.

Every color above can be combined and used following way.

For Background Gradient
gradient-awesomeBuyer

For Text Color
awesomeBuyer-light
awesomeBuyer-dark

For Backgrounds
bg-awesomeBuyer-light
bg-awesomeBuyer-dark

For Borders
border-awesomeBuyer-light
border-awesomeBuyer-dark

For Highlights
bg-highlight
color-highlight
gradient-highlight
border-highlight

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. You can add more in the highlights/_colors.scss file.

How do I create another color?

Open the scss/highlight/_colors.scss and simply duplicate any line from the $colorPack list, adding your hex colors there. These will automatically be generated by the SCSS and you'll be able to combine them using the above explanation.

How do I create more highlight CSS files?

To create highlight files, simply duplicate the _highlight-COLOR.scss or the highlight-color.css file, and change your colors with the ones you require. Once you've done this, you can trigger Apptastic to apply the color, and rember it by adding the following data-highlight-style="styles/highlights/highlight-YourNewFile.css" to any button you want. Once you click it, Apptastic will load the style you just created and add it to the localstorage memory. When you visit again, Apptastic will add that color to your page.

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

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.

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.

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

Using Apptastic's Main Bottom Menu

Apptastic uses a bottom menu designed to match the page styles, and is also loaded externally, making adding new pages, and editing old ones easy. Imagine your site has 50 pages, and you'd have to edit 50 pages to change a menu. That's why Apptastic loads the menu from outside to make your life easier when editing it.

Menu Structure

The menu is composed of a top card, where the close icon is, the menu list itself, which is a list-group and the bottom area, which again is a list group.

This is a menu item, simply duplicate it to create more. In your HTML file, you can activate this menu by adding the id to the data-menu-activate

You can do this for all pages. For example, on our index.html, the data-menu-activate is nav-welcome, on our index-components.html, the data-menu-activate is set to nav-components. This way, when you move from page to page, the menu is loaded, the data-menu-activate is read by the JS code and the menu that has the ID identical to data-menu-activate will be set to active.

To create more menu items, simply duplicate the anchors, and give them unique ID's.

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 and Android

Mobile devices automatically update the PWA content when you visit or within a few hours after you've closed the App. This is based on an internal storage that we can't control. Therefore, we can force the app to always keep the content up to date, to avoid such issues. Simply open custom.js and at the very top, set the pwaNoCache to true. This will always clear all storages to keep the content fresh.

How do I disable the PWA?

To disable the PWa simply set the pwaEnabled at the top of custom.js to false. This will disable the service worker completely.

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 & 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, where your service worker is called to the page, use ctrl+f to locate serviceWorker, remove the code, and replace it with the one below. 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.

• Custom.css has true and false things at the top, what are those?
• When I try to go to an external link, the page refreshes. Why?
• SCSS - Structure and Guide
• How do I change my Logo or other things without SCSS?
• Why are you not using separate style.css files and plugin.js files?
• Why is the page structure like this?
• Can I still use Bootstrap default components?
• How does AJAX work in your product?
• How do I add my own JavaScript Code?
• My JavaScript code only works if I refresh the page
• How do I disable the AJAX system?
• How do I disable the PWA system?
• Dark Mode, Colors & Background Cookies
• How do I Programatically trigger custom menus?
• How do I Programatically trigger other elements?
• How do I clear the notch for iOS devices? On iPhone things go under the notch
• My page is not fast enough! Can you help?

Custom.css has true and false things at the top, what are those?

At the very top of custom.js we set universal parameters to easily change major settings in the item. These are

isAJAX enables or disables the AJAX transition system we use in our product. If you want to connect our product to ReactJS or or a back end system where your pages are pre-generated(php for example, laravel, wp) then set this to false.

isDevMode enables or disables a permanently fixed button on the screen, which you can easily use to tap and refresh the page. This is very useful, when you're in PWA mode and adding new content and don't want to remove and re-add the app to the homescreen. Set this to true when you're editing your product, and when you're ready to go in production mode (deploy to customers) set it to false.

pwaEnabled - activates or disables the service worker which will allow the page to install on the home screen, set to false if you don't want to use as a PWA

pwaNoCache - if set to true, this will always serve fresh content when you open the app in pwa mode. Otherwise, you can view a cached version for a few hours before the service worker triggeres a cache / storage clear itself

pwaRemind - once the user rejects the install ( clicks maybe later ) a local storage will be created and, after that time passes the prompt will appear again. The number in this property represnets days until the prompt will appear again. If you set it to 0 it will appear everytime the user visits your page. We recommend a minimum of 1 day so it doesn't feel like a spam banner.

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/
../Apptastic/
../_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
../Apptastic/ - contains all elements that Apptastic 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

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.

How do I clear the notch for iOS devices? On iPhone things go under the notch?

For most elements, we already added the required parameters to make sure things don't get under the notch, but let's say you want to create a cover page or a page without a header and you notice this goes under the notch. Simply place the class notch-clear on the element that is under the notch. So if you have a cover page that contains an icon that shows under the notch, don't add notch-clear on the coverpage, add it to the icon.

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