rin

by sanographix

sanographix / rin

A Lean HTML & SASS Boilerplate

405 Stars 39 Forks Last release: about 2 years ago (v5.0.0) MIT License 206 Commits 9 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

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 [email protected]:sanographix/rin.git test-repo
$ cd test-repo
$ npm install

3) Run rin:

$ npm start

4) :tada:


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

 at each page.

Example:

<title> - </title>
<meta property="og:description" content="&lt;%= pageDescription %&gt;">

Result:

    Toppage - Example Site
    

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

Column A
Column B
Column C

2-column

Column A
Column B

_button.scss

Example:

Normal button
Light color button
Primary button!
Large button!!

_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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.