Tailor

Tailor is a lightweight scss framework designed to provide consistency in how we create our front-end styling.

Installation

To add Tailor to your project you'll need to sign into the Gateway Interactive npm account using $ npm login. The credentials for the account are stored in 1Password.

Then run:
$ yarn add @gateway-interactive/tailor --save

Quick Setup (non-Rails projects)

At the top of your primary scss file import the tailor.scss file into your project (note that the path to your node_modules directory may be different):
@import "node_modules/\@gateway-interactive/tailor/tailor";

Quick Setup for Rails Projects

For Rails projects you'll also need to make sure the node_modules folder is accessible to the asset pipeline. Open config/initializers/assets.rb and add the following:

Rails.application.config.assets.paths << Rails.root.join('node_modules')

And then import Tailor into your primary scss file using:
@import @gateway-interactive/tailor/tailor;

Variables

If you wish to override any of the variables including colors or fonts you can specify those before you import Tailor.

Below are the variables that you can redefine as well as their default values.

/// This array defines all of the fonts used throughout the project
$fonts: (
  body_face: "Open Sans",
  body_base_weight: 400,
  heading_face: "Open Sans",
  heading_base_weight: 200,
  monospace_face: "Andale Mono",
  monospace_base_weight: 400,
  bold_weight: 700
);

/// This array defines all of the color placeholders that get generated. i.e. @extend %color-black;
$colors: (
  "black": #000000,
  "white": #ffffff,
  "gray": #B3B3B3,
  "light-gray": #E6E6E6,
  "dark-gray": #5A5959,
  "brown": #8D7249
);

/// This is array that defines your breakpoints to be used throughout your website.
/// The breakpoints are set as the min-width of whatever the value of the breakpoint is
/// i.e. 'lg': 75rem translates to @media only screen and min-width: 75rem
$breakpoints: (
  'xs': 30rem,
  'sm': 48rem,
  'md': 64rem,
  'lg': 75rem
);

/// Used to determine the spacing between columns
$grid__gutter-width: 1rem !default;

/// Used to determine the spacing in between columns themselves.
/// So col-1 would have a right of half and col-2 would have a left of half equaling a whole gutter width
$grid__half-gutter-width: $grid__gutter-width / 2 !default;

/// This compensates the container to still remain centered with the gutters
$grid__gutter-compensation: $grid__half-gutter-width * -1 !default;

/// Margin for a fluid container
$grid__outer-margin: 2rem;

Contributing

Setup

This repo using gulp to build out our docs. In order to get up and running where your documentation is just built in automatically follow the setup below.

1. Install yarn (if you haven't all ready)

2. Install packages using yarn install

3. Run gulp

4. profit

In order to make sure your comments are formatted propely so they appear correct in our docs please follow this guide for formatting your comments.

Glossary

• Chalk - Typography
• Dye - Colors
• Mannequin - Layout
• Pins - Hacks
• Saint Homobonus - Grid
• Thimble - Reset