Multipurpose Agency HTML Template
DOCUMENTATION
- Doc version: 5.0
- Created: 24 March 2022
- Last update: 04 August 2022
OVERVIEW
Agon is a Statup / Agency / SaaS template that is specifically designed to make modern websites. You can use it to build an agency, digital agency, startup agency, creative agency, creative business, creative multipurpose website, or freelance website.
Agon was built with Pug, Sass and ES6 and comes packed with smart developer tools such as Webpack 5, Gulp, Babel, Autoprefixer, PostCSS, Manifest, Eslint, Rimraf, Browsersync...etc... which will save you time and help you build your project faster and more efficiently.
Moreover, our HTML solution provides a set of features designed to make your website more sustainable:
- W3C valid coding
- Figma design file included
- SEO-ready layout
- Google Fonts
- Cross-browser support
- SCSS source files
- PUG source files
- Webpack Module Bundler
- Gulp Module Bundler
- ...and many more...
Agon was built with Webpack 5, Gulp, Pug, Bootstrap 5, HTML5, CSS3 & Jquery. It is Responsive, Retina ready & Multi-Device supported. All code is beautifully written & W3C Validated.
This template written by SASS, with 7-1 pattern
We have a dedicated support center for all of your support needs. It includes our Documentation and Ticket system for any questions you have. We usually get back to you within 12-24 hours.
A quick way to integrate the Forms into your project. Get Agon today and be setup in minutes!
Main Features
Creative Design: Agon is a bold template that organizing content to follow natural eyes, striking balance between beautiful and visual hierarchy.
Fully Responsive: The template passed Mobile-Friendly Test – by Google. We also tested carefully the template on almost devices: laptop, tablet, and phone. All elements are 100% responsive and ready for all devices.
Pixel Perfect Design
Color & Fonts is easily changed
W3C Validated Code
Webpack 5, Gulp, Pug HTML5, Bootstrap 5.x, CSS3, ES6 used
Compatible Browsers: IE8+, Firefox, Safari, Opera, Chrome
Well documentation included
Ticket System Support
What You Get
- All Webpack development source files
- All Gulp development source files
- HTML template (builded from Webpack)
- Figma design file (Save up to $12)
- Documentation
Note
- All images are just used for Preview Purpose Only. They are not part of the template and NOT included in the final purchase files.
- This is not a WordPress theme, It is a HTML5 template
Change log
VERSION 5.0
- Add development code using Gulp
VERSION 4.0
- Optimize CSS files. Increase page load speed.
VERSION 3.2
- Add product single page
VERSION 3.1
- Fix responsive issues
VERSION 3.0
- Add 2 shop pages
VERSION 2.0
- Add 4 home pages
VERSION 1.0
- First release.
STRUCTURE
Products Files Structure
When you run 'npm run prod', or 'gulp' a directory named 'dist' will be created, which is the template directory compiled from Webpack, the directory structure is as follows:
Development Source Code
Many front-end developers use Webpack , others use Gulp. So we offer both codes for developers. The CSS code generated from Webpack will be a combination of all CSS vendors, plugins...The CSS files generated from Gulp will not be combine.
Webpack Development Files Structures
To develop, please run 'npm run prod', a directory named 'dist' will be created, the development directory structure is as follows:
Gulp Development Files Structures
To develop, please run 'gulp', then 'gulp serve' a directory named 'dist' will be created, the development directory structure is as follows:
HTML Structure
All information within the main content area is Agoned within a body tag. The general template structure is pretty the same throughout the template. Here is the general structure of main page (index.html).
CSS Structure
These are the css files that are loaded into templates in Head Section.
Or
Import google fonts
Import third party CSS library
You can find this in: src/assets/scss/vendors/_vendors-import.scss
JS Structure
These are the list of Javascript files that are loaded into templates in end of the Body Section.
You can find this in: src/views/components/scripts.pug
Wepack Dependencies
package.json
"devDependencies": {
"@babel/core": "^7.14.3",
"@babel/preset-env": "^7.14.4",
"autoprefixer": "^10.2.6",
"babel-loader": "^8.2.2",
"babel-plugin-module-resolver": "^4.1.0",
"babel-preset-es2015": "^6.24.1",
"beautify-html-webpack-plugin": "^1.0.3",
"copy-webpack-plugin": "^9.0.0",
"css-loader": "^5.2.6",
"eslint": "^7.27.0",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^6.2.0",
"html-webpack-plugin": "^5.3.1",
"mini-css-extract-plugin": "^1.6.0",
"node-sass": "^6.0.0",
"optimize-css-assets-webpack-plugin": "^6.0.0",
"postcss": "^8.3.0",
"postcss-cssnext": "^3.1.0",
"postcss-import": "^14.0.2",
"postcss-loader": "^5.3.0",
"postcss-modules": "^4.0.0",
"postcss-preset-env": "^6.7.0",
"pug": "^3.0.2",
"pug-loader": "^2.4.0",
"rimraf": "^3.0.2",
"sass-loader": "^12.0.0",
"style-loader": "^2.0.0",
"terser-webpack-plugin": "^5.1.3",
"url-loader": "^4.1.1",
"webpack": "^5.70.0",
"webpack-cli": "^4.9.2",
"webpack-dev-server": "^3.11.2",
"webpack-notifier": "^1.13.0"
},
Gulp Dependencies
package.json
"devDependencies": {
"browser-sync": "^2.27.10",
"gulp": "^4.0.2",
"gulp-autoprefixer": "^8.0.0",
"gulp-cached": "^1.1.1",
"gulp-concat": "^2.6.1",
"gulp-pug": "^5.0.0",
"gulp-remember": "^1.0.1",
"gulp-sass": "^5.1.0",
"sass": "^1.54.0"
}
Technologies used
- Pug/Jade https://pugjs.org (This is a template engine and is a fastest way to write HTML)
- Sass http://sass-lang.com/ (This is a CSS preprocessor which is used to write styles)
- Webpack 5 https://webpack.js.org (A module bundler to manager all the dependencies of your website)
- Gulp 4 https://gulpjs.com (A module bundler to manager all the dependencies of your website)
Routes/pages of the website
-
`/`: Page to show the home or main page -
`/blog`: Page for blog -
`/contact`: Page for contact
Developing & Compiling
- Start the
`development server`of the project with `yarn run dev` - run the command
`yarn run prod`and the production build is going to be generated in the `dist` folder.
UPDATE
Important Note:
- Backup your website and template folders completely to make sure you have a restore point in case of any complications.
Update using FTP
- Download the latest version of the template to your device.
- Connect to your hosting via FTP software
- Upload the template folder you unzipped to your site folder
- You should be asked to confirm overwriting of this folder and its contents. Confirm the overwrite.
SOURCES & CREDITS
THANK YOU
Thank you so much for using this template.
- AliThemes Team -