Code Monkey home page Code Monkey logo

foundationpress's Introduction

DEPRECATED

This project will no longer be maintained. As Zurb Foundation is no longer in active development , I would recommend that you base your front-end code on another framework, such as Semantic UI or Bootstrap.

To all of you who have contributed to FoundationPress over the years: Thank you!

– Ole Fredrik

FoundationPress

Gitter GitHub version License: MIT

This is a starter-theme for WordPress based on Zurb's Foundation for Sites 6, the most advanced responsive (mobile-first) framework in the world. The purpose of FoundationPress, is to act as a small and handy toolbox that contains the essentials needed to build any design. FoundationPress is meant to be a starting point, not the final product.

Please fork, copy, modify, delete, share or do whatever you like with this.

All contributions are welcome!

Requirements

This project requires Node.js v6.x.x 11.6.x to be installed on your machine. Please be aware that you might encounter problems with the installation if you are using the most current Node version (bleeding edge) with all the latest features.

FoundationPress uses Sass (CSS with superpowers). In short, Sass is a CSS pre-processor that allows you to write styles more effectively and tidy.

The Sass is compiled using libsass, which requires the GCC to be installed on your machine. Windows users can install it through MinGW, and Mac users can install it through the Xcode Command-line Tools.

If you have not worked with a Sass-based workflow before, I would recommend reading FoundationPress for beginners, a short blog post that explains what you need to know.

Quickstart

1. Clone the repository and install with npm

$ cd my-wordpress-folder/wp-content/themes/
$ git clone https://github.com/olefredrik/FoundationPress.git
$ cd FoundationPress
$ npm install

2. Configuration

YAML config file

FoundationPress includes a config-default.yml file. To make changes to the configuration, make a copy of config-default.yml and name it config.yml and make changes to that file. The config.yml file is ignored by git so that each environment can use a different configuration with the same git repo.

At the start of the build process a check is done to see if a config.yml file exists. If config.yml exists, the configuration will be loaded from config.yml. If config.yml does not exist, config-default.yml will be used as a fallback.

Browsersync setup

If you want to take advantage of Browsersync (automatic browser refresh when a file is saved), simply open your config.yml file after creating it in the previous step, and put your local dev-server address and port (e.g http://localhost:8888) in the url property under the BROWSERSYNC object.

Static asset hashing / cache breaker

If you want to make sure your users see the latest changes after re-deploying your theme, you can enable static asset hashing. In your config.yml, set REVISIONING: true;. Hashing will work on the npm run build and npm run dev commands. It will not be applied on the start command with browsersync. This is by design. Hashing will only change if there are actual changes in the files.

3. Get started

$ npm start

4. Compile assets for production

When building for production, the CSS and JS will be minified. To minify the assets in your /dist folder, run

$ npm run build

To create a .zip file of your theme, run:

$ npm run package

Running this command will build and minify the theme's assets and place a .zip archive of the theme in the packaged directory. This excludes the developer files/directories from your theme like /node_modules, /src, etc. to keep the theme lightweight for transferring the theme to a staging or production server.

Project structure

In the /src folder you will find the working files for all your assets. Every time you make a change to a file that is watched by Gulp, the output will be saved to the /dist folder. The contents of this folder is the compiled code that you should not touch (unless you have a good reason for it).

The /page-templates folder contains templates that can be selected in the Pages section of the WordPress admin panel. To create a new page-template, simply create a new file in this folder and make sure to give it a template name.

I guess the rest is quite self explanatory. Feel free to ask if you feel stuck.

Styles and Sass Compilation

  • style.css: Do not worry about this file. (For some reason) it's required by WordPress. All styling are handled in the Sass files described below

  • src/assets/scss/app.scss: Make imports for all your styles here

  • src/assets/scss/global/*.scss: Global settings

  • src/assets/scss/components/*.scss: Buttons etc.

  • src/assets/scss/modules/*.scss: Topbar, footer etc.

  • src/assets/scss/templates/*.scss: Page template styling

  • dist/assets/css/app.css: This file is loaded in the <head> section of your document, and contains the compiled styles for your project.

If you're new to Sass, please note that you need to have Gulp running in the background (npm start), for any changes in your scss files to be compiled to app.css.

JavaScript Compilation

All JavaScript files, including Foundation's modules, are imported through the src/assets/js/app.js file. The files are imported using module dependency with webpack as the module bundler.

If you're unfamiliar with modules and module bundling, check out this resource for node style require/exports and this resource to understand ES6 modules.

Foundation modules are loaded in the src/assets/js/app.js file. By default all components are loaded. You can also pick and choose which modules to include. Just follow the instructions in the file.

If you need to output additional JavaScript files separate from app.js, do the following:

  • Create new custom.js file in src/assets/js/. If you will be using jQuery, add import $ from 'jquery'; at the top of the file.
  • In config.yml, add src/assets/js/custom.js to PATHS.entries.
  • Build (npm start)
  • You will now have a custom.js file outputted to the dist/assets/js/ directory.

Demo

Local Development

We recommend using one of the following setups for local WordPress development:

Tutorials

Documentation

Showcase

Credit goes to all the brilliant designers and developers out there. Have you made a site that should be on this list? Please let me know

Contributing

Here are ways to get involved:

  1. Star the project!
  2. Answer questions that come through GitHub issues
  3. Report a bug that you find
  4. Share a theme you've built on top of FoundationPress
  5. Tweet and blog your experience of FoundationPress.

Pull Requests

Pull requests are highly appreciated. Please follow these guidelines:

  1. Solve a problem. Features are great, but even better is cleaning-up and fixing issues in the code that you discover
  2. Make sure that your code is bug-free and does not introduce new bugs
  3. Create a pull request
  4. Verify that all the Travis-CI build checks have passed

foundationpress's People

Contributors

adamchlan avatar aetles avatar alexbohariuc avatar bej-soan avatar belamezey avatar colin-marshall avatar conorbarclay avatar cyberscribe avatar derweili avatar dgobnto avatar emaia avatar ericrihlmann avatar fourhexagons avatar grantnorwood avatar jcallery avatar jgierer12 avatar jpoak avatar larzans avatar linuxbastard avatar manwithacat avatar martin4ndersen avatar mnuhell avatar olefredrik avatar pedro-mendonca avatar pixelbareupen avatar rediris avatar skoldin avatar thebrandyman avatar themestechnology avatar vladodriver avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

foundationpress's Issues

Sticky-Footer

Thanks for the great work on the framework. I'm still quite new to this stuff and this is my first WordPress website.

I'm currently working on a mate's personal website but having an issue with the footer floating:

http://stephenmorris.ie/brown-thomas-so-parisian/

I've tried stuff on sticky-footer, Rick Fait et al but nothing is working right for me

Add hooks to inject own code by using a childtheme or a plugin

First of all: great work! its a very nice and clean theme that fits almost all my needs.

I have just a little suggestion:
I am writing a complete childtheme and several plugins to use them with foundationpress. It would be great to add several hooks (do_action) to some places (at the beginning and the end of the main layout, before and after opening/closing tags in the template files etc.)

With the hooks, it would be possible to inject own code without "hacking into" your theme and losing the ability to upgrade it.

If you need some helping hands, let me know :-)

Thanks for your reply

Adrian

jquery-ui-datepicker

I'm not sure if this is an issue or just some ineptitude on my part but I can't seem to enqueue jquery-ui-datepicker. I'm wondering if it has something to do with using the bower components version of jquery?

Flickering Fixed Background Image in Chrome

Hi there!

Love the theme, I've never worked on a Wordpress theme where I can use grunt, bower and sass, so impressed.

I'm having a problem with my fixed background images in Chrome. First they weren't appearing and I had to give a "overflow: visible" on the .off-canvas-wrap to allow them to appear. But now they're flickering when you scroll and change the slide in the boxed-wine slide show in the section section. I'm using deep linking with the Orbit Slider. I've tried all the solutions I found online. If you can please help me find a solution, that would be amazing.

http://publichousewines.hstestsite.info/

Best,

Tessa

custom domain(s)

I'd like to access my installation on a custom domain like mysite.dev instead of localhost.

Ideally I'd also like to be able to create more sites in different folders, each with their own domain mapped to them. I've looked at the approach taken by Varying Vagrant Vagrants where the Vagrantfile is parsing custom vvv-hosts files, dynamically adding (and removing) them to/from the guests hosts file when vagrant is started and stopped (using the the hostsupdate plugin).

I'd like to add something similar to this project. What do you all think about this?

Use Compass

Hi. Can you simply use compass on this theme? I'm not having luck.

Menu divider

How do you feel about having a divider at the end of the main menu? It seems this is how the foundation site has it as well.

I removed the divider because I didn't want it anyways, but could be an issue for others.

Why loop register_sidebar()?

What is the point of looping the register_sidebar() in a foreach()? It is only one sidebar and only one footer. And if more was to be added the would all get the same ID.

Also, why the <strong> tag in the title? Should that be set by styling <h6> with css?

Installing Woocommerce plugin knocks out Foundation js

Hi,

It seems there is a conflict with this theme and woocommerce.

After installing the Woocommerce plugin, the console reports a type error on line 3 of app.js:

undefined is not a function

I have had a look inside the enqueue scripts file that you created with this plugin and it looks like everything is done by the book, but this error still appears. I have also tried including the app.js in the header rather than the footer and I have also tried using the bundled version of jQuery included with Wordpress and that still doesn't solve the conflict.

Any ideas on how to solve this issue with your theme?

Many thanks

Menu breaks when WooCommerce is installed

First I want to say that I like this theme. But I have one problem at this moment and that is when I install WooCommerce the sub-menus won't appear anymore. And when the menu is in 'mobile mode' the button does nothing.

$(document).foundation seemingly called too soon

I was wondering why none of the foundation js was working, turned out the call to $.fn.foundation was happening before most of the dom elements were in place. Wrapping it in a document.ready fixed the issue. I'd be happy to make the change and issue a pull request if you'd like.

jQuery in NoConflict Mode

I experienced some bugs (dropdown not working) while the init-foundation.js was like:
$(document).foundation();

after long research I realized that it was the common Wordpress bug with jQuery in NoConflict mode so I changed init-foundation.js to:

jQuery(document).foundation();

now, it works like a charm ;)

bye

jQuery in Header Issue

When I replace the old code in enqueue-scripts.php with the new code, the issues with 3rd party plugins disappears but the js with Foundation stops working.

This is the error in the console: Uncaught TypeError: Property '$' of object [object Object] is not a function

No Search Results Does Not Load 404.php

Hi Olefredrik,

First off you're awesome! This repo saved me weeks of time.

Just wanted to let you know that doing a search that returns no results will return an error. I verified this here:

http://foundationpress.olefredrik.com/?s=boo

The simple solution is to copy the twentyfourteen content-none.php to your theme and edit as you wish. It seems from your code that you intended to use this file or accidentally removed it since you refer to it in the post loops.

I realize this is not supposed to be a production-ready theme, but thought you might wanna know since it's an easy fix.

FoundationPress Top Bar Hidden by Wordpress Admin bar when logged in.

If you're logged in on a small device, the FoundationPress Navbar is covered by the Wordpress navbar.

I've got no idea why the wordpress navbar drops down, but two options to solve it are to set top:-46px on the #wpadminbar container, or override Wordpress' media query in /wp-includes/css/admin-bar.min.css to use relative positioning

media="all"
@media screen and (max-width: 600px)
#wpadminbar {
position: absolute;
/* Override with relative positioning to solve overlap? Does it cause other issues? */
}

navbar-issue

100% width divs?

Hello -

Thanks for the framework - I'm a big fan.

Question: is it possible to take certain rows and display them at full, 100% browser width?

I try using the "homepage-hero" class that is used on the foundation homepage (http://foundation.zurb.com/index.html) but I cannot get this to span 100%.

I've also looked at standard Foundation 5 documentation and they recommended setting classes as below, but I can't seem to "get wide" when adding these to my _colors.scss file. I wonder if something about the off-canvas wrapper might be constraining my proportions.

Thanks.

Examples of recommended code in non-FoundationPress Foundation 5:

.row {
width: 100%;
margin-left: auto;
margin-right: auto;
margin-top: 0;
margin-bottom: 0;
max-width: 62.5em;
}

.full-width {
width: 100%;
margin-left: auto;
margin-right: auto;
max-width: initial;
}

jQuery conflict?

Hi,

After FoundationPress installation my console outputs the typical "Uncaught TypeError: Property '$' of object [object Object] is not a function" error in file js/app.js.

Changing $(document).foundation() to jQuery(document).foundation() at the end fixed it.

Is this normal?

Many thanks!

menu link not working

I used other theme and apply some of the FoundationPress. (enqueue-scripts.php, foundation.php, menu-walker.php, navigation.php) The menu appears, but I click and the page is the same. I set the menu appearance to Mobile and to the right-top-bar. The desktop version of top bar is working. Only the mobile.
Please help with this.

menu

Image caption bug

Inserting a picture with a caption causes the div with class wp-caption to have a fixed width, making it to exceed the boundaries of the post column.

top-bar sticky nav

I've attempted making the top-bar sticky by placing the "sticky" class (with and without the contain-to-grid class) in several locations and none seems to make it "stick". Would you be able to suggest a location of where to put the class, or is there something else I'm missing?

Thanks,
David

Entire layout is inside .off-canvas-wrap?

Am I crazy or is the whole site wrapped in a div with .off-canvas-wrap?

Isn't just the off-canvas content (i.e. the mobile menu) supposed to be in that div?

I am referring to line 37 in header.php -- that div doesn't seem to be closed before the main content starts.

Off-Canvas not working

I can't seem to get the off-canvas menu to work. WP 3.9.1. I made sure to have "Mobile" checked in the Menus section and I copied over a fresh header.php and _settings.scss file just to make sure I didn't have any strange settings in place. Can you verify that it works in 3.9.1?

Using CodeKit (mac) vs Grunt/Bower, etc...

Hey there,

After running into headache after headache getting my mac to install Node.js, etc, I'm back to just wanting to use good 'ol CodeKit to compile my SCSS and js.

However, your documentation encourages using grunt, bower, etc. Considering I can't get the *%(@ stuff to install, I have no idea what it does or what it's for. Do I need this? Or can I just write my own SCSS, JS, and let CodeKit compile them into the CSS and JS I need? Will it hurt anything as far as dev with FoundationPress? Or inhibit upgrades in the future?

Question With Forms

Has anyone tried this with Gravity Forms? I would love to know if someone has tried this yet...

foundation script

Hi Olefredik, I just a have a brief question. How did you get foundation js plug ins working with out including '$(document).foundation();'

Before the end of the body tag?

Make strings translatable?

It would be nice if all English strings where encapsulated with the translation functions of WordPress.

Like __('Footer') instead of just 'Footer' in widgets and changing echo ' Archive | ' in header to something like echo ' ' . __('Archive') . ' | '.

App.scss Syntax error

Hello,

It's the first time i use Foundation (FoundationPress to start), i'm mostly a Bones developper... but i want to give Foundation/FoundationPress a try...

I'm having trouble when i try to save / compile my scss files (Coda / Codekit)
(Note : Node, Grunt, Compass are installed and updated to latest)

Tried to google with no chance...

Here

app.scss error
Syntax error: File to import not found or unreadable: foundation/functions.
Load paths:
xxx/wp-content/themes/accueil-child/scss
xxx/bower_components/foundation/scss
on line 13 of /xxx/wp-content/themes/accueil-child/scss/config/_settings.scss
from line 4 of /xxx/wp-content/themes/accueil-child/scss/app.scss
Use --trace for backtrace.

Thx for the support.

Custom Starter Theme Creation like underscore site

Love this Foundation 5 WordPress starter theme. Excellent job - thank you. It would be great if like on underscores site you could create a new download with new theme name and slug integrated...

again thank you

A

Loading jQuery in footer - some plugins have issues

I've noticed a few issues with plugins that assume Wordpress will load jQuery in the header, whereas FoundationPress is enqueing in the footer.

http://wptest.io/ data includes a Videopress example that hits this problem [not core, but one of Automattic's plugins].

I've opted to return jQuery to the header by setting the last paramater on the enqueue to false (and stick in a cdn version)

wp_enqueue_script( 'jquery', '//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js', array(), '1.0.0', false );

Adminbar overlaps mobile menu when width < 600px

Issue with this mediaquery i think: media="all" @media screen and (max-width: 600px)

Removing #wpadminbar {position: absolute;} in admin-bar.min.css seems to resolve this issue. Haven't had any other issues by removing this.

WooCommerce compatability

Hi,
Apologies, this is plugin related so feel free to ignore.
Activating WooCommerce causes the off-canvas navigation to become unresponsive ie. Clicking on the burger icon no longer triggers the slide in.
Here's a screenshot from Chrome Dev Tools
screen shot 2014-05-07 at 16 22 23

Any ideas?

jquery issues

After Clean installing Wordpress and Theme i'm there is still issue with jquery from different addons. Example is addon:
Gallery
This plugin allows you to implement gallery page into web site.
Version 4.1.6

Error:
Uncaught TypeError: Cannot read property 'msie' of undefined jquery.fancybox-1.3.4.pack.js:18

Wordpress version: 3.8.1.

Before applying the theme i did run (locally on windows)

mv FoundationPress your-theme-name
cd your-theme-name
npm install && bower install
While you're working on your project, run:

grunt

Adding custom theme scripts to app.js

Hi, great theme, moved here from reverie and it taught me how to use grunt.

How do I compress and add my custom theme scripts to app.js.

Right now I have it as a separate Js file in the /js folder. Knowing this will be great to reduce the files loaded.

Thanks

bug with function img_unautop

I've discovered a strange behavior with the img_unautop function.

If in a post you insert a picture and then start the next text paragraph with a link, it happens that the whole thing (the image and the paragraph) gets wrapped in the <figure> tag, displaying the text with a different line height.

An example:

<a href="some_link"><img class="alignnone" alt="error" src="image.png" /></a>

<a href="http://example.com">Example</a> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

I've found that a solution is to put an empty <span> tag before the link in the paragraph.

menu not link

Hello,
I install everything is working the off-canvas is working but the menu when you click it doesn't link to the page. I click but nothing shows

Invalid Markup: "Attribute pubdate not allowed on element time at this point."

When validating a page containing blogpost I get an Error stating "Attribute pubdate not allowed on element time at this point."

Example:
http://validator.w3.org/check?uri=http://foundationpress.olefredrik.com/category/first-category/

I couldn´t find that attribute in the current draft either.
see: http://www.w3.org/html/wg/drafts/html/master/single-page.html#the-time-element

Since I´m quite new to git and not yet familiar with all the functions I´d rather not make a pull request here since I´dont want to mess things up ;)

My suggestion: Just remove 'pubdate' in 'entry-meta.php' on line 4.

Best regards

foundation folder full of component scss files inside the js folder

Under foundation/js there is another foundation folder with a css folder and scss folder, which contains foundation/components folder full of scss files. If I need to make any changes to these component styles to zurb foundation, I won't be able to with Grunt. Why are these styles inside a js folder, and why the weird structure here?

Permission denied (publickey).

I've wanted to use FoundationPress on my local server (using MAMP) and I've followed your instructions to clone this repository etc except I get the following:

"Permission denied (publickey).
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists."

Is there something I'm missing?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.