Rin 3.0
A lean, gulp-based HTML & SASS boilerplate for better front-end coding.
http://sanographix.github.io/rin/
Getting Started
Required Components
- Node.js
Set Up
1) Install gulp:
Note: If you have already installed gulp, skip this section.
$ npm install -g gulp
2) Clone Rin:
$ git clone git@github.com:sanographix/rin.git test-repo
$ cd test-repo
$ npm install
3) Run gulp:
$ gulp
4) π
Directory
While you are running Rin, It is watching directories under sass/
, js/
, images/
. Put your projectβs scss, js, images files in it. Each files will compile and output to build/
.
rin/
β£β³ sass/
ββ£ js/
ββ images/
β
ββ³ build/
ββ³ css/
β£ js/
β images/
Images
Rin optimizes gif, jpg, png, svg images automatically using gulp-imagemin. Each files will output to build/
.
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
_grid.scss
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>
_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-large">Large button!!</a>
_variable.scss
Color variables and breakpoints of browser window width.
Media queries breakpoints
mq-lg
- Large display (>1240px)
mq-md
- Tablet display (<1024px)
mq-sm
- Small tablet & Smartphone (<767px)
mq-xs
- Smartphone (<480px)
Example:
header h1 {
font-size: 200%;
@media #{$mq-lg} {
font-size: 300%;
}
@media #{$mq-sm} {
font-size: 100%;
}
@media #{$mq-xs} {
font-size: 80%;
}
}
at2x
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.
Example:
header h1 {
background: url("images/title.png");
@media #{$at2x} {
background: url("images/title@2x.png");
}
}
JS
js files under 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 that gulp is watching.
Author
Showkaku Sano (sanographix)
Graphic designer from Kyoto.
- http://www.sanographix.net/
- Twitter: @sanographix
License
Major components:
- jQuery: MIT/GPL license
- Normalize.css: Public Domain
- html5shiv: MIT/GPL license
- gulp: MIT license