Skip to content
A Lean HTML & SASS Boilerplate
Branch: master
Clone or download
Latest commit 62fabfa Aug 30, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src remove facebook script Aug 26, 2018
.gitattributes
.gitignore
LICENSE
bs-config.js fix browsersync watch failed Jun 19, 2018
package-lock.json use onchange Aug 30, 2018
package.json
readme.md
site.json https Aug 26, 2018

readme.md

Rin 5

A lean HTML & SASS boilerplate for better front-end coding

https://sanographix.github.io/rin/

Getting Started

Required Components

Set Up

1) Clone Rin:

$ git clone git@github.com:sanographix/rin.git test-repo
$ cd test-repo
$ npm install

3) Run rin:

$ npm start

4) 🎉


Directory

While you are running Rin, It is watching directories under src/. Put your project’s templates(ejs), scss, js, images files in it.

templates/, scss/, js/, images/ files will compile and output to build/.

rin/
┣┳ src/
┃┣ templates/
┃┣ scss/
┃┣ js/
┃┗ images/
┃
┗┳ build/
 ┗┳ index.html
  ┣ css/
  ┣ js/
  ┗ images/

Templates

Rin supports EJS template. When you edit and save .ejs files under src/templates/pages, they will output as .html to build/ directory.

Template tags

site.json

Put variables which use for every pages.

Example:

{
  "siteName": "Example Site",
  "siteRootUrl": "http://example.com/",
  "ogImageUrl": "http://example.com/images/og-image.jpg",
  "fbAppId": "000000000",
  "twitterSite": "@sanographix",
  "googleAnalyticsId": "UA-00000000-1"
}

index.ejs

To use variables for particular single page, put variables into <% var %> at each page.

Example:

<% var
pageTitle = "Toppage";
pageDescription = "Example site";
%>
<head>
	<title><%= pageTitle %> - <%= siteName %></title>
	<meta property="og:description" content="<%= pageDescription %>" />
</head>

Result:

<head>
	<title>Toppage - Example Site</title>
	<meta property="og:description" content="Example site" />
</head>

Images

Rin optimizes gif, jpg, png, svg images automatically using imagemin. Each files will output to build/images/.

CSS

Rin supports scss.

sass
┣ style.scss // It imports under /lib files
┗ lib
   ┣ _core.scss // Edit this files mostly
   ┣ _button.scss // Buttons
   ┣ _common.scss // Common components like `body` or `a` etc
   ┣ _grid.scss // Responsive grid system
   ┣ _normalize.scss // Normalize
   ┗ _variable.scss // Color variables

_normalize.scss

-> normalize.css

_grid.scss

It helps you make simple grid system. Like this:

3-column

<div class="l-container">
  <div class="l-row">
    <div class="l-span4">
      Column A
    </div>
    <div class="l-span4">
      Column B
    </div>
    <div class="l-span4">
      Column C
    </div>
  </div>
</div>

2-column

<div class="l-container">
  <div class="l-row">
    <div class="l-span6">
      Column A
    </div>
    <div class="l-span6">
      Column B
    </div>
  </div>
</div>

_button.scss

Example:

<a class="btn">Normal button</a>
<a class="btn btn-light">Light color button</a>
<a class="btn btn-primary">Primary button!</a>
<a class="btn btn-lg">Large button!!</a>

_variable.scss

Color variables and breakpoints of browser window width.

Media queries breakpoints

  • mq-xs
    • Smartphone (<480px)
  • mq-sm
    • Smartphone, Tablet (>576px)
  • mq-md
    • Tablet (>768px)
  • mq-lg
    • Medium desktop display (>992px)
  • mq-xl
    • Large desktop display (>1200px)
  • mq-xxl
    • Extra large desktop display (>1600px)

Example:

header h1 {
    font-size: 100%;
    @media #{$mq-xs} {
        font-size: 80%;
    }
    @media #{$mq-sm} {
        font-size: 150%;
    }
    @media #{$mq-md} {
        font-size: 200%;
    }
    @media #{$mq-lg} {
        font-size: 300%;
    }
}

JS

js files under src/js/ will output to build/js/scripts.js with concatenated and compressed.

Local Server

Rin runs local server by using BrowserSync. Its default URL is http://localhost:3000/. It reloads your browser automatically when you update a file.

Deploy to gh-pages branch

Run git subtree command.

git subtree push --prefix build/ origin gh-pages

Author

Showkaku Sano (sanographix)

Graphic designer from Kyoto.

License

MIT

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.