Mobile Website Template and PWA
Thank you for purchasing AppKit 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 February 2021 are powered by Bootstrap 5, without jQuery Dependencies.
All Bootstrap omponents 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.
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.
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.
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.
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.
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.
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
The body tag is used for controling the theme of the page and also the highlight and background color.
1 | < body class = "theme-light" > |
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
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" >AppKit Mobile</ 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.
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.
The most important feature, that will allow you to endlessly style our products
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.
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.
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:
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.
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
With the release of Bootstrap 5, the developers over at Bootstrap decided to replace LEFT and RIGHT with START and END. This was done to more easily integrate RIGHT TO LEFT text languages. This is not a decision made by us, and while we can understand it maybe confusing at first it is the new Bootstrap5 standard, VALUE-left (ml-5 for example) is now VALUE-end (me-5 for example)
To transform text, simply use the following classes. These are self-explanatory in their names
text-uppercase
text-lowercase
text-capitalize
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
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 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
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
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
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
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.
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.
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.
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!
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.
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.
The body tag is used for controling the theme of the page and also the highlight and background color.
1 | < body class = "theme-light" > |
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.
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
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.
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-effect = "MENU_EFFECT" > <!-- Place your menu, action sheet, action modal stuff here --> </ div > |
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
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
1
2
3
4
|
//show menu menu( 'your-menu-id' , //hide menu menu( 'your-menu-id' , |
Yes! Inside your menu, add a button with the data-menu="your-menu-id" and that menu will be triggered.
Add the class close-menu to any button inside your menu. This will trigger it to close.
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 > |
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 > |
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 > |
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 > |
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
Using the main menu in our products.
Considering our products are site templates, editing the entire menu means editing each individual HTML page, which for large pages can be very, very complicated. For that reason, our products use external menus. Making it much easier to edit. You will only have to edit a single HTML file. Let's explain:
01 02 03 04 05 06 07 08 09 10 | < div id = "menu-main" class = "menu menu-box-left" data-menu-width = "280" data-menu-active = "nav-welcome" data-menu-load = "menu-main.html" > <!-- (1) --> </ div > |
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.
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.
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.
1 2 3 | "display" : "fullscreen" , |
1 2 | var pwaScope = "/" ; var pwaLocation = "/_service-worker.js" ; |
1 2 | |
Please note that Offline Support works best on latest Operating Systems. Some older Android and iOS operating system can cause issues with these. In order to make your app run offline, you must cache all your assets.
To cache all assets, open _service-worker.js and where you see the REQUIRED_FILES array, add absolutely ALL images, scripts, styles and HTML files your app will use.
PLEASE NOTE
Check the way we imported the files there and follow the exact examples. If you have any text errors (typo's) or you do not correctly link the item, these will not cache for offline use! Also be sure that you have followed the above steps and that your pwaScope and pwaLocation in custom.js are set and also the scope and start_url in your _manifest.json are also set. Without having these correctly set your PWA will not cache files offline.
To clear the cache once when making a change, just open _service-worker.js and change the APP_VER number. Increase it with each change. After doing so, closing and re-opening your app will show the new content. Sometimes, 2 or 3 refreshes are needed. (example: Apple devices)
To always keep your cache clear, simply go to custom.js and set pwaNoCache = true at the very top of custom.js. Currently this is set to false. We recommend keeping this value to true while developing and then setting it back to false. It's better to just update the APP_VER so you don't make devices download data for no reason when not necessary.
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
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.