Variables
Handy variables to keep things consistent.
Variables work slightly differently in FatKit compared to the old Fat Boilerplate. There is a standard variables file as there always has been to define global variables used throughout the Sass files. But each component (where required) will have it's own set of variables defined at the top of the Sass file. To make changes to a single component that is where you need to look.
The global variables file looks like:
//
// Component: Variables
// Description: Defines all color and style related values as variables
// to allow easy customization for the most common cases.
//
// ========================================================================
// Global variables
// ========================================================================
//
// Breakpoints
//
$breakpoint-small: 480px;
$breakpoint-medium: 768px;
$breakpoint-large: 960px;
$breakpoint-xlarge: 1220px;
$breakpoint-mini-max: ($breakpoint-small - 1);
$breakpoint-small-max: ($breakpoint-medium - 1);
$breakpoint-medium-max: ($breakpoint-large - 1);
$breakpoint-large-max: ($breakpoint-xlarge - 1);
$breakpointMap: (
'small': $breakpoint-small,
'medium': $breakpoint-medium,
'large' : $breakpoint-large,
'xlarge': $breakpoint-xlarge
);
//
// Sizes
//
$basefontsize: 16;
/* @filepaths
--------------------------------------------------------
Variables for controlling files and their paths
------------------------------------------------------- */
// Optional "cache-busting" folder path that is prepended to asset paths (fonts and images).
// This is designed to allow asset files to be served with a cache-control header with a
// far future expiry, while ensuring that browsers reload assets when the application is deployed
// with updated assets.
//
// The app's URL rewrite mechanism needs to be configured to remove the non-existent version
// directory from inbound asset request URLs.
//
// Set to '' if version folder is not needed. For example /v__1.0.0.0
$assetversionpath: '';
$imgpath: '#{$assetversionpath}/assets/images';
$fontpath: '#{$assetversionpath}/assets/fonts';
// Global colour variables
// These are stored outside of the map, so we can use them in there
$information: #ebf7fd;
$success: #8ec73b;
$warning: #faa732;
$danger: #da314b;
$primary: #1c86f2;
$base-active-shade: 20;
$base-hover-shade: 10;
$base-opacity: .75;
// Global colours list
//
// Can pass both single definitions and multiple for different shades
// You can add your own shades if you wish e.g.
// x-light: lighten($primary, 30)
// You could also add opacity e.g.
// opacity: rgba($base-grey, $base-opacity) - name 'opacity' whatever you want
$global-colors: (
/* Generic */
'white': #fff,
'black': #000,
'lgrey': #eee,
'grey': #999,
'dgrey': #444,
/* These have shades so text colours stand out from background etc */
'information': (
base: $information,
light: lighten($information, $base-hover-shade),
dark: darken($information, $base-hover-shade)
),
'success': (
background: #f2fae3,
base: $success,
light: lighten($success, $base-hover-shade),
dark: darken($success, $base-hover-shade)
),
'warning': (
background: #fffceb,
base: $warning,
light: lighten($warning, $base-hover-shade),
dark: darken($warning, $base-hover-shade)
),
'danger': (
background: #fff1f0,
base: $danger,
light: lighten($danger, $base-hover-shade),
dark: darken($danger, $base-hover-shade)
),
/* Site name theme colours */
'primary': (
base: $primary,
light: lighten($primary, $base-hover-shade),
dark: darken($primary, $base-hover-shade)
),
);
// Button colours list
//
$button-colors: (
primary: (
activebg: color('primary', dark),
background: color('primary', base),
border: color('primary', base),
hoverbg: color('primary', dark),
hovertext: color('white'),
'text': color('white'),
),
success: (
activebg: color('success', dark),
background: color('success', base),
border: color('success', base),
hoverbg: color('success', dark),
hovertext: color('white'),
'text': color('white')
),
warning: (
activebg: color('warning', dark),
background: color('warning', base),
border: color('warning', base),
hoverbg: color('warning', dark),
hovertext: color('white'),
'text': color('white')
),
danger: (
activebg: color('danger', dark),
background: color('danger', base),
border: color('danger', base),
hoverbg: color('danger', dark),
hovertext: color('white'),
'text': color('white')
),
);
// Background Colours
//
// Class: f-background-color-*
// Function: background-color(*)
$background-colors: (
'white': color('white'),
'black': color('black'),
'grey': color('grey'),
'grey-dark': color('dgrey'),
'grey-light': color('lgrey'),
'primary': color('primary', base),
);
// Text Colours
//
// Class: f-text-color-*
// Function: text-color(*)
$text-colors: (
'white': color('white'),
'black': color('black'),
'grey': color('grey'),
'grey-dark': color('dgrey'),
'grey-light': color('lgrey'),
'primary': color('primary', base),
);
// z-indexing
//
// Ordered from high to low
// Suggested naming convention: class/ID the z-index is going on
// Usage: `z-index: z('name')`
$z-indexes: (
'site-header',
'site-content',
'site-footer'
);
// SVGs map
//
// Use background image:
//
// Mixin: svg-bg('name')
// Output: background-image: svg-url(svg('name'))
//
// Get markup from map for other functions/mixins:
//
// Get SVG from map: svg('name')
// Get SVG as base URI: svg-url('name')
//
// Set fill colour:
//
// 1. Use fill="var(--f-svg-fill)" in an SVG's markup in the map below
// This sets a replaceable string target for svg functions/mixins
// All default SVG items use this
// 2. Pass fill colour as second arg to svg() or svg-bg
// Example: svg-bg('name', 'color')
$svgs: (
'check-circle': '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path fill="var(--f-svg-fill)" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>',
'checkered': '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 8 8"><g fill="var(--f-svg-fill)"><path fill-rule="evenodd" d="M0 0h4v4H0V0zm4 4h4v4H4V4z"/></g></svg>',
'chevron-down': '<svg xmlns="http://www.w3.org/2000/svg" width="15" height="9" viewBox="0 0 15 9"><path fill="var(--f-svg-fill)" fill-rule="evenodd" d="M1.907.34a1.087 1.087 0 0 0-1.58 0 1.207 1.207 0 0 0 0 1.652L6.71 8.659a1.087 1.087 0 0 0 1.58 0l6.384-6.667a1.207 1.207 0 0 0 0-1.651 1.087 1.087 0 0 0-1.581 0L7.498 6.186 1.908.341z"/></svg>',
'warning': '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path fill="var(--f-svg-fill)" d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/></svg>',
);
/* @global spacing unit
---------------------------------------------------------
Define an em value for $unit. $unit is a helpful little
variable that serves to keep your spacing consistent.
Most often, 1 $unit is equal to your baseline height. So
if your baseline height is 1.125ems (which is 18px), that's
the value of 1 $unit.
--------------------------------------------------------- */
$modifier: 1;
$unit: 1em;
// Custom font declarations
// ========================================================================
// @include font-face('FontName', '/path/to/font', 'FontWeight');
// Variables
// ========================================================================
// This is mainly for the font-size mixin, but could be useful in the future
// Also a couple of rules in modal.scss
$support-legacy-browsers: false !default;
$base-body-background: color('white');
$base-body-font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
$base-body-font-weight: 300;
$base-body-font-size: $basefontsize * 1px;
$base-body-line-height: 1.8;
$base-body-color: color('dgrey');
$base-link-color: color('primary', base);
$base-link-text-decoration: none;
$base-link-hover-color: color('primary', dark);
$base-link-hover-text-decoration: underline;
$base-link-visited-color: color('primary', dark);
$base-link-visited-text-decoration: none;
$base-link-visited-after-color: color('lgrey'); // Styles the little check mark (if required)
$base-code-color: #d05;
$base-code-font-size: ($basefontsize - 2) * 1px;
$base-code-font-family: Consolas, monospace, serif;
$base-em-color: inherit;
$base-ins-background: #ffa;
$base-ins-color: color('dgrey');
$base-mark-background: #ffa;
$base-mark-color: color('dgrey');
$base-quote-font-style: italic;
$base-margin: 20px;
$base-margin-vertical: 20px;
$base-heading-font-family: $base-body-font-family; // Change for headings to have a different font
$base-heading-font-weight: normal;
$base-heading-color: color('dgrey');
$base-heading-text-transform: none;
$base-heading-margin-top: $base-margin * 1.5;
$base-h1-font-size: 36px;
$base-h1-line-height: 1.2;
$base-h2-font-size: 24px;
$base-h2-line-height: 1.3;
$base-h3-font-size: 18px;
$base-h3-line-height: 1.4;
$base-h4-font-size: 16px;
$base-h4-line-height: 1.4;
$base-h5-font-size: 14px;
$base-h5-line-height: 1.4;
$base-h6-font-size: 12px;
$base-h6-line-height: 1.5;
$base-list-padding-left: $base-margin + 10;
$base-hr-margin-vertical: $base-margin-vertical;
$base-hr-border: color('lgrey');
$base-hr-border-width: 1px;
$base-blockquote-padding-left: $base-margin - 10;
$base-blockquote-border: color('lgrey');
$base-blockquote-border-width: 5px;
$base-blockquote-font-size: 16px;
$base-blockquote-line-height: 22px;
$base-blockquote-font-style: italic;
$base-pre-padding: $base-margin / 2;
$base-pre-background: color('lgrey');
$base-pre-color: color('dgrey');
$base-pre-font-size: 12px;
$base-pre-line-height: 18px;
$base-pre-font-family: $base-code-font-family;
$base-selection-background: color('primary', base);
$base-selection-color: color('white');
// Enable this to have subtle transitions for various components
$transitions: true !default;
// Some custom easing functions. These are better than the built in ones
$ease-in-quad: cubic-bezier(.55, .085, .68, .53);
$ease-in-cubic: cubic-bezier(.55, .055, .675, .19);
$ease-in-quart: cubic-bezier(.895, .03, .685, .22);
$ease-in-quint: cubic-bezier(.755, .05, .855, .06);
$ease-in-expo: cubic-bezier(.95, .05, .795, .035);
$ease-in-circ: cubic-bezier(.6, .04, .98, .335);
$ease-out-quad: cubic-bezier(.25, .46, .45, .94);
$ease-out-cubic: cubic-bezier(.215, .61, .355, 1);
$ease-out-quart: cubic-bezier(.165, .84, .44, 1);
$ease-out-quint: cubic-bezier(.23, 1, .32, 1);
$ease-out-expo: cubic-bezier(.19, 1, .22, 1);
$ease-out-circ: cubic-bezier(.075, .82, .165, 1);
$ease-in-out-quad: cubic-bezier(.455, .03, .515, .955);
$ease-in-out-cubic: cubic-bezier(.645, .045, .355, 1);
$ease-in-out-quart: cubic-bezier(.77, 0, .175, 1);
$ease-in-out-quint: cubic-bezier(.86, 0, .07, 1);
$ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
$ease-in-out-circ: cubic-bezier(.785, .135, .15, .86);
