Selene

Wordpress theme based on Sage 9 and Crius.

Informations

Write CSS with Stylus
- Build your website's grid with the RolleiFLEX declarative flex helper framework. (stylus)
- Use simplified media queries with rupture (stylus)
Write modern Javascript
See live changes (CSS/JS/HTML) on your project with browserSync
Need to manage a new type of resource, like, let's say... sounds? Just define it in the crius.json and let the magic happen!

Requirements

WordPress >= 4.7
PHP >= 5.6.4
Composer
Node.js >= 6.9.x
Gulp >= 4.x.x

Components

A component javascript modules can be imported by using the alias Components.{componentName}
- Example: import Header from '@Components/Header'
- Example 2: import SubHeader from '@Components/Header/SubHeder'
A component .styl file is imported automatically by the wrapper.styl.
A component blade template can be included in the same way as any blade file. The inclusion is relative to the current template or to the views directory.
- Example: @include('Components.Header.Header')
Gulp can create or delete components:
- gulp component --create component1,component2,component3,...
- gulp component --delete component1,component2,component3,...

Controllers

You can use controllers to pass data to specific templates. A controller must be created inside the ./resources/controllers/ directory. A controller scope is defined by each class name returned by get_body_class.

Custom Blade Directives

@mainquery ... @endmainquery - Loops through the main query;
@customquery(\WP_Query $queryObj) ... @endcustomquery - Loops through a custom query;
@inlinesvg - Prints the specified svg file;
@dump - Dumps an php variable with a var_export;
@console - Dumps a php variable in the javascript console.

Directives can be defined on app/directives.php.

WordPress tweaks

Front-end
- Cleans up and prettify your body_class() output;
- Cleans up your <head>;
- Scripts load with defer;
- Rewrites the search url .com/?s=term with .com/search/term;
- Wraps all oembed around a <div class="embed">;
- Remove all protocols (http,https) from urls;
- Admin dashboard and login page CSS customization with the admin.styl file;
- Custom text editor CSS customization with the editor.styl file;
- Provides an appMeta global javascript object with the ajax and home urls.
Back-end
- Sets uploaded JPEG quality to 100;
- Provides options on the admin dashboard to crop default medium and large image sizes;
- While WP_DEBUG is true, the enqueued assets will have a cache-busting file name;
- Provides John Billion's libraries which make painless to create custom post types and taxonomies.
  - https://github.com/johnbillion/extended-cpts
  - https://github.com/johnbillion/extended-taxos

Build commands

Useful gulp tasks aliases

yarn run watch
yarn run build
yarn run build:staging
yarn run build:production

External links

Crius documentation
Sage 9 documentation (currently in progress)

edkf / selene