Jumpstart Pro is built using Webpacker as the primary tool for compiling both Javascript and CSS stylesheets.
Rails 6 uses Webpacker instead of the asset pipeline for providing a more modern Javascript build process. This moves all our Javascript code to app/javascript
and allows us use of webpack-dev-server
to automatically reload our JS and CSS after save.
webpacker (and webpack) are often changing, so if you run into issues, take a look at the webpacker issues on github.
We are using the following Javascript libraries and features:
Our Javascript framework of choice in Jumpstart Pro is StimulusJS. This gives us extremely lightweight Javascript sprinkles of functionality with complete flexibility of the HTML it gets applied to.
We're using Stimulus for several pieces of functionality:
We also override data-confirm to use TailwindCSS modals with the default Rails UJS functionality.
The Javascript for Stimulus components can be found in app/javascript/controllers
.
Jumpstart Pro uses TailwindCSS as the CSS framework. We've included a nice default theme and helpers to make using TailwindCSS as easy as Bootstrap. Check out the Frontend section of the docs for more information on how to use the comopnents we have created for you.
Tailwind is processed using PostCSS. The Tailwind config is located app/javascript/stylesheets/tailwind.config.js
. You can use this file to tweak colors, fonts and other defaults.
The components are located in app/javascript/stylesheets/components/
. You will find an organized set of files for each component in the app design there.
We have included PurgeCSS by default to automatically remove unused CSS when deploying to production. This greatly reduces the size of TailwindCSS in production to deliver a much faster experience in production.
PurgeCSS works by searching folders for exact matches of any CSS classes in your app. By default, we have configured PurgeCSS to look for CSS classes used in app/views/**/*.html.erb
and app/helpers/**/*.rb
. Any CSS classes referenced in these files will automatically be kept for production.
To add more search paths to PurgeCSS, add them to postcss.config.js
.