Mobile Website Template and PWA
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 April 2020 are powered by Bootstrap, so 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.
The _starter.html page explained, and the basic page structures.
The basic structure of Sticky 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.
For a fast representation of how all your pages should be built, please check the following diagram.
body
preloader/preloader
#page
header/header
/footer-bar/footer-bar
page-content
all your content goes here
/page-content
/#page
/body
element = open element
/element = closed element
tag/tag = entire element
Follow the above stucture when building pages. Only the header, footer, action sheets, modals, snackbars, toasts, and other off-canvas elements must be placed outside the page-content. Everything else goes inside 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" 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
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" >Duo 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 footer menu is what gave birth to our product. A tone of customers have been asking for us to create a menu that is flexible, easy to use but at the same time offers multiple elegant styles. To view all the footer bars available, please check the component-footers.html page, where you can see live examples and can copy them directly into your pages.
1 2 3 4 5 6 7 | <div id= "footer-bar" class = "footer-bar-1" > <a href= "#" ><i class = "fa fa-home" ></i><span>Home</span></a> <a href= "#" class = "active-nav" ><i class = "fa fa-star" ></i><span>Features</span></a> <a href= "#" ><i class = "fa fa-heart" ></i><span>Pages</span></a> <a href= "#" ><i class = "fa fa-search" ></i><span>Search</span></a> <a href= "#" ><i class = "fa fa-cog" ></i><span>Settings</span></a> </div> |
Our footer menu is not limited to how many items you have in it. It's built using Flexbox so it will automatically calculate and align all items on it's own. However
please note that there are devices out there with small screens, so using more than 5 icons is not recommended.
Inside the footer-bar id, you will have anchors and FontAwesome 5 icons. Replace them as needed. To highlight/activate page simply add active-nav to the footer menu you wish.
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.
Extending the flexibility of Duo Mobile and Bootstrap
Ultilty classes or as they are know, 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.
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.
You can adjust paddings and margins for elements simply by using the following system.
[target][position]-[value]
target - can be either p for padding or m for margin
position - can be either t for top, r for right, b for bottom or l for left. You can also use y for top and bottom or x for left and right
value - can be 0(0px/0rem) 1 (4px/0.25rem) , 2 (8px/0.5rem) 3 (16px/1rem) , 4 (24px/1.5rem) , 5 (48px/3rem) , if you add n in front of any of these numbers the value will become negative, but please keep in mind, only margins can be negative, for paddings this will have no effect.
An instant example, let's say we want a heading to have a bottom padding of 16px/3rem, we would then use
1 | < h1 class = "pb-3" >I am a heading</ h1 > |
Or let's say we want a paragraphy to have a 0 margin bottom.
1 | < p class = "mb-0" >I am a heading</ p > |
These values can be easily combined and used to obtain the perfect spacing you desire for your project. You can read more about this on Bootstrap's Utility - Spacing page by following this link - https://getbootstrap.com/docs/4.4/utilities/spacing/
To align text, simply use the following classes. Thees are self-explanatory in their names
text-center
text-left
text-right
To align text, simply use the following classes. Thees 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-xs
rounded-s
rounded-m
rounded-l
rounded-xl
Adding different shadows to your elements such as buttons, boxes, images, cards and ohter elements is done in the same fashion. Simply use the shadow- and the parameters xs, s, sm, m, l, xl at the end
shadow-xs
shadow-s
shadow-m
shadow-l
shadow-xl
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
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
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
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.
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.
Open custom.js. At the very top of the code you will see var colorArray 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 simplied 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, replace 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.
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.
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.
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.