A lean, gulp-based HTML & SASS boilerplate for better front-end coding.
http://sanographix.github.io/rin/
- Node.js
- http://nodejs.org/
- v4.4.x is recommended.
Note: If you have already installed gulp, skip this section.
$ npm install -g gulp
$ git clone [email protected]:sanographix/rin.git test-repo
$ cd test-repo
$ npm install
$ gulp
While you are running Rin, It is watching directories under templates/, sass/, js/, images/. Put your project’s templates(ejs), scss, js, images files in it.
templates/, sass/, js/, images/ files will compile and output to build/.
rin/
┣┳ templates/
┃┣ sass/
┃┣ js/
┃┗ images/
┃
┗┳ build/
┗┳ index.html
┣ css/
┣ js/
┗ images/
Rin supports EJS template. When you edit and save .ejs files under templates/ directory, they will output as .html to build/ directory.
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"
}
If you want 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>
<head>
<title>Toppage - Example Site</title>
<meta property="og:description" content="Example site" />
</head>
Rin optimizes gif, jpg, png, svg images automatically using gulp-imagemin. Each files will output to build/.
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
It helps you make simple grid system. Like this:
<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>
<div class="l-container">
<div class="l-row">
<div class="l-span6">
Column A
</div>
<div class="l-span6">
Column B
</div>
</div>
</div>
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-large">Large button!!</a>
Color variables and breakpoints of browser window width.
mq-lg- Large display (>1240px)
mq-md- Tablet display (<1024px)
mq-sm- Small tablet & Smartphone (<767px)
mq-xs- Smartphone (<480px)
header h1 {
font-size: 200%;
@media #{$mq-lg} {
font-size: 300%;
}
@media #{$mq-sm} {
font-size: 100%;
}
@media #{$mq-xs} {
font-size: 80%;
}
}
Variables for retina devices.
at2x- All retina devices
at2x-tablet- Retina devices (larger than iPad display)
at2x-pc- Retina devices larger than PC display (1025px)
- Use this variables when you need to load too large file size images.
header h1 {
background: url("images/title.png");
@media #{$at2x} {
background: url("images/[email protected]");
}
}
js files under js/ will output to build/js/scripts.js with concatenated and compressed.
Rin runs local server by using BrowserSync. Its default URL is http://localhost:3000/. It reloads your browser automatically when you update a file that gulp is watching.
Run git subtree command.
git subtree push --prefix build/ origin gh-pages
Graphic designer from Kyoto.
- http://www.sanographix.net/
- Twitter: @sanographix
- Normalize.css: Public Domain
- html5shiv: MIT/GPL license
- gulp: MIT license