ereinach / wpseed Goto Github PK

Version 1.2.0 (18.02.2018)

WPSeed is a WordPress starter theme following the intention of being able to skip the time-consuming first steps when creating a new theme. WPSeed uses a variety of pre-built objects that allow kickstarting any kind of theme. These objects consist of:

• basic templates
• basic html/scss structure
• html/scss/javascript presets and essential functions
• responsive functionality including viewport-mixins, rem-based content resizing and a animated mobile menu
• a preset/config scss file managing all colors, fonts and sizes

• 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

• Clone WPSeed $ git clone [email protected]:flurinduerst/WPSeed.git into your themes directory.

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
• in the theme directory run npm install && gulp
• add your domain/ip to browsersync_proxy in gulpfile.js
• you can now use gulp (run gulp watch in your theme directory) to compile and optimize your asset files and run browsersync
• 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 in Vagrantfile, gulpfile.js and functions-wpsetup.php.

• 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 into style.min.css and script.min.js.

• 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.

• 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)

• 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)

• assets/scrips/essentials.js (re-usable essential javascript/jQuery functions/variables)
• assets/scrips/functions.js (javascript/jQuery)

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 with footer.php)
• str-elements.php template for ACF flexible elements
• temp-home.php displays default content and a full width teaser image
• temp-subsites.php displays default content and content of the respective child pages
• wp-home.php WP blog default
• wp-page.php WP page default
• wp-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.

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.

defined by variables

• The width of the two available variables mobile and desktop 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;
}

Author: Flurin Dürst

Contact: [email protected]

Twitter: @flurinduerst

• Fork it
• Create your feature branch
• Commit your changes
• Push to the branch
• Create new Pull Request

Feel free to contact me if you have questions or need any advice.

WPDistillery is released under the MIT Public License.

Note: The "About" section in README.md and the author (@author) notice in the file-headers shall not be edited or deleted without permission. For Details see License. Thank you.