novoland-developer-networks/OfficialSite
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Consistency in comments, names and structure; simplify some stuff, remove and add things, tweak stuff for how we work with design

Browse Source 
Still some work has to be done while testing like for layouts.
This commit is contained in:
Antoine Boulanger
2017-02-08 11:43:28 -05:00
parent 2ac2d523cc
commit 55fe0f372a
34 changed files with 674 additions and 1328 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
assets/styles/base/_fonts.scss
View File

@@ -1,7 +1,6 @@
/**
* Base / Fonts
* =============================================================================
*/
// ==========================================================================
// Base / Fonts
// ==========================================================================
// @include font-face(
// $font-foobar,

50
assets/styles/base/_headings.scss
View File

@@ -1,42 +1,32 @@
/**
* Base / Headings
* =============================================================================
*/
$font-size-h1: 36px !default;
$font-size-h2: 28px !default;
$font-size-h3: 24px !default;
$font-size-h4: 20px !default;
$font-size-h5: 18px !default;
$font-size-h6: 16px !default;
$headings: 1 2 3 4 5 6 !default;
// ==========================================================================
// Base / Headings
// ==========================================================================
@mixin h {
margin-top: 0;
line-height: $global-line-height;
line-height: $line-height-h;
}
/**
* Provide a generic class to apply common heading styles.
*
* @example
* <p class="u-h"></p>
*
*/
//
// Provide a generic class to apply common heading styles.
//
// @example
// <p class="u-h"></p>
//
//
.o-h {
@include h;
}
/**
* Styles for headings 1 through 6 with classes to provide
* a double stranded heading hierarchy, e.g. we semantically
* need an H2, but we want it to be sized like an H1:
*
* @example
* <h2 class="o-h1"></h2>
*
*/
//
// Styles for headings 1 through 6 with classes to provide
// a double stranded heading hierarchy, e.g. we semantically
// need an H2, but we want it to be sized like an H1:
//
// @example
// <h2 class="o-h1"></h2>
//
//
h1, .o-h1 {
@extend .o-h;

50
assets/styles/base/_page.scss
View File

@@ -1,31 +1,37 @@
/**
* Base / Page
* =============================================================================
*/
/**
* Simple page-level setup.
*
* 1. Set the default `font-size` and `line-height` for the entire project,
* sourced from our default variables. The `font-size` is calculated to exist
* in ems, the `line-height` is calculated to exist unitlessly.
* 2. Force scrollbars to always be visible to prevent awkward ‘jumps’ when
* navigating between pages that do/do not have enough content to produce
* scrollbars naturally.
* 3. Ensure the page always fills at least the entire height of the viewport.
*/
// ==========================================================================
// Base / Page
// ==========================================================================
//
// Simple page-level setup.
//
// 1. Set the default `font-size` and `line-height` for the entire project,
// sourced from our default variables. The `font-size` is calculated to exist
// in ems, the `line-height` is calculated to exist unitlessly.
// 2. Force scrollbars to always be visible to prevent awkward ‘jumps’ when
// navigating between pages that do/do not have enough content to produce
// scrollbars naturally.
// 3. Ensure the page always fills at least the entire height of the viewport.
//
html {
color: $global-font-color;
font-size: em($global-font-size, 16px); /* [1] */
font-family: $global-font-family;
line-height: $global-line-height / $global-font-size; /* [1] */
color: $color;
font-size: em($font-size, 16px); /* [1] */
font-family: $font-family;
line-height: $line-height; /* [1] */
overflow-y: scroll; /* [2] */
min-height: 100%; /* [3] */
}
::selection {
background-color: $text-selection-background-color;
color: $text-selection-text-color;
background-color: $selection-background-color;
color: $selection-text-color;
text-shadow: none;
}
a {
color: $link-color;
@include u-hocus {
color: $link-hover-color;
}
}

27
assets/styles/generic/_button.scss
View File

@@ -1,25 +1,24 @@
/**
* Generic / Buttons
* =============================================================================
*/
// ==========================================================================
// Generic / Buttons
// ==========================================================================
/**
* 1. Allow us to style box model properties.
* 2. Fixes odd inner spacing in IE7.
* 3. Reset/normalize some styles.
* 4. Line different sized buttons up a little nicer.
* 5. Make buttons inherit font styles (often necessary when styling `input`s as buttons).
* 6. Force all button-styled elements to appear clickable.
*/
//
// 1. Allow us to style box model properties.
// 2. Fixes odd inner spacing in IE7.
// 3. Reset/normalize some styles.
// 4. Line different sized buttons up a little nicer.
// 5. Make buttons inherit font styles (often necessary when styling `input`s as buttons).
// 6. Force all button-styled elements to appear clickable.
//
button,
.o-btn {
.o-button {
display: inline-block; /* [1] */
overflow: visible; /* [2] */
margin: 0; /* [3] */
padding: 0;
outline: 0;
border: 0;
background: none transparent;
background: none transparent;
color: inherit;
vertical-align: middle; /* [4] */
text-align: center; /* [3] */

15
assets/styles/generic/_form.scss
View File

@@ -1,7 +1,6 @@
/**
* Generic / Forms
* =============================================================================
*/
// ==========================================================================
// Generic / Forms
// ==========================================================================
input,
select,
@@ -33,10 +32,10 @@ select {
}
// Remove Firefox :focus dotted outline, breaks color inherit
/*&:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 #000000; // Text :focus color
}*/
// &:-moz-focusring {
// color: transparent;
// text-shadow: 0 0 0 #000000; // Text :focus color
// }
}
textarea {

35
assets/styles/generic/_generic.scss
View File

@@ -1,16 +1,15 @@
/**
* Generic
* =============================================================================
*/
// ==========================================================================
// Generic
// ==========================================================================
html {
box-sizing: border-box;
}
/**
* Add the correct display in IE 10-.
* 1. Add the correct display in IE.
*/
//
// Add the correct display in IE 10-.
// 1. Add the correct display in IE.
//
template, /* [1] */
[hidden] {
display: none;
@@ -41,10 +40,6 @@ strong {
a {
text-decoration: none;
@include u-hocus {
text-decoration: underline;
}
svg {
pointer-events: none;
}
@@ -62,20 +57,6 @@ a, area, button, input, label, select, textarea, [tabindex] {
text-decoration: none;
}
mark {
background-color: $highlighted-background-color;
text-decoration: none;
}
del {
background-color: $deleted-background-color;
text-decoration: none;
}
ins {
background-color: $inserted-background-color;
}
table {
border-collapse: collapse;
border-spacing: 0;
@@ -87,5 +68,5 @@ hr {
padding: 0;
height: 1px;
border: 0;
border-top: 1px solid $gray;
border-top: 1px solid #cccccc;
}

49
assets/styles/generic/_media.scss
View File

@@ -1,13 +1,12 @@
/**
* Generic / Media
* =============================================================================
*/
// ==========================================================================
// Generic / Media
// ==========================================================================
/**
* 1. Setting `vertical-align` removes the whitespace that appears under `img`
* elements when they are dropped into a page as-is. Safer alternative to
* using `display: block;`.
*/
//
// 1. Setting `vertical-align` removes the whitespace that appears under `img`
// elements when they are dropped into a page as-is. Safer alternative to
// using `display: block;`.
//
audio,
canvas,
iframe,
@@ -17,42 +16,42 @@ video {
vertical-align: middle; /* [1] */
}
/**
* Add the correct display in iOS 4-7.
*/
//
// Add the correct display in iOS 4-7.
//
audio:not([controls]) {
display: none;
height: 0;
}
/**
* 2. Fluid media for responsive purposes.
*/
//
// 2. Fluid media for responsive purposes.
//
img,
svg {
height: auto;
max-width: 100%; /* [2] */
/**
* 4. If a `width` and/or `height` attribute have been explicitly defined, let’s
* not make the image fluid.
*/
//
// 4. If a `width` and/or `height` attribute have been explicitly defined, let’s
// not make the image fluid.
//
&[width], /* [4] */
&[height] { /* [4] */
max-width: none;
}
}
/**
* 4. Offset `alt` text from surrounding copy.
*/
//
// 4. Offset `alt` text from surrounding copy.
//
img {
font-style: italic; /* [4] */
}
/**
* 5. SVG elements should fallback to their surrounding text color.
*/
//
// 5. SVG elements should fallback to their surrounding text color.
//
svg {
fill: currentColor; /* [5] */
}

55
assets/styles/main.scss
View File

@@ -1,18 +1,15 @@
/**
* Boilerplate Front-end Styles
* =============================================================================
*/
// Settings ====================================================================
// ==========================================================================
// Main
// ==========================================================================
// Settings
// ==========================================================================
@import "settings/config.colors";
@import "settings/config";
@import "settings/core.animations";
@import "settings/core";
@import "settings/config.aliases";
// Tools =======================================================================
// ==========================================================================
// Tools
// ==========================================================================
@import "tools/functions";
@import "tools/mixins";
@import "tools/fonts";
@@ -20,22 +17,22 @@
// @import "tools/ratio";
// @import "tools/widths";
// Generic =====================================================================
// Generic
// ==========================================================================
@import "generic/normalize";
@import "generic/generic";
@import "generic/media";
@import "generic/form";
@import "generic/button";
// Base ========================================================================
// Base
// ==========================================================================
@import "base/fonts";
@import "base/page";
@import "base/headings";
// Objects =====================================================================
// Objects
// ==========================================================================
@import "objects/container";
// @import "objects/crop";
// @import "objects/ratio";
@@ -44,22 +41,22 @@
@import "objects/form";
@import "objects/button";
// Vendors =====================================================================
// Vendors
// ==========================================================================
// @import "vendors/vendor";
// @import "vendors/foobar";
// Components
// ==========================================================================
// @import "components/component";
// Components ==================================================================
// @import "components/bazqux";
// Templates ===================================================================
// @import "templates/xyzzy";
// Utilities ===================================================================
// Templates
// ==========================================================================
// @import "templates/template";
// Utilities
// ==========================================================================
// @import "utilities/align";
@import "utilities/helpers";
// @import "utilities/helpers";
// @import "utilities/states";
// @import "utilities/headings";
// @import "utilities/spacing";

20
assets/styles/objects/_button.scss
View File

@@ -1,21 +1,11 @@
/**
* Objects / Buttons
* =============================================================================
*/
.o-btn {
// ==========================================================================
// Objects / Buttons
// ==========================================================================
.o-button {
padding: rem(10px);
background-color: lightgray;
&:focus {
background-color: darkgray;
}
&:hover {
@include u-hocus {
background-color: gray;
}
&:active {
background-color: dimgray;
}
}

59
assets/styles/objects/_container.scss
View File

@@ -1,19 +1,16 @@
/**
* Objects / Container
* =============================================================================
*/
// ==========================================================================
// Objects / Container
// ==========================================================================
/**
* Page-level constraining and wrapping elements.
*
* > In programming languages the word *container* is generally used for structures
* that can contain more than one element.
* > A *wrapper* instead is something that wraps around a single object to provide
* more functionalities and interfaces to it.
* @link http://stackoverflow.com/a/13202141/140357
*/
$container-width: 2000px !default;
//
// Page-level constraining and wrapping elements.
//
// > In programming languages the word *container* is generally used for structures
// that can contain more than one element.
// > A *wrapper* instead is something that wraps around a single object to provide
// more functionalities and interfaces to it.
// @link http://stackoverflow.com/a/13202141/140357
//
/* stylelint-disable */
@if (type-of($container-width) != number) {
@@ -22,37 +19,9 @@ $container-width: 2000px !default;
/* stylelint-enable */
.o-container {
padding-right: $global-spacing-unit;
padding-left: $global-spacing-unit;
padding-right: $padding;
padding-left: $padding;
margin-right: auto;
margin-left: auto;
max-width: $container-width;
/* Size variants.
========================================================================== */
&.-gutter {
padding-right: $global-spacing-unit;
padding-left: $global-spacing-unit;
}
&.-tiny {
padding-right: $global-spacing-unit-tiny;
padding-left: $global-spacing-unit-tiny;
}
&.-small {
padding-right: $global-spacing-unit-small;
padding-left: $global-spacing-unit-small;
}
&.-large {
padding-right: $global-spacing-unit-large;
padding-left: $global-spacing-unit-large;
}
&.-huge {
padding-right: $global-spacing-unit-huge;
padding-left: $global-spacing-unit-huge;
}
}

27
assets/styles/objects/_crop.scss
View File

@@ -1,11 +1,10 @@
/**
* Objects / Crop
* =============================================================================
*/
// ==========================================================================
// Objects / Crop
// ==========================================================================
///
/// @link https://github.com/inuitcss/inuitcss/blob/19d0c7e/objects/_objects.crop.scss
///
//
// @link https://github.com/inuitcss/inuitcss/blob/19d0c7e/objects/_objects.crop.scss
//
// A list of cropping ratios that get generated as modifier classes.
$crop-ratios: (
@@ -61,13 +60,13 @@ $crop-ratios: (
/* stylelint-disable */
///
/// Generate a series of crop classes to be used like so:
///
/// @example
/// <div class="o-crop -16:9">
///
///
//
// Generate a series of crop classes to be used like so:
//
// @example
// <div class="o-crop -16:9">
//
//
.o-crop {
@each $crop in $crop-ratios {
@each $antecedent, $consequent in $crop {

13
assets/styles/objects/_form.scss
View File

@@ -1,11 +1,9 @@
/**
* Objects / Buttons
* =============================================================================
*/
// ==========================================================================
// Objects / Buttons
// ==========================================================================
// Label
// =============================================================================
.o-label {
display: block;
margin-bottom: rem(15px);
@@ -13,7 +11,6 @@
// Input
// =============================================================================
$input-icon-color: 424242; // No #
.o-input {
@@ -34,7 +31,6 @@ $input-icon-color: 424242; // No #
// Checkbox
// =============================================================================
$checkbox: rem(18px);
$checkbox-icon-color: $input-icon-color;
@@ -95,7 +91,6 @@ $checkbox-icon-color: $input-icon-color;
// Radio
// =============================================================================
$radio-icon-color: $input-icon-color;
.o-radio {
@@ -117,7 +112,6 @@ $radio-icon-color: $input-icon-color;
// Select
// =============================================================================
$select-icon: rem(40px);
$select-icon-color: $input-icon-color;
@@ -150,7 +144,6 @@ $select-icon-color: $input-icon-color;
// Textarea
// =============================================================================
.o-textarea {
@extend .o-input;

149
assets/styles/objects/_layout.scss
View File

@@ -1,121 +1,80 @@
/**
* Objects / Layout
* =============================================================================
*/
// ==========================================================================
// Objects / Layout
// ==========================================================================
///
/// Grid-like layout system.
///
/// The layout object provides us with a column-style layout system. This file
/// contains the basic structural elements, but classes should be complemented
/// with width utilities, for example:
///
/// @example
/// <div class="o-layout">
/// <div class="o-layout_item u-1/1 u-1/3@medium">
/// </div>
/// <div class="o-layout_item u-1/2 u-1/3@medium">
/// </div>
/// <div class="o-layout_item u-1/2 u-1/3@medium">
/// </div>
/// </div>
///
/// We can also manipulate entire layout systems by adding a series of modifiers
/// to the `.o-layout` block. For example:
///
/// @example
/// <div class="o-layout -reverse">
///
/// This will reverse the displayed order of the system so that it runs in the
/// opposite order to our source, effectively flipping the system over.
///
/// @example
/// <div class="o-layout -[right|center]">
///
/// This will cause the system to fill up from either the centre or the right
/// hand side. Default behaviour is to fill up the layout system from the left.
///
/// @requires tools/layout
/// @link https://github.com/inuitcss/inuitcss/blob/0420ba8/objects/_objects.layout.scss
///
.o-layout_item {
@include o-layout_item;
}
//
// Grid-like layout system.
//
// The layout object provides us with a column-style layout system. This file
// contains the basic structural elements, but classes should be complemented
// with width utilities, for example:
//
// @example
// <div class="o-layout">
// <div class="o-layout_item u-1/1 u-1/3@medium">
// </div>
// <div class="o-layout_item u-1/2 u-1/3@medium">
// </div>
// <div class="o-layout_item u-1/2 u-1/3@medium">
// </div>
// </div>
//
// We can also manipulate entire layout systems by adding a series of modifiers
// to the `.o-layout` block. For example:
//
// @example
// <div class="o-layout -reverse">
//
// This will reverse the displayed order of the system so that it runs in the
// opposite order to our source, effectively flipping the system over.
//
// @example
// <div class="o-layout -[right|center]">
//
// This will cause the system to fill up from either the centre or the right
// hand side. Default behaviour is to fill up the layout system from the left.
//
// @requires tools/layout
// @link https://github.com/inuitcss/inuitcss/blob/0420ba8/objects/_objects.layout.scss
//
.o-layout {
@include o-layout;
// Gutter modifiers
// ==========================================================================
&.-gutter {
margin-left: -$global-spacing-unit;
margin-left: rem(-$unit);
> .o-layout_item {
padding-left: $global-spacing-unit;
padding-left:rem($unit);
}
}
/* Gutter size modifiers.
========================================================================== */
&.-tiny {
margin-left: -$global-spacing-unit-tiny;
&.-gutter-small {
margin-left: -$unit-small;
> .o-layout_item {
padding-left: $global-spacing-unit-tiny;
padding-left: $unit-small;
}
}
&.-small {
margin-left: -$global-spacing-unit-small;
> .o-layout_item {
padding-left: $global-spacing-unit-small;
}
}
&.-large {
margin-left: -$global-spacing-unit-large;
> .o-layout_item {
padding-left: $global-spacing-unit-large;
}
}
&.-huge {
margin-left: -$global-spacing-unit-huge;
> .o-layout_item {
padding-left: $global-spacing-unit-huge;
}
}
/* Vertical alignment modifiers.
========================================================================== */
/**
* Align all grid items to the middles of each other.
*/
// Vertical alignment modifiers
// ==========================================================================
&.-middle {
> .o-layout_item {
vertical-align: middle;
}
}
/**
* Align all grid items to the bottoms of each other.
*/
&.-bottom {
> .o-layout_item {
vertical-align: bottom;
}
}
/* Fill order modifiers.
========================================================================== */
/**
* Fill up the layout system from the centre.
*/
// Horizontal aligment modifiers
// ==========================================================================
&.-center {
text-align: center;
@@ -124,9 +83,6 @@
}
}
/**
* Fill up the layout system from the right-hand side.
*/
&.-right {
text-align: right;
@@ -135,9 +91,6 @@
}
}
/**
* Reverse the rendered order of the grid system.
*/
&.-reverse {
direction: rtl;
@@ -147,3 +100,7 @@
}
}
}
.o-layout_item {
@include o-layout_item;
}

27
assets/styles/objects/_ratio.scss
View File

@@ -1,11 +1,10 @@
/**
* Objects / Ratio
* =============================================================================
*/
// ==========================================================================
// Objects / Ratio
// ==========================================================================
///
/// @link https://github.com/inuitcss/inuitcss/blob/19d0c7e/objects/_objects.ratio.scss
///
//
// @link https://github.com/inuitcss/inuitcss/blob/19d0c7e/objects/_objects.ratio.scss
//
// A list of aspect ratios that get generated as modifier classes.
@@ -53,13 +52,13 @@ $aspect-ratios: (
/* stylelint-disable */
///
/// Generate a series of ratio classes to be used like so:
///
/// @example
/// <div class="o-ratio -16:9">
///
///
//
// Generate a series of ratio classes to be used like so:
//
// @example
// <div class="o-ratio -16:9">
//
//
.o-ratio {
@each $ratio in $aspect-ratios {
@each $antecedent, $consequent in $ratio {

8
assets/styles/objects/_table.scss
View File

@@ -1,8 +1,6 @@
/**
* Objects / Tables
* =============================================================================
*/
// ==========================================================================
// Objects / Tables
// ==========================================================================
.o-table {
width: 100%;

30
assets/styles/settings/_config.aliases.scss
View File

@@ -1,30 +0,0 @@
///
/// Settings / Config / Aliases
/// ============================================================================
///
// Font Weights
// =============================================================================
$light: 300;
$normal: 400;
$medium: 500;
$semibold: 500;
$bold: 700;
$bolder: 900;
// Links
// =============================================================================
$link-color: $link-idle-color;
$link-focus-color: $link-enter-color;
$link-hover-color: $link-enter-color;
// Spacing Units
// =============================================================================
$unit: $global-spacing-unit;
$unit-tiny: $global-spacing-unit-tiny;
$unit-small: $global-spacing-unit-small;
$unit-large: $global-spacing-unit-large;
$unit-huge: $global-spacing-unit-huge;

53
assets/styles/settings/_config.colors.scss
View File

@@ -1,46 +1,25 @@
///
/// Settings / Config / Colors
/// ============================================================================
///
// ==========================================================================
// Settings / Config / Colors
// ==========================================================================
// Palette
// =============================================================================
$white: #FFFFFF;
$light-gray: #F5F5F5;
$gray: #CCCCCC;
$gray-letter: #9C9C9C;
$dark-gray: #242424;
$black: #000000;
// Brand Colors
// =============================================================================
$facebook-color: #3B5998;
$instagram-color: #E0386D;
$youtube-color: #CC181E;
$twitter-color: #55ACEE;
// Specific
// =============================================================================
// Link
$link-color: #1A0DAB;
$link-focus-color: #1A0DAB;
$link-hover-color: darken(#1A0DAB, 10%);
// Selection
$selection-text-color: #3297fd;
$selection-background-color: #FFFFFF;
$text-selection-text-color: $dark-gray !default;
$text-selection-background-color: #FF877E !default;
$highlighted-text-color: $dark-gray !default;
$highlighted-background-color: #FFF9C0 !default;
$deleted-text-color: $dark-gray !default;
$deleted-background-color: #FDD !default;
$inserted-text-color: $dark-gray !default;
$inserted-background-color: #9F9 !default;
$link-idle-color: #0645AD !default;
$link-visited-color: #0B0080 !default;
$link-enter-color: $link-idle-color !default;
$link-active-color: #FAA700 !default;
// Social Colors
// =============================================================================
$facebook-color: #3B5998;
$instagram-color: #E1306C;
$youtube-color: #CD201F;
$twitter-color: #1DA1F2;

84
assets/styles/settings/_config.scss
View File

@@ -1,43 +1,49 @@
///
/// Settings / Config
/// ============================================================================
///
// ==========================================================================
// 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;
$font-sans-serif: sans-serif;
// Typography
// =============================================================================
// Base
$font-size: 16px;
$line-height: 24px / $font-size;
$font-family: $font-sans-serif;
$color: #222222;
// Headings
$font-size-h1: 36px !default;
$font-size-h2: 28px !default;
$font-size-h3: 24px !default;
$font-size-h4: 20px !default;
$font-size-h5: 18px !default;
$font-size-h6: 16px !default;
$line-height-h: $line-height;
// Weights
$light: 300;
$normal: 400;
$medium: 500;
$bold: 700;
$global-font-color: #222222;
$global-font-family: sans-serif;
$global-font-size: 16px;
$global-line-height: 24px;
// Animations
// Transitions
// =============================================================================
$speed: 0.3s;
$easing: linear;
$global-transition: all 300ms ease-in-out;
$speed: 0.3s;
$easing: linear;
$bounce: cubic-bezier(0.17, 0.67, 0.6, 1.38);
// Spacing Units
// =============================================================================
$unit: 60px;
$unit-small: 30px;
// Container
// ==========================================================================
$container-width: 2000px;
$padding: $unit;
// Breakpoints
// =============================================================================
$from-tiny: 500px !default;
$to-tiny: $from-tiny - 1 !default;
$from-small: 700px !default;
@@ -50,27 +56,3 @@ $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/';
// }

22
assets/styles/settings/_core.animations.scss
View File

@@ -1,22 +0,0 @@
///
/// Settings / Core / Animations
/// ============================================================================
///
$Power1EaseOut: cubic-bezier(0.250, 0.460, 0.450, 0.940);
$Power2EaseOut: cubic-bezier(0.215, 0.610, 0.355, 1.000);
$Power3EaseOut: cubic-bezier(0.165, 0.840, 0.440, 1.000);
$Power4EaseOut: cubic-bezier(0.230, 1.000, 0.320, 1.000);
$Power1EaseIn: cubic-bezier(0.550, 0.085, 0.680, 0.530);
$Power2EaseIn: cubic-bezier(0.550, 0.055, 0.675, 0.190);
$Power3EaseIn: cubic-bezier(0.895, 0.030, 0.685, 0.220);
$Power4EaseIn: cubic-bezier(0.755, 0.050, 0.855, 0.060);
$ExpoEaseOut: cubic-bezier(0.190, 1.000, 0.220, 1.000);
$ExpoEaseIn: cubic-bezier(0.950, 0.050, 0.795, 0.035);
$ExpoEaseInOut: cubic-bezier(1.000, 0.000, 0.000, 1.000);
$SineEaseOut: cubic-bezier(0.390, 0.575, 0.565, 1.000);
$SineEaseIn: cubic-bezier(0.470, 0.000, 0.745, 0.715);
$Power1EaseInOut: cubic-bezier(0.455, 0.030, 0.515, 0.955);
$Power2EaseInOut: cubic-bezier(0.645, 0.045, 0.355, 1.000);
$Power3EaseInOut: cubic-bezier(0.770, 0.000, 0.175, 1.000);
$Power4EaseInOut: cubic-bezier(0.860, 0.000, 0.070, 1.000);

90
assets/styles/settings/_core.scss
View File

@@ -1,90 +0,0 @@
///
/// Settings / Core
/// ============================================================================
///
// Context
// =============================================================================
// The current stylesheet context. Available values: frontend, editor.
$context: frontend !default;
// Path is relative to the stylesheets directory.
$assets-path: '../' !default;
// Private / Framework
// =============================================================================
///
/// Do not alter anything below.
///
/// @link https://github.com/inuitcss/inuitcss/tree/0d35f60/settings
///
// Base typographical styles and baseline grid. You need to define these values
// in pixels: inuitcss will convert them to more appropriate units.
@if (variable-exists(global-font-size) == false) {
@error "Undefined variable: `$global-font-size`.";
}
@if (variable-exists(global-line-height) == false) {
@error "Undefined variable: `$global-line-height`.";
}
// Spacing values are determined based on your project’s global line height (i.e
// your baseline grid). It is not recommended that you modify these following
// variables (it can break your vertical rhythm), but if you need to, you can.
$global-spacing-unit: round($global-line-height) !default;
// How many times larger/smaller than the default should our spacing unit
// variants be?
$global-spacing-unit-factor-tiny: 0.25 !default;
$global-spacing-unit-factor-small: 0.5 !default;
$global-spacing-unit-factor-large: 2 !default;
$global-spacing-unit-factor-huge: 4 !default;
// Check that the chosen font rules are pixel numbers.
@each $_font-globals in
$global-font-size
$global-line-height {
@if (type-of($_font-globals) == number) {
@if (unit($_font-globals) != "px") {
@error "`#{$_font-globals}` needs to be a pixel value.";
}
} @else {
@error "`#{$_font-globals}` needs to be a number.";
}
}
// Check that the chosen size factors are unitless numbers.
@each $_spacing-unit in
$global-spacing-unit-factor-tiny
$global-spacing-unit-factor-small
$global-spacing-unit-factor-large
$global-spacing-unit-factor-huge {
@if (type-of($_spacing-unit) == number) {
@if (unitless($_spacing-unit) == false) {
@error "`#{$_spacing-unit}` needs to be unitless.";
}
} @else {
@error "`#{$_spacing-unit}` needs to be a number.";
}
}
$global-spacing-unit-tiny: round($global-spacing-unit * $global-spacing-unit-factor-tiny);
$global-spacing-unit-small: round($global-spacing-unit * $global-spacing-unit-factor-small);
$global-spacing-unit-large: round($global-spacing-unit * $global-spacing-unit-factor-large);
$global-spacing-unit-huge: round($global-spacing-unit * $global-spacing-unit-factor-huge);

119
assets/styles/tools/_fonts.scss
View File

@@ -1,25 +1,24 @@
///
/// Tools / Font Faces
/// ============================================================================
///
// ==========================================================================
// Tools / Font Faces
// ==========================================================================
$global-font-file-formats: "woff", "ttf" !default;
///
/// Builds the `src` list for an `@font-face` declaration.
///
/// @link https://github.com/thoughtbot/bourbon/blob/master/core/bourbon/utilities/_font-source-declaration.scss
/// @link http://goo.gl/Ru1bKP
///
/// @param {String} $font-family - The font family name.
/// @param {String} $file-path - The path to the font family.
/// @param {List} $file-formats - The file formats to request.
/// @return {List}
///
/// @require {function} list-contains
///
/// @access private
///
//
// Builds the `src` list for an `@font-face` declaration.
//
// @link https://github.com/thoughtbot/bourbon/blob/master/core/bourbon/utilities/_font-source-declaration.scss
// @link http://goo.gl/Ru1bKP
//
// @param {String} $font-family - The font family name.
// @param {String} $file-path - The path to the font family.
// @param {List} $file-formats - The file formats to request.
// @return {List}
//
// @require {function} list-contains
//
// @access private
//
@function font-source-declaration(
$font-family,
$file-path,
@@ -47,47 +46,47 @@ $global-font-file-formats: "woff", "ttf" !default;
@return $src;
}
///
/// Generates an `@font-face` declaration.
///
/// You can choose the specific file formats you need to output; the mixin supports
/// `eot`, `ttf`, `svg`, `woff2` and `woff`.
///
/// @link https://github.com/thoughtbot/bourbon/blob/master/core/bourbon/library/_font-face.scss
///
/// @param {String} $font-family - The font family name.
/// @param {String} $file-path - The path to the font family.
/// @param {String|List} $file-formats [("ttf", "woff2", "woff")]
/// A list of file formats to support,
/// for example ("eot", "ttf", "svg", "woff2", "woff").
///
/// @content
/// Any additional CSS properties that are included in the `@include`
/// directive will be output within the `@font-face` declaration, e.g.
/// you can pass in `font-weight`, `font-style` and/or `unicode-range`.
///
/// @example scss
/// @include font-face(
/// "source-sans-pro",
/// "fonts/source-sans-pro-regular",
/// ("woff2", "woff")
/// ) {
/// font-style: normal;
/// font-weight: 400;
/// }
///
/// // CSS Output
/// @font-face {
/// font-family: "source-sans-pro";
/// src: url("fonts/source-sans-pro-regular.woff2") format("woff2"),
/// url("fonts/source-sans-pro-regular.woff") format("woff");
/// font-style: normal;
/// font-weight: 400;
/// }
///
/// @require {function} _font-source-declaration
/// @require {function} _retrieve-bourbon-setting
///
//
// Generates an `@font-face` declaration.
//
// You can choose the specific file formats you need to output; the mixin supports
// `eot`, `ttf`, `svg`, `woff2` and `woff`.
//
// @link https://github.com/thoughtbot/bourbon/blob/master/core/bourbon/library/_font-face.scss
//
// @param {String} $font-family - The font family name.
// @param {String} $file-path - The path to the font family.
// @param {String|List} $file-formats [("ttf", "woff2", "woff")]
// A list of file formats to support,
// for example ("eot", "ttf", "svg", "woff2", "woff").
//
// @content
// Any additional CSS properties that are included in the `@include`
// directive will be output within the `@font-face` declaration, e.g.
// you can pass in `font-weight`, `font-style` and/or `unicode-range`.
//
// @example scss
// @include font-face(
// "source-sans-pro",
// "fonts/source-sans-pro-regular",
// ("woff2", "woff")
// ) {
// font-style: normal;
// font-weight: 400;
// }
//
// // CSS Output
// @font-face {
// font-family: "source-sans-pro";
// src: url("fonts/source-sans-pro-regular.woff2") format("woff2"),
// url("fonts/source-sans-pro-regular.woff") format("woff");
// font-style: normal;
// font-weight: 400;
// }
//
// @require {function} _font-source-declaration
// @require {function} _retrieve-bourbon-setting
//
@mixin font-face(
$font-family,
$file-path,

130
assets/styles/tools/_functions.scss
View File

@@ -1,28 +1,14 @@
///
/// Tools / Functions
/// ============================================================================
///
// Tools / Functions
// ==========================================================================
///
/// Removes units (px, em, etc.) from a given number.
///
/// @param {Number} $value - The numeric value to strip units from.
/// @return {Number} A unitless numeric value.
///
@function strip-unit($value)
{
@return $value / ($value * 0 + 1);
}
///
/// Converts the given pixel value to its EM quivalent.
///
/// @param {Number} $size - The pixel value to convert.
/// @param {Number} $base [$global-font-size] - The assumed base font size.
/// @return {Number} Scalable pixel value in EMs.
///
@function em($size, $base: $global-font-size)
{
//
// Converts the given pixel value to its EM quivalent.
//
// @param {Number} $size - The pixel value to convert.
// @param {Number} $base [$font-size] - The assumed base font size.
// @return {Number} Scalable pixel value in EMs.
//
@function em($size, $base: $font-size) {
@if (type-of($size) == number) {
@if (unit($size) != "px") {
@error "`#{$size}` needs to be a pixel value.";
@@ -42,15 +28,14 @@
@return ($size / $base) * 1em;
}
///
/// Converts the given pixel value to its REM quivalent.
///
/// @param {Number} $size - The pixel value to convert.
/// @param {Number} $base [$global-font-size] - The assumed base font size.
/// @return {Number} Scalable pixel value in REMs.
///
@function rem($size, $base: $global-font-size)
{
//
// Converts the given pixel value to its REM quivalent.
//
// @param {Number} $size - The pixel value to convert.
// @param {Number} $base [$font-size] - The assumed base font size.
// @return {Number} Scalable pixel value in REMs.
//
@function rem($size, $base: $font-size) {
@if (type-of($size) == number) {
@if (unit($size) != "px") {
@error "`#{$size}` needs to be a pixel value.";
@@ -70,27 +55,27 @@
@return ($size / $base) * 1rem;
}
///
/// Converts a number to a percentage.
///
/// @alias percentage()
/// @link http://sassdoc.com/annotations/#alias
/// @param {Number} $number - The value to convert.
/// @return {Number} A percentage.
///
//
// Converts a number to a percentage.
//
// @alias percentage()
// @link http://sassdoc.com/annotations/#alias
// @param {Number} $number - The value to convert.
// @return {Number} A percentage.
//
@function span($number) {
@return percentage($number);
}
///
/// Checks if a list contains a value(s).
///
/// @link https://github.com/thoughtbot/bourbon/blob/master/core/bourbon/validators/_contains.scss
/// @param {List} $list - The list to check against.
/// @param {List} $values - A single value or list of values to check for.
/// @return {Boolean}
/// @access private
///
//
// Checks if a list contains a value(s).
//
// @link https://github.com/thoughtbot/bourbon/blob/master/core/bourbon/validators/_contains.scss
// @param {List} $list - The list to check against.
// @param {List} $values - A single value or list of values to check for.
// @return {Boolean}
// @access private
//
@function list-contains(
$list,
$values...
@@ -104,14 +89,13 @@
@return true;
}
///
/// Resolve whether a rule is important or not.
///
/// @param {Boolean} $flag - Whether a rule is important (TRUE) or not (FALSE).
/// @return {String|Null} Returns `!important` or NULL.
///
@function important($flag: false)
{
//
// Resolve whether a rule is important or not.
//
// @param {Boolean} $flag - Whether a rule is important (TRUE) or not (FALSE).
// @return {String|Null} Returns `!important` or NULL.
//
@function important($flag: false) {
@if ($flag == true) {
@return !important;
} @elseif ($important == false) {
@@ -121,25 +105,23 @@
}
}
///
/// Determine if the current context is for a WYSIWYG editor.
///
/// @requires {String} $context - The global context of the stylesheet.
/// @return {Boolean} If the $context is set to "editor".
///
@function is-editor()
{
//
// Determine if the current context is for a WYSIWYG editor.
//
// @requires {String} $context - The global context of the stylesheet.
// @return {Boolean} If the $context is set to "editor".
//
@function is-editor() {
@return ('editor' == $context);
}
///
/// Determine if the current context is for the front-end.
///
/// @requires {String} $context - The global context of the stylesheet.
/// @return {Boolean} If the $context is set to "frontend".
///
@function is-frontend()
{
//
// Determine if the current context is for the front-end.
//
// @requires {String} $context - The global context of the stylesheet.
// @return {Boolean} If the $context is set to "frontend".
//
@function is-frontend() {
@return ('frontend' == $context);
}

74
assets/styles/tools/_layout.scss
View File

@@ -1,27 +1,26 @@
///
/// Tools / Layout
/// ============================================================================
///
// ==========================================================================
// Tools / Layout
// ==========================================================================
///
/// Grid-like layout system.
///
/// The layout tools provide a column-style layout system. This file contains
/// the mixins to generate basic structural elements.
///
/// @link https://github.com/inuitcss/inuitcss/blob/0420ba8/objects/_objects.layout.scss
///
//
// Grid-like layout system.
//
// The layout tools provide a column-style layout system. This file contains
// the mixins to generate basic structural elements.
//
// @link https://github.com/inuitcss/inuitcss/blob/0420ba8/objects/_objects.layout.scss
//
///
/// Generate the layout container.
///
/// 1. Use the negative margin trick for multi-row grids:
/// http://csswizardry.com/2011/08/building-better-grid-systems/
///
/// @requires {function} u-list-reset
/// @output `font-size`, `margin`, `padding`, `list-style`
///
@mixin o-layout($gutter: false, $fix-whitespace: true) {
//
// Generate the layout container.
//
// 1. Use the negative margin trick for multi-row grids:
// http://csswizardry.com/2011/08/building-better-grid-systems/
//
// @requires {function} u-list-reset
// @output `font-size`, `margin`, `padding`, `list-style`
//
@mixin o-layout($gutter: 0, $fix-whitespace: true) {
@include u-list-reset;
@if ($fix-whitespace) {
@@ -29,24 +28,23 @@
}
@if (type-of($gutter) == number) {
margin-left: -$global-spacing-unit; // [1]
margin-left: -$gutter; // [1]
}
}
///
/// Generate the layout item.
///
/// 1. Required in order to combine fluid widths with fixed gutters.
/// 2. Allows us to manipulate grids vertically, with text-level properties,
/// etc.
/// 3. Default item alignment is with the tops of each other, like most
/// traditional grid/layout systems.
/// 4. By default, all layout items are full-width (mobile first).
/// 5. Gutters provided by left padding:
/// http://csswizardry.com/2011/08/building-better-grid-systems/
///
@mixin o-layout_item($gutter: false, $fix-whitespace: true) {
box-sizing: border-box; // [1]
//
// Generate the layout item.
//
// 1. Required in order to combine fluid widths with fixed gutters.
// 2. Allows us to manipulate grids vertically, with text-level properties,
// etc.
// 3. Default item alignment is with the tops of each other, like most
// traditional grid/layout systems.
// 4. By default, all layout items are full-width (mobile first).
// 5. Gutters provided by left padding:
// http://csswizardry.com/2011/08/building-better-grid-systems/
//
@mixin o-layout_item($gutter: 0, $fix-whitespace: true) {
display: inline-block; // [2]
vertical-align: top; // [3]
width: 100%; // [4]
@@ -56,6 +54,6 @@
}
@if (type-of($gutter) == number) {
padding-left: -$global-spacing-unit; // [5]
padding-left: -$gutter; // [5]
}
}

247
assets/styles/tools/_mixins.scss
View File

@@ -1,43 +1,39 @@
///
/// Tools / Mixins
/// ============================================================================
///
// ==========================================================================
// Tools / Mixins
// ==========================================================================
///
/// Set the color of the highlight that appears over a link while it's being tapped.
///
/// By default, the highlight is suppressed.
///
/// @param {Color} $value [rgba(0, 0, 0, 0)] - The value of the highlight.
/// @output `-webkit-tap-highlight-color`
///
@mixin tap-highlight-color($value: rgba(0, 0, 0, 0))
{
//
// Set the color of the highlight that appears over a link while it's being tapped.
//
// By default, the highlight is suppressed.
//
// @param {Color} $value [rgba(0, 0, 0, 0)] - The value of the highlight.
// @output `-webkit-tap-highlight-color`
//
@mixin tap-highlight-color($value: rgba(0, 0, 0, 0)) {
-webkit-tap-highlight-color: $value;
}
///
/// Set whether or not touch devices use momentum-based scrolling for the given element.
///
/// By default, applies momentum-based scrolling for the current element.
///
/// @param {String} $value [rgba(0, 0, 0, 0)] - The type of scrolling.
/// @output `-webkit-overflow-scrolling`
///
@mixin overflow-scrolling($value: touch)
{
//
// Set whether or not touch devices use momentum-based scrolling for the given element.
//
// By default, applies momentum-based scrolling for the current element.
//
// @param {String} $value [rgba(0, 0, 0, 0)] - The type of scrolling.
// @output `-webkit-overflow-scrolling`
//
@mixin overflow-scrolling($value: touch) {
-webkit-overflow-scrolling: $value;
}
///
/// Micro clearfix rules for containing floats.
///
/// @link http://www.cssmojo.com/the-very-latest-clearfix-reloaded/
/// @param {List} $supports The type of clearfix to generate.
/// @output Injects `:::after` pseudo-element.
///
@mixin u-clearfix($supports...)
{
//
// Micro clearfix rules for containing floats.
//
// @link http://www.cssmojo.com/the-very-latest-clearfix-reloaded/
// @param {List} $supports The type of clearfix to generate.
// @output Injects `:::after` pseudo-element.
//
@mixin u-clearfix($supports...) {
&::after {
content: if(list-contains($supports, opera), " ", "");
display: if(list-contains($supports, table), table, block);
@@ -45,23 +41,22 @@
}
}
///
/// Generate a font-size and baseline-compatible line-height.
///
/// @link https://github.com/inuitcss/inuitcss/c14029c/tools/_tools.font-size.scss
/// @param {Number} $font-size - The size of the font.
/// @param {Number} $line-height [auto] - The line box height.
/// @param {Boolean} $important [false] - Whether the font-size is important.
/// @output `font-size`, `line-height`
///
@mixin font-size($font-size, $line-height: auto, $important: false)
{
//
// Generate a font-size and baseline-compatible line-height.
//
// @link https://github.com/inuitcss/inuitcss/c14029c/tools/_tools.font-size.scss
// @param {Number} $font-size - The size of the font.
// @param {Number} $line-height [auto] - The line box height.
// @param {Boolean} $important [false] - Whether the font-size is important.
// @output `font-size`, `line-height`
//
@mixin font-size($font-size, $line-height: auto, $important: false) {
$important: important($important);
font-size: rem($font-size) $important;
@if ($line-height == 'auto') {
line-height: ceil($font-size / $global-line-height) * ($global-line-height / $font-size) $important;
line-height: ceil($font-size / $line-height) * ($line-height / $font-size) $important;
}
@else {
@if (type-of($line-height) == number or $line-height == 'inherit' or $line-height == 'normal') {
@@ -73,17 +68,16 @@
}
}
///
/// Vertically-center the direct descendants of the current element.
///
/// Centering is achieved by displaying children as inline-blocks. Any whitespace
/// between elements is nullified by redefining the font size of the container
/// and its children.
///
/// @output `font-size`, `display`, `vertical-align`
///
@mixin o-vertical-center
{
//
// Vertically-center the direct descendants of the current element.
//
// Centering is achieved by displaying children as inline-blocks. Any whitespace
// between elements is nullified by redefining the font size of the container
// and its children.
//
// @output `font-size`, `display`, `vertical-align`
//
@mixin o-vertical-center {
font-size: 0;
&::before {
@@ -100,61 +94,57 @@
}
}
///
/// Generate `:hover` and `:focus` styles in one go.
///
/// @link https://github.com/inuitcss/inuitcss/blob/master/tools/_tools.mixins.scss
/// @content Wrapped in `:focus` and `:hover` pseudo-classes.
/// @output Wraps the given content in `:focus` and `:hover` pseudo-classes.
///
@mixin u-hocus
{
//
// Generate `:hover` and `:focus` styles in one go.
//
// @link https://github.com/inuitcss/inuitcss/blob/master/tools/_tools.mixins.scss
// @content Wrapped in `:focus` and `:hover` pseudo-classes.
// @output Wraps the given content in `:focus` and `:hover` pseudo-classes.
//
@mixin u-hocus {
&:focus,
&:hover {
@content;
}
}
///
/// Generate `:active` and `:focus` styles in one go.
///
/// @see {Mixin} u-hocus
/// @content Wrapped in `:focus` and `:active` pseudo-classes.
/// @output Wraps the given content in `:focus` and `:hover` pseudo-classes.
///
@mixin u-actus
{
//
// Generate `:active` and `:focus` styles in one go.
//
// @see {Mixin} u-hocus
// @content Wrapped in `:focus` and `:active` pseudo-classes.
// @output Wraps the given content in `:focus` and `:hover` pseudo-classes.
//
@mixin u-actus {
&:focus,
&:active {
@content;
}
}
///
/// Injects generic rules for disabling UL/OL/LI styles.
///
/// @output `list-style`, `margin`, `padding`
///
@mixin u-list-reset
{
//
// Injects generic rules for disabling UL/OL/LI styles.
//
// @output `list-style`, `margin`, `padding`
//
@mixin u-list-reset {
margin: 0;
padding: 0;
list-style: none;
}
///
/// Prevent text from wrapping onto multiple lines for the current element.
///
/// An ellipsis is appended to the end of the line.
///
/// 1. Ensure that the node has a maximum width after which truncation can occur.
/// 2. Fix for IE 8/9 if `word-wrap: break-word` is in effect on ancestor nodes.
///
/// @param {Number} $width [100%] - The maximum width of element.
/// @output `max-width`, `word-wrap`, `white-space`, `overflow`, `text-overflow`
///
@mixin u-truncate($width: 100%)
{
//
// Prevent text from wrapping onto multiple lines for the current element.
//
// An ellipsis is appended to the end of the line.
//
// 1. Ensure that the node has a maximum width after which truncation can occur.
// 2. Fix for IE 8/9 if `word-wrap: break-word` is in effect on ancestor nodes.
//
// @param {Number} $width [100%] - The maximum width of element.
// @output `max-width`, `word-wrap`, `white-space`, `overflow`, `text-overflow`
//
@mixin u-truncate($width: 100%) {
@if $width {
max-width: $width; // [1]
}
@@ -164,14 +154,13 @@
text-overflow: ellipsis;
}
///
/// Applies accessible hiding to the current element.
///
/// @param {Boolean} $important [true] - Whether the visibility is important.
/// @output Properties for removing the element from the document flow.
///
@mixin u-accessibly-hidden($important: true)
{
//
// Applies accessible hiding to the current element.
//
// @param {Boolean} $important [true] - Whether the visibility is important.
// @output Properties for removing the element from the document flow.
//
@mixin u-accessibly-hidden($important: true) {
$important: important($important);
position: absolute $important;
@@ -184,14 +173,13 @@
clip: rect(0 0 0 0);
}
///
/// Allows an accessibly hidden element to be focusable via keyboard navigation.
///
/// @content For styling the now visible element.
/// @output Injects `:focus`, `:active` pseudo-classes.
///
@mixin u-accessibly-focusable
{
//
// Allows an accessibly hidden element to be focusable via keyboard navigation.
//
// @content For styling the now visible element.
// @output Injects `:focus`, `:active` pseudo-classes.
//
@mixin u-accessibly-focusable {
@include u-actus {
height: auto;
width: auto;
@@ -201,32 +189,31 @@
}
}
///
/// Hide the current element from all.
///
/// The element will be hidden from screen readers and removed from the document flow.
///
/// @link http://juicystudio.com/article/screen-readers-display-none.php
/// @param {Boolean} $important [true] - Whether the visibility is important.
/// @output `display`, `visibility`
///
@mixin u-hidden($important: true)
{
//
// Hide the current element from all.
//
// The element will be hidden from screen readers and removed from the document flow.
//
// @link http://juicystudio.com/article/screen-readers-display-none.php
// @param {Boolean} $important [true] - Whether the visibility is important.
// @output `display`, `visibility`
//
@mixin u-hidden($important: true) {
$important: important($important);
display : none $important;
visibility : hidden $important;
}
///
/// Show the current element for all.
///
/// The element will be accessible from screen readers and visible in the document flow.
///
/// @param {String} $display [block] - The rendering box used for the element.
/// @param {Boolean} $important [true] - Whether the visibility is important.
/// @output `display`, `visibility`
///
//
// Show the current element for all.
//
// The element will be accessible from screen readers and visible in the document flow.
//
// @param {String} $display [block] - The rendering box used for the element.
// @param {Boolean} $important [true] - Whether the visibility is important.
// @output `display`, `visibility`
//
@mixin u-shown($display: block, $important: true)
{
$important: important($important);

13
assets/styles/tools/_ratio.scss
View File

@@ -1,11 +1,10 @@
///
/// Tools / Ratio Constraint
/// ============================================================================
///
// ==========================================================================
// Tools / Ratio Constraint
// ==========================================================================
////
/// A tool to restrain a container to a unitary or fractional proportion.
////
//
// A tool to restrain a container to a unitary or fractional proportion.
//
$data-ratios: '1/2' '0.5' 50%,
'11/20' '0.55' 55%,

83
assets/styles/tools/_widths.scss
View File

@@ -1,52 +1,51 @@
///
/// Tools / Widths
/// ============================================================================
///
// ==========================================================================
// Tools / Widths
// ==========================================================================
/// Optionally, the boilerplate can generate classes to offset items by a
/// certain width. Would you like to generate these types of class as well? E.g.:
///
/// @example css
/// .u-push-1/3
/// .u-pull-2/4
/// .u-pull-1/5
/// .u-push-2/3
// Optionally, the boilerplate can generate classes to offset items by a
// certain width. Would you like to generate these types of class as well? E.g.:
//
// @example css
// .u-push-1/3
// .u-pull-2/4
// .u-pull-1/5
// .u-push-2/3
$widths-offsets: false !default;
/// By default, the boilerplate uses fractions-like classes like `<div class="u-1/4">`.
/// You can change the `/` to whatever you fancy with this variable.
// By default, the boilerplate uses fractions-like classes like `<div class="u-1/4">`.
// You can change the `/` to whatever you fancy with this variable.
$fractions-delimiter: \/ !default;
/// When using Sass-MQ, this defines the separator for the breakpoints suffix
/// in the class name. By default, we are generating the responsive suffixes
/// for the classes with a `@` symbol so you get classes like:
/// <div class="u-3/12@mobile">
// When using Sass-MQ, this defines the separator for the breakpoints suffix
// in the class name. By default, we are generating the responsive suffixes
// for the classes with a `@` symbol so you get classes like:
// <div class="u-3/12@mobile">
$breakpoint-delimiter: \@ !default;
///
/// Generate a series of width helper classes
///
/// @example scss
/// @include widths(12);
///
/// @example html
/// <div class="u-7/12">
///
/// @example scss
/// @include widths(3 4, -mobile);
///
/// @example html
/// <div class="u-2/3-mobile">
///
/// @link https://github.com/inuitcss/inuitcss/commit/6eb574f/utilities/_utilities.widths.scss
/// @requires {Function} important
/// @requires {Function} $widths-offsets
/// @requires {Function} $fractions-delimiter
/// @requires {Function} $breakpoint-delimiter
/// @param {List} $colums - The columns we want the widths to have.
/// @param {String} $breakpoint - Optional suffix for responsive widths.
/// @output `width`, `position`, `right`, `left`
///
//
// Generate a series of width helper classes
//
// @example scss
// @include widths(12);
//
// @example html
// <div class="u-7/12">
//
// @example scss
// @include widths(3 4, -mobile);
//
// @example html
// <div class="u-2/3-mobile">
//
// @link https://github.com/inuitcss/inuitcss/commit/6eb574f/utilities/_utilities.widths.scss
// @requires {Function} important
// @requires {Function} $widths-offsets
// @requires {Function} $fractions-delimiter
// @requires {Function} $breakpoint-delimiter
// @param {List} $colums - The columns we want the widths to have.
// @param {String} $breakpoint - Optional suffix for responsive widths.
// @output `width`, `position`, `right`, `left`
//
@mixin widths($columns, $breakpoint: null, $important: true)
{
$important: important($important);

33
assets/styles/utilities/_align.scss
View File

@@ -1,26 +1,19 @@
/**
* Utilities / Alignment
* =============================================================================
*/
// ==========================================================================
// Utilities / Alignment
// ==========================================================================
/**
* Floats
*/
.u-pull-left {
// Floats
// ==========================================================================
.u-float-left {
float: left !important;
}
.u-pull-right {
.u-float-right {
float: right !important;
}
/**
* Horizontal Text Alignment
*/
// Horizontal Text
// ==========================================================================
.u-text-center {
text-align: center !important;
}
@@ -33,12 +26,8 @@
text-align: right !important;
}
/**
* Vertical Text Alignment
*/
// Vertical Text
// ==========================================================================
.u-align-baseline {
vertical-align: baseline !important;
}

7
assets/styles/utilities/_headings.scss
View File

@@ -1,7 +1,6 @@
/**
* Utilities / Headings
* =============================================================================
*/
// ==========================================================================
// Utilities / Headings
// ==========================================================================
/**
* Redefine all of our basic heading styles against utility classes so as to

38
assets/styles/utilities/_helpers.scss
View File

@@ -1,39 +1,21 @@
/**
* Utilities / Helpers
* =============================================================================
*/
/**
* Layout
*/
// ==========================================================================
// Utilities / Helpers
// ==========================================================================
// Layout
// ==========================================================================
.u-clearfix {
@include u-clearfix;
}
// Decorative
// =============================================================================
.u-truncate {
@include u-truncate;
}
// .u-truncate {
// @include u-truncate;
// }
// .icon-property-fill {
// stroke: none !important;
// }
// .icon-property-stroke {
// fill: none !important;
// }
/**
* Visibility / Display
*/
// Visibility / Display
// ==========================================================================
[hidden][aria-hidden="false"] {
clip: rect(0, 0, 0, 0);
display: inherit;

7
assets/styles/utilities/_print.scss
View File

@@ -1,7 +1,6 @@
/**
* Utilities / Print Mode
* =============================================================================
*/
// ==========================================================================
// Utilities / Print Mode
// ==========================================================================
////
/// Very crude, reset-like styles taken from the HTML5 Boilerplate:

14
assets/styles/utilities/_spacing.scss
View File

@@ -1,7 +1,6 @@
/**
* Utilities / Spacing
* =============================================================================
*/
// ==========================================================================
// Utilities / Spacing
// ==========================================================================
////
/// Utility classes to put specific spacing values onto elements. The below loop
@@ -37,11 +36,8 @@ $spacing-properties: (
) !default;
$spacing-sizes: (
null: $global-spacing-unit,
'-tiny': $global-spacing-unit-tiny,
'-small': $global-spacing-unit-small,
'-large': $global-spacing-unit-large,
'-huge': $global-spacing-unit-huge,
null: $unit,
'-small': $unit-small,
'-none': 0
) !default;

7
assets/styles/utilities/_states.scss
View File

@@ -1,7 +1,6 @@
/**
* Utilities / States
* =============================================================================
*/
// ==========================================================================
// Utilities / States
// ==========================================================================
/**
* ARIA roles display visual cursor hints

7
assets/styles/utilities/_widths.scss
View File

@@ -1,7 +1,6 @@
/**
* Utilities / Widths
* =============================================================================
*/
// ==========================================================================
// Utilities / Widths
// ==========================================================================
////
/// @link https://github.com/inuitcss/inuitcss/blob/6eb574f/utilities/_utilities.widths.scss