HIDE TOP HEADER

Terms of support for products developed by Enabled!

We simply love what we do, and for that reason alone we love helping out each customer and offering the best support! This is the main reason we created this full optioned framework, to make a piece of code, that can be more or less universal with simple usage and a vast manual! Envato™ does not oblige authors to give support for their items, but as we love coding so much we offer support for all our files if and only if you are a decent and understanding person! We are human too, we have families too, we need time for ourselves as well! That's why we reply to all inquieries that are not found in this manual or the templates manual within 24-72 hours of you sending it! If you don't get a reply by then, please use one of the forms bellow! Where do you get support? If you send us a direct e-mail to any of our addresses claiming you purchased one of our files, chances are we won't reply! There is a simple method proivded by Envato™ and that is the contact form on our page! You can find it If you wish a more personal aproach, we have 2 forms built for specific issues!

Envato Profile Contact Form! |

If there will be an Epsilon update, you will find it on the Epsilon Framework Updates page! We release only stable versions, so no need to worry that you might have bugs! These updates will include new features, that will NOT affect your current version of Epsilon!
Thank you for your understanding and we hope you love our files! Let's explain Epsilon, shall we?

How the template is structured:

The template is structured into 3 basic and main classes! These are header, content, and footer. The header and footer will be covered in the other documentation found in the pack. the content page is divided into container classes!
The default container class has a 20 pixel margin to the bottom! Please insert all elements inside the container class! If your container has a paragraph right at the end and you don't want it to have a 20 pixel margin, simple name the class as container no-bottom! This structure applies to the ENTIRE template except the places where it's specifically mentioned NOT to use this system!

How do the stylesheets work?

Epsilon is a framework we built in order to make mobile templates more flexible, with better code optimization and make sure that you get the easiest user experience possible when editing it! Epsilon is structured in two main stylesheets, framework-style.css and framework.css, the framework.css file is the blueprint of the page. This shouldn't be tampered with. inside this file the file is reset, structured, aligned, defined, and all it's default elements are created and aligned properly to the page!
Inside the framework-style.css file you will find font sizes, colors, paddings, font families, and other variables that you can change to style your file in anyother way than provided! These are still framework related! We strongly recommend that you DO NOT edit the framework.css file! If we find ( we probably won't ) any bugs in the framework, this file will be edited and this file will be the only file that needs to be replaced!
Inside the style.css you will find all custom items unique to that individual template, meaning navigation styles, footer styles, etc!

Definitions:
To create a new container - add a class <div class="container"> ENABLED </div> and replace ENABLED with the discussed elements
To create a new no bottom container - add a class <div class="container no-bottom"> ENABLED </div> and replace ENABLED with the discussed elements

Recomandation!
To make sure the file is working properly, we suggest NOT to crowd pages with multiple jQuery elements. For example, try to keep 1 slider and 1 portfolio type per page MAX! This is not because the item is poorly optimized, but because there are devices like the Samsung Galaxy S, or the iPhone 3Gs that are still in use today, and have low power CPU's! In which case, your page might just end up crashing the browser!

We also highly recommend that all edits done within the file should happen inside the style.css and framework-style.css! We will be releasing updates to all our customers, a separate page availalble on our support page! If a update is availalble we will include a blog post, and explanations to what changed inside the framework.css file!

Note!
Our templates are tested on most devices you can think of, but they are tested for the devices default browser and webkit browsers! We haven't tested these on make shift garage built browsers. This means that if your browsing the web from a 1 star browser found in the AppStore and the template doesn't work, be sure it's not our fault! We code templates to the standards of W3C and not to the standards of a beginner app developer!

General FAQ's

FAQ: How do I instal this framework? The framework is integrated in your item! Awesome right? The framework is basically a very advanced CSS, JS that is customly coded to make awesome stuff happen on your device! Haha!
Just kidding! The framework is integrated and installed! Just follow the instructions bellow to use elements and don't forget to check the pages provided! We already integrated a LOT of elements you can simply copy paste and replace the values with what you require!
FAQ: Can I add more colors to elements? Yes, you can, and it's very simple! Inside framework-style.css you can find /*----Background Color Styles-----*/, beneth this you can add more colors following the example given!
Elements such as the dropdown, the sliding door, the navigation, highlights use a code like bg-orange, create a new color code, name it bg-whatever, and add that class to any of the elements that use it!
FAQ: Can I change the background color of the small icons? Yup! Same place as the question above, you will find a class called .icon, replace the background color there with whatever color you wish to use! FAQ: Can I use elements from the framework that are not presented in the template? Yes, you can! Just please do not edit the scripts and style orders to make sure they work properly! Make sure the 3D image slider is set ALONE on the page without anyother heavy javascsript elements as it might crash your device. FAQ: Why are there 2 documentation files? Because epsilon is a solid, rigid framework. By rigid I mean it will not change from template to template, the most improtant changes that will happen to any new file will happen in it's design and general user experience. This documentation explains what Epsilon has in it, what can be used, what can be called, and how they work! The other documentation makes sure you undersatnd the navigation, structure of the template!
NOTE that the overal structure presented in this documentation still applies! class containers will hold all elements, and all the containers go in a main content class!

Elements and how they work!

Aligning texts from left to right. There are 3 classes made that you can use for any heading you wish! These are left-text center-text and right-text. Adding these classes to your text will make it align itself to the designated location! i.e. if you want the text aligned to center, use center-text Full width text paragraphs! To use a full screen paragrap, simply create a new no bottom container and insert a paragraph inside! That's all! The text will automatically expand to fit! Heading with background To use headings with icons use the bellow example! img Speach bubbles! Speach bubbles must be added to a no-bottom container and after each "dialogue" box a clear tag must be added! img Sliding mini boxes! Sliding boxes are simple to use, must be added in a separate no bottom container! img Dropdown menu! Dropdown menus are simple to use, they must follow the bellow structure and each must be added in a separate no bottom container! img img Simple columns. Using columns is easy! Inside a new no bottom container, columns are structured into one-half and one-third! Add 2 one-half divs to create 2 columns or three one-third classes to create 3 columns! img The above screenshot shows the classes used to create columns! Simple columns with small icon. Same principle as the above code applies here as well but the only difference is that inside the paragraph a span with the icon has been added! img Simple columns with large icon. Same principle, create one-half or one-third divs and use the example screenshot bellow! img Dropcaps, large first letter. Dropcaps is simple to use, just add the following syntax in a no bottom container img Highlighting portions of text. Highlights are awesomely easy to use. Add the following syntax into a no bottom container! img Creating horizontal charts. Replace the p10 value to whatever value you want up to 100, the 10 value is a decimal percentage!
Duplicate the bellow code screenshot as many times as needed to create more charts! img
Creating vertical charts. Replace the vp10 value to wahtever value you want up to 100, the 10 value is a decimal percentage!
We suggest not adding many vertical charts as these can be seen different from device to device! img
List icons. Well, all kinds of lists, here are a few examples bellow! Add them to a container! img CSS3 Buttons Buttons are amazingly easy to use! The bellow class shows exactly how to call out a button! Don't include the demo class! It's just for demos! img Detecting mobile user agents. Device no, but platform yes! The bellow examples can be added to a page, and only the visiting patforms button will remain visible when browsed! img Checbox and Radiobox Yep! Any of the bellow codes can be use to generate a checkbox! img Responsive Google Maps! We have that as well, generate youself an embed code from maps.google.com and add in the syntax bellow!
This syntax must be incapsulated in a container! img
Hidable header notification. Header notifications are notifications that are fixed to the top part of the page! Only one at a time can be used, but you have several to choose from! img Standard small notifications These have one line of text, one icon, and a close button! img Standard big notifications These have a heading, a text, and a close button! img Tabs Tabs are very easy to use! The top buttons must have an id, and the bottom classes must have the class named the same as the button id! img Toggles There are 5 variations of toggles in the item. Use the structure presented in the image bellow to create a toggle.
To check other variations, replace v1 with v2, v3, v4, v5! img
Code snippets If you need code, then you have it! Just remember! There is no > < in HTML code, you must used the & to find your code! HTML Characters! img

Blog Page and Posts

Blog Posts To add a new blog post, simply follow the bellow syntax! img Blog Ads Ads have a special class beside the container! Please use it as the syntax bellow! img Blog Posts Blog categories section! img

Implementing Portfolios!

There are a couple of types of portfolios in here! They are quite simple to use but you need to pay attention when classing them! Full width portfolio Yes, we have these! Follow the bellow syntax! These are connected to an edited version of ColorBox which will allow images to scale down on your device! img Two column portfolio Yep! Bellow you will find them! To create a new row of items duplicate the column class! img Swipe thumbnail gallery. That is available as well! Photoswipe is bellow! Duplicate the list class to add a new item! img Filtralbe thumbnail portfolio. Yes! We have filtrable folios as well, but only six filtrable classes at a time! Follow the structure bellow! img

Image Sliders!

Swipe Left Right Image Slider We have that as well, of course! Simply duplicate the list class to create new elements! img

Implementing the contact form!

Please follow the bellow instructions to the line, as the contact form is very sensitive! To change the contact form information and address please edit the ONLY php file found in the pack! If you cannot find a php file, the congrats! You're missing the most important element of this template! You should buy stuff, not rip it! Contact form explanation! The contact form is very very simple to use but might appear complicated at first sight. All our templates come with a pre-made contact page.
We suggest you take that page and adapt the content inside it to suit your needs! img In the code above, the formSuccessMessageWrap is actually a big notification! If you wish to make it something else, simply delete the notification box and enter your own text! Same goes for the default errors that appear on the page. These are small-notification errors!
What about the login page?! The login page is not coded! This is just a markup! You need to connect it to a database! img

Terms of service!

As mentioned before, we love all our customers and we try to give our customers the best possible service! If you wish to collaborate with us, feel free to drop us a mail at ienabled@me.com ! Please do not use this e-mail for item support on the marketplaces, as all e-mails requesting support without verifications will be DELETED without offering a reply! Use these forms for support: Envato Profile Contact Form!



Epsilon is a framework developed by Enabled and CosminCotor! You are not allowed to redistribute this framework in ANYOTHER item except the one purcahsed from ThemeForest! Legal action will be pursued if this is breached!

© Enabled. All rights reserved!