mirror of
https://github.com/locomotivemtl/locomotive-boilerplate.git
synced 2026-01-15 00:55:08 +08:00
2ac2d523cc
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;
77 lines
2.0 KiB
SCSS
77 lines
2.0 KiB
SCSS
///
|
|
/// 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/';
|
|
// }
|