Newsman Documentation

Package files content

The package you downloaded from themeforest include the following structure:

The main HTML file is index.html will open the homepage.

Different usage of this mobile template

This mobile template can be used to create a mobile website, a web app, and a native app. Depending on your needs you can use this layout to create the desired final product.

Creating a mobile website, redirecting from your desktop website to the mobile one

You can use this template to create a mobile version of your website. Considering that you main desktop website is not responsive or you want a separate mobile version of it, the template is a perfect solution to do that.

To create a separate mobile version of your website using this template will require to create a subdomain or a subfolder of your domain (mobile.yourwebsite.com or m.yourwebsite.com) where the main files will be copied.

To redirect users to your new created mobile website you will need to use a redirection code. First you need to add a mobile detection code, and then redirect mobile users to the mobile url.

For more information about mobile detection and redirection check THIS WEBSITE.

Converting it into a native app

To convert this template into a native app you will need to use solutions like phonegap.

"Easily create apps using the web technologies you know and love: HTML, CSS, and JavaScript.

PhoneGap is a free and open source framework that allows you to create mobile apps using standardized web APIs for the platforms you care about.

More about phonegap on their WEBSITE

Index page structure

The main page of this template is index.html file. This is the homepage of your website, the first page the browser will open when users will access your website.


<body class="theme-dark color-theme-white">
	<div id="app">
		<div class="view view-main view-init safe-areas" data-master-detail-breakpoint="800" data-url="/">
			<div class="page page-home">
				<div class="page-content">
					
					<!-- Navbar -->
					<div class="navbar navbar-transparent safe-areas">
					  <div class="navbar-bg"></div>
					  <div class="navbar-inner">
						<div class="left">
						  <a href="#" class="link icon-only newsman-notification">
							<i data-feather="bell"></i>
							<span class="badge color-red">6</span>
						  </a>
						</div>
						<div class="right">
						  <a class="link icon-only">
							<i data-feather="search"></i>
						  </a>
						</div>
					  </div>
					</div>
					<!-- /Navbar -->
					
					
					<!-- Page Content -->
					<div class="newsman-block">
						
						<!-- Block Title -->
						<div class="newsman-block-title display-flex align-items-center justify-content-space-between">
							<div>
							  <div class="block-title-medium no-margin block-title text-semibold">Today News</div>
							  <div class="newsman-opacity block-title no-margin newsman-block-subtitle">Read trending news</div>
							</div>
							<div class="newsman-badge">
							  <a href="#" class="badge bg-color-white text-color-black">SEE ALL</a>
							</div>
						</div>
						<!-- /Block Title -->
						
						<!-- Block Content -->
						<div class="newsman-block-content">
							Your Content
						<div>
						<!-- Block Content -->
												
					</div>
					<!-- /Page Content -->
					
				</div>
			</div>
		</div>
	</div>
</body>

CSS Files

Main CSS File

The main CSS File is app.css, it's located in CSS folder

At the top of the file there is a "Table of Contents" list that will guide through the CSS code.


	/*==============================================
	[Main stylesheet app.css]

	Author:			WM_Team
	Version:		1.1
	Created:		06 June 2020
	Last updated:	06 June 2020
	Template:		Newsman - Blog & Magazine Mobile HTML Template
	================================================*/
	/*
	[Table of Contents]

	01. GENERAL
	02. FULL POST BACKGROUND
	03. AUTHORS
	04. BLOG LIST
	05. MASONRY POST
	06. CARD POST
	07. BIG LIST POST
	08. SOCIAL MEDIA
	09. SEARCH INPUT
	10. POST GRID
	11. PROFILE PAGE
	12. SINGLE PAGE
	13. 404 PAGE
	14. BIG LIST SINGLE
	*/

Framework7 CSS File

The template use framework7.bundle.min.css file, and is the script CSS we are using to create the main functionality of the pages. WE RECOMMEND NOT TO EDIT THIS.

Javascript Files

The template includes 3 main javascript files which are loaded at the end of each index file


	<!-- Create Masonry style-->
	<script src="https://cdn.jsdelivr.net/npm/macy@2"></script>
	<!-- Icons -->
	<script src="js/feather.min.js"></script>
	<!--  Main core functions for the pages and layout -->
	<script src="js/framework7.bundle.min.js"></script>
	<!--   JS File to initialize all routes in the app -->
	<script src="js/routes.js"></script>
	<!--    Custom functions of the template. -->
	<script src="js/app.js"></script>

Sources and Credits

Scripts Credits

Framework7 - is a free and open source framework to develop mobile, desktop or web apps with native look and feel. It is also an indispensable prototyping tool to show working app prototype as soon as possible in case you need to.
Macy.js is a lightweight, dependency-free, 4kb masonry layout library, designed for a hassle-free configuration.
Feather is a collection of simply beautiful open source icons. Each icon is designed on a 24x24 grid with an emphasis on simplicity, consistency, and flexibility.

Images Credits

Unsplash is beautiful, free images and photos that you can download and use for any project. Better than any royalty free or stock photos.
Freepik a Graphic resources

NOTE: *All images are not included in the main files only to demo

Changelog

First release: June 06, 2020

Newsman - HTML Mobile Template