ivandoric / olympos Goto Github PK

This is just empty theme for starting your Wordpress projects, with built in support for Sass, Susy and Gulp.js.

PHP 9.20% JavaScript 2.20% CSS 88.60%

olympos's Introduction

This is just empty theme for starting your Wordpress projects, with built in support for Sass, Susy and Gulp.js.

Check out the video on installing and using this theme on YouTube.

Requirements:

Installation

Put olympos folder into your themes directory.

Copy package.jsonand gulpfile.jsinto WordPress root.

Run

npm install

to install all gulp plugins.

If you don't want to have package.json and gulpfile.js in root directory you can leave them in the theme, and run npm install in theme directory. But in that case be sure to change the paths in gulpfile.js. You will mostly have to delete /wp-content/themes/olympos/ from the paths.

When you are done just run gulp watch

Features

Most of the features are in gulp. This theme has almost no styling. You only have clearfix defined and _reset.scss from Eric Mayer as a partial and some empty scss partials.

Gulp features

Image optimization
Sass compilation
Auto prefixing
Source maps for css file
Uglifying and concatinating all js files
LiveReload

All of these features are run when starting gulp watch except for image optimization, you have to run that task separatley.

Modernizr

Modernizr is included in already compiled olympos.min.js file. If you want to change build of the Modernizr just replace lib/modernizer.min.js with your own and run uglify task.

Notes

I've removed Compass from this version because I didn't see any real necessity for it. Also it slowed down css compilation process significantly.

I've added Susy for making custom grids and to help with css layout. If you don't want to use it just remove susy folder from sass folder and remove @import "susy"; and @import "su"; from the style.scss file in sass folder;

CSS and JavaScript

All the of css can be found and should be written in partials. So that you end up with just one css file (style.css).

JavaScript has two folders lib and js you should never touch js folder, this is where the uglifyed and concatinated files go. Put your jQuery plugins and other JS files in lib folder and gulp will do the rest for you. There is no need to call those added scripts from header.php or footer.php, all your scripts will be concatinated in one file.

Some mixins and functions

You have several mixins and functions in the _mixins.scss file along with comments on how to use them. These mixins and functions include:

Automatic calculation of percentages from pixels
Automatic calculations of rems from pixels
Easy to use Media Queries in your normal css flow

Open an issue for any problems that you encounter.

olympos's People

Contributors

Stargazers

Watchers

Forkers

benjaminsterling ggthetruth brojask lionheartz yrsengar farathshba fyptestorg jane-alam getcodepanda n37r06u3 leinedam profitsarts 3l13 clientsites zomblake sarat246 mojaray2k treewater edubasabe bhavna9023 filipego rubel-hossain akolbo gamer7569 shamimwp caroseuk nelslynn darwinphi mehedidb dsglive sam-shan thomasghenry nastanford jodavle doninyangm kogi13 ronald070 davemartens-lt kumarpunkaj raofei fagworio imhamad stylewp grgbbek allozious nirangal

olympos's Issues

Onscroll not working

Hi there,

It may be my setup, but it seems that onscroll is not firing in this theme. I've tried in out in another theme and it worked fine. Any ideas?

Any info on why olympos.min.js won't load?

Gulp is reading the changes of olympos.min.js but when I visit the site and inspect the resources I only see these files in js:
jquery, jquery-migrate, livereload, and wp-emoji-release.

The sass is compiling properly.

I linked directly to olympos.min.js and it loaded in inspector. The javascript doesn't appear to be compiling though because the code I put in main.js does not appear when I ctrl+f my custom code.

This is the top of my functions.php Any ideas on how I can track this issue down?
`

NPM error when running npm install on initial use

Hi there,

Thank you for this theme, I look forward to using it! I love that it has NPM and SASS and plan to use this with CSS Grid and Flexbox and NO BOOTSTRAP! Yay.

Anyhow, I am having an issue with NPM when I initially run npm install. I'm keeping the package.json and gulp.js file in the theme folder, but still when I run npm install it gives me this error (please any help would be appreciated):

No receipt for 'com.apple.pkg.CLTools_Executables' found at '/'.

No receipt for 'com.apple.pkg.DeveloperToolsCLILeo' found at '/'.

No receipt for 'com.apple.pkg.DeveloperToolsCLI' found at '/'.

gyp: No Xcode or CLT version detected!
gyp ERR! configure error
gyp ERR! stack Error: gyp failed with exit code: 1
gyp ERR! stack at ChildProcess.onCpExit (/Users/prestontoor/Desktop/development/test/wp-content/themes/olympos/node_modules/node-gyp/lib/configure.js:345:16)
gyp ERR! stack at emitTwo (events.js:126:13)
gyp ERR! stack at ChildProcess.emit (events.js:214:7)
gyp ERR! stack at Process.ChildProcess._handle.onexit (internal/child_process.js:198:12)
gyp ERR! System Darwin 17.7.0
gyp ERR! command "/usr/local/bin/node" "/Users/prestontoor/Desktop/development/test/wp-content/themes/olympos/node_modules/node-gyp/bin/node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
gyp ERR! cwd /Users/prestontoor/Desktop/development/test/wp-content/themes/olympos/node_modules/node-sass
gyp ERR! node -v v8.9.4
gyp ERR! node-gyp -v v3.7.0
gyp ERR! not ok
Build failed with error code: 1
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] postinstall: node scripts/build.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

Change theme name

Hello Ivan,
Congratulation for your blank theme!

I would like know how can I change the theme name automaticly?

I want use the the gulp, but to change the theme name. Is there a easy form to do this quickly?

Thank you in advanced.