Version:
1.0 |
Last update:
07 February 2018
Version:
1.0 |
Last update:
07 February 2018
Thank you for purchasing Arch template!
This documentation will give you an understanding of how Arch is structured and guide you in performing common functions. If you require further assistance not covered in this documentation, please contact us in our Support Portal http://support.aucreative.co/
If you need custom customization, please contact us from here: http://themeforest.net/user/authemes
Thank you so much!
AU CREATIVE
Once you have download the package you will see the following folder structure in " template" Folder
In order to use in your website, you need to upload template filess ( inside the folder www) to your web server with the help of one of the FTP-clients (for example, WinSCP or Total Commander etc).
Arch template is based on Bootstrap Framework ( http://getbootstrap.com/) Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
Below is a sample coding structure:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
...
...
</body>
</html>
Default site logo is placed inside
header container.
By default Arch Template uses Three fonts from google library:
'OpenSans'
'Montserrat' from the
Google Fonts Library
If you wish to add/change the site fonts, please take a look in the
head part of the website and you will find this tag:
To include new font you can simply add another line like this:
Or add an
| seperator and paste
Lato:400,300,800,700,600 after default website fonts link.
Arch includes 1 sliders that gives you all the options they need.
Advanced customization of file
main.jsin folder
js/main.js
The full documentation of OWl Slider can be found here
Arch helper css classes allow you to build your custom layout without touching any CSS code
These classes are generic helper classes predifined in the CSS of pages, here is quick view what they can do
You can add this helper class to any element in your HTML code to set Margins
| First Prefix ( m-*) | Second Prefix(m-t/b/l/r-*) | Last Prefix(m-t-$value) |
|---|---|---|
| m for margin | t : top, b : bottom, l : left, r : right | 5,10,15,20, ... 150 |
example :
m-t-10
which means Margin Top 10px
m-b-20
which means Margin Bottom 20px
m-l-5
which means Margin Left 5px
m-r-35
which means Margin Right 35px
Value can not be anything, 1,2,4,5,6. It has a step of 5px, eg: 5,10,15
Other options:
To remove margin from a HTML element add the class
no-margin
You can add this helper class to any element in your HTML code to set paddings
| First Prefix ( p-*) | Second Prefix(p-t/b/l/r-*) | Last Prefix(p-t-$value) |
|---|---|---|
| p for padding | t : top, b : bottom, l : left, r : right | 5,10,15,20, ... 150 |
example :
p-t-10
which means padding Top 10px
p-b-20
which means padding Bottom 20px
p-l-5
which means padding Left 5px
p-r-35
which means padding Right 35px
Value can not be anything, 1,2,4,5,6. It has a step of 5px, eg: 5,10,15
You need to modify email address and email title on
includes/config.json
in includes folder,
line 2
and
line 3
"MAIL_HOST": "info@yourdomain.com" "MAIL_TITLE": "[Arch] Contact Form Message"
with your or company contact email address and the title mail you want.
mail()function to make contact form work properly
Bootstrap grid includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts
Grid systems are used for creating page layouts through a series of rows and columns that house your content. Here's how the Bootstrap grid system works:
row
col-md-1 to
col-md-12
For more information about Bootstrap, visit: http://getbootstrap.com/
example :
.col-md-1.col-md-1.col-md-1.col-md-1.col-md-1.col-md-1.col-md-1.col-md-1.col-md-1.col-md-1.col-md-1.col-md-1.col-md-8.col-md-4.col-md-4.col-md-4.col-md-4.col-md-6.col-md-6
NoteBootstrap includes different grids for different screen sizes, "col-md" md stands for medium screen, the following table explains:
| Extra small devices Phones ( <768px) | Small devices Tablets (≥768px) | Medium devices Desktops (≥992px) | Large devices Desktops (≥1200px) | |
|---|---|---|---|---|
| Grid behavior | Horizontal at all times | Collapsed to start, horizontal above breakpoints | ||
| Container width | None (auto) | 750px | 970px | 1170px |
| Class prefix |
.col-xs-
|
.col-sm-
|
.col-md-
|
.col-lg-
|
| # of columns | 12 | |||
| Column width | Auto | ~62px | ~81px | ~97px |
| Gutter width | 30px (15px on each side of a column) | |||
| Nestable | Yes | |||
| Offsets | Yes | |||
| Column ordering | Yes | |||
Arch is built keeping mind to support a wide range of browsers and devices. We all major browers Google Chrome, Mozilla Firefox, Safari, Opera, Internet Explorer 9 and Above
| Chrome | Firefox | Internet Explorer | Opera | Safari | |
|---|---|---|---|---|---|
| Android | Supported | Supported | N/A | Not Supported | N/A |
| iOS | Supported | N/A | Not Supported | Supported | |
| Mac OS X | Supported | Supported | Supported | Supported | |
| Windows | Supported | Supported | Supported | Supported | Not Supported |
All images are only for demonstration purpose, however you can re-download them in sites below. Almost all (not including overclothing.com, Daniel Zenda, Freepik etc...) images are released free of copyrights under Creative Commons CC0.