Installation & Update
Last updated
Last updated
Make sure to install and get to know matestack-ui-core
and matestack-ui-vuejs
first!
Add 'matestack-ui-bootstrap' to your Gemfile
and run
Create a folder called 'matestack' in your app directory. All your Matestack apps, pages and components will be defined there.
Add the Matestack helper to your controllers. If you want to make the helpers available in all controllers, add it to your 'ApplicationController' this way:
app/controllers/application_controller.rb
You need to add the ID "matestack-ui" to some part of your application layout (or any layout you use). That's required for Matestack's Vue.js to work properly!
For Example, your app/views/layouts/application.html.erb
should look like this:
Don't apply the "matestack-ui" id to the body tag.
v-cloak
is used to avoid to hide un-compiled Vuejs templates until they are ready when using a CSS rule like:
Same approach for all below described Stylesheet setups. Will be optimized in a future release!
Download and import Bootstraps icons:
app/assets/images/icons
extract the bootstrap-icons.svg to this path: app/assets/images/icons (currently served via assets pipeline, we had issues not using the asset pipeline)
app/views/layout.html.erb
Please adjust the version numbers to your needs. They should match the JavaScript package versions used in the importmap config.
Install the bootstrap gem
Add the asset path to config/initializers/assets.rb
Import the scss files in your app/assets/stylesheets/application.scss
Install cssbundling-rails
And then add matestack-ui-bootstrap
:
Afterwards make sure your package.json looks something like that:
package.json
Even if you use the importmap approach, this package.json will install the JavaScript packages into the node_modules folder. They will not be used when following the importmap approach. Only the (S)CSS files will be used in this case.
And finally adjust the app/assets/stylesheets/application.bootstrap.scss
to look like:
and run your server and css builder with
not tested yet
Tell Webpack to import Bootstraps CSS:
app/javascript/packs/stylesheets/application.scss
app/javascript/packs/application.js
and compile with:
When you update the matestack-ui-bootstrap
Ruby gem, make sure to update the npm package as well!
Depending on the entry in your Gemfile, you might need to adjust the allowed version ranges in order to update the Gem. After checked and adjusted the version ranges, run:
and then check the installed version:
If you've installed the JavaScript dependecies via Yarn/Webpacker you need to update the JavaScript assets via yarn:
and finally check if the correct version is installed:
The Ruby gem version and the NPM package version should match!
This is optional but highly recommended for a better UI experience. More info here:
download latest compatible icons:
Like documented here: