Using theme as node module (yarn)
Hi, I am developing with Go Buffalo (https://gobuffalo.io/en) and trying to replace it's default bootstrap with the craft theme (craft_html_v1.0.11).
Mostly speaking, I have it mostly working, however I keep running into little problems. The latest is getting the toastr message displaying, as it seems I can't find the "toastr" object even though I am importing the correct .js and .css files (per the doc).
In buffalo the default bootstrap is imported like so:
in application.js:
require("bootstrap/dist/js/bootstrap.bundle.js");
in application.scss:
@import "~bootstrap/scss/bootstrap.scss";
which is found because it is installed as a node_module in the project.
Is it possible to install the theme as a node_module, so that "everything just works?" I don't know how to do this myself, as I'm a pretty crappy web developer in the grand scheme of things .... but really like using your themes.
Please let me know, or perhaps offer some advice on how I might be able to do this - thanks!!
Replies (1)
Hi Dave,
We use a build tool (gulp or webpack) to bundle assets from node_modules.
1. The first thing to do is to learn the file structure of the theme. You can check in the documentation for file structure; https://preview.keenthemes.com/craft/documentation/getting-started/file-structure.html
You can go to the index.html template and check the CSS and JS included in the template head and foot. Once you fully understand what are CSS and js files to include in each page of your application the rest will be quite easy. So please go to index.html and check the code.
2. You can use the layout builder to prepare your HTML template.
https://preview.keenthemes.com/metronic/demo1/ and click the "Layout Builder" link below the "Dashboards" submenu in the left side menu. Then you will land on the layout builder page: https://preview.keenthemes.com/craft/builder.html
The layout builder helps you to configure the layout with available options and preview in real-time. Once you decide what configuration you like to use you can download the HTML code of your preferred configuration. To do so go to the bottom of the page and find the "Export" button and you will get a package containing the HTML template and with the partials(header, aside, footer, etc) that can be used for your server-side integration. The export package provides you with only the HTML code with structured includable partials that are perfect for server-side integration. The assets can be included in your local download version.
3. Once you integrated the master layout and all the menus and navigation you can proceed with your inner pages by referring to the original theme demos.
4. Also as the main reference to the available features, you can refer to the demo pages source code for each feature.
If you need any further help, please let us know.
Thanks
