To understand the overall idea, we suggest you check out the slides of our presentation on Atomic Design, Living Style Guides and the Holy Grail from the Magnolia Conference 2016 in Basel. Maybe even more helpful is watching the recording of the talk, especially the demo part.
- Clone the Git-Repository and open the folder in your console
cd hibiscus-ui
Run the following commands in your console (in the directory of the project):
npm install
Now the project should be set up correctly and any of the following tasks can be used:
| command | description |
|---|---|
| npm install | install needed npm-dependencies |
| npm run clean | remove temporary and output directories |
| npm start | run styleguide |
| npm run serve | same as 'npm start' |
| npm run styleguide | same as 'npm start' |
| npm run styleguide:serve | same as 'npm start' |
| npm run styleguide:dist | render styleguide (templates and scss) into ./dist-styleguide |
| npm run magnolia | run development mode (see Quick integration into magnolia below) |
| npm run magnolia:serve | same as 'npm run magnolia' |
| npm run magnolia:dist | create dist into ./dist-magnolia (to be exported to magnolia ) |
| npm run combined:dist | combined dist (styleguide & magnolia) |
| npm run help | show all available tasks |
Basically, there are two different options to run 'serve' or 'dist' on either the styleguide or the magnolia-output. If not defined, the default is to run the serve command.
Prerequisite: have your magnolia instance running (e.g. in a tomcat) on port 8080. See hibiscus-core/README.md. To change the port, you can find the corresponding config in /gulp/development.js, task 'magnolia'
To make the templates and configuration available in your magnolia-instance, point your magnolia.resources.dir (in the magnolia.properties-file usually located in /webapps/magnoliaAuthor/WEB-INF/config/default) to the output-folder (magnolia-resources) of hibiscus e.g. magnolia.resources.dir=/hibiscus/hibiscus-ui/magnolia-resources
Make sure you have run npm run magnolia:dist and the resources can be found in hibiscus-ui/magnolia-resources/hibiscus-lite.
To make the site-template available as a page, go to WebDev > Site, and in the 'Site definitions' tab, select 'templates/availability/templates'. Add a content node called hibiscus-lite and add a property called 'id' with value 'hibiscus-lite:pages/page-hibiscus-demo'
To allow for browser-refreshing for development, Magnolia's caching-mechanism should be disabled. To do so, go to Configuration > server > filters > cache and set (or create if not exists) a property 'enabled' with value 'false'.
Now, run the command npm run magnolia, and any changes to the sources should now be live-reloaded in the browser.
There are several files that were adjusted. If you update the underlying dependencies, please make sure to check those files for updates:
Altered sections are usually marked with // @@ hibiscus ADJUSTMENT
Magnolia lighter makes dealing with yaml-files a breeze. Altered files:
- gulp-lighter-auto-ref.js
- yaml.js (corresponds to gulpfile.js from magnolia-lighter)
When updating the patternlab-dependency, make sure you check /gulp/patternlab.js (corresponds to patternlab/gulpfile.js), /gulp/builder/patternlab.js and /gulp/builder/patternlab_gulp.js for changes that need to be adapted.
Sections that were changed are marked with /\* #CHANGED \*/
MIT © Netcetera AG
- Netcetera / Damian, Adrian, Dominik, Stojan, Bisera, Corsin and Marcel