Arcadia - Template Documentation

Overview

Arcadia is a clean modern, minimal professional HTML5 and CSS3 eCommerce Template, it is a perfect template for Clothing Stores, Fashion Stores, Electrical Stores and Sports Stores. The Arcadia template has a clean and well structured code base, and is mobile/tablet friendly. CSS and JS compression makes the template search engine friendly.

Arcadia was developed with HTML5, Sass, jQuery, Compass Framework, and Grunt.

Prerequisites

Source editing: If you wish to edit from the source files (located in the src folder) you will need to have the following prerequisites:

Node: https://nodejs.org/en/
GruntJS: https://gruntjs.com/installing-grunt
Compass CSS Framework: http://compass-style.org/install/

Configure the package.json file for dev dependencies and theme path etc.

{
  "name": "arcadia",
  "version": "1.0.0",
  "main": "src/js/main.js",
  "author": "edenCreates",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "devDependencies": {
    "grunt": "^1.0.1",
    "grunt-contrib-compass": "^1.1.1",
    "grunt-contrib-concat": "^1.0.1",
    "grunt-contrib-uglify": "^2.0.0",
    "grunt-contrib-watch": "^1.0.0",
    "grunt-contrib-connect": "^1.0.0"
  },
  "description": "",
  "theme_name": "Arcadia",
  "theme_path": "www-arcadia-apparel",
  "theme_src_path": "src/arcadia-apparel"
}

Normal editing: If you are unfamiliar with NPM and Grunt you can edit the compressed and uncompressed files within the 'www-{template-name}/dist/*/dev' folders.

HTML & Grid Structure

The template grid structure works using a Sass Mixins library called Flexbox Grid Mixin, it helps you write well-structured, readable, maintainable, component-based grids using Flexbox (CSS Flexible Box Layout Module).

Grid Settings if you wish to change any of the grid settings, this can be changed in src/tools/_settings.scss file from line 108.

$default-grid-container-width: 1460px !default;
$default-grid-container-padding: 30px !default;
$default-grid-columns: 12 !default;;
$default-grid-gutter: 20px !default;

HTML Example Usage:

<div class="l-grid-container"> <div class="l-grid-row"> <div class="l-grid-col-3 l-grid-col-lg-3 l-grid-col-md-6 l-grid-col-sm-6 l-grid-col-xs-12"><div>Column 1</div></div> <div class="l-grid-col-3 l-grid-col-lg-3 l-grid-col-md-6 l-grid-col-sm-6 l-grid-col-xs-12"><div>Column 2</div></div> <div class="l-grid-col-3 l-grid-col-lg-3 l-grid-col-md-6 l-grid-col-sm-6 l-grid-col-xs-12"><div>Column 3</div></div> <div class="l-grid-col-3 l-grid-col-lg-3 l-grid-col-md-6 l-grid-col-sm-6 l-grid-col-xs-12"><div>Column 4</div></div> </div> </div>

Break points you can see each break point defined below, this is located in the src/tools/_settings.scss file from line 102.

$screen-xs-phone: 480px !default; // Extra small screen / phone
$screen-sm-tablet: 768px !default; // Small screen / tablet
$screen-md-desktop: 1024px !default; // Medium screen / desktop
$screen-lg-desktop: 1200px !default; // Large screen / wide desktop

SCSS/CSS File Structure

Arcadia styling works from just one CSS file, located 'www-{template-name}/dist/css/default.css'. This is generated by the SCSS file compile by compass/grunt located 'src/scss/default.scss'

Please note: As previously mentioned in Prerequisites if you have no knowledge of Grunt and compiling software please edit the following file located 'www-{template-name}/dist/css/dev/default.css' directly and change link file path on the relevant pages.

Edit HTML file:

Change to

Arcadia template CSS uses the SMACSS layout. What is SMACSS? SMACSS (pronounced "smacks") is more of a style guide rather than a rigid framework. SMACSS is a way to examine your design process and as a way to fit those rigid frameworks into a flexible thought process. Learn about SMACS: https://smacss.com/

Settings and Tool files:

@import "tools/settings";
@import "tools/mixins";
@import "tools/functions";
@import "tools/animate";
@import "tools/flexbox";

Layout files:

/** Layout - Structure **/
@import "layout/grid";
@import "layout/header";
@import "layout/page-container";
@import "layout/site-overlay";
@import "layout/footer";

/** Layout **/
@import "layout/main";
@import "layout/cat";
@import "layout/page";
@import "layout/product";
@import "layout/cart";
@import "layout/account";
@import "layout/checkout";
@import "layout/blog";

Module files: (These are reusable elements on the page)

/** Modules **/
@import "modules/flexbox";
@import "modules/btn";
@import "modules/form";
@import "modules/featured";
@import "modules/brand-logos";
@import "modules/collection";
@import "modules/heading";
@import "modules/listing";
@import "modules/tooltip";
@import "modules/subscribe";
@import "modules/usps";
@import "modules/slider";
@import "modules/pagination";
@import "modules/breadcrumbs";
@import "modules/tabs";
@import "modules/reviews";

Plugin files:

@import "plugins/resp-accordion";
@import "plugins/responsive-tabs";
@import "plugins/owl-carousel.min";

JavaScript

Arcadia JavaScript works from just one JS file app.min.js, located in 'www-{template-name}/dist/js/'. This is generated by the JS file compiled by the grunt task runner located 'src/js/app.js'

Please note: As previously mentioned in Prerequisites if you have no knowledge of Grunt and compiling software please edit the following file located 'www-{template-name}/dist/js/app.js' directly and change script file path on the relevant pages.

Edit HTML file:

Change to

Editing Module files:
Module files are respective of the part of the page or the page they are located. For example home.js is for the index.html template which will have class on the page of jet-home, each file is part of the constructor file located in the root of the js folder. A list of files and classes used are below:

/src/js/modules/
 - basket.js - jet-basket
 - cat.js - jet-cat
 - checkout.js - jet-checkout
 - contact.js - jet-contact
 - global.js - // Does not have a class and is used throughout the website
 - header.js - jet-header
 - home.js - jet-home
 - product.js - jet-product

Google Map

To update the map pin to your location edit the file located 'www-{template-name}/dist/js/google-map.js'.

Change on line: 28 the Latitude and longitude within the brackets.

var myLatlng = new google.maps.LatLng(51.5118416,-0.1476274);

How do I find the latitude & longitude?
https://support.google.com/maps/answer/18539...

How do I Change the pin Address?
This is changed the in the contact.html file. Find the following line:

<div class="l-page-map" id="google-map-1" data-pin="<strong>Arcadia Apparel Theme</strong><br />157 Theme Utopia Road<br /> 157 Theme Utopia Road,<br/>London ES1 4SN"></div>

And change the address within the data-pin="" so for example it may look like below:

SVG Icons

We do not believe in adding lots of icon libraries and HTML frameworks which bloat out the template and increase load times, the template is condensed down to be easily scalable for all your projects.

All icons are loaded on the page within the svg-vault div > selector, located straight after the opening > body tag.

Arcadia SVG icons:

svg-icon-tick
svg-icon-cross
svg-icon-clock
svg-icon-mail
svg-icon-plus-circle
svg-icon-star
svg-icon-recycle
svg-icon-tools
svg-icon-award
svg-icon-search
svg-icon-phone
svg-icon-cancel-circle
svg-icon-google-plus
svg-icon-facebook
svg-icon-instagram
svg-icon-twitter
svg-icon-cross
svg-icon-quote
svg-icon-minus-circle
svg-icon-store
svg-icon-star-empty
svg-icon-star-full
svg-icon-pinterest
svg-icon-bag
svg-icon-basket
svg-icon-account-user
svg-icon-account-edit
svg-icon-account-logout
svg-icon-arrow-up
svg-icon-arrow-right
svg-icon-arrow-left
svg-icon-arrow-down
svg-icon-mail
svg-icon-heart
svg-icon-quick-view
svg-icon-diamond
svg-icon-innovation
svg-icon-development
svg-icon-comments
svg-icon-view

Implementing the SVG icons