@ -0,0 +1,54 @@ | |||||
{ | |||||
"name": "{{ $machine_name }}", | |||||
"version": "1.0.0", | |||||
"scripts": { | |||||
"build": "gulp", | |||||
"compile": "gulp compile", | |||||
"watch": "gulp watch", | |||||
"styleguide": "gulp styleguide", | |||||
"compress": "gulp compress", | |||||
"lint": "gulp lint", | |||||
"clean": "gulp clean", | |||||
"gulp": "gulp" | |||||
}, | |||||
"babel": { | |||||
"presets": [ | |||||
[ | |||||
"env", | |||||
{ | |||||
"targets": { | |||||
"browsers": [ | |||||
"IE >= 9", | |||||
"last 3 versions" | |||||
] | |||||
} | |||||
} | |||||
] | |||||
], | |||||
"plugins": [ | |||||
"transform-remove-strict-mode" | |||||
] | |||||
}, | |||||
"browserslist": [ | |||||
"IE >= 9", | |||||
"last 3 versions" | |||||
], | |||||
"devDependencies": { | |||||
"babel-plugin-transform-remove-strict-mode": "0.0.2", | |||||
"babel-preset-env": "^1.6.0", | |||||
"browser-sync": "^2.18.12", | |||||
"del": "^3.0.0", | |||||
"gulp": "^3.9.1", | |||||
"gulp-autoprefixer": "^4.0.0", | |||||
"gulp-babel": "^6.1.2", | |||||
"gulp-eslint": "^4.0.0", | |||||
"gulp-imagemin": "^3.3.0", | |||||
"gulp-rename": "^1.2.2", | |||||
"gulp-sass": "^3.1.0", | |||||
"gulp-sass-lint": "^1.3.2", | |||||
"gulp-sourcemaps": "^2.6.0", | |||||
"run-sequence": "^2.0.0", | |||||
"massive-typo": "^0.0.3", | |||||
"koality-flexbox-grid": "^0.0.13" | |||||
} | |||||
} |
@ -0,0 +1,419 @@ | |||||
//======================================================= | |||||
// Base | |||||
// | |||||
// normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css | |||||
// | |||||
// NOTE: While this uses normalize.css as a starting | |||||
// point it has and will be updated as needed. | |||||
// This should be ONLY plain html element styling. | |||||
// There should be NO classes, IDs, etc. | |||||
//======================================================= | |||||
// Sass Lint needs to ignore some Normalize specific things: | |||||
// sass-lint:disable no-duplicate-properties, no-vendor-prefixes | |||||
/* Document | |||||
========================================================================== */ | |||||
/** | |||||
* 1. Change the default font family in all browsers (opinionated). | |||||
* 2. Correct the line height in all browsers. | |||||
* 3. Prevent adjustments of font size after orientation changes in | |||||
* IE on Windows Phone and in iOS. | |||||
*/ | |||||
html { | |||||
box-sizing: border-box; | |||||
font-family: sans-serif; /* 1 */ | |||||
line-height: 1.15; /* 2 */ | |||||
-ms-text-size-adjust: 100%; /* 3 */ | |||||
-webkit-text-size-adjust: 100%; /* 3 */ | |||||
} | |||||
// https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ | |||||
* { | |||||
box-sizing: inherit; | |||||
&::before, | |||||
&::after { | |||||
box-sizing: inherit; | |||||
} | |||||
} | |||||
/* Sections | |||||
========================================================================== */ | |||||
/** | |||||
* Remove the margin in all browsers (opinionated). | |||||
*/ | |||||
body { | |||||
margin: 0; | |||||
font-size: 100%; | |||||
line-height: 1.15; | |||||
letter-spacing: 0.02em; | |||||
color: $color-tundora; | |||||
} | |||||
/** | |||||
* Add the correct display in IE 9-. | |||||
*/ | |||||
article, | |||||
aside, | |||||
footer, | |||||
header, | |||||
nav, | |||||
section { | |||||
display: block; | |||||
} | |||||
/* Grouping content | |||||
========================================================================== */ | |||||
/** | |||||
* Add the correct display in IE 9-. | |||||
* 1. Add the correct display in IE. | |||||
*/ | |||||
figcaption, | |||||
figure, | |||||
main { /* 1 */ | |||||
display: block; | |||||
} | |||||
/** | |||||
* 1. Add the correct box sizing in Firefox. | |||||
* 2. Show the overflow in Edge and IE. | |||||
*/ | |||||
hr { | |||||
box-sizing: content-box; /* 1 */ | |||||
height: 0; /* 1 */ | |||||
overflow: visible; /* 2 */ | |||||
} | |||||
/** | |||||
* 1. Correct the inheritance and scaling of font size in all browsers. | |||||
* 2. Correct the odd `em` font sizing in all browsers. | |||||
*/ | |||||
pre { | |||||
font-family: monospace, monospace; /* 1 */ | |||||
font-size: 1rem; /* 2 */ | |||||
} | |||||
/* Text-level semantics | |||||
========================================================================== */ | |||||
/** | |||||
* 1. Remove the gray background on active links in IE 10. | |||||
* 2. Remove gaps in links underline in iOS 8+ and Safari 8+. | |||||
*/ | |||||
a { | |||||
background-color: transparent; /* 1 */ | |||||
-webkit-text-decoration-skip: objects; /* 2 */ | |||||
/** | |||||
* Remove the outline on focused links when they are also active or hovered | |||||
* in all browsers (opinionated). | |||||
*/ | |||||
&:active, | |||||
&:hover { | |||||
outline-width: 0; | |||||
} | |||||
} | |||||
/** | |||||
* 1. Remove the bottom border in Firefox 39-. | |||||
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. | |||||
*/ | |||||
abbr[title] { | |||||
border-bottom: 0; /* 1 */ | |||||
text-decoration: underline; /* 2 */ | |||||
text-decoration: underline dotted; /* 2 */ | |||||
} | |||||
/** | |||||
* 1. Correct the inheritance and scaling of font size in all browsers. | |||||
* 2. Correct the odd `em` font sizing in all browsers. | |||||
*/ | |||||
code, | |||||
kbd, | |||||
samp { | |||||
font-family: monospace, monospace; /* 1 */ | |||||
font-size: 1em; /* 2 */ | |||||
} | |||||
/** | |||||
* Add the correct font style in Android 4.3-. | |||||
*/ | |||||
dfn { | |||||
font-style: italic; | |||||
} | |||||
/** | |||||
* Prevent `sub` and `sup` elements from affecting the line height in | |||||
* all browsers. | |||||
*/ | |||||
sub, | |||||
sup { | |||||
font-size: 75%; | |||||
line-height: 0; | |||||
position: relative; | |||||
vertical-align: baseline; | |||||
} | |||||
sub { | |||||
bottom: -0.25em; | |||||
} | |||||
sup { | |||||
top: -0.5em; | |||||
} | |||||
/* Embedded content | |||||
========================================================================== */ | |||||
/** | |||||
* Add the correct display in IE 9-. | |||||
*/ | |||||
audio, | |||||
video { | |||||
display: inline-block; | |||||
} | |||||
/** | |||||
* Add the correct display in iOS 4-7. | |||||
*/ | |||||
audio:not([controls]) { | |||||
display: none; | |||||
height: 0; | |||||
} | |||||
/** | |||||
* Remove the border on images inside links in IE 10-. | |||||
*/ | |||||
img { | |||||
border: 0; | |||||
height: auto; | |||||
max-width: 100%; | |||||
} | |||||
/** | |||||
* Hide the overflow in IE. | |||||
*/ | |||||
svg:not(:root) { | |||||
overflow: hidden; | |||||
} | |||||
/* Forms | |||||
========================================================================== */ | |||||
/** | |||||
* 1. Change the font styles in all browsers (opinionated). | |||||
* 2. Remove the margin in Firefox and Safari. | |||||
*/ | |||||
button, | |||||
input, | |||||
optgroup, | |||||
select, | |||||
textarea { | |||||
font-family: sans-serif; /* 1 */ | |||||
margin: 0; /* 2 */ | |||||
} | |||||
/** | |||||
* Show the overflow in IE. | |||||
* 1. Show the overflow in Edge. | |||||
*/ | |||||
button, | |||||
input { /* 1 */ | |||||
overflow: visible; | |||||
} | |||||
/** | |||||
* Remove the inheritance of text transform in Edge, Firefox, and IE. | |||||
* 1. Remove the inheritance of text transform in Firefox. | |||||
*/ | |||||
button, | |||||
select { /* 1 */ | |||||
text-transform: none; | |||||
} | |||||
/** | |||||
* 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` | |||||
* controls in Android 4. | |||||
* 2. Correct the inability to style clickable types in iOS and Safari. | |||||
*/ | |||||
button, | |||||
html [type='button'], /* 1 */ | |||||
[type='reset'], | |||||
[type='submit'] { | |||||
-webkit-appearance: button; /* 2 */ | |||||
} | |||||
/** | |||||
* Remove the inner border and padding in Firefox. | |||||
*/ | |||||
button::-moz-focus-inner, | |||||
[type='button']::-moz-focus-inner, | |||||
[type='reset']::-moz-focus-inner, | |||||
[type='submit']::-moz-focus-inner { | |||||
border-style: none; | |||||
padding: 0; | |||||
} | |||||
/** | |||||
* Restore the focus styles unset by the previous rule. | |||||
*/ | |||||
button:-moz-focusring, | |||||
[type='button']:-moz-focusring, | |||||
[type='reset']:-moz-focusring, | |||||
[type='submit']:-moz-focusring { | |||||
outline: 1px dotted ButtonText; | |||||
} | |||||
/** | |||||
* Change the border, margin, and padding in all browsers (opinionated). | |||||
*/ | |||||
fieldset { | |||||
border: 1px solid #c0c0c0; | |||||
margin: 0 2px; | |||||
padding: 0.35em 0.625em 0.75em; | |||||
} | |||||
/** | |||||
* 1. Correct the text wrapping in Edge and IE. | |||||
* 2. Correct the color inheritance from `fieldset` elements in IE. | |||||
* 3. Remove the padding so developers are not caught out when they zero out | |||||
* `fieldset` elements in all browsers. | |||||
*/ | |||||
legend { | |||||
box-sizing: border-box; /* 1 */ | |||||
color: inherit; /* 2 */ | |||||
display: table; /* 1 */ | |||||
max-width: 100%; /* 1 */ | |||||
padding: 0; /* 3 */ | |||||
white-space: normal; /* 1 */ | |||||
} | |||||
/** | |||||
* 1. Add the correct display in IE 9-. | |||||
* 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. | |||||
*/ | |||||
progress { | |||||
display: inline-block; /* 1 */ | |||||
vertical-align: baseline; /* 2 */ | |||||
} | |||||
/** | |||||
* Remove the default vertical scrollbar in IE. | |||||
*/ | |||||
textarea { | |||||
overflow: auto; | |||||
} | |||||
/** | |||||
* 1. Add the correct box sizing in IE 10-. | |||||
* 2. Remove the padding in IE 10-. | |||||
*/ | |||||
[type='checkbox'], | |||||
[type='radio'] { | |||||
box-sizing: border-box; /* 1 */ | |||||
padding: 0; /* 2 */ | |||||
} | |||||
/** | |||||
* Correct the cursor style of increment and decrement buttons in Chrome. | |||||
*/ | |||||
[type='number']::-webkit-inner-spin-button, | |||||
[type='number']::-webkit-outer-spin-button { | |||||
height: auto; | |||||
} | |||||
/** | |||||
* 1. Correct the odd appearance in Chrome and Safari. | |||||
* 2. Correct the outline style in Safari. | |||||
*/ | |||||
[type='search'] { | |||||
-webkit-appearance: textfield; /* 1 */ | |||||
outline-offset: -2px; /* 2 */ | |||||
} | |||||
/** | |||||
* Remove the inner padding and cancel buttons in Chrome and Safari on macOS. | |||||
*/ | |||||
[type='search']::-webkit-search-cancel-button, | |||||
[type='search']::-webkit-search-decoration { | |||||
-webkit-appearance: none; | |||||
} | |||||
/** | |||||
* 1. Correct the inability to style clickable types in iOS and Safari. | |||||
* 2. Change font properties to `inherit` in Safari. | |||||
*/ | |||||
::-webkit-file-upload-button { | |||||
-webkit-appearance: button; /* 1 */ | |||||
font: inherit; /* 2 */ | |||||
} | |||||
/* Interactive | |||||
========================================================================== */ | |||||
/* | |||||
* Add the correct display in IE 9-. | |||||
* 1. Add the correct display in Edge, IE, and Firefox. | |||||
*/ | |||||
details, /* 1 */ | |||||
menu { | |||||
display: block; | |||||
} | |||||
/* | |||||
* Add the correct display in all browsers. | |||||
*/ | |||||
summary { | |||||
display: list-item; | |||||
} | |||||
/* Scripting | |||||
========================================================================== */ | |||||
/** | |||||
* Add the correct display in IE 9-. | |||||
*/ | |||||
canvas { | |||||
display: inline-block; | |||||
} | |||||
/** | |||||
* Add the correct display in IE. | |||||
*/ | |||||
template { | |||||
display: none; | |||||
} | |||||
/* Hidden | |||||
========================================================================== */ | |||||
/** | |||||
* Add the correct display in IE 10-. | |||||
*/ | |||||
[hidden] { | |||||
display: none; | |||||
} | |||||
/* Lists | |||||
========================================================================== */ | |||||
/** | |||||
* Unset default list margin and padding because if not | |||||
* we'll have to unset it every. single. time. | |||||
*/ | |||||
ul, | |||||
ol, | |||||
dl { | |||||
margin: 0; | |||||
padding: 0; | |||||
} | |||||
li { | |||||
margin: 0; | |||||
padding: 0; | |||||
list-style: none; | |||||
} |
@ -0,0 +1,23 @@ | |||||
.button { | |||||
background-color: $button-color; | |||||
display: inline-block; | |||||
padding: $button-padding; | |||||
color: $color-white; | |||||
text-decoration: none; | |||||
font-size: 14px; | |||||
text-transform: uppercase; | |||||
&:hover { | |||||
text-decoration: none; | |||||
} | |||||
a { | |||||
display: inline-block; | |||||
color: $color-white; | |||||
text-decoration: none; | |||||
&:hover { | |||||
text-decoration: none; | |||||
} | |||||
} | |||||
} |
@ -0,0 +1,4 @@ | |||||
@import 'visibility'; | |||||
@import 'buttons'; | |||||
@import 'forms'; | |||||
@import 'typography'; |
@ -0,0 +1,19 @@ | |||||
form { | |||||
label { | |||||
display: block; | |||||
} | |||||
input { | |||||
display: inline-block; | |||||
margin-bottom: 10px; | |||||
padding: 10px; | |||||
width: 100%; | |||||
&[type="radio"], | |||||
&[type="checkbox"], | |||||
&[type="reset"], | |||||
&[type="submit"] { | |||||
width: auto; | |||||
} | |||||
} | |||||
} |
@ -0,0 +1,27 @@ | |||||
.text-center { | |||||
text-align: center; | |||||
} | |||||
.text-left { | |||||
text-align: left; | |||||
} | |||||
.text-right { | |||||
text-align: right; | |||||
} | |||||
.text-bold { | |||||
font-weight: bold; | |||||
} | |||||
.text-italic { | |||||
font-style: italic; | |||||
} | |||||
.text-uppercase { | |||||
text-transform: uppercase; | |||||
} | |||||
.white-text { | |||||
color: $color-white; | |||||
} |
@ -0,0 +1,43 @@ | |||||
.lg-desktop-only { | |||||
@include breakpoint($jumbo-down) { | |||||
display: none !important; // sass-lint:disable-line no-important | |||||
} | |||||
} | |||||
.desktop-only { | |||||
@include breakpoint($lg-down) { | |||||
display: none !important; // sass-lint:disable-line no-important | |||||
} | |||||
@include breakpoint($jumbo) { | |||||
display: none !important; // sass-lint:disable-line no-important | |||||
} | |||||
} | |||||
.tablet-only { | |||||
@include breakpoint($sm-only) { | |||||
display: none !important; // sass-lint:disable-line no-important | |||||
} | |||||
@include breakpoint($above-lg) { | |||||
display: none !important; // sass-lint:disable-line no-important | |||||
} | |||||
} | |||||
.mobile-only { | |||||
@include breakpoint($md) { | |||||
display: none !important; // sass-lint:disable-line no-important | |||||
} | |||||
} | |||||
.authenticated-user { | |||||
.show-for-anonymous { | |||||
display: none; | |||||
} | |||||
} | |||||
.anonymous-user { | |||||
.show-for-authenticated { | |||||
display: none; | |||||
} | |||||
} |
@ -0,0 +1,24 @@ | |||||
// Utilities | |||||
// | |||||
// Import variables and mixins | |||||
// Should contain NO css output. | |||||
// Only variables / mixins / settings. | |||||
// ======================================== | |||||
@import 'utils/init'; | |||||
// Imports Koality Grid | |||||
// https://github.com/fabean/flexbox-grid | |||||
@import '../../node_modules/koality-flexbox-grid/src/scss/flexbox-grid'; | |||||
// Base | |||||
// | |||||
// Plain html element styling. Shouldn't require | |||||
// any classes. | |||||
// ======================================== | |||||
@import 'base/fonts'; | |||||
@import 'base/base'; | |||||
@import '../../node_modules/massive-typo/src/scss/typography'; | |||||
// Common | |||||
@import 'common/common'; |
@ -0,0 +1,13 @@ | |||||
//======================================================= | |||||
// Utilities: Import Sass mixins, variables, modules etc. | |||||
//======================================================= | |||||
@import '../../../node_modules/breakpoint-sass/stylesheets/breakpoint'; | |||||
// Import variables | |||||
@import 'variables'; | |||||
// Import Typography | |||||
@import 'typography'; | |||||
// Import mixins | |||||
@import 'mixins'; |
@ -0,0 +1,96 @@ | |||||
//======================================================= | |||||
// Mixins | |||||
//======================================================= | |||||
// Clearfix | |||||
@mixin clearfix { | |||||
&::after { | |||||
content: ''; | |||||
display: table; | |||||
clear: both; | |||||
} | |||||
} | |||||
// Makes an element visually hidden, but accessible. | |||||
// @see http://snook.ca/archives/html_and_css/hiding-content-for-accessibility | |||||
@mixin element-invisible { | |||||
position: absolute !important; | |||||
height: 1px; | |||||
width: 1px; | |||||
overflow: hidden; | |||||
clip: rect(1px, 1px, 1px, 1px); | |||||
} | |||||
// Turns off the element-invisible effect. | |||||
@mixin element-invisible-off { | |||||
position: static !important; | |||||
clip: auto; | |||||
height: auto; | |||||
width: auto; | |||||
overflow: auto; | |||||
} | |||||
// Makes an element visually hidden by default, but visible when focused. | |||||
@mixin element-focusable { | |||||
@include element-invisible; | |||||
&:active, | |||||
&:focus { | |||||
@include element-invisible-off; | |||||
} | |||||
} | |||||
// Helper function for working with Sass maps. | |||||
// Example: @include print($configuration); | |||||
@mixin print($declarations) { | |||||
@each $property, $value in $declarations { | |||||
#{$property}: $value; | |||||
} | |||||
} | |||||
@mixin ghost-button-mono($inverted: false) { | |||||
width: auto; | |||||
padding: $button-padding; | |||||
text-decoration: none; | |||||
transition: all 150ms ease; | |||||
cursor: pointer; | |||||
@if ($inverted == true) { | |||||
border: 2px solid $color-white; | |||||
border-radius: 0; | |||||
background-color: $color-black; | |||||
color: $color-white; | |||||
&:hover { | |||||
background-color: $color-white; | |||||
color: $color-black; | |||||
text-decoration: none; | |||||
transition: all 150ms ease; | |||||
} | |||||
} @else { | |||||
border: 2px solid $color-black; | |||||
border-radius: 0; | |||||
background-color: $color-white; | |||||
color: $color-black; | |||||
&:hover { | |||||
background-color: $color-black; | |||||
color: $color-white; | |||||
text-decoration: none; | |||||
transition: all 150ms ease; | |||||
} | |||||
} | |||||
} | |||||
%bust-out { | |||||
margin: { | |||||
left: calc(50% - 50vw); | |||||
right: calc(50% - 50vw); | |||||
} | |||||
transform: translateX(calc(50vw - 50%)); | |||||
} | |||||
@mixin bust-out($margin-right: null, $margin-left: $margin-right, $aspect-ratio: null) { | |||||
@extend %bust-out !optional; | |||||
} |
@ -0,0 +1,119 @@ | |||||
//======================================================= | |||||
// Variables | |||||
//======================================================= | |||||
//======== | |||||
// Koality Grid variables | |||||
//======= | |||||
$row-width: 1400px; | |||||
$inner-row-width: 1200px; | |||||
$default: 0; | |||||
$sm: 576px; | |||||
$md: 768px; | |||||
$lg: 992px; | |||||
$xl: 1200px; | |||||
$jumbo: 2000px; | |||||
$gutter-width: 15px; | |||||
$breakpoints: ( | |||||
default: $default, | |||||
sm: $sm, | |||||
md: $md, | |||||
lg: $lg, | |||||
xl: $xl, | |||||
jumbo: $jumbo; | |||||
); | |||||
$gutter-width: 15px; | |||||
$flex-grid-count: 12; | |||||
$flex-grow-default: 0; | |||||
$flex-shrink-default: 1; | |||||
$sm-only: 0 $sm | |||||
$md-only: $md $lg; | |||||
$lg-only: $lg $jumbo; | |||||
$md-down: 0 $md; | |||||
$xl-down: 0 $xl; | |||||
$lg-down: 0 $lg; | |||||
$jumbo-down: 0 $jumbo; | |||||
$md-portrait: screen 0 $md (orientation landscape); | |||||
$lg-portrait: screen (min-width $lg) (orientation landscape); | |||||
$tablet-only: screen (min-width $md) (max-width $lg); | |||||
//=========== | |||||
// Colors | |||||
//========== | |||||
$color-white: #FFF; | |||||
$color-black: #000; | |||||
//=================== | |||||
// Buttons | |||||
//=================== | |||||
$button-padding: 8px 20px; | |||||
$button-border-radius: 5px; | |||||
$button-color: $color-black; | |||||
//====== | |||||
// Typography | |||||
//======= | |||||
$body-font-family: sans-serif !default; | |||||
$body-font-size: 16px !default; | |||||
$body-font-color: #0a0a0a !default; | |||||
$body-line-height: 24px !default; | |||||
$body-font-size-small: 0.85rem !default; | |||||
$bold-font-weight: 700 !default; | |||||
$header-font-breakpoint: 650px !default; | |||||
$header-font-family: serif !default; | |||||
$h1-size-small: 24px !default; | |||||
$h1-size-medium: 48px !default; | |||||
$h2-size-small: 20px !default; | |||||
$h2-size-medium: 40px !default; | |||||
$h3-size-small: 19px !default; | |||||
$h3-size-medium: 31px !default; | |||||
$h4-size-small: 18px !default; | |||||
$h4-size-medium: 25px !default; | |||||
$h5-size-small: 17px !default; | |||||
$h5-size-medium: 20px !default; | |||||
$h6-size-small: 16px !default; | |||||
$h6-size-medium: $h6-size-small !default; | |||||
$code-font-family: monospace !default; | |||||
$code-font-size: 0.9rem !default; | |||||
$code-font-color: #0a0a0a !default; | |||||
$code-background-color: #e6e6e6 !default; | |||||
$code-padding: 2px 4px !default; | |||||
$code-border-radius: 4px !default; | |||||
$code-border: 1px solid #cacaca !default; | |||||
$link-font-color: #337ab7 !default; | |||||
$link-font-hover-color: #23527c !default; | |||||
$link-show-underline: false !default; | |||||
$link-show-underline-hover: true !default; | |||||
$font-highlight-background: #fcf8e3 !default; | |||||
$font-highlight-padding: 0.2rem !default; | |||||
$blockquote-margin: 32px 0 !default; | |||||
$blockquote-padding: 8px 16px !default; | |||||
$blockquote-font-size: $body-font-size !default; | |||||
$blockquote-border: 1px solid #DDDDDD !default; | |||||
$blockquote-font-color: #6f6f6f !default; | |||||
$blockquote-cite-font-size: 12px !default; | |||||
$blockquote-cite-font-color: #555555 !default; | |||||
//=================== | |||||
// Cards | |||||
//=================== | |||||
$card-shadow: 0 2px 4px rgba(0, 0, 0, 0.33); |