Selene
This project is being constantly modified (I promise to fix the commit mess someday).
Informations
- 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.jsonand let the magic happen! - Component oriented folder structure.
Requirements
Recommended
- ACF >= 5.x.x
Components
- 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/...
- Example:
- A component
.stylfile is imported automatically by theindex.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
viewsdirectory.- Example:
@include('Components.Header.Header')
- Example:
- 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
./app/controllers/
directory.
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 avar_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=termwith.com/search/term; - Wraps all
oembedinsidethe_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.stylfile; - Provides an
seleneglobal javascript object with the ajax, home and assets urls.
- Cleans up and prettify your
-
Back-end
- Sets uploaded JPEG quality to 100;
- Provides options on the admin dashboard to crop default medium and large image sizes;
- While
WP_DEBUGis true orWP_ENVis 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 thedistfolder;npm run lint- Lint allstylandjsfiles;npm run lint:styles- Lint allstylfiles;npm run lint:scripts- Lint alljsfiles.
Extra Gulp tasks (others listed here)
gulp purify- Reads.blade.phpand.jsfiles and removes unused css definitions.
External links
- Crius documentation
- Sage 9 documentation (currently in progress)