PortKey Documentation
An overview of the PortKey HTML Theme, Documentation of the HTML, CSS, jQuery, how to use, basic skills, examples, and more.
An overview of the PortKey HTML Theme, Documentation of the HTML, CSS, jQuery, how to use, basic skills, examples, and more.
Some very useful Tips how to work better with the Theme, please read!
Within the download you'll find the following directories and files.
HTML
│
├─ CSS
│ │
│ ├── font-awesome
│ │
│ └── font
│ │
│ └── themecss
│
├─ header
│
├─ ico
│
├─ image
│ │
│ ├─ demo
│ │
│ └─ theme
│
├─ js
│ │
│ ├─ bootstrap
│ │
│ └─ countdown
│ │
│ ├─ datetimepicker
│ │
│ ├─ dcjqaccordion
│ │
│ ├─ jquery-ui
│ │
│ ├─ lightslider
│ │
│ └─ owl-carousel
│ │
│ └─ themejs
│ │
│ └─ unveil
│
├─ SASS
│
├─ php
│
├─ index.html
│
└─ other-files.html
The template is based on Bootstrap 3 Framework - http://getbootstrap.com
<div class="row"> <div class="col-md-12"> Level 1 column <div class="row"> <div class="col-md-6">Level 2</div> <div class="col-md-6">Level 2</div> </div> </div> </div>
Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. If you need more information about the Main Grid, please visit this site: http://getbootstrap.com/css/#grid
The organization of the CSS is one of our priorities. These are the CSS file we're using in the template.
Please note: all of these files below are required and always needed.
bootstrap
This is the Main CSS File from Bootstrap3
font-awesome
This is the css file that will take care of the PortKey icons buil with Fontawesome.
themecss
Here you'll find the CSS Files for Megamenu css, Listing tabs css and Lib css
theme.css
This is the Main CSS File for the PortKey Theme with all necessary Styles and Overrides. For Colors of the Theme use "theme-blue.css" or "theme-red.css".
Please note: all of these files below are optional and not needed if you decide to drop one of these Features.
so_megamenu.css
CSS File for the Module Megamenu
so-categories.css
CSS File for the Module Categories
so-listing-tabs.css
CSS File for the Module Listing Tabs
lib.css
Here you'll find the CSS Files for jGrowl css and Magnific Popup css
These are the SASS file we're using in the template.
Please note: all of these files below are required and always needed.
variables
Override Boostrap variables BEFORE calling _boostrap.scss
Bourbon
A Lightweight Sass Tool Set - http://bourbon.io/
directional
Here you'll find the SASS Files for bootstrap_breakpoints SASS, Directional SASS and rem SASS
1.Bootstrap breakpoints - Variables for responsive design
2.Directional - Makes supporting both left-to-right (LTR) and right-to-left (RTL) easy
3.Rem - The ultimate PX/REM mixin
homepage
Here you'll find the SASS Files for Header SASS, Home Page SASS.
Use separately for each Home page layout.
theme
Here you'll find the CSS Files for _productlist.scss, _productdetail.sass, _module.scss ... It is a file that is common to layouts
theme.scss
This is the Main SASS File for Home page 1 with all necessary Styles and Overrides.
home2.scss
This is the Main SASS File for Home page 2 with all necessary Styles and Overrides.
home3.scss
This is the Main SASS File for Home page 3 with all necessary Styles and Overrides.
home4.scss
This is the Main SASS File for Home page 4 with all necessary Styles and Overrides.
jQuery - is a Javascript library that greatly reduces the amount of code that you must write. For more information, please visit jQuery.com.
The initialization of the elements, libs and features is made by the file application.js, in the JS folder.
Please note: one of these files below (bootstrap or bootstrap.min.js) are required and always needed.
Bootstrap
This is the Main jQuery File from Bootstrap3
Countdown
Here you'll find the jQuery Files for the Countdown plugin
owl-carousel
Here you'll find the jQuery Files for the Owl Carousel plugin
Datetimepicker
Here you'll find the jQuery Files for the Datetimepicker plugin
Dcjqaccordion
Here you'll find the jQuery Files for the Dcjqaccordion plugin
Jquery-ui
Here you'll find the jQuery Files for the jquery-ui plugin
Lightslider
Here you'll find the jQuery Files for the Lightslider plugin
Unveil
Here you'll find the jQuery Files for the unveil plugin
themejs
Here you'll find the jQuery Files for Megamenu, Toppanel, Lib ...
Please note: most of these files below are optional and not needed if you decide to drop one of these Features.
application.js
VERY IMPORTANT: all jQuery Plugins are initialised within this File!
so_megamenu.js
jQuery File for the Megamenu
toppanel.js
jQuery File for Top Menu
libs.js
Here you'll find the jQuery Files for Cookie Plugin, elevateZoom, Magnific Popup ...
This Theme has various Style options for different Kinds of Layouts.
PortKey comes with 5 predefined color schemes. Default color scheme already included in theme.css. If you want to change scheme, then you should include one of CSS files from html/css/ into your markup:
<!-- styles Default = Orange --> <link rel="stylesheet" href="css/theme.css"> <!-- make sure that color scheme file new alternative main styles file --> <link rel="stylesheet" href="css/theme-blue.css">
Also you can create your own scheme. To do that you need to create a copy one of the color scheme files ( html/sass/variables/) and edit it by replacing color to another one.
If you are familiar with SASS:
You need to change theme color variable $linkColor: #F4A137 in html/sass/variables/_orange.scss(import in file theme.scss) and compile html/sass/theme.scss to html/css.
To use another Font, please choose your new Font at the Google Font Site, include the given Style Tag inside the Head Section of the Theme.
In the default Theme we have used this Code for example:
<link href='https://fonts.googleapis.com/css?family=Libre+Franklin:400,500,600,700,800&display=swap' rel='stylesheet' type='text/css'>
The Main Layout of the Theme can easily be changed by adding or removing one CSS Class to the Body.
Use this for the Wide Version:
<body> <div id="wrapper" class="wrapper-full"> ... </div> </body>
Use this for the Boxed Version:
<body> <div id="wrapper" class="wrapper-boxed"> ... </div> </body>
You can define the Background for the Boxed Version by adding a class to the Body.
Available Classes for the Body are pattern-1 - pattern-45.
<body class="pattern-1"> ... </body>
The template has 8 headers. If you want to use any header you have to go, for example, to html\header\header2.html. See demo for example: Header style > Custom header 1
PortKey is using the default Bootstrap menu system with some changes for Mega Menu.
The menu is well commented and you can understand the structure quite easy. Check one of the demo pages to see the structure.
PortKey Icons and Font Awesome Icons can use the classes bellow. Please check the demo to see how you can combine them.
Size: .fa-2x, .fa-3x, .fa-4x, .fa-5x
Color: .color-default, .color-success, .color-info, .color-warning, .color-danger
We put together with the help of Fontastic a list of over 2130 icons and made a font for you to use in your design. The default structure of the icon can be seen bellow.
<i class="icon gfx-atom"></i>
For many Elements we use the great Font Awesome which gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS..
See all Icons or See some examples in Code
We use two Main Sliders in this Theme, the OWL Carousel.
Touch enabled jQuery plugin that lets you create beautiful responsive carousel slider.. The OWL Carousel must be initialised in the jQuery File application.js. Here is the default structure of the carousel:
<div class="class="owl-carousel" data-nav="no" data-dots="yes" data-margin="20" data-items_md="4" data-items_sm="3" data-items_xs="1" > <div class="class="carousel"> <div class="class="carousel-item">Carousel Item Content</div> <div class="class="carousel-item">...</div> <div class="class="carousel-item">Carousel Item Content</div> </div> </div>
AS you can see the carousel has some option that can be added via data-*="". Here are the options:
Please see the demo for examples of how you can customize your carousel and sliders.
The Lightbox which is integrated in the Theme runs with the Magnific Lightbox, a awesome jQuery Plugin to handle different Media Types. The Lightbox is initialised in the application.js. For more Informations please have a look at the Documentation:
There are 12 effects , and you can choose one of them
To change your desired effect, find the code:
<div id="wrapper" class="wrapper-full banners-effect-7> ... </div>
and then replace the number "7" with one of the number from 1 to 12. Demo 12 effects
We have added a lot of Sample Pages to give you some Inspiration how your Content maybe could look like. Please see the different HTML Pages.
We have used the following Recources and Scripts:
General
SASS
Scripts and CSS