- Notifications
You must be signed in to change notification settings - Fork0
License
NotificationsYou must be signed in to change notification settings
psyao/sage
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Sage is a WordPress starter theme with a modern development workflow developed byRoots.
Sage* is a fork of original theme intended to meet our own need.
- Laravel Mix for compiling assets, concatenating and minifying files
- Tailwind CSS 1.0.0-beta.5 as an utility CSS framework
- Resources folder matchingLaravel 5.8 structure
- Sass for stylesheets
- Modern JavaScript
- Webpack for compiling assets, optimizing images, and concatenating and minifying files
- Browsersync for synchronized browser testing
- Blade as a templating engine
- Controller for passing data to Blade templates
- CSS framework (optional):Bootstrap 4,Bulma,Foundation,Tachyons,Tailwind
See a working example atroots-example-project.com.
Make sure all dependencies have been installed before moving on:
Install Sage* using Composer from your WordPress themes directory (replaceyour-theme-name below with the name of your theme):
$ composer create-project pmbcom/sage your-theme-name
themes/your-theme-name/# → Root of your Sage based theme├── app/# → Theme PHP│ ├── Controllers/# → Controller files│ ├── admin.php# → Theme customizer setup│ ├── filters.php# → Theme filters│ ├── helpers.php# → Helper functions│ └── setup.php# → Theme setup├── composer.json# → Autoloading for `app/` files├── composer.lock# → Composer lock file (never edit)├── public/# → Built theme assets (never edit)├── node_modules/# → Node.js packages (never edit)├── package.json# → Node.js dependencies and scripts├── resources/# → Theme assets and templates│ │ fonts/# → Theme fonts│ │ images/# → Theme images│ │ js/# → Theme JS│ │ sass/# → Theme stylesheets│ ├── functions.php# → Composer autoloader, theme includes│ ├── index.php# → Never manually edit│ ├── screenshot.png# → Theme screenshot for WP admin│ ├── style.css# → Theme meta information│ └── views/# → Theme templates│ ├── layouts/# → Base templates│ └── partials/# → Partial templates└── vendor/# → Composer packages (never edit)
Editapp/setup.php to enable or disable theme features, setup navigation menus, post thumbnail sizes, and sidebars.
- Run
yarnfrom the theme directory to install dependencies - Update
webpack.mix.jssettings:
yarn watch— Compile assets when file changes are made, start Browsersync sessionyarn dev— Compile and optimize the files in your assets directoryyarn production— Compile assets for production