Git Product home page Git Product logo

genesis-starter's Introduction

Genesis Starter

A Genesis Framework starter theme with Gulp support. I took StudioPress' original Genesis Sampler theme and added my stuff.

Requirements

Setup

  1. Clone this repository and change the theme's name.
  2. There is no style.css in the root, that is built by Gulp. The header comment metadata can be edited at src/sass/_meta.scss.
  3. Run composer install to install PHP dependencies.
  4. Run npm install to setup the build tools and install JavaScript dependencies.
  5. Run gulp build to generate public site assets from sources.

CSS Preprocessor Support

Genesis Starter uses Sass out of the box, but it should not be at all hard to configure a Gulp task to handle different preprocessors (such as LESS or Stylus).

JavaScript and Browserify

The Starter uses Browserify to better allow modularization of client-side code using modules.

By default, your code is concatenated into a file called app.js, while external dependencies (installed using NPM) are concatenated into infrastructure.js.

The Browserify build process also handles ECMAScript 2015 transparently, using Babel to convert it into the kind of JavaScript most browsers support today.

Build Tasks

The Genesis starter provides the following Gulp tasks.

Task Description
watch Watches files for changes and rebuilds assets (default).
build Runs browserify, fonts, sass and images.
test Runs ava and phpunit.
clean Deletes the built assets so you can start afresh.
ava Runs AVA tests.
browser-sync Reloads and syncs browsers on multiple devices.
browserify Packages JavaScript bundles from their sources.
eslint Lints your JavaScript code.
fonts Converts web fonts to CSS for localStorage caching.
images Copies and compresses image assets.
phpunit Runs PHPUnit test cases.
sass Compiles, minifies and concatenates CSS from Sass.

Task parameters may be configured via the gulp/config.js file.

BrowserSync

The watch task uses BrowserSync to observe files, automate browser refreshes and allow synchronised testing between different devices on the same site.

In order to do this, BrowserSync creates a local proxy that channels connections to the development site defined in the browserSync.proxy entry of gulp/config.js.

The proxy configuration requires that your WordPress site be available from multiple domain or host names, a feature offered by a plugin such as WP Hydra. (I recommend that you use these plugins for development only, since activating them on a public site could severely affect your site's search rankings.)

Feel free to experiment (and report on) different BrowserSync configurations, but from those I've tried this is the one that work best for me.

License

Genesis Starter is released under the GPL 2.0 Free Software License.

genesis-starter's People

Contributors

goblindegook avatar xipasduarte avatar

Watchers

 avatar  avatar

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.