Requirements:
- Node >= 8.0 (nodejs.org)
- npm >=5.0 (
npm install -g npm@latest
- npm) - php >= 5.4 or short_open_tag set
true
on your VM/Webserver
Installation
- Clone WPSeed
$ git clone git@github.com:flurinduerst/WPSeed.git
into yourthemes
directory.
Workflow
General
- you can use any TLD for local development. WPSeed assumes you're using
.vm
for "virtual machine". If you want to use a different TLD make sure to change.vm
to your preffered TLD inVagrantfile
,gulpfile.js
andfunctions-wpsetup.php
.
Gulp
WPSeed uses npm to manage development-modules aswell as frontend-modules and gulp to compile assets from assets
to dist
. For details see gulpfile.js
.
- Install gulp globally with
npm install -g gulp
if you haven't already - add your domain/ip to
browsersync_proxy
ingulpfile.js
- in the theme directory run
npm install
- you can now use
gulp
to compile and optimize your asset files and run browsersync. Usegulp watch
to let gulp compile your files automatically whenever you've made changes to the associated files. - gulp is handling vendor-requirements (external tools/frameworks) by additionally compiling/bundling the files defined in
gulp-vendors.json
. So, if you add vendors, make sure to add them togulp-vendors.json
. - for further information about gulp see gulpjs.com
Modernizr
WPSeed uses modernizr to automatically detect the availability of next-generation web technologies.
- install the modernizr command line config with
npm install -g modernizr
- create/download your custom modernizr config at modernizr.com and select the
command line config
download option. Move the downloadedmodernizr-config.json
intoassets/scripts
. - run
modernizr -c assets/scripts/modernizr-config.json -d assets/scripts
to generate yourmodernizr.js
. This file will be compiled by gulp. - Note: If you don't want to use modernizr you can just ignore/delete the modernizr files in
assets/scripts/
Everything will work perfectly fine without them.
Deployment
- when deploying your website using a deployment-environment like deploybot or deployHQ run
npm install
to install the frontend-modules/vendors on the deployment-docker (--no-spin
helps to keep the logfile clean)gulp
to compile assets- Note: the
npm_modules
folder is not needed on the webserver itself. Vendors from npm_modules are compiled intostyle.min.css
andscript.min.js
.
Usage
General
- All important files provide a description/version at the top. Make sure to read it first.
- Since Version 1.2.0 WPSeed creates cache-busting using gulp-rev. If you're working locally (using the
.vm
TLD) the non-busted stylesheet (style.min.css) is enqueued, to make sure browsersync runs as expected.
Important Files/Folders
Functions
functions-access.php
(functions that control access to the site)functions-backend.php
(backend related functions)functions-dev.php
(functions used for development purposes)functions-elements.php
(functions to output ACF flexible elements)functions-wpsetup.php
(WordPress setup)
CSS
assets/styles/content.scss
(content related styles)assets/styles/general.scss
(re-usable classes and settings)assets/styles/bundle.scss
(gathers all .scss files for compiling with gulp)assets/styles/nav.scss
(navigation)assets/styles/essentials.scss
(required SASS functions and all presets for responsive, this file is not meant to be changed)assets/styles/vars.scss
(manages scaling, all colors, fonts and other presets)
Javascript
assets/scrips/essentials.js
(re-usable essential javascript/jQuery functions/variables)assets/scrips/functions.js
(javascript/jQuery)
Templates
The Wordpress default templates (like page.php, single.php) receive their content from the associated file inside the template folder. This way all templates are grouped together. index.php
is forwarded to page.php
.
str-footer.php
footer content that shows up at the bottom of the page (this is content, don't mix this up withfooter.php
)str-elements.php
template for ACF flexible elementstemp-home.php
displays default content and a full width teaser imagetemp-subsites.php
displays default content and content of the respective child pageswp-home.php
WP blog defaultwp-page.php
WP page defaultwp-single.php
WP post default
All templates are seperate into three categories recognizable by their prefix:
wp
: wordpress default templates.temp
: individual site templates.str
: structure files that have to be included in other sites or the main structure.
Responsive/Fluid presets
Scaling
By default, the layout will scale with the viewport-width as all units are rem
based and html
uses font-size as the root unit.
This scaling can be configured at the SIZE/SCALING
section in vars.scss
. It is also possible to stop the scaling at a certain viewport-width. See instructions inside vars.scss
.
Mixins/Classes
defined by variables
- The width of the two available variables
mobile
anddesktop
are defined in vars.scss. Usage (with default values): - min 800px
@include desktop {...}
- max 799px
@include mobile {...}
defined by individual pixel widths
- at least 750px:
@include vpw_min(750px)
- at most 500px:
@include vpw_max(500px)
- between 1000px and 1200px:
vpw(1000px, 1200px)
defined by ascepct-ratio
- at least 16:9:
@include asr_min(16,9) { ... }
- at most 4:3:
@include asr_max(4,3) { ... }
defined by css-class
the two available classes mobile
and desktop
perform as followed (with default values):
.desktop {
// hidden while < 800px;
}
.mobile {
// hidden while > 799;
}