rytm-helpers

Rytm helpers includes: SCSS for bootstrap v4 and some JS helpers like the trace() method, etc.

Install using NPM:

$ npm install rytm-helpers --save

SCSS helpers

###Variables

• $vertical-margin-spacer: 10px
• $horizontal-margin-spacer: 10px
• $vertical-padding-spacer: 10px
• $horizontal-padding-spacer: 10px
• $white: #FFF
• $black: #000
• $brand-primary: #337ab7
  ####Icon sizes:
• $icon-size-xxs: 16px !default;
• $icon-size-xs: 18px !default;
• $icon-size-s: 20px !default;
• $icon-size-m: 24px !default;
• $icon-size-l: 28px !default;
• $icon-size-xl: 36px !default;
• $icon-size-xxl: 50px !default;

###Background

• .bg-cover
• .bg-contain
• .bg-fixed
• .bg-white
• .bg-gray-100 ... .bg-gray-900
• .bg-black

###Typography

• .font-weight-black

###Buttons

• .btn-xl
• .btn-xs

###Bootstrap
Image, Iframe nested under .container or .container-fluid get max-width: 100%

###Helpers

• .fl float left

• .fr float right

• .cf, .clearfloat clear float

• .before element with :before pseudoclass positioned absolute

• .after

• .before-after
  Set of margin-top / bottom / left + right and padding-top / bottom / left + right helper classes. Uses the $vertical-margin-spacer, $horizontal-margin-spacer, $vertical-padding-spacer and $horizontal-padding-spacer

• .mt-0 - .mt-120

• .mb-0 - .mb-120

• .my-0 - .my-120

• .mx-0 - .mx-120

• .pt-0 - .pt-120

• .pb-0 - .pb-120

• .py-0 - .py-120

• .px-0 - .px-120
  Responsive options (mobile-first):

• .mt-sm-0 - .mt-xl-0

###Icons

• .i-xxs icon size: $icon-size-xxs
• .i-xs icon size: $icon-size-xs
• .i-sm icon size: $icon-size-s
• .i-md icon size: $icon-size-m
• .i-lg icon size: $icon-size-l
• .i-xl icon size: $icon-size-xl
• .i-xxl icon size: $icon-size-xxl

###Flexbox

• .flexbox-container

Mixins

• bg-cover()

• bg-contain()

• bg-fixed()

• border-radius()

• box-shadow()

• transform($transfom) eg: @include transform(translate(10px 0))

• scale($scale) eg: @include scale(1.2)

• rotate($rotate) eg: @include rotate(45deg)

• vertical-align()

• horizontal-align()

JS helpers

Basic usage example:

import { trace } from 'rytm-helpers';
// ...  
trace("Hello world");

Helper methods

trace(...str)

Cookies methods

setCookie(name, value, days, path)

getCookie(name)

unsetCookie(name)

SiV (show in view)

SiV is a framework for DOM element's classlist modification based on the fact if the element is visible on stage. SiV is being update on window scroll event

Methods

initSiv(params)

destroySiv()

updateSiv()

Basic usage example:

<!-- add your custom class names as data parameter in DOM -->
<div data-siv="move-in">...</div>

// add CSS
.siv-element {
  opacity: 0;
  transition: opacity 1s ease-out;
  &.move-in {
    opacity: 1;
  }
}

// init SiV in JS
initSiv();

You can use keyframe animations to show elements

// add CSS
.siv-element {
  opacity: 0;
  &.move-in {
    animation: moveIn 1s forwards;
  }
}
@keyframes moveIn {
  0% {
    transform: translateY(25px)
    opacity: 0;
  }
  100% {
    transform: translateY(0)
    opacity: 1;
  }
}