NOWADAYS Documentation

Introduction

First of all, thank you for purchasing NOWADAYS template. I hope you like it. And if so, please don't forget to rate it 5 Stars in your account. Thanks.

Template Structure

Once you have downloaded the template and unzipped it, you will find the following folders structure (hit arrow to see what's inside):

  • _src SASS sources
    • assets
      • sass
        • theme-colors SASS sources of color schemes
        • inc SASS parts
          • libs 3rd party SASS
          • _vars.scss SASS variables
          • _reset.scss reset styles
          • _mixins.scss SASS mixins
          • _grid.scss SASS grid
          • _fonts.scss fonts
          • _extends.scss SASS extends
          • _animate.scss custom animations
        • styles.scss main styles SASS file
  • build here is HTML and all assets
    • ajax folder with PHP file to handle contact forms
    • assets
      • css
        • theme-colors compiled CSS color schemes
        • styles.css compiled main styles file
        • styles.min.css minified version
      • fonts folder with fonts
      • icons folder with icons font
      • img folder with images
      • js
        • common.js main file - all magic goes here
        • common.min.js minified version
        • jquery.min.js jQuery library
        • libs.js 3rd party JS libraries (Owl Carousel, Masonry, Twitter Post Fetcher)
        • libs.min.js minified version
      • video folder with video files (not included in download package)
    • *.html many HTML files goes here
  • docs your current location

Getting Started

  1. Change your e-mail in build/ajax/feedback.php
  2. Change your geographic location for Google maps
  3. Change your twitter ID to show your feed, not mine.
  4. Do other customizations (change placeholder images to real images, change social links, rewrite texts etc)
  5. That's all

Now you can upload files to web server and open template from web server.

Layouts

Pages can be Onepage or Multipage.
Onepage means that menu items will move you between sections.
In Multipage mode menu links will refer you to specified address.
it is controlled by adding p-onepage/ p-multipage class to body. Here is basic page structure:


<html>
	<head>
		...
	</head>
	<body class="p-onepage menuMobileClass*">
	
	<div class="preloader"></div>
	
	<div class="p-preloader">
		...
	</div>
	
	<div class="wrapper">
		
		<header class="header">
			...
			<ul class="menu">
				<li class="menu__item">
					<a href="#home" class="menu__link">Home</a>
				</li>
					...
				<li class="menu__item">
					<a href="#portfolio" class="menu__link">Portfolio</a>
				</li>
			</ul>
			...
		</header>
		<div class="wrapper-content">
			<section class="section s-main" id="home">
				...
			</section>
			...
			<section class="sectionClasses* s-portfolio" id="portfolio">
				<span class="section__subtitle">...</span>
				<h3 class="section__title">...</h3>
				...
			</section>
			<footer class="footer" id="footer">
				...
			</footer>
		</div>
	</div>
	</body>
</html>


<html>
	<head>
		...
	</head>
	<body class="p-multipage menuMobileClass*">
	
	<div class="preloader"></div>
	
	<div class="p-preloader">
		...
	</div>
	
	<div class="wrapper">
		
		<header class="header">
			...
			<ul class="menu">
				<li class="menu__item">
					<a href="index.html" class="menu__link">Home</a>
				</li>
					...
				<li class="menu__item">
					<a href="portfolio-fullwidth-col5-carousel.html" class="menu__link">Portfolio</a>
				</li>
			</ul>
			...
		</header>
		<div class="wrapper-content">
			<section class="section s-main" id="home">
				...
			</section>
			...
			<section class="sectionClasses* s-portfolio" id="portfolio">
				<span class="section__subtitle">...</span>
				<h3 class="section__title">...</h3>
				...
			</section>
			<footer class="footer" id="footer">
				...
			</footer>
		</div>
	</div>
	</body>
</html>

* - Mobile menu class can be menu-mobile-left/ menu-mobile-right.

** - Sections at the moment may have classes section/ section-2 + section-white/ section-lightgray/ section-darkgray/ section-dark.

Examples of other elements/sections variations you can find easily in HTML files. All blocks are well commented.

Customization

CSS

To make any changes you can edit build/assets/css/styles.css.

Or if you know SASS, then you can edit _src/assets/sass/*.scss files and compile _src/assets/sass/styles.scss to build/assets/css directory.

Color Schemes

Nowadays comes with 13 predefined color schemes. Default color scheme already included in styles.css. If you want to change scheme, then you should include one of CSS files from build/assets/css/theme-colors/ into your markup:







Also you can create your own scheme. To do that you need to create a copy one of the color scheme files ( build/assets/css/theme-colors/) and edit it by replacing color to another one.

If you are familiar with SASS:

RIGHT WAY:
You need to change theme color variable $theme: #55C594; in _src/assets/sass/inc/_vars.scss and compile _src/assets/sass/styles.scss to build/assets/css.

NOT RIGHT WAY in this case:
You can create a new additional file in _src/assets/sass/theme-colors/:


/********************************
@ YOURCOLOR THEME
********************************/

@import '../inc/_mixins';
@include theme-color(YOURCOLOR);

and compile it to build/assets/css/theme-colors/. Then don't forget to include it into markup, as described above.

Images

All background images are set in data-background-image attribute right in HTML markup, so don't try to search it in CSS.

Parallaxes

You can parallax not only images, but whatever. Just remember: Parallax element should have a greater height than its parent element.

Just add parallax class to the target element to create parallax effect. Simple example:


<section class="item">
	<div class="item__bg parallax" data-background-image="assets/img/282.jpg"></div>
</section>

CSS in this case should be something like this:


.item {
	height: 500px;
}
.item__bg {
/**
 * Real image height should be greater than 500px in this case
 * to make parallax possible
*/
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 50%;
}

Class parallax-wrapper will be automatically added to the parent element. In case above to the .item element. Default styles for these classes:


.parallax {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	will-change: transform;
	z-index: -1
}
.parallax-wrapper {
	position: relative;
	overflow: hidden;
	z-index: 0
}

Parallax has a few options which can be set through data-parallax-* attributes:


<section class="item">
	<div class="item__bg parallax" data-parallax-speed="0.75" data-parallax-fading="true" data-parallax-min-fading="60" data-parallax-scale="true" data-parallax-max-scale="1.25" data-background-image="assets/img/282.jpg"></div>
</section>

See options in action here

Default value Possible values Description
data-parallax-speed 0.5 [0.0 - 1.0] 0.0 - No parallax effect. 1.0 - max. possible speed
data-parallax-fading true false/true Fade element when scroll
data-parallax-min-fading 70 [0 - 100] Make sense if data-parallax-fading is enabled
data-parallax-scale false false/true Scale element when sroll
data-parallax-max-scale 1.5 [1 - common sense] Make sense if data-parallax-scale is enabled

Animations

You can easily animate blocks on scroll by adding class fx and data-animation-* attributes. For example:


...

Options:

Required Default value Description
data-animation-visible-percent no 10 How much percents of element should be visible to start animation
data-animation-name yes Equals to CSS property
data-animation-duration yes Equals to CSS property
data-animation-delay no Equals to CSS property
data-animation-fill-mode no both Equals to CSS property
data-animation-iteration-count no 1 Equals to CSS property

When element will be in visible area, class animated will be added immediately, so it can be useful to make custom animation, for example.

List of predefined data-animation-names.

Grid System

In this template used own responsive grid system. It looks like bootstrap v3, but based on display-inline technics and more simplified. We also have 12-columns system with the same classes names.

Extra small devices Phones (<768px) Small devices Tablets (≥768px) Medium devices Desktops (≥992px) Large devices Desktops (≥1200px)
Grid behavior Horizontal at all times Collapsed to start, horizontal above breakpoints
Container width None (auto) None (auto) None (auto) 1170px
Class prefix .col-xs- .col-sm- .col-md- .col-lg-
# of columns 12
Column width Auto ~71px ~90px ~99px
Gutter width 30px (15px on each side of a column)
Nestable yes
Offsets yes

For example:


col-sm-3
col-sm-3
col-sm-3
col-sm-3

* - container (max-width: 1170px) or container-fluid (full-width)

will be a four equal columns with 15px inner indents(padding):

.col-sm-3
.col-sm-3
.col-sm-3
.col-sm-3

More grid examples.

Offsetting columns

Move columns using .col-md-offset-left-*/ .col-md-offset-right-* classes. These classes increase the left/right margin of a column by * columns.
For example, .col-sm-offset-left-1 moves .col-sm-4 over one column:

.col-sm-4 .col-sm-offset-left-1
.col-sm-4 .col-sm-offset-left-3
.col-sm-4 .col-sm-offset-left-2
.col-sm-4 .col-sm-offset-right-2
.col-sm-6

Source:


.col-sm-4 .col-sm-offset-left-1
.col-sm-4 .col-sm-offset-left-3
.col-sm-4 .col-sm-offset-left-2
.col-sm-4 .col-sm-offset-right-2
.col-sm-6

Responsive hidden

You can hide column for specific screen size

Extra small devices Phones (<768px) Small devices Tablets (≥768px) Medium devices Desktops (≥992px) Large devices Desktops (≥1200px)
.hidden-xs Visible Visible Visible
.hidden-sm Visible Visible Visible
.hidden-md Visible Visible Visible
.hidden-lg Visible Visible Visible

Example:

.hidden-md

Source:


	
.hidden-md

Helper classes

List of some classes about align and indents

  • .align-left - equals text-align: left;
  • .align-right - equals text-align: right;
  • .align-center - equals text-align: center;
  • .align-middle - equals vertical-align: middle;
  • .align-top - equals vertical-align: top;
  • .align-bottom - equals vertical-align: bottom;
  • .no-padding - equals padding: 0;
  • .no-margin - equals margin: 0;
  • .pt-0 - equals padding-top: 0;
  • .pt-5 - equals padding-top: 5px;
  • .pt-10 - equals padding-top: 10px;
  • .pt-15 - equals padding-top: 15px;
  • .pt-20 - equals padding-top: 20px;
  • .pt-25 - equals padding-top: 25px;
  • .pt-30 - equals padding-top: 30px;
  • .pt-50 - equals padding-top: 50px;
  • .pr-0 - equals padding-right: 0;
  • .pr-5 - equals padding-right: 5px;
  • .pr-10 - equals padding-right: 10px;
  • .pr-15 - equals padding-right: 15px;
  • .pr-20 - equals padding-right: 20px;
  • .pr-25 - equals padding-right: 25px;
  • .pr-30 - equals padding-right: 30px;
  • .pr-50 - equals padding-right: 50px;
  • .pb-0 - equals padding-bottom: 0;
  • .pb-5 - equals padding-bottom: 5px;
  • .pb-10 - equals padding-bottom: 10px;
  • .pb-15 - equals padding-bottom: 15px;
  • .pb-20 - equals padding-bottom: 20px;
  • .pb-25 - equals padding-bottom: 25px;
  • .pb-30 - equals padding-bottom: 30px;
  • .pb-50 - equals padding-bottom: 50px;
  • .pl-0 - equals padding-left: 0;
  • .pl-5 - equals padding-left: 5px;
  • .pl-10 - equals padding-left: 10px;
  • .pl-15 - equals padding-left: 15px;
  • .pl-20 - equals padding-left: 20px;
  • .pl-25 - equals padding-left: 25px;
  • .pl-30 - equals padding-left: 30px;
  • .pl-50 - equals padding-left: 50px;
  • .mt-0 - equals margin-top: 0;
  • .mt-5 - equals margin-top: 5px;
  • .mt-10 - equals margin-top: 10px;
  • .mt-15 - equals margin-top: 15px;
  • .mt-20 - equals margin-top: 20px;
  • .mt-25 - equals margin-top: 25px;
  • .mt-30 - equals margin-top: 30px;
  • .mt-50 - equals margin-top: 50px;
  • .mr-0 - equals margin-right: 0;
  • .mr-5 - equals margin-right: 5px;
  • .mr-10 - equals margin-right: 10px;
  • .mr-15 - equals margin-right: 15px;
  • .mr-20 - equals margin-right: 20px;
  • .mr-25 - equals margin-right: 25px;
  • .mr-30 - equals margin-right: 30px;
  • .mr-50 - equals margin-right: 50px;
  • .mb-0 - equals margin-bottom: 0;
  • .mb-5 - equals margin-bottom: 5px;
  • .mb-10 - equals margin-bottom: 10px;
  • .mb-15 - equals margin-bottom: 15px;
  • .mb-20 - equals margin-bottom: 20px;
  • .mb-25 - equals margin-bottom: 25px;
  • .mb-30 - equals margin-bottom: 30px;
  • .mb-50 - equals margin-bottom: 50px;
  • .ml-0 - equals margin-left: 0;
  • .ml-5 - equals margin-left: 5px;
  • .ml-10 - equals margin-left: 10px;
  • .ml-15 - equals margin-left: 15px;
  • .ml-20 - equals margin-left: 20px;
  • .ml-25 - equals margin-left: 25px;
  • .ml-30 - equals margin-left: 30px;
  • .ml-50 - equals margin-left: 50px;

Widgets

Twitter feed

For first you need to create a new widget to get ID.

How to create a valid ID?

  1. Go to www.twitter.com and sign in as normal, go to your settings page.
  2. Go to "Widgets" on the left hand side.
  3. Create a new widget for what you need eg "user time line" or "search" etc.
  4. Feel free to check "exclude replies" if you don't want replies in results.
  5. Now go back to settings page, and then go back to widgets page and
  6. you should see the widget you just created. Click edit.
  7. Look at the URL in your web browser, you will see a long number like this: 345735908357048478

Now go to your HTML markup, find the line similar to:




and change 651768229925404672 with yours ID.

That's all. Now you should see your tweets. More info about Twitter Post Fetcher options you can get on github

Google maps

You need to get Google API key for your domain to use it

Follow these steps to get an API key:

  1. Go to the Google API Console.
  2. Create or select a project.
  3. Click Continue to enable the API and any related services.
  4. On the Credentials page, get a Browser key (and set the API Credentials).
    Note: If you have an existing Browser key, you may use that key.
  5. To prevent quota theft, secure your API key following these best practices.
  6. (Optional) Enable billing. See Usage Limits for more information.

Now you need to find maps container in all your pages. It looks like:


And replace AIzaSyBf-JoGKKntvN0K3i7kcta2Luk8okMgFRY with your API key.

Also you should specify your real location on the map.

How to get coordinates of your location?

  1. Open Google Maps.
  2. Right-click the place or area on the map.
  3. Select "What's here?"
  4. A card appears at the bottom of the screen with coordinates

And then replace 40.751915, -73.982556 with given coordinates.

Contact forms

You need to change e-mail to have feedback with your visitors.

  1. Go to build/ajax/feedback.php
  2. Find the line
  3. 
    $to = 'onebelarussianguy@gmail.com';
    
    
  4. Change email with yours. Also, you can specify multiple e-mail addresses separated with commas.

Note: Make sure that your hosting allows mail() function, otherwise it will not work.

Credits

Images

All images are from:

Note: Images are NOT included in download package

Plugins and Libraries

Support

There are a few ways to get support:

Included Support:

  • Fixing all issues related to original theme.
  • Answers to questions regarding theme.
  • Providing regular updates depending on your needs and feedbacks.

Not Included Support:

  • Customization of theme.
  • Specific support for third party plugins integrated in theme.

Need some new pages or advanced customization?

I'm available for freelance work if you want customize theme or create new pages and elements. So, if you have suggestion, please contact me.

Note: In order to provide you fast and efficient support, please send detailed description of the issue with screenshot/video or provide a direct URL.

Your read it entirely. Thanks!