Xpressmag Magazine & News Portal HTML Template

Introduction


Xpressmag is ultra fast clean and responsive Magazine & News portal HTML template. Xpressmag can be used to build any Magazine, Newspaper, News portal, Editorial websites & Blogs.

The below documentation guide a beginner to develop their website.

Whats inside the download package


Before you start to edit on the file first you should know about the folder components

image

Below is the screeshot of the template folder itself.

image

According to the folder structure, Assets folder is where we have kept our images, fonts, scss, css and Js.

How to use Gulp & SASS


Gulp :


CASE 1 : We believe that you already have little knowledge of gulp. Gulp.js file is include in the main package file. Check the gulp.js file you will come to know that plugins are needed to be installed. Let me guide little with the process.


  1. 1.Downlaod and install Node.js https://nodejs.org/en/download/

  2. 2.After that you need to install Node. After installing node its time to install gulp globally.

  3. 3.You can check this guide from Gulp js get started documenation https://gulpjs.org/getting-started

  4. We hope you already learn to use Gulp if still you have confusion. Here is video tutorial for you https://www.youtube.com/watch?v=CxM1RYnCYwM

  5. We believe that you have learn Gulp completely. Now you can start bundelling js files.

  6. In case if you haven't lean gulp yet DO NOT fred, you can use this template still without gulp. Follow CASE 2 below.




CASE 2 : We belive you are reading this case because you couldn't use gulp. We will now help you to understand the folder structure and link the required assets file in you HTML files.


  1. First understand the folder strtucture. Dist folder contains distubution files. All the minified js files, minified compiled css, compress images & icons fonts.

  2. Same way, SRC contains source files. All source js files & Source SASS files etc.

  3. If you DO NOT wish to continue with the GULP then simply ignore the js bundle files that are used in the HTML files. Now you can link the js files which are inside the SRC folder.

  4. Hope you understood what we were trying to say. If still have confusion please let us know at our support email.

SASS :


if you have knowledge of SASS go ahead and start using Source SASS files which are inside SRC folder. You can use KOALA compiler OR similar app to compile the SASS to CSS.

If you do not have knowledge of SASS then you can simply create a style file inside DIST / CSS folder, name it as you want. Link that to the HTML files & start writing your own CSS. Make sure you link that below our CSS file in HTML file.

Source js files


We have placed all source js files inside SRC/JS directory. Where Custom is directory for custom js, Plugins directory for external library & JQuery directory for jQuery library. If you want to add external libary make sure you put that inside plugin folder and run Gulp. It will bundle all js outputs to DIST/JS/bundle.min.js file.

In the figure below you can check how we have placed our source js file.

image

Source SCSS Files


We have placed our SCSS files inside SRC/SCSS, Where main.scss acts as a master importer & custom stylesheet is inside custom/styles.scss. Make sure to play a little bit with masin.scss file you can easily understand the scss flow. We have used few mixins and tried our best to write Scss like in palin css.

You can find table of content for custom stylesheet inside scss file at custom/_styles.scss

image

Icon Fonts File


Icon fonts file can be found inside dist/fonts directory. CSS of fonts file is included through SCSS file. FontAwesome is uded for icons.

image

Images


All the images that are used for template are placed inside dist/img/ directory.

Support


Looking for support ? Shoot us email at offshorethemes@gmail.com. We will be happy yo assist you.