@ -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); |