Awesome Open Source
Awesome Open Source


Opinionated Wordpress theme based on Sage 9 and Crius.

This project is being constantly modified (I promise to fix the commit mess someday).


  • Blade as a templating engine
  • Write CSS with Stylus
    • Build your website's grid with the RolleiFLEX declarative flex helper framework. (stylus)
    • Use simplified media queries with rupture (stylus)
    • Responsive, fluid properties and other useful mixins
  • 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!
  • Component oriented folder structure.




  • A component javascript modules can be imported by using the alias @Components/...pathToComponent
    • Example: import Header from '@Components/Header/Header.js'
    • Example 2: import SubHeader from '@Components/Header/SubHeder/SubHeader.js'
    • There's also an alias for the 'scripts' directory available: @Scripts/...
  • A component .styl file is imported automatically by the index.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,...


You can use controllers to pass data to specific templates. A controller must be created inside the ./app/controllers/ directory.

Controller documentation

Custom Blade Directives

  • @mainquery ... @endmainquery - Loops through the main query;
  • @customquery(\WP_Query $queryObj) ... @endcustomquery - Loops through a custom query;
  • @visitor ... @endvisitor - Shows a certain content only to site visitors (not logged in);
  • @loggedin ... @endloggedin - Shows a certain content only logged users;
  • @shortcode - Executes a certain shortcode;
  • @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 config/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 inside the_content() around a <div class="oembed-container">;
    • Removes all protocols (http,https) from urls;
    • Dashboard and login page CSS customization;
    • Custom text editor CSS customization with the editor.styl file;
    • Provides an selene global javascript object with the ajax, home and assets 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 or WP_ENV is equal to 'development', the enqueued assets will have a cache-busting filename;
    • Provides John Billion's libraries which make painless to create custom post types and taxonomies.
    • Uses ACF Builder to build ACF fields in the theme's source code instead of the website's database.
    • Uses Whoops error handler for... handling errors.

ACF Builder

Selene comes out of the box with ACF Builder which makes a piece-of-cake to programmatically create custom fields with ACF.

Create your field group inside the root of app/fields and return one (the field group itself) or more (an array of field groups).

If ACF is not installed, the files will be ignored.

Build commands

Pretty much every task needed is covered by the package.json scripts:

  • npm run watch|start - Run browsersync and watch file changes;
  • npm run build - Build minified assets;
  • npm run build:dev - Build unminified assets;
  • npm run build:production - Build the assets, append a hash to the name;
  • npm run clean - Remove the dist folder;
  • npm run lint - Lint all styl and js files;
  • npm run lint:styles - Lint all styl files;
  • npm run lint:scripts - Lint all js files.

Extra Gulp tasks (others listed here)

  • gulp purify - Reads .blade.php and .js files and removes unused css definitions.

External links

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Php (392,389
Wordpress (7,447
Wordpress Plugin (3,432
Gulp (2,642
Composer (2,223
Blade (2,166
Wordpress Theme (1,117
Browsersync (333
Sage (167
Related Projects