Table of contents
- Folder Structure
- HTML Structure
- CSS File and Structure
- Using Build Process
- Manually Overriding Files
Within the template you’ll find the following folders:
/dist (production ready HTML/CSS/JS files)
/src (KIT/SASS/JS source files when using build process)
This responsive theme built with on UIkit 3.2 so please refer to original docs for more info and components use https://getuikit.com/docs/introduction.
The template consists of:
dist/index.html - Home knowledgebase page
dist/article.html - Article page
dist/subcategory.html - Subcategory page
dist/terms.html - Terma page
dist/contact.html - Contact us page with a form
Header navigation link are located within the
<nav> tag, active page link has
"uk-active" class assigned.
Copyright and social icons can be edited inside the
Social icon link example:
<a href="https://www.instagram.com/" data-uk-icon="icon: instagram" class="uk-icon-link"></a>
All available icons are documented here: https://getuikit.com/docs/icon.
Template comes with contact form in contact.html file. You can copy paste the form to any page you need. If you need to add form input fields full documentation is located here https://getuikit.com/docs/form.
Template comes with autocomplete Awesomplete search included, documentation can be found here http://leaverou.github.io/awesomplete/. Awesomplete and demo search JS is included before closing
CSS File and Structure
To modify the look and feel of the template, edit the SASS files located in
src/scss/main.scss - Main template styles file that imports partial SASS files
If you would like to edit a specific Uikit component, you can either:
override SASS variables in
or modify/create a custom class in
For the list of all available variables and mixins in Uikit see the following files:
Using Build Process
npm install (run once to install UIKit and awesomplete dependencies)
Note: npm must be first installed globally, see npm site https://www.npmjs.com/. CodeKit is then used to compile template source files (KIT/SASS/JS) in root folder.
The following scripts are loaded before the body closing tag:
dist/js/awesomplete.js - Contains Awesomplete search script
The following script are loaded head tag:
dist/js/uikit.js - Contains main UIkit scripts and icons
Manually Overriding Files
If you decide to manually modify CSS/JS files (not recommended) use
/dist folder. If you would like to edit a specific component of the site, simply check the table of contents in the
main.css template file, and then scroll down until you find the appropriate style that needs to be edited.
If you would like to edit the primary color of the theme you should do “Replace all” color
#30aabc with the desired one.
Template uses UIkit front-end framework version 3, documentation is located here: https://getuikit.com/docs/introduction.
Depending on where you purchased the product, contact us:
- Creative Market: Contact us through “Ask a question” button on the products page on Creative Market
- Gumroad: The purchase receipt contains our contact email address
Customer support is provided for up to six months from the purchase date and is provided Monday to Friday during the business week. We aim to answer all support requests daily, most are handled within 24h.
Before contacting support please:
- Read this documentation
- Describe your problem in detail
- Include links
- Attach screenshot