zeekinteractive / heisenberg Goto Github PK

View Code? Open in Web Editor NEW

74.0 38.0 17.0 3.85 MB

Zeek WordPress starter theme based on _s and Foundation

PHP 29.92% CSS 0.96% JavaScript 4.36% SCSS 64.67% Shell 0.09%

wordpress starter-theme sass php foundation foundation-site css theme webpack

heisenberg's Introduction

Heisenberg - Zeek Starter Theme

A minimalistic WordPress starter theme, based on Underscores and Foundation for Sites, version ^6.4.3.

Prerequisites

Node.js 9.x and npm 5.x

How to get started

Clone or download the project onto your themes directory (./wp-content/themes)
Run a find for the string/slug heisenberg throughout the theme and replace it with your project name.
Run npm install
(optional) Copy the variables.sample.env file and name it variables.env to override some development variables
Run npm start.

Webpack

The theme uses Webpack as its bundler with ES6 modules for JavaScript files.

Deployment

npm run build

This will run both a production and development set of webpack tasks. The enqueue hook will load the correct version of the JS file, based on whether your development/staging server contains the SCRIPT_DEBUG set to true.

Foundation

How to use the Foundation JS files

The theme uses ES6 Modules, so use the existing foundation.js file as a guide to bring in additional Foundation JS modules. There is an existing module included as an example (Tabs).

How to use the Foundation Sass files

Using the _settings.scss file, you can overwrite a Foundation default style before things get compiled, thereby making your final CSS lighter. To do so, find the variable in the file, uncomment it, and set the value you desire. The file is located in ./assets/sass.

Also, in the app.scss file, you can remove a Foundation CSS module by commenting out the associated mixin. For instance, if your project doesn't use Foundation's Orbit module, simply comment out the @include foundation-orbit mixin and the code will never reach your final app.css file.

Be sure to check Foundation’s docs on using Sass and their mixins for custom control on styles.

heisenberg's People

Contributors

Stargazers

Watchers

Forkers

dansully bobmalloy bruinkid jeffreyzinn darcmattr gregorholzmann drmrsan australiansteve heidipj jacobarriola csymlstd mistergjh devloprs woocommerce-stuff trishasalas communicatieteam khoipro

heisenberg's Issues

Documentation needed for autoloader

We need some documentation in the README file for the autoloader to give developers some information on what is does.

errors running npm install

From within the theme folder at the command prompt, ran npm install and received the errors shown in the attached two screenshots:

It is beyond my knowledge to understand what these errors are, how they might impact the development and/or how to resolve.

Any insight would be greatly appreciated.

Running windows 8.1.

Add oEmbed flex container function

oEmbed elements are not responsive when entered in the WordPress editor

Utilize SCRIPT_DEBUG constant to output unminified/unconcatenated files

Fix PHP parse error with autoload_static script

Hosts (WP Engine, for instance) that don't offer support for PHP 5.6.x are getting a syntax error.

vendor/composer/autoload_static.php ...         
PHP Parse error:  syntax error, unexpected '.', expecting ')' in - on line 10

Problem with top bar in heisenberg

I have used the heisenberg starter theme in the past and really liked it. I recently installed the latest version from GitHub. I tried to modify it by adding a top bar to the file header.php. Instead of drop down menus on the top bar I got fully expanded lists. I am using wamp64 server on my Windows 10 PC. Here is the code I used

<div data-sticky-container>
 <div id="widemenu" class="top-bar" data-sticky data-options="marginTop:0;">
   <div class="top-bar-left">
     <ul class="menu dropdown" data-dropdown-menu data-close-on-click-inside="false">
       <li><a href="http://ladle/index.html">Home</a></li>
       <li><a href="#">About</a>
         <ul class="menu">
	         <li><a href="http://ladle/ministries.html">Ministries</a></li>
	         <li><a href="http://ladle/times.html">Times</a></li>
	         <li><a href="http://ladle/lhttp://ladle/ocation.html">Directions</a></li>
	         <li><a href="http://ladle/LadleHistory.html">History</a></li>
	         <li><a href="http://ladle/LadleStories.html">Stories</a></li>
         </ul>
       </li>
       <li><a href="volunteers.html">Volunteer</a></li>
       <li><a href="# ">Donate</a>
         <ul class="menu">
	         <li><a href="http://ladle/DonateMoney.html">Donate Money</a></li>
	         <li><a href="http://ladle/DonateGoods.html">Donate Goods</a></li>
         </ul>
       </li>
       <li class="active"><a href="http://localhost/ladleBlog/wp-content/themes/heisenberg">Blog</a></li>
       <li><a href="#">Contact</a>
         <ul class="menu">
	         <li><a href="http://ladle/Attn_Ladle.php">Contact Us</a></li>
	         <li><a href="http://ladle/Attn_Ladle1.php">Join Prayer Team</a></li>
         </ul>
       </li>
       <li>
         <a href="http://ladle/assets/zoom_search/search.php">Search</a>
       </li>
     </ul>
   </div>
 [</div>]
</div>

I am only using wordpress for the Blog. Everything else was built using the Zurb template and is working fine. . Any suggestions would be appreciated. The Blog using an old version of heisenberg can be seen at ladlefellowship.org/blog.

Error: File to import not found or unreadable:  ../../components/foundation/scss/foundation/functions

The import is located in the base/_base.scss file on line 2

Add a scss linter via gulp

Will help for PRs and production code.

Update to Foundation 6.4

Of importance is the new JavaScript architecture, which is now using webpack.

Probably makes sense to move this project from gulp to webpack now, which is what I've been contemplating for a while now.

Follow along here: https://github.com/ZeekInteractive/heisenberg/blob/feature/webpack/webpack.config.js