matslom / oasis

Modern MyBB Theme Framework

Clement

Modern MyBB theme that uses a modern workflow, with ES6, SCSS, and many more possibilities with npm.

Usage Example

Templates

Download the zip and extract it in your root/themes folder.

Run npm install inside the directory.

Edit ./tasks/templates/config.json with the appropriate information.

Initialize

Run npm run templates:file to download all templates from the database to your local installation.

Save to Database

Run npm run templates:db to save all local files to the database.

Delete

Run npm run templates:delete to delete all local files. BE CAREFUL.

Watch for Changes

Run npm run templates:watch to save template files to the database as they change.

CSS/JS/Images

Include the files ./dist/themes/oasis/css/main.min.css and ./dist/themes/oasis/js/main.min.js in your headerinclude somewhere after {$stylesheets}. (Optionally you can remove it entirely) For example:

<link rel="stylesheet" type="text/css" href="themes/oasis/dist/themes/oasis/css/main.min.css" />
<script type="text/javascript" src="themes/oasis/dist/themes/oasis/js/main.min.js"></script>

Set your image directory to themes/oasis/dist/themes/oasis/images and your logo directory to themes/oasis/dist/themes/oasis/images/logo.png

JS

Run gulp js to transpile your Javascript into ES5 and compress it. Make edits to the files in ./src/js.

CSS

Run gulp sass to transpile your Sass into CSS and compress it. Make edits to the files in ./src/sass.

Images

Run gulp img to compress your images. This compresses images in ./src/images and places them in ./dist/images.

Watch

Run gulp watch to automate both JS and CSS transpiling while you edit.

To Do

• Use webpack
• Convert theme files to files
• Build theme file from local files
• Database CSS to files
• Add gulp build task