generator-wp-theme

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <head lang="en"> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>Theme Documentation: <%= themeName %></title>  <link rel="stylesheet" href="assets/blueprint-css/screen.css" type="text/css" media="screen, projection"> <link rel="stylesheet" href="assets/blueprint-css/print.css" type="text/css" media="print">  <link rel="stylesheet" href="assets/blueprint-css/plugins/fancy-type/screen.css" type="text/css" media="screen, projection"> <style type="text/css" media="screen"> p, table, hr, .box { margin-bottom:25px; } .box p { margin-bottom:10px; } </style> </head> <body> <div class="container"> <h3 class="center alt">“<%= themeName %>” Documentation by <a href="<%= themeName %>"><%= themeAuthorURI %></a> - v1.0</h3> <hr> <h1 class="center">“<%= themeName %>”</h1> <div class="borderTop"> <div class="span-6 colborder info prepend-1"> Created: <%= themeCreated %> By: <%= themeAuthor %> Contact: <a href="<%= themeAuthorURI %>"><%= themeAuthorURI %></a> </div> <div class="span-12 last"> 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 <a href="http://themeforest.net/user/USERNAME">here</a>. Thanks so much! </div> </div> <hr> <h2 id="toc" class="alt">Table of Contents</h2> <ol class="alpha"> <li><a href="#design">Design</a></li> <li><a href="#wpcustomizer">Customization</a></li> <li><a href="#childthemes">Child themes</a></li> <li><a href="#htmlStructure">HTML Structure</a></li> <li><a href="#scssFiles">SCSS Files and Structure</a></li> <li><a href="#fonts">Fonts</a></li> <li><a href="#javascript">JavaScript</a></li> <li><a href="#grunt">Grunt</a></li> <li><a href="#credits">Sources and Credits</a></li> </ol> <hr> <h3 id="design">A) Design - <a href="#toc">top</a></h3> Basic thoughts on the design. <hr> <h3 id="wpcustomizer">B) Customization - <a href="#toc">top</a></h3> Description on how to customize the theme. <hr> <h3 id="childthemes">C) Child themes - <a href="#toc">top</a></h3> 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: <pre> /* 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 \******************************************************************************/ </pre> If you would like to edit the color, font, or style of any elements in one of these columns, you would do the following: <pre> .primary a { color: #someColor; } </pre> 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. <pre> .site .primary.page-content a { color: #someColor; } </pre> 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. <hr> <h3 id="htmlStructure">D) HTML Structure - <a href="#toc">top</a></h3> Description of the HTML-structure of the theme. <hr> <h3 id="scssFiles">E) SCSS Files and Structure - <a href="#toc">top</a></h3> 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. <dl> <dt>vendor/normalize</dt> <dd> Includes the normalizing css. </dd> <dt>vendor/bourbon/bourbon</dt> <dd> Includes the great bourbon mixin library. </dd> <dt>_base.scss</dt> <dd> Defines the main colors of the themes and basic HTML-element styling. </dd> <dt>_grid-settings.scss</dt> <dd> Defines and includes the base setup for the themes grid. The default grid is bourbons neat. </dd> <dt>_typography.scss</dt> <dd> Defines all fonts, typography related mixins and HTML-element styles. Defines even some font-size variables. </dd> <dt>_components.scss</dt> <dd> Here should be placed the basic mixins and placeholders for the theme. </dd> <dt>_wp-base.scss</dt> <dd> Defines some basic WordPress classes, like sticky, alignleft or bypostauthor. </dd> <dt>_header.scss</dt> <dd> Contains the header styles. </dd> <dt>_navigation.scss</dt> <dd> Contains the navigation styles. </dd> <dt>_content.scss</dt> <dd> Contains the basic content styles for posts and pages. </dd> <dt>_post-formats.scss</dt> <dd> Extends the content styling with styling for multiple WordPress post formats. </dd> <dt>_footer.scss</dt> <dd> Contains the footer styles. </dd> </dl> 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 <a href="#grunt">grunt</a> section. <hr> <h3 id="fonts">F) Fonts - <a href="#toc">top</a></h3> Description of the themes fonts. <hr> <h3 id="javascript">G) JavaScript - <a href="#toc">top</a></h3> The following JavaScript files/frameworks are used bby this theme. <dl> <dt>HTML5 shiv for IE (js/html5shiv.js)</dt> <dd> Making HTML5-elements work in older IE verions. Included by conditional comment only on IE-versions that need it. </dd> <dt>WordPress standard jQuery</dt> <dd> The current jQuery version, shipping with WordPress. </dd> <dt>Scripts (js/scripts.js)</dt> <dd> This themes JavaScripts. </dd> </dl> <hr> <h3 id="grunt">H) Grunt - <a href="#toc">top</a></h3> 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 <a href="http://gruntjs.com/" title="gruntjs">here</a>. To setup grunt for this theme, go to the grunt directory and run <pre> npm install --save-dev </pre> 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: <dl> <dt>grunt</dt> <dd> Is running the default task-list, which is the same as running grunt jshint, grunt uglify and grunt sass. </dd> <dt>grunt jshint</dt> <dd> Checks the JavaScript files and gives you some hints. </dd> <dt>grunt uglify</dt> <dd> Takes the JavaScript files and concatenates and minifies it to one file: js/scripts.min.js, which is included in the theme. </dd> <dt>grunt sass:dev</dt> <dd> Is compiling all the scss files to one expanded style.css in the themes root directory. </dd> <dt>grunt sass:prod</dt> <dd> Is compiling all the scss files to one compressed style.css in the themes root directory. </dd> <dt>grunt watch</dt> <dd> Watches the scss and js files for changes and runs the above tasks automatically, plus giving you a cross-OS desktop notice on success. </dd> <dt>grunt dist</dt> <dd> 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. </dd> <dt>grunt phpcs</dt> <dd> Requires PHP CodeSniffer with WordPress standard installed in the development environment. Checks the themes php files against the WordPress coding standards. </dd> </dl> <hr> <h3 id="credits">I) Sources and Credits - <a href="#toc">top</a></h3> We've used the following third party scripts and tools. <ul> <li><a href="http://bourbon.io/" title="bourbon">bourbon</a></li> <li><a href="http://neat.bourbon.io/" title="bourbon-neat">bourbon-neat</a></li> <li><a href="http://gruntjs.com/" title="grunt">grunt</a></li> <li><a href="http://github.com/gruntjs/grunt-contrib-clean" title="grunt-contrib-clean">grunt-contrib-clean</a></li> <li><a href="http://github.com/gruntjs/grunt-contrib-copy" title="grunt-contrib-copy">grunt-contrib-copy</a></li> <li><a href="http://github.com/gruntjs/grunt-contrib-jshint" title="grunt-contrib-jshint">grunt-contrib-jshint</a></li> <li><a href="http://github.com/gruntjs/grunt-contrib-sass" title="grunt-contrib-sass">grunt-contrib-sass</a></li> <li><a href="http://github.com/gruntjs/grunt-contrib-uglify" title="grunt-contrib-uglify">grunt-contrib-uglify</a></li> <li><a href="http://github.com/gruntjs/grunt-contrib-watch" title="grunt-contrib-watch">grunt-contrib-watch</a></li> <li><a href="http://github.com/clavery/grunt-copy-to" title="grunt-copy-to">grunt-copy-to</a></li> <li><a href="http://github.com/dylang/grunt-notify" title="grunt-notify">grunt-notify</a></li> <li><a href="http://github.com/SaschaGalley/grunt-phpcs" title="grunt-phpcs">grunt-phpcs</a></li> <li><a href="http://necolas.github.io/normalize.css/" title="normalize.css">normalize.css</a></li> <li><a href="http://github.com/fragphace/grunt-rm" title="grunt-rm">grunt-rm</a></li> <li><a href="http://github.com/sindresorhus/grunt-sass" title="grunt-sass">grunt-sass</a></li> <li><a href="http://code.google.com/p/html5shiv/" title="html5shiv">html5shiv</a></li> <li><a href="http://jquery.com/" title="JQuery">JQuery</a></li> <li><a href="http://blog.themeforest.net/site-news/building-better-template-documentation/" title="Themeforest documentation template">Themeforest documentation template</a></li> </ul> <hr> 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 %> <a href="#toc">Go To Table of Contents</a> <hr class="space"> </div> </body> </html>