Rin

Rin is a lean HTML & SASS boilerplate for building static front-end projects, created by Kyoto-based graphic designer Showkaku Sano. It compiles EJS templates, SCSS, JavaScript, and images from a src/ directory into a deployable build/ folder, using BrowserSync for live reload during development.

What is Rin?

Rin is a minimal, open-source boilerplate (MIT license) that automates the repetitive parts of static site development. It runs on Node.js with npm scripts; you install dependencies with npm install and start the watch-and-build process with npm start. The tool watches src/ and outputs plain HTML, CSS, and JavaScript to build/, producing a build/index.html plus css/, js/, and images/ subfolders that can be hosted on any static server or GitHub Pages.

Key Features

• EJS templating — .ejs files under src/templates/pages compile to .html in build/. A site.json file holds site-wide variables like siteName, siteRootUrl, ogImageUrl, twitterSite, and googleAnalyticsId, and each page can define its own variables such as pageTitle and pageDescription.

• SCSS toolkit — The sass/ folder includes partials: _normalize.scss (based on normalize.css), _grid.scss with a simple responsive grid using l-container, l-row, l-span4, and l-span6 classes, _button.scss with button variants, _common.scss, _core.scss, and _variable.scss defining color variables and six breakpoints (mq-xs under 480px, mq-sm, mq-md, mq-lg, mq-xl, mq-xxl over 1600px).

• JavaScript bundling — All files in src/js/ are concatenated and compressed into one build/js/scripts.js file.

• Image optimization — GIF, JPG, PNG, and SVG images in src/images/ are run through imagemin and saved to build/images/.

• BrowserSync live server — npm start launches a local server at http://localhost:3000/ that auto-reloads when you change any source file.

• GitHub Pages deployment — The README documents pushing the compiled site with git subtree push --prefix build/ origin gh-pages.

• Simple directory structure — The input side keeps templates/, scss/, js/, and images/ under src/; the output side is a flat build/ directory ready for upload.

Who is it for?

Front-end developers who need a no-frills starting point for small static sites will find Rin useful, as it handles templating and asset processing without a heavy build system. Designers who prefer editing SCSS partials and EJS files directly can use it as a clean reference setup. Developers learning EJS or SCSS can study the included patterns, such as the grid partial and breakpoint variables, as working examples.

What can you do with Rin?

• Prototype responsive pages — Use the l-row and l-span6 classes to create two-column layouts, or mix l-span4 for three columns, then apply breakpoint variables to adjust typography and layout across phone, tablet, and desktop widths.

• Build a multi-page static site — Define per-page metadata like pageTitle and reuse global values like siteName and ogImageUrl across templates, so social sharing tags stay consistent without duplication.

• Prepare front-end assets for release — Drop unminified JavaScript and unoptimized images into the source folders, and Rin will compress and optimize them into the build/ output you can upload anywhere.

How does Rin work?

Clone the repository, run npm install to fetch dependencies, and run npm start. Rin watches src/; editing any template, SCSS, JS, or image file triggers a rebuild to build/ and a BrowserSync reload. When you are ready to publish, use the documented git subtree command to push the build/ folder to the gh-pages branch.

FAQ

Is Rin free?

Yes. Rin is released under the MIT license, so you can freely use, modify, and redistribute it, including in commercial projects.

What templating engine does Rin use?

Rin uses EJS (Embedded JavaScript). Pages are stored as .ejs files under src/templates/pages and compile to .html in the build/ directory. You can define variables at the top of each page to pass into the template output.

Does Rin include a CSS framework?

Rin does not include a full CSS framework like Bootstrap or Tailwind. Instead, it provides a small SCSS toolkit with normalized styles, a responsive grid, button styles, and configurable color and breakpoint variables.

How do I deploy a Rin site to GitHub Pages?

Run git subtree push --prefix build/ origin gh-pages from the repository root. This pushes the compiled build/ folder to the gh-pages branch, which GitHub Pages serves automatically.

Which image formats does Rin optimize?

Rin optimizes GIF, JPG, PNG, and SVG images using imagemin. The optimized files are written to build/images/.