“<%= themeName %>” Documentation by <%= themeAuthorURI %> - v1.0


“<%= themeName %>”

Created: <%= themeCreated %>
By: <%= themeAuthor %>
Contact: <%= themeAuthorURI %>

Thank you for purchasing our theme. If you have any questions that are beyond the scope of this help file, please feel free to email via our user page contact form here. Thanks so much!


Table of Contents

  1. Design
  2. Customization
  3. Child themes
  4. HTML Structure
  5. SCSS Files and Structure
  6. Fonts
  7. JavaScript
  8. Grunt
  9. Sources and Credits

A) Design - top

Basic thoughts on the design.


B) Customization - top

Description on how to customize the theme.


C) Child themes - top

The <%= themeName %>-theme of course provides child-theme support.

If you want to change some css-styling. Following the WordPress child-theme guidelines, the child-themes style.css should begin like this:

/*
 Theme Name:     <%= themeName %> childtheme
 Theme URI:      http://example.com/
 Description:    Description <%= themeName %>
 Author:         John Doe
 Author URI:     http://example.com/john-doe
 Template:       <%= themeName %>
 Version:        1.0.0
*/

@import url("../<%= themeNameSpace %>/style.css");

/******************************************************************************\
	Theme customization starts here
\******************************************************************************/

If you would like to edit the color, font, or style of any elements in one of these columns, you would do the following:

	.primary a {
		color: #someColor;
	}

If you find that the new style is not overriding, it is most likely because of a specificity problem. Scroll down in the CSS file and make sure that there isn't a similar style that has more weight.

I.E.

	.site .primary.page-content a {
		color: #someColor;
	}

So, to ensure that the new styles are applied, make sure that they carry enough "weight" and that there isn't a style lower in the CSS file that is being applied after them.


D) HTML Structure - top

Description of the HTML-structure of the theme.


E) SCSS Files and Structure - top

All the themes CSS is compiled from SASS/SCSS stylesheets. You find them in the themes scss directory. The style.scss file is the main file, which gets compiled to the themes style.css file. It includes the underscored files in the same directory, which each handle a separate part of the layout. The names should be self-explaining, however a short overview in including order follows.

vendor/normalize
Includes the normalizing css.

vendor/bourbon/bourbon
Includes the great bourbon mixin library.

_base.scss
Defines the main colors of the themes and basic HTML-element styling.

_grid-settings.scss
Defines and includes the base setup for the themes grid. The default grid is bourbons neat.

_typography.scss
Defines all fonts, typography related mixins and HTML-element styles. Defines even some font-size variables.

_components.scss
Here should be placed the basic mixins and placeholders for the theme.

_wp-base.scss
Defines some basic WordPress classes, like sticky, alignleft or bypostauthor.

_header.scss
Contains the header styles.

_navigation.scss
Contains the navigation styles.

_content.scss
Contains the basic content styles for posts and pages.

_post-formats.scss
Extends the content styling with styling for multiple WordPress post formats.

_footer.scss
Contains the footer styles.

To compile the SCSS files use a precompiling tool. This theme has been build with help of grunt and provides a basic grunt-configuration. So if you are using grunt you can start right away, after reading the grunt section.


F) Fonts - top

Description of the themes fonts.


G) JavaScript - top

The following JavaScript files/frameworks are used bby this theme.

HTML5 shiv for IE (js/html5shiv.js)
Making HTML5-elements work in older IE verions. Included by conditional comment only on IE-versions that need it.

WordPress standard jQuery
The current jQuery version, shipping with WordPress.

Scripts (js/scripts.js)
This themes JavaScripts.


H) Grunt - top

This theme provides a basic grunt configuration. All grunt related assets like the gruntfile.js and the package.js are placed in the grunt directory.

I assume you are familiar with nodejs, npm and grunt and have it up end running, otherwise: start here.

To setup grunt for this theme, go to the grunt directory and run

npm install --save-dev

That will install all needed node modules in grunt/node_modules. After the installing process is done, you can manage the following available tasks, by running these commands:

grunt
Is running the default task-list, which is the same as running grunt jshint, grunt uglify and grunt sass.

grunt jshint
Checks the JavaScript files and gives you some hints.

grunt uglify
Takes the JavaScript files and concatenates and minifies it to one file: js/scripts.min.js, which is included in the theme.

grunt sass:dev
Is compiling all the scss files to one expanded style.css in the themes root directory.

grunt sass:prod
Is compiling all the scss files to one compressed style.css in the themes root directory.

grunt watch
Watches the scss and js files for changes and runs the above tasks automatically, plus giving you a cross-OS desktop notice on success.

grunt dist
Runs grunt uglify and grunt sass:prod, takes all the production relevant theme files and places them in the dist directory under the themes root. Now the dist directory contains a production ready theme, which can be uploaded to a live server.

grunt phpcs
Requires PHP CodeSniffer with WordPress standard installed in the development environment.
Checks the themes php files against the WordPress coding standards.


I) Sources and Credits - top

We've used the following third party scripts and tools.


Once again, thank you so much for purchasing this theme. As said at the beginning, we'd be glad to help you if you have any questions relating to this theme. No guarantees, but we'll do our best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking the question in the "Item Discussion" section.

<%= themeAuthor %>

Go To Table of Contents