Modern front end tools

Every web application needs a proper front end stack. Ruby on Rails uses Webpack as the default (starting with Rails 6). It allows you to add and set up modern packages in your app quickly and easy. Sjabloon comes by default with PostCss, Tailwind Css and Stimulus JS fully set up and ready to go.

close minimise maximise
import { Application } from "stimulus" import Rails from "rails-ujs" import Turbolinks from "turbolinks" import { definitionsFromContext } from "stimulus/webpack-helpers" const application = Application.start() const context = require.context("controllers", true, /.js$/) application.load(definitionsFromContext(context)) Rails.start() Turbolinks.start() import "../stylesheets/application.css"


Webpack is the way forward to add great and modern tools. That's why Sprockets is removed by default.


PostCss is the (next big) thing for Css. It chains a bunch of (Javascript) plugins together allowing you to do nearly infinite things with your Css. Sjabloon does not use SASS/SCSS, but gives you the same options you love about these post-processors: variables, nesting, and more.

Tailwind CSS

Tailwind is an amazing set of Css utilites with an easy to remember naming convention and a great build tool and plug-ins system. Wrapped together with PostCss you can create stunning UI real fast that is easy to change and build.

Stimulus JS

Often many (technical) makers dive deep into the latest and greatest Javascript framework. While these certainly have their place, more often than not is this not the case for an early version of your new product. Stimulus is a modest framework that provides just enough to write clean and maintainable sprinkles of Javascript. Check out the UI components for some examples of Stimulus at work.

Want to use something different?

While I highly recommend this stack to be the most efficient for building amazing looking UI that are versatile and quick to build, it's easy to switch to Vue, React or “JSAmazing2019”.