<!DOCTYPE html>
<html class="en-GB">
<head>
<title>Rails apps with a modern frontend stack</title>
<meta name="description" content="Sjabloon comes with modern front end tools that are lean, but powerful." />
<meta name="csrf-param" content="authenticity_token" />
<meta name="csrf-token" content="ltEvihiUcxVkYR/8F2z/Pv6bdM8p321kvC4ptx06yfdR64lZbdppMNiaD7mJioO3hnTKaVGJ2wVf5NOn80CIVw==" />
<script src="https://js.stripe.com/v3/"></script>
<meta property="og:site_name" content="Sjabloon">
<meta property="og:title" content="Rails apps with a modern frontend stack" />
<meta property="og:description" content="Sjabloon comes with modern front end tools that are lean, but powerful.">
<meta property="og:type" content="website" />
<meta property="og:url" content="https://www.getsjabloon.com/features/modern-frontend" />
<meta property="og:image" content="https://www.getsjabloon.com/packs/media/images/social-483fb4efa20beb2655befb29d65850d1.jpg"></meta>
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@ntscHQ">
<meta name="twitter:domain" value="getsjabloon.com" />
<meta name="twitter:title" value="Rails apps with a modern frontend stack" />
<meta name="twitter:description" value="Sjabloon comes with modern front end tools that are lean, but powerful." />
<meta property="twitter:image" content="https://www.getsjabloon.com/packs/media/images/social-483fb4efa20beb2655befb29d65850d1.jpg"></meta>
<meta name="twitter:url" value="https://www.getsjabloon.com/features/modern-frontend" />
<meta property="og:logo" content="https://www.getsjabloon.com/logo.jpg" />
<script src="/packs/js/application-52108bb48a94ea445faf.js" data-turbolinks-track="reload"></script>
<link rel="stylesheet" media="screen" href="/packs/css/application-49f7a508.css" data-turbolinks-track="reload" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="google-site-verification" content="6ZvJ4u5D3MhqQhHVjdjAzRUq66Za_Xez7zSLX7tJ-E0" />
</head>
<body class="">
<div class="site-announcement" data-controller="site-announcements" data-target="site-announcements.banner" data-site-announcements-id="37" data-site-announcements-site-name="sjabloon">
<span class="site-announcement__badge site-announcement__badge--#{last_announcement.announcement_type}">
news
</span>
<a class="site-announcement__title" href="https://railsdesigner.com/">Professionally designed UI components to build your next Ruby on Rails app even faster</a>
<a class="site-announcement__action" href="https://railsdesigner.com/">Check it out</a>
<button class="site-announcement__close" data-action="click->site-announcements#dismiss">
<svg viewbox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="site-announcement__close-icon"> <g id="Page-1" stroke="none" stroke-width="1" fill-rule="evenodd"> <g id="icon-shape"> <polygon id="Combined-Shape" points="10 8.58578644 2.92893219 1.51471863 1.51471863 2.92893219 8.58578644 10 1.51471863 17.0710678 2.92893219 18.4852814 10 11.4142136 17.0710678 18.4852814 18.4852814 17.0710678 11.4142136 10 18.4852814 2.92893219 17.0710678 1.51471863 10 8.58578644"></polygon> </g> </g> </svg>
</button>
</div>
<nav class="justify-between text-sm leading-tight nav" data-controller="navigation" data-target="navigation.component" data-action="scroll@window->navigation#onScroll">
<a class="inline-flex" href="/">
<svg width="30" height="30" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><title>logo</title><defs><linearGradient x1="50%" y1="100%" x2="50%" y2="0%" id="a"><stop stop-color="#00CAFF" offset="0%"/><stop stop-color="#009AFF" offset="100%"/></linearGradient></defs><g fill="none" fill-rule="evenodd"><circle fill="url(#a)" cx="100" cy="100" r="100"/><path d="M126.412 145.011v16.379H72.565v-16.379H46L83.558 39h35.136l37.356 106.011h-29.638zm-7.464-24.006L102.54 64.847l-16.267 56.158h32.676z" fill="#FFF"/></g></svg>
</a>
<div class="nav__items" data-target="navigation.items">
<a class="nav__item nav__link" href="/login">log in</a>
</div>
<span role="link" class="navigation__item navigation__toggle" data-target="navigation.toggle" data-action="click->navigation#toggle">menu</span>
</nav>
<div class="overflow-hidden hero">
<div class="container feature-hero">
<span class="feature-hero__tag">Feature</span>
<h1 class="feature-hero__heading">
Modern front end tools
</h1>
<p class="feature-hero__intro">Every modern 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.</p>
</div>
<div class="chrome-wrapper">
<div class="chrome">
<div class="chrome__traffic-lights">
<span class="chrome__traffic-light chrome__traffic-light--close" role="button">
<svg width="96" height="96" viewbox="0 0 96 96" xmlns="http://www.w3.org/2000/svg" class="chrome__traffic-icon"><title>close</title>
<path d="M44.788 48.451L27.175 30.878a4 4 0 0 1 5.65-5.664l17.613 17.574 17.574-17.613a4 4 0 0 1 5.663 5.65L56.102 48.438l17.613 17.574a4 4 0 0 1-5.65 5.663L50.45 54.102 32.878 71.715a4 4 0 0 1-5.664-5.65L44.788 48.45z"></path></svg>
</span>
<span class="chrome__traffic-light chrome__traffic-light--minimise" role="button">
<svg width="96" height="96" viewbox="0 0 96 96" xmlns="http://www.w3.org/2000/svg" class="chrome__traffic-icon"><title>minimise</title>
<path d="M22.004 52.065a4 4 0 1 1-.008-8L79.757 44a4 4 0 1 1 .01 8l-57.763.065z"></path></svg>
</span>
<span class="chrome__traffic-light chrome__traffic-light--maximise" role="button">
<svg width="96" height="96" viewbox="0 0 96 96" xmlns="http://www.w3.org/2000/svg" class="chrome__traffic-icon"><title>maximise</title>
<path d="M37.069 24H72a4 4 0 0 1 4 4v34.917L37.069 24zM65.93 73H31a4 4 0 0 1-4-4V34.083L65.931 73z"></path></svg>
</span>
</div>
<div class="whitespace-pre cli">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" </div>
</div>
</div>
</div>
<div class="max-w-xl mx-auto mt-16">
<h2 class="mt-6 mb-1 text-xl font-bold">Webpack</h2>
<p class="mb-8"><a target="_blank" href="https://webpack.js.org">Webpack</a> is the way forward to add great and modern Javascript tools. That's why Sprockets is removed by default in Sjaloon.</p>
<h2 class="mt-6 mb-1 text-xl font-bold">PostCSS</h2>
<p class="mb-8"><a target="_blank" href="https://postcss.org/">PostCss</a> 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 (using plugins) you love about these post-processors: variables, nesting, and more.</p>
<h2 class="mt-6 mb-1 text-xl font-bold">Tailwind CSS</h2>
<p class="mb-8"><a target="_blank" href="https://tailwindcss.com/">Tailwind</a> is an amazing set of Css utilites with an easy to remember naming convention and a great build tool and plug-ins system. It's build on top of PostCss, so you can create stunning UI real fast that is easy to change and build.</p>
<h2 class="mt-6 mb-1 text-xl font-bold">Stimulus JS</h2>
<p class="mb-8">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 overkill for early versions of your product. Stimulus is a modest framework that provides just enough to write clean and maintainable (sprinkles of) Javascript. Check out <a href="/features/ui-components">the UI components</a> for some examples of Stimulus at work.</p>
<div class="p-4 mt-6 border-2 border-gray-200 rounded">
<h2 class="mb-1 text-base font-bold text-gray-700">Want to use something different?</h2>
<p class="mb-0">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 “JSAmazing2024”.</p>
</div>
</div>
<footer class="footer-wrapper">
</footer>
<script async defer data-domain="getsjabloon.com" src="https://plausible.io/js/plausible.js"></script>
</body>
</html>