Skip to content
This repository has been archived by the owner on Sep 16, 2019. It is now read-only.

Foundation update #1022

Merged
merged 37 commits into from
Aug 5, 2017
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
37 commits
Select commit Hold shift + click to select a range
2282516
Update Foundation to version 6.4.1
olefredrik Aug 2, 2017
fad7f8e
Use semantic xy-grid in front template
olefredrik Aug 3, 2017
5684390
Use semantic xy-grid for content module
olefredrik Aug 3, 2017
f8a80f4
Use semantic xy-grid in footer
olefredrik Aug 3, 2017
31d0ac0
Use semantic xy-grid in kitchen sink template
olefredrik Aug 3, 2017
db533e5
Update inclusion and usage of dependencies
olefredrik Aug 3, 2017
f6cb1d6
Introduce webpack and restructure assets
olefredrik Aug 3, 2017
436e09c
Follow up on previous commit
olefredrik Aug 3, 2017
a68ae10
Load app.js just before the closing body tag
olefredrik Aug 3, 2017
a9016e0
Configure browsersync with proxy
olefredrik Aug 4, 2017
a46b040
Remove the off-canvas-wrapper as this is no longer required
olefredrik Aug 4, 2017
8877c68
Set navigation colors
olefredrik Aug 4, 2017
0086999
Update gitignore
olefredrik Aug 4, 2017
bd10fdb
Remove dist folder as this should be ignored by git
olefredrik Aug 4, 2017
bf2a5fb
Set path to dist folder for demo images in front template
olefredrik Aug 4, 2017
c4e777e
Update README
olefredrik Aug 4, 2017
91e569f
Add more descriptions to README file
olefredrik Aug 4, 2017
0eafc0c
Update Adibe in Kitchen Sink template
olefredrik Aug 5, 2017
22912fa
Update README
olefredrik Aug 5, 2017
5acf7dc
Add watch task for PHP files
olefredrik Aug 5, 2017
d4fbcdf
Use XY-grid on cards example in Kitchen Sink
olefredrik Aug 5, 2017
418ed71
Remove float classes due to deprecation notice in Foundation Docs
olefredrik Aug 5, 2017
019f445
Add equalizer to Kitchen Sink
olefredrik Aug 5, 2017
5f6305e
Adjust gutters on card example in Kitchen Sink
olefredrik Aug 5, 2017
1ce568e
Tweak submit button markup in forms section in Kitchen Sink
olefredrik Aug 5, 2017
17d0069
Use is-active instead of active for menu active state
olefredrik Aug 5, 2017
947ea00
Fix indentation of tabs in Kitchen Sink
olefredrik Aug 5, 2017
2123079
Remove browsersync port, as we're using proxy instead of server
olefredrik Aug 5, 2017
11b96c2
Update README
olefredrik Aug 5, 2017
c47f362
Set the same bg-color on dropdown-menu as topbar-menu
olefredrik Aug 5, 2017
05a89a2
Set primary bg-color on sites-button
olefredrik Aug 5, 2017
807f53e
Enqueue FontAwesome from CDN
olefredrik Aug 5, 2017
8b7d825
Remove FontAwesome files
olefredrik Aug 5, 2017
f01f678
Add demosite script
olefredrik Aug 5, 2017
b4268f7
Fix formatting issue in README
olefredrik Aug 5, 2017
96d8a86
Edit README
olefredrik Aug 5, 2017
62cacd4
Remove my localhost from the URL variable in Gulpfile
olefredrik Aug 5, 2017
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 2 additions & 15 deletions .babelrc
Original file line number Diff line number Diff line change
@@ -1,17 +1,4 @@
{
"plugins": [
"transform-es2015-arrow-functions",
"transform-es2015-block-scoped-functions",
"transform-es2015-block-scoping",
"transform-es2015-classes",
"transform-es2015-destructuring",
"transform-es2015-template-literals",
"transform-es2015-parameters",
"transform-es2015-shorthand-properties",
"transform-es2015-spread",
["transform-es2015-modules-commonjs", {
"allowTopLevelThis": true
}]
],
"presets": ["es2015"],
"compact": false
}
}
3 changes: 0 additions & 3 deletions .bowerrc

This file was deleted.

12 changes: 4 additions & 8 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,11 +1,7 @@
.DS_Store
node_modules
npm-debug.log
dist
*.sass-cache*
*.log
node_modules/
assets/stylesheets/
assets/components/
assets/javascript/vendor/
assets/javascript/foundation.js
assets/javascript/custom/demosite.js
packaged/
wpcs/
*.swp
61 changes: 27 additions & 34 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ All contributions are welcome!

## Requirements

**This project requires [Node.js](http://nodejs.org) v4.x.x to v6.11.x to be installed on your machine.** Please be aware that you will most likely encounter problems with the installation if you are using the most current Node version (bleeding edge) with all the latest features.
**This project requires [Node.js](http://nodejs.org) v4.x.x to v6.11.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](http://Sass-lang.com/) (CSS with superpowers). In short, Sass is a CSS pre-processor that allows you to write styles more effectively and tidy.

Expand All @@ -26,62 +26,55 @@ $ cd FoundationPress
$ npm install
```

### 2. While you're working on your project, run:
### 2. Get started

```bash
$ npm run watch
```
For WordPress development on localhost, I recommend using [MAMP](https://www.mamp.info/en/) for Mac, [WAMP](http://www.wampserver.com/en/download-wampserver-64bits/) for Windows or [LAMP](https://www.linux.com/learn/easy-lamp-server-installation) for Linux.

If you want to take advantage of browser-sync (automatic browser refresh when a file is saved), simply open your Gulpfile.js and put your local dev-server address (e.g localhost) in this field ```var URL = '';``` , save the Gulpfile and run
```bash
$ npm run watch
```
If you want to take advantage of browser-sync (automatic browser refresh when a file is saved), simply open your gulpfile.babel.js and put your local dev-server address and port (e.g http://localhost:8888) in the `URL` variable.

### 3. For building all the assets, run:
Then, simply run

```bash
$ npm run build
$ npm start
```

Build all assets minified and without sourcemaps:
```bash
$ npm run production
```
### 3. Compile assets for production

### 4. To create a .zip file of your theme, run:
When building for production, the CSS and JS will be minified. To minify the assets in your `/dist` folder, run

```bash
$ npm run package
$ npm run build
```

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`, `assets/components`, etc. to keep the theme lightweight for transferring the theme to a staging or production server.
### Project structure

### Styles
In the `/src` folder you will 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).

* `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
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.

* `assets/scss/foundation.scss`: Make imports for all your styles here
* `assets/scss/global/*.scss`: Global settings
* `assets/scss/components/*.scss`: Buttons etc.
* `assets/scss/modules/*.scss`: Topbar, footer etc.
* `assets/scss/templates/*.scss`: Page template spesific styling
I guess the rest is quite self explanatory. Feel free to ask if you feel stuck.

Please note that you **must** run `npm run build` or `npm run watch` in your terminal for the styles to be copied and concatenated. See the [Gulpfile.js](https://github.com/olefredrik/FoundationPress/blob/master/gulpfile.js) for details
### 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

### Scripts
* `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

* `assets/javascript/custom`: This is the folder where you put all your custom scripts. Every .js file you put in this directory will be minified and concatenated one single .js file. (This is good for site speed and performance)
* `dist/assets/css/app.css`: This file is loaded in the `<head>` section of your document, and contains the compiled styles for your project.

Please note that you must run `npm run build` or `npm run watch` in your terminal for the scripts to be copied and concatenated. See [Gulpfile.js](https://github.com/olefredrik/FoundationPress/blob/master/gulpfile.js) for details
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`.

### The main styles and scripts generated by the build
### JavaScript Compilation

Version control on these files are turned off because they are automatically generated as part of the build process.
All JavaScript files in the `src/assets/js` folder, along ith Foundation and its dependencies, are bundled into one file called `app.js`. The files are imported using module dependency with [webpack](https://webpack.js.org/) as the module bundler.

* `assets/stylesheets/foundation.css`: All Sass files are minified and compiled to this file
* `assets/stylesheets/foundation.css.map`: CSS source maps
If you're unfamiliar with modules and module bundling, check out [this resource for node style require/exports](http://openmymind.net/2012/2/3/Node-Require-and-Exports/) and [this resource to understand ES6 modules](http://exploringjs.com/es6/ch_modules.html).

* `assets/javascript/vendor`: Vendor scripts are copied from `assets/components/` to this directory. We use this path for enqueing the vendor scripts in WordPress.
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.

## Demo

Expand Down
Binary file removed assets/fonts/FontAwesome.otf
Binary file not shown.
Binary file removed assets/fonts/fontawesome-webfont.eot
Binary file not shown.
Loading