1
0
mirror of https://github.com/locomotivemtl/locomotive-boilerplate.git synced 2026-01-15 00:55:08 +08:00

Refactored Sass

Merged SCSS from various recent projects and implemented some of the latest features from InuitCSS.

When using the SCSS structure in your own project, modify the ‘settings/config*.scss’ files and leave ‘settings/core.scss’ intact.

Changes:
- Updated Normalize to 5.0.0;
- Migrated imports to ‘main.scss’;
- Split ‘settings.scss’ into smaller parts;
- Revised variable names for settings;
- Added spacing unit variables;
- Replaced ‘objects/grid.scss’ with ‘objects/layout.scss’ (from inuitcss);
- Added ‘objects/crop.scss’ and ‘objects/ratio.scss’ (from inuitcss);
- Added @font-face mixin/function from Bourbon;
- Added various new functions and mixins (widths, font-size, truncation,…);
- Renamed Trumps to Utilities;
- Added vatious new Utilities (print, states, spacing, widths);
- Reorganized Utilities into topics;
This commit is contained in:
Chauncey McAskill
2016-12-18 15:45:44 -05:00
committed by Chauncey McAskill
parent 3c95ab0c46
commit 2ac2d523cc
41 changed files with 3508 additions and 595 deletions

View File

@@ -0,0 +1,76 @@
///
/// Settings / Config
/// ============================================================================
///
// Typefaces
// =============================================================================
$font-foobar: Foobar;
$font-bazqux: Bazqux;
$font-foobar-stack: $font-foobar, Arial, Helvetica, sans-serif;
$font-bazqux-stack: $font-bazqux, "Times New Roman", serif;
// Typography
// =============================================================================
$global-font-color: #222222;
$global-font-family: sans-serif;
$global-font-size: 16px;
$global-line-height: 24px;
// Animations
// =============================================================================
$global-transition: all 300ms ease-in-out;
$speed: 0.3s;
$easing: linear;
$bounce: cubic-bezier(0.17, 0.67, 0.6, 1.38);
// Breakpoints
// =============================================================================
$from-tiny: 500px !default;
$to-tiny: $from-tiny - 1 !default;
$from-small: 700px !default;
$to-small: $from-small - 1 !default;
$from-medium: 1000px !default;
$to-medium: $from-medium - 1 !default;
$from-large: 1200px !default;
$to-large: $from-large - 1 !default;
$from-big: 1440px !default;
$to-big: $from-big - 1 !default;
$from-huge: 1600px !default;
$to-huge: $from-huge - 1 !default;
// Alternatively: mobile, tablet, laptop, desktop, wide
$mq-breakpoints: (
tiny: $from-tiny,
small: $from-small,
medium: $from-medium,
large: $from-large,
big: $from-big,
huge: $from-huge
) !default;
// Content
// =============================================================================
$wysiwyg-editor-class: '.mce-content-body' !default;
$wysiwyg-display-class: '.s-content-body' !default;
// From TinyMCE, paths are relative to the public root
// @if ( is_editor() ) {
// $assets-path: 'assets/boilerplate/';
// }