rzzo

'use-strict';

var gulp = require('gulp'),
    svgSprite = require('gulp-svg-sprite'),
    path = require('path'),
    
// SVG Config
 config                  = {
    shape               : {
        id              : {

rzzo

<!-- Set page title with ternary operator -->

<!-- application layout -->
<title><%= content_for?(:page_title) ? yield(:page_title) : default_page_title %></title>

<!-- view -->
<% set_page_title(@page_title) %>

<!-- application helper -->
def set_page_title(title) 

rzzo

//=== hover active focus
//=== Use: @include hoverActiveFocus('opacity', 0.5)
@mixin hoverActiveFocus($property, $value) {
  &:hover, &:active, &:focus {
    #{$property}: $value;
  }
}

rzzo

//=== Clearfix
//=== Use @extend %clearfix;

%clearfix {
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

rzzo

//=== px -> rem USE: @include rem('padding',18px 0 20px 5px);
//=== Thanks to the tons of posts that I put this together with.

$baseline-px: 16px;

@mixin rem($property, $px-values) {
  // Convert the baseline into rems
  $baseline-rem: $baseline-px / 1rem * 1;
  // Print the first line in pixel values
  #{$property}: $px-values;