Skip to content

Commit

Permalink
Update the readme
Browse files Browse the repository at this point in the history
  • Loading branch information
@SimonMayerhofer
SimonMayerhofer committed Nov 17, 2020
1 parent 5c1f1e5 commit d4a4a0e
Showing 1 changed file with 26 additions and 39 deletions.
65 changes: 26 additions & 39 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,12 @@
# FoundationPress

[![GitHub version](https://badge.fury.io/gh/MEDIADUDES%2FFoundationPress.svg)](https://github.com/MEDIADUDES/FoundationPress/releases)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

<p align="center">
<img width="400" src="screenshot.png">
</p>

This is a starter-theme for WordPress based on Zurb's [Foundation for Sites 6](https://foundation.zurb.com/sites.html), 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.
This is a starter-theme for WordPress based on [Foundation for Sites 6](https://foundation.zurb.com/sites.html), 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.

Expand All @@ -19,9 +18,7 @@ Huge thanks to [olefredrik](https://github.com/olefredrik/FoundationPress) (and

**This project requires [Node.js](http://nodejs.org) v10.x.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. FoundationPress uses the SCSS syntax from Sass.

The Sass is compiled using libsass, which requires the GCC to be installed on your machine. Windows users can install it through [MinGW](http://www.mingw.org/), and Mac users can install it through the [Xcode Command-line Tools](http://osxdaily.com/2014/02/12/install-command-line-tools-mac-os-x/).
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. FoundationPress uses the SCSS syntax from Sass. The Sass is compiled using the JavaScript Library of [Dart Sass](https://sass-lang.com/dart-sass) and does not require any external dependencies.

## Quickstart

Expand All @@ -32,7 +29,7 @@ $ git clone https://github.com/MEDIADUDES/FoundationPress.git
$ cd FoundationPress
$ npm install
$ composer install
$ grunt
$ npm run start
```

### 2. Configuration
Expand All @@ -43,12 +40,15 @@ If you want to take advantage of automatic browser refresh when a file is saved,
### 3. Get started

```bash
$ npm start
$ npm run start # production compilation with watch task at the end
$ npm run dev # development compilation with watch task at the end (faster, but no optimized assets).
$ npm run autofix # autofixes some code (formatting) errors
$ npm run update # updates all npm dependencies to their latest version
```

### 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
When building for production, the CSS and JS will be minified & optimized. To run a production build, run:

```bash
$ npm run build
Expand All @@ -64,43 +64,43 @@ Running this command will build and minify the theme's assets and place a .zip a

### 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 Grunt, 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).
Inside of 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 Grunt, the output will be saved to the `/dist` folder. The contents of the `/dist` folder is the generated 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.

The rest should be quite self explanatory. Feel free to ask if you feel stuck.

### Styles and Sass Compilation

* `style.css`: Do not worry about this file. It's required by WordPress to make this theme work properly. All the styling inside this file won't be enqueued. All styling are handled in the Sass files described below:
* `style.css`: Required by WordPress to make this theme work properly. **All CSS inside this file won't be enqueued.**

All styling are handled in the Sass files described below:

* `src/assets/scss/components/*.scss`: Components like Buttons, Searchbars, Tabs, Accordions, etc. Components are reuseable elements, so design them in a way they can be used independently and in combination with other elements without affecting their appearance.
* `src/assets/scss/global/*.scss`: Global settings. Define your custom variables here. E.g. colors.
* `src/assets/scss/global/*.scss`: Global styles. Define helper classes or element styles here (like a, p, h1, h2, h3, ... ).
* `src/assets/scss/mixins/*.scss`: Put all your custom SCSS mixins here.
* `src/assets/scss/modules/*.scss`: Topbar, footer etc. This are more or less sections or combinations of different components and elements.
* `src/assets/scss/templates/*.scss`: Page template styling. Styles for individual pages especially the ones in `/page-templates`.
* `src/assets/scss/pages/*.scss`: Places styles for single pages here. Make sure to use a identifier like .page-id-{ID}, .home, etc. Note: in gerneral it's not recommended. Better use a modifier class for the elements you want to change.
* `src/assets/scss/_foundation.scss`: All Foundation inclues. Uncomment unused styles to reduce filessize.
* `src/assets/scss/_settings.scss`: All Foundation component styles can be configured here.
* `src/assets/scss/main.scss`: Entrypoint for main styles.
* `src/assets/scss/_settings.scss`: All Foundation component styles can be configured here. Also add custom SCSS variables like colors here in the global section.
* `src/assets/scss/admin.scss`: Entrypoint for admin styles. These are loaded in the WordPress backend.
* `src/assets/scss/editor.scss`: Entrypoint for editor styles. These are included for the Gutenberg editor.
* `src/assets/scss/main.scss`: Entrypoint for main styles which are loaded in the front-end.

* `dist/assets/css/main.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 Grunt running in the background (`npm start`), for any changes in your scss files to be compiled to `main.css`.
If you're new to Sass, please note that you need to have Grunt running in the background (`npm run start`), for any changes in your SCSS files to be compiled to `main.css` in the `/dist/assets/css` folder.

### 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](https://webpack.js.org/) as the module bundler.

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).
If you're unfamiliar with modules and module bundling, check out [this resource to understand ES6 modules](http://exploringjs.com/es6/ch_modules.html).

Foundation modules are loaded in the `src/assets/js/lib/foundation.js` file. By default all components are loaded. You can also pick and choose which modules to include to decrease the JavaScript file size. Just comment out the modules you don't need and 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/`. jQuery is automatically included if you use either `jQuery` or `$` variables in your code.
* In `tasks/options/webpack.js`, add the new file as an entry analogous to the `app.js` file.
* Build (`npm start`)
* You will now have a `custom.js` file outputted to the `dist/assets/js/` directory. Remember to enqueue it in `/library/enqueue-scripts.php`.
* Build (`npm run start`)
* You will now have a `custom.js` file outputted to the `dist/assets/js/` directory. Remember to enqueue it in `/inc/enqueue-scripts.php`.

### Translations

Expand Down Expand Up @@ -152,35 +152,22 @@ You might want to customize the workflow job `productionServerSetup` where you c


### FontAwesome Pro
If you're using FontAwesome Pro uncomment the `Add FontAwesome Pro NPM registry` step in `/.github/workflows/deployment.yml`.
If you're using FontAwesome Pro add the `FONTAWESOME_NPM_AUTH_TOKEN` secret to your repository.


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

* [Local](https://localwp.com/) (macOS, Windows, Linux)
* [VVV (Varying Vagrant Vagrants)](https://github.com/Varying-Vagrant-Vagrants/VVV) (Vagrant Box)
* [MAMP](https://www.mamp.info/en/) (macOS)
* [WAMP](http://www.wampserver.com/en/download-wampserver-64bits/) (Windows)
* [LAMP](https://www.linux.com/learn/easy-lamp-server-installation) (Linux)
* [Local](https://local.getflywheel.com/) (macOS/Windows)
* [VVV (Varying Vagrant Vagrants)](https://github.com/Varying-Vagrant-Vagrants/VVV) (Vagrant Box)
* [Trellis](https://roots.io/trellis/)

## Resources

* [Foundation UI Kit for Adobe XD](https://gumroad.com/l/foundation-ui-kit-xd)
* [Foundation UI Kit for Axure RP](https://gumroad.com/l/foundation-ui-kit-axure-rp)
* [Foundation UI Kit for Photoshop](https://gumroad.com/l/foundation-ui-kit-psd)
* [Foundation 6 Shortcodes for Visual Composer](https://www.402websites.com/downloads/foundation-6-shortcodes-visual-composer/?ref=2&campaign=Foundation6ShortcodesforVisualComposer)

## Tutorials

* [Responsive images in WordPress with Interchange](http://rachievee.com/responsive-images-in-wordpress/)
* [Learn to use the _settings file to change almost every aspect of a Foundation site](http://zurb.com/university/lessons/66)
* [Other lessons from Zurb University](http://zurb.com/university/past-lessons)

## Documentation
## Documentations

* [Zurb Foundation Docs](http://foundation.zurb.com/docs/)
* [Foundation Docs](https://get.foundation/sites/docs/)
* [WordPress Codex](http://codex.wordpress.org/)

## Contributing
Expand Down

0 comments on commit d4a4a0e

Please sign in to comment.