From 7f481b5f76878a99794d02cfaadb28ada66155d8 Mon Sep 17 00:00:00 2001 From: ashleynolan Date: Thu, 21 Jan 2016 10:20:23 +0000 Subject: [PATCH 01/22] Updating SCSS files in line with Kickoff v6 --- assets/src/scss/_color-palette.scss | 42 +- assets/src/scss/_dependencies.scss | 116 ++--- assets/src/scss/_helper-classes.scss | 2 + assets/src/scss/_reset.scss | 432 ++++++++++++++++-- assets/src/scss/_typography.scss | 130 +----- assets/src/scss/_variables.scss | 93 ++-- assets/src/scss/components/_block-grids.scss | 98 ++++ .../{partials => }/components/_buttons.scss | 0 .../scss/{partials => }/components/_code.scss | 0 .../components/_embedded-content.scss | 21 +- assets/src/scss/components/_fluid-video.scss | 19 + .../scss/components/_forms-custom-file.scss | 48 ++ .../_forms-custom-radioscheckboxes.scss | 146 ++++++ .../scss/components/_forms-custom-select.scss | 62 +++ .../{partials => }/components/_forms.scss | 32 +- .../scss/{partials => }/components/_grid.scss | 6 +- .../scss/{partials => components}/_icons.scss | 8 +- assets/src/scss/components/_links.scss | 27 ++ assets/src/scss/components/_lists.scss | 102 +++++ assets/src/scss/components/_media-object.scss | 80 ++++ .../components/_scrollbars.scss | 0 .../components/_skip-navigation.scss | 1 + .../{partials => }/components/_tables.scss | 178 ++------ assets/src/scss/kickoff-old-ie.scss | 3 +- assets/src/scss/kickoff.scss | 2 +- assets/src/scss/mixins/_form-helpers.scss | 2 +- assets/src/scss/mixins/_grid-helpers.scss | 50 +- assets/src/scss/mixins/_hidpi.scss | 66 +-- assets/src/scss/mixins/_linear-gradient.scss | 8 +- assets/src/scss/mixins/_mixins.scss | 31 +- assets/src/scss/mixins/_position.scss | 10 +- assets/src/scss/mixins/_prefixer.scss | 6 +- assets/src/scss/mixins/_radial-gradient.scss | 8 +- assets/src/scss/mixins/_responsive.scss | 67 ++- assets/src/scss/mixins/_utility.scss | 16 +- assets/src/scss/mixins/_vertical-center.scss | 12 +- .../src/scss/partials/_browser-upgrade.scss | 6 + .../partials/components/_block-grids.scss | 62 --- .../partials/components/_fluid-video.scss | 19 - .../components/_forms-custom-controls.scss | 225 --------- .../src/scss/partials/components/_lists.scss | 31 -- .../partials/components/_media-object.scss | 67 --- .../src/scss/partials/components/_tabs.scss | 81 ---- assets/src/scss/styleguide.scss | 20 +- assets/src/scss/{ => views}/_print.scss | 17 +- 45 files changed, 1355 insertions(+), 1097 deletions(-) create mode 100644 assets/src/scss/components/_block-grids.scss rename assets/src/scss/{partials => }/components/_buttons.scss (100%) rename assets/src/scss/{partials => }/components/_code.scss (100%) rename assets/src/scss/{partials => }/components/_embedded-content.scss (51%) create mode 100644 assets/src/scss/components/_fluid-video.scss create mode 100644 assets/src/scss/components/_forms-custom-file.scss create mode 100644 assets/src/scss/components/_forms-custom-radioscheckboxes.scss create mode 100644 assets/src/scss/components/_forms-custom-select.scss rename assets/src/scss/{partials => }/components/_forms.scss (85%) rename assets/src/scss/{partials => }/components/_grid.scss (91%) rename assets/src/scss/{partials => components}/_icons.scss (74%) create mode 100644 assets/src/scss/components/_links.scss create mode 100644 assets/src/scss/components/_lists.scss create mode 100644 assets/src/scss/components/_media-object.scss rename assets/src/scss/{partials => }/components/_scrollbars.scss (100%) rename assets/src/scss/{partials => }/components/_skip-navigation.scss (99%) rename assets/src/scss/{partials => }/components/_tables.scss (55%) create mode 100644 assets/src/scss/partials/_browser-upgrade.scss delete mode 100644 assets/src/scss/partials/components/_block-grids.scss delete mode 100644 assets/src/scss/partials/components/_fluid-video.scss delete mode 100644 assets/src/scss/partials/components/_forms-custom-controls.scss delete mode 100644 assets/src/scss/partials/components/_lists.scss delete mode 100644 assets/src/scss/partials/components/_media-object.scss delete mode 100644 assets/src/scss/partials/components/_tabs.scss rename assets/src/scss/{ => views}/_print.scss (76%) diff --git a/assets/src/scss/_color-palette.scss b/assets/src/scss/_color-palette.scss index 0c2d7d2..1d2a1bd 100644 --- a/assets/src/scss/_color-palette.scss +++ b/assets/src/scss/_color-palette.scss @@ -1,38 +1,52 @@ -// ================================= -// Color palette -// ================================= +/** + * Global Color palette + * - Generic colors + * - Color scheme + * - Common colors + * - Links + * - Text selection + * -
+ * - Any others.. + */ // Generic colors $blue : #288ad6; $green : #16c98d; $red : #fa5e5b; $yellow : #feef6d; -$orange : #e67e22; +$orange : #fe7c08; $pink : #ff708e; $purple : #8e44ad; $gray : #95a5a6; // Color Scheme -$color-primary : $green; -$color-secondary : $yellow; -$color-highlight : $red; +$color-primary : #181830; +$color-secondary : $orange; +$color-highlight : $blue; // Common colors $color-text : #444; $color-bg : #f1f1f1; $color-border : #ddd; + +// Links +$color-link-default : $color-highlight; +$color-link-visited : $color-link-default; +$color-link-hover : darken($color-link-default, 20%); +$color-link-active : darken($color-link-default, 20%); + // Text Selection $color-selection : #fff; $color-selection-bg : $color-primary; -// Links -$color-link-default : $color-primary; -$color-link-visited : $color-primary; -$color-link-hover : darken($color-primary, 20%); -$color-link-active : darken($color-primary, 20%); - - //
border color $hr-border : lighten(#000, 70%); + +// 3rd party brand colors - find more at brandcolors.net +$color-twitter : #55acee; +$color-facebook : #3b5998; +$color-youtube : #cd201f; +$color-pinterest : #bd081c; +$color-instagram : #3f729b; diff --git a/assets/src/scss/_dependencies.scss b/assets/src/scss/_dependencies.scss index 18c9ef1..e5d2965 100644 --- a/assets/src/scss/_dependencies.scss +++ b/assets/src/scss/_dependencies.scss @@ -1,105 +1,75 @@ /** - * Developed with Statix v3 - * http://trykickoff.github.io/statix/ - * ================================= - * + * Site dependencies + * See http://trykickoff.com/demos/ for more info */ -// ================================= -// Site dependencies -// ================================= - -// ================================= -// Mixins, helpers and functions -// ================================= -// Most CSS3 vendor prefixed items have a mixin, -// but we should not need them if autoprefixer is being used -// See mixins/css3.scss for the full list +/* + * Mixins, helpers and functions + * Most CSS3 vendor prefixed items have a mixin, + * but we should not need them if autoprefixer is being used + * See mixins/css3.scss for the full list + */ @import "functions/functions"; @import "mixins/mixins"; - - -// ================================= -// Core variables -// ================================= -// Edit your color palette and app vars before your begin - +/** + * Core variables + * Edit your color palette and app vars before your begin + */ @import "color-palette"; @import "variables"; - - - -// CSS Reset +/* CSS Reset - Normalize etc */ @import "reset"; -// Global typography styles +/** + * Global typography styles + * See http://trykickoff.com/demos/typography.html for more info + */ @import "typography"; - /** * Components: - * ================================= - * Buttons - * Grid - * Lists - * Forms - * Embedded content - * Media Object - * Block grids - * Fluid video - * Tabs - * Tables - * Code - * Skip navigation - * Scrollbars + * See http://trykickoff.com/demos/components.html for more info */ -@import "partials/components/buttons"; -@import "partials/components/grid"; // See http://trykickoff.github.io/docs/grid.html for more info -@import "partials/components/lists"; -@import "partials/components/forms"; -@import "partials/components/forms-custom-controls"; -@import "partials/components/embedded-content"; -@import "partials/components/media-object"; -@import "partials/components/fluid-video"; -@import "partials/components/block-grids"; -@import "partials/components/tabs"; -@import "partials/components/tables"; -@import "partials/components/code"; -@import "partials/components/skip-navigation"; -@import "partials/components/scrollbars"; +@import "components/forms"; // http://trykickoff.com/demos/forms.html +@import "components/forms-custom-radioscheckboxes"; // Custom radio & checkbox inputs +@import "components/forms-custom-select"; // Custom select element +// @import "components/forms-custom-file"; // Custom file input +@import "components/icons"; +@import "components/links"; +@import "components/buttons"; +@import "components/grid"; // http://trykickoff.com/docs/grid.html & http://trykickoff.com/demos/grids.html +@import "components/block-grids"; +@import "components/lists"; +@import "components/embedded-content"; +@import "components/media-object"; +@import "components/fluid-video"; +@import "components/tables"; +@import "components/code"; +@import "components/skip-navigation"; +// @import "components/scrollbars"; /** * Your app styles - * ================================= - * Global styles - * Example partial for masthead & footer - * Icons - used in conjunction with grunticon */ -@import "global"; -@import "partials/masthead"; -@import "partials/footer"; -@import "partials/icons"; +@import "global"; // Global styles +@import "partials/masthead"; // Example partial for masthead +@import "partials/footer"; // Example partial for footer + +@import "partials/browser-upgrade"; // Styles to show an upgrade message to users on old browsers /** * Views - * ================================= */ //@import "views/home"; //@import "views/contact"; -/** - * Helper/utility classes - * ================================= - */ +/* Helper/utility classes */ @import "helper-classes"; - -/** - * Print styles - */ -@import "print"; +/* Print styles */ +@import "views/print"; diff --git a/assets/src/scss/_helper-classes.scss b/assets/src/scss/_helper-classes.scss index 03c7866..30b1da6 100644 --- a/assets/src/scss/_helper-classes.scss +++ b/assets/src/scss/_helper-classes.scss @@ -3,6 +3,8 @@ * Non-semantic helper classes */ +// scss-lint:disable ImportantRule + /** * Clearfix * http://www.cssmojo.com/latest_new_clearfix_so_far/ diff --git a/assets/src/scss/_reset.scss b/assets/src/scss/_reset.scss index 5d91b3c..80a69e7 100644 --- a/assets/src/scss/_reset.scss +++ b/assets/src/scss/_reset.scss @@ -15,93 +15,427 @@ html { * Kickoff uses an amended version of this file. */ -// HTML5 display definitions -// Corrects block display not defined in IE6/7/8/9 & FF3 -article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary,main { +/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */ + +/** + * 1. Set default font family to sans-serif. + * 2. Prevent iOS and IE text size adjust after device orientation change, + * without disabling user zoom. + */ + +html { + font-family: sans-serif; /* 1 */ + -ms-text-size-adjust: 100%; /* 2 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/** + * Remove default margin. + */ + +body { + margin: 0; +} + +/* HTML5 display definitions + ========================================================================== */ + +/** + * Correct `block` display not defined for any HTML5 element in IE 8/9. + * Correct `block` display not defined for `details` or `summary` in IE 10/11 + * and Firefox. + * Correct `block` display not defined for `main` in IE 11. + */ + +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +main, +menu, +nav, +section, +summary { display: block; } -// Corrects inline-block display not defined in IE6/7/8/9 & FF3 -audio,canvas,video { - display: inline-block; +/** + * 1. Correct `inline-block` display not defined in IE 8/9. + * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. + */ + +audio, +canvas, +progress, +video { + display: inline-block; /* 1 */ + vertical-align: baseline; /* 2 */ } -// Prevents modern browsers from displaying 'audio' without controls -// Remove excess height in iOS5 devices +/** + * Prevent modern browsers from displaying `audio` without controls. + * Remove excess height in iOS 5 devices. + */ + audio:not([controls]) { display: none; height: 0; } -// Addresses styling for 'hidden' attribute not present in IE7/8/9, FF3, S4 -// Hide the `template` element in IE, Safari, and Firefox < 22. +/** + * Address `[hidden]` styling not present in IE 8/9/10. + * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22. + */ + [hidden], template { display: none; } -/* ============ */ -/* === BASE === */ -/* ============ */ +/* Links + ========================================================================== */ + +/** + * Remove the gray background color from active links in IE 10. + */ + +a { + background-color: transparent; +} + +/** + * Improve readability of focused elements when they are also in an + * active/hover state. + */ + +a:active, +a:hover { + outline: 0; +} + +/* Text-level semantics + ========================================================================== */ + +/** + * Address styling not present in IE 8/9/10/11, Safari, and Chrome. + */ -// Addresses margins handled incorrectly in IE6/7 -body { margin: 0; } +abbr[title] { + border-bottom: 1px dotted; +} -// ============= -// === LINKS === -// ============= -// Remove the gray background color from active links in IE 10. -a { background: transparent; } +/** + * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. + */ -// Addresses outline displayed oddly in Chrome -a:focus { outline: thin dotted; } +b, +strong { + font-weight: bold; +} -// Improves readability when focused and also mouse hovered in all browsers -// people.opera.com/patrickl/experiments/keyboard/test -a:hover, a:active { outline: 0; } +/** + * Address styling not present in Safari and Chrome. + */ +dfn { + font-style: italic; +} + +/** + * Address variable `h1` font-size and margin within `section` and `article` + * contexts in Firefox 4+, Safari, and Chrome. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/** + * Address styling not present in IE 8/9. + */ + +mark { + background: #ff0; + color: #000; +} + +/** + * Address inconsistent and variable font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` affecting `line-height` in all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sup { + top: -0.5em; +} + +sub { + bottom: -0.25em; +} + +/* Embedded content + ========================================================================== */ + +/** + * Remove border when inside `a` element in IE 8/9/10. + */ + +img { + border: 0; +} + +/** + * Correct overflow not hidden in IE 9/10/11. + */ + +svg:not(:root) { + overflow: hidden; +} + +/* Grouping content + ========================================================================== */ + +/** + * Address margin not present in IE 8/9 and Safari. + */ -// =============== -// === FIGURES === -// =============== -// Addresses margin not present in IE6/7/8/9, S5, O11 figure { - margin: 0; + margin: 1em 40px; } -// ============= -// === FORMS === -// ============= +/** + * Address differences between Firefox and other browsers. + */ + +hr { + box-sizing: content-box; + height: 0; +} + +/** + * Contain overflow in all browsers. + */ + +pre { + overflow: auto; +} + +/** + * Address odd `em`-unit font size rendering in all browsers. + */ + +code, +kbd, +pre, +samp { + font-family: monospace, monospace; + font-size: 1em; +} + +/* Forms + ========================================================================== */ + +/** + * Known limitation: by default, Chrome and Safari on OS X allow very limited + * styling of `select`, unless a `border` property is set. + */ + +/** + * 1. Correct color not being inherited. + * Known issue: affects color of disabled elements. + * 2. Correct font properties not being inherited. + * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. + */ -// Addresses FF3/4 setting line-height on 'input' using !important in the UA stylesheet button, -input { - line-height: normal; // 1 +input, +optgroup, +select, +textarea { + color: inherit; /* 1 */ + font: inherit; /* 2 */ + margin: 0; /* 3 */ } -// 1. Addresses appearance set to searchfield in Safari 5, Chrome -input[type="search"] { - -webkit-appearance: textfield; // 1 +/** + * Address `overflow` set to `hidden` in IE 8/9/10/11. + */ + +button { + overflow: visible; } -// Removes inner padding and search cancel button in S5, Chrome on OS X -input[type="search"]::-webkit-search-decoration, -input[type="search"]::-webkit-search-cancel-button { - -webkit-appearance: none; +/** + * Address inconsistent `text-transform` inheritance for `button` and `select`. + * All other form control elements do not inherit `text-transform` values. + * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. + * Correct `select` style inheritance in Firefox. + */ + +button, +select { + text-transform: none; +} + +/** + * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` + * and `video` controls. + * 2. Correct inability to style clickable `input` types in iOS. + * 3. Improve usability and consistency of cursor style between image-type + * `input` and others. + */ + +button, +html input[type="button"], /* 1 */ +input[type="reset"], +input[type="submit"] { + -webkit-appearance: button; /* 2 */ + cursor: pointer; /* 3 */ } -// Removes inner padding and border in FF3+ -// www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ +/** + * Re-set default cursor for disabled elements. + */ + +button[disabled], +html input[disabled] { + cursor: default; +} + +/** + * Remove inner padding and border in Firefox 4+. + */ + button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } -// 1. Removes default vertical scrollbar in IE6/7/8/9 -// 2. Improves readability and alignment in all browsers +/** + * Address Firefox 4+ setting `line-height` on `input` using `!important` in + * the UA stylesheet. + */ + +input { + line-height: normal; +} + +/** + * It's recommended that you don't attempt to style these elements. + * Firefox's implementation doesn't respect box-sizing, padding, or width. + * + * 1. Address box sizing set to `content-box` in IE 8/9/10. + * 2. Remove excess padding in IE 8/9/10. + */ + +input[type="checkbox"], +input[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Fix the cursor style for Chrome's increment/decrement buttons. For certain + * `font-size` values of the `input`, it causes the cursor style of the + * decrement button to change from `default` to `text`. + */ + +input[type="number"]::-webkit-inner-spin-button, +input[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Address `appearance` set to `searchfield` in Safari and Chrome. + * 2. Address `box-sizing` set to `border-box` in Safari and Chrome. + */ + +input[type="search"] { + -webkit-appearance: textfield; /* 1 */ + box-sizing: content-box; /* 2 */ +} + +/** + * Remove inner padding and search cancel button in Safari and Chrome on OS X. + * Safari (but not Chrome) clips the cancel button when the search input has + * padding (and `textfield` appearance). + */ + +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * Define consistent border, margin, and padding. + */ + +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} + +/** + * 1. Correct `color` not being inherited in IE 8/9/10/11. + * 2. Remove padding so people aren't caught out if they zero out fieldsets. + */ + +legend { + border: 0; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Remove default vertical scrollbar in IE 8/9/10/11. + */ textarea { - overflow: auto; // 1 - vertical-align: top; // 2 + overflow: auto; +} + +/** + * Don't inherit the `font-weight` (applied by a rule above). + * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. + */ + +optgroup { + font-weight: bold; +} + +/* Tables + ========================================================================== */ + +/** + * Remove most spacing between table cells. + */ + +table { + border-collapse: collapse; + border-spacing: 0; +} + +td, +th { + padding: 0; } diff --git a/assets/src/scss/_typography.scss b/assets/src/scss/_typography.scss index a3bd1ec..0cb7eb4 100644 --- a/assets/src/scss/_typography.scss +++ b/assets/src/scss/_typography.scss @@ -1,15 +1,11 @@ /** * Typography - * ================================= - * Base - * Paragraphs - * Headings - * Links - * Lists - * Definition lists - * Blockquotes - * Misc - * Utilities + * - Base + * - Paragraphs + * - Headings + * - Type sizes + * - Misc + * - Utilities * * Body font size, leadings etc have been set in _variables.scss * Resources: @@ -39,7 +35,6 @@ body { // Two ways to smoothen type, they are disabled by default // Enable only one of them if you need them - // ========================================= // 1. // -webkit-font-smoothing: antialiased; // -moz-font-smoothing: antialiased; @@ -59,7 +54,6 @@ p { margin-bottom: $baseline; // Measure - ideally about 65 chars per line - // ========================================= // max-width: $type-base * 30 + px; // & small { @@ -89,18 +83,14 @@ h1, h2, h3, h4, h5, h6 { h1, .h1, .alpha { @include font-size($type-largest); margin-bottom: $baseline * 2; - - &:first-child { - margin-top: $baseline * 2; - } } h2, .h2, .beta { - @include font-size($type-larger); + @include font-size($type-large); } h3, .h3, .gamma { - @include font-size($type-large); + @include font-size($type-mid); } h4, .h4, .delta { @@ -113,7 +103,6 @@ h6, .h6, .zeta { margin-bottom: 0; } - // h5, .h5, .epsilon { // } @@ -132,104 +121,9 @@ small { font-size: 80%; } -/** - * Links - */ -a { - &, &:link { - color: $color-link-default; - text-decoration: none; - } - - &:visited { - color: $color-link-visited; - text-decoration: none; - } - - &:hover, &:focus { - color: $color-link-hover; - //text-decoration: underline; - } - - &:active { - color: $color-link-active; - //text-decoration: underline; - } -} - - -/** - * Lists - */ -ul { - list-style-type: disc; -} - -ol { - list-style-type: decimal; -} - -// Unordered and Ordered lists -// Add a .unstyled class to unordered/ordered lists if you want them to have bullets/numbers -ul, ol { - padding: 0; - margin: 0 0 $baseline $baseline; - - ul, - ol { - margin-left: $baseline * 2; - } - - ul { - list-style-type: circle; - - ul { - list-style-type: square; - } - } - - ol { - list-style-type: upper-roman; - - ol { - list-style-type: lower-roman; - } - } - - ul, ol { - margin-bottom: 0; - } -} - -/** - * Unstyled lists - */ -.unstyled { - margin: 0; - padding: 0; - list-style: none; - list-style-image: none; -} - - -/** - * Definition lists - */ -dl { margin-bottom: $baseline; } -dt { font-weight: $font-weight-bold; } -dd { margin-left: $baseline; } - - /** * Miscellaneous */ -// Horizontal rules -hr { - margin: ($baseline) 0; - border: 0; - border-top: 1px solid $hr-border; - border-bottom: 1px solid #fff; -} // Emphasis strong, b { @@ -329,3 +223,11 @@ samp { } @include text-selection($color-selection, $color-selection-bg); + +// Horizontal rules +hr { + margin: ($baseline) 0; + border: 0; + border-top: 1px solid $hr-border; + border-bottom: 1px solid #fff; +} diff --git a/assets/src/scss/_variables.scss b/assets/src/scss/_variables.scss index 0b96b2f..dc74c5e 100644 --- a/assets/src/scss/_variables.scss +++ b/assets/src/scss/_variables.scss @@ -1,19 +1,21 @@ -// ========================================================================== -// Variables -// ========================================================================== -// * Typography -// * Breakpoints -// * Paths -// * Layout & Grid -// * App-specific - - -// Typography -// ========================================================================== -// Base sizes: -// Set this in pixels (but do not add px), -// the font-size mixin will convert to REMS - +/** + * Variables + * - Typography + * - Breakpoints + * - Paths + * - Layout & Grid + * - App-specific + */ + +// scss-lint:disable SpaceAfterVariableName + +/** + * Typography + * + * Base sizes: + * Set this in pixels (but do not add px), + * the font-size mixin will convert to REMS + */ $font-size-base : 20; $font-size-base-px : $font-size-base * 1px; $font-size-base-narrow : $font-size-base - 2; @@ -30,12 +32,11 @@ $type-smallest : modular-scale($font-size-base, -3, $type-scale) $type-smaller : modular-scale($font-size-base, -2, $type-scale); $type-small : modular-scale($font-size-base, -1, $type-scale); // h5, h6 $type-base : modular-scale($font-size-base, 0, $type-scale); // p, h4 -$type-large : modular-scale($font-size-base, 1, $type-scale); // h3 -$type-larger : modular-scale($font-size-base, 2, $type-scale); // h2 +$type-mid : modular-scale($font-size-base, 1, $type-scale); // h3 +$type-large : modular-scale($font-size-base, 2, $type-scale); // h2 $type-largest : modular-scale($font-size-base, 3, $type-scale); // h1 $type-jumbo : modular-scale($font-size-base, 4, $type-scale); - // Useful to set here when bold webfonts come as 400 font-weight. $font-weight-bold : bold; @@ -47,37 +48,36 @@ $font-family-mono : Menlo, Monaco, "Courier New", monospace; $font-family-base : $font-family-sans; $font-family-alt : $font-family-serif; -$font-family-headings : $font-family-serif; // using inherit will use $font-family-base for all headings +$font-family-headings : $font-family-base; // using inherit will use $font-family-base for all headings $font-weight-headings : bold; // instead of browser default, bold $line-height-headings : 1.1; - -// Breakpoints -// ========================================================================== -// There are no common breakpoints so these are just a suggestions -// You'll need to define your own breakpoints to suit your design - -$bp-narrow : 400; // Set in px -$bp-mid : 768; // Set in px -$bp-wide : 992; // Set in px -$bp-huge : 1600; // Set in px +/** + * Breakpoints + * There are no common breakpoints so these are just a suggestions + * You'll need to define your own breakpoints to suit your design + */ +$bp-narrow : 400; // Set in px +$bp-mid : 750; // Set in px +$bp-wide : 1000; // Set in px +$bp-huge : 1250; // Set in px // Special breakpoints -$bp-single-col : $bp-mid; // Break to single column (used in the grid) -$bp-block-grid-narrow : $bp-narrow; // Breakpoint for narrow block grids -$bp-rwd-text : $bp-mid; // Reduce text size below this width +$bp-single-col : $bp-mid; // Break to single column (used in the grid) +$bp-rwd-text : $bp-mid; // Reduce text size below this width -// Path vars -// ========================================================================== +/** + * Path vars + */ +$img-path : "/assets/dist/img"; // Usage: background: url('#{$img-path}/img.jpg') 0 0 no-repeat; -$img-path : "/assets/img"; // Usage: background: url('#{$img-path}/img.jpg') 0 0 no-repeat; - -// Layout setup -// Settings here override & affect the output in scss/partials/components/grid.scss -// ========================================================================== +/** + * Layout setup + * Settings here override & affect the output in scss/partials/components/grid.scss + */ // Setup grid defaults $layout-margin : 0 !default; // [in pixels] Space outside the grid @@ -88,19 +88,18 @@ $grid-column-count : 12 !default; // Total column count $grid-gutter-width : 20 !default; // [in pixels] // Column Padding -$grid-column-padding : 0 !default; // [in pixels] +$grid-column-padding : 0 !default; // [in pixels] $grid-column-padding-unit : 'px' !default; // [in pixels or percent] Specify your unit of measurement for column padding $nested-column-padding : false !default; // Remove padding on nested columns so they are aligned correctly. Set this to [false] to enable it. -// Choose your grid options +// Choose your grid options, see http://trykickoff.com/learn/grid.html for more info $using-push-pull-columns : false !default; // Allow columns to be pushed & pulled $using-offsetcolumns : false !default; // Allow columns to be offset $using-splits-and-shunts : false !default; // Use Splits & Shunts for responsive web design - -// App-specific variables -// ========================================================================== -// Add common vars below here - +/** + * App-specific variables + */ $default-transition: all 100ms ease-in-out; +// Add your own :) diff --git a/assets/src/scss/components/_block-grids.scss b/assets/src/scss/components/_block-grids.scss new file mode 100644 index 0000000..af186f0 --- /dev/null +++ b/assets/src/scss/components/_block-grids.scss @@ -0,0 +1,98 @@ +/** + * Block grids + * These are suited for repeating blocks of content. See below for usage + * + * Usage: + * + * + *
+ *
+ *
+ */ + + +/** + * Block grid breakpoints + * Add or remove any breakpoints that you may or may not need. + * Note: Reorder these if your breakpoints aren't in this order, + * should be smallest to largest. + */ +$block-grid-breakpoints: ( + narrow: $bp-narrow, + default: $bp-single-col, + //mid: $bp-mid, + //wide: $bp-wide, + //huge: $bp-huge +); + + +/** + * Generate block grids based on colum count + */ +@mixin blockGridHelper($mutator: false) { + $suffix: ''; + + // default doesn't need a mutator + @if($mutator and not ($mutator == default)) { + $suffix: '--' + #{$mutator}; + } + + @for $i from 1 to $grid-column-count + 1 { + .l-blockGrid--#{$i}#{$suffix} { + .l-blockGrid-item { + float: left; + width: percentage(1 / $i); + + /** + * Clear incase of height difference of block items. + * Note: Remove these if all your items are the same height. + */ + &:nth-of-type(#{$i}n + 1) { + clear: left; + } + + &:not(:nth-of-type(#{$i}n + 1)) { + clear: none; + } + } + } + } +} + + +.l-blockGrid { + display: block; + list-style-type: none; + margin: 0; + @include clearfix; +} + +.l-blockGrid-item { + display: block; + height: auto; + + @if $grid-column-padding > 0 { + padding: $grid-column-padding + px; + } +} + +@each $name, $value in $block-grid-breakpoints { + @include respond-min($value) { + @include blockGridHelper($name); + } +} + + +/** + * Guttered block grid mutator + */ +.l-blockGrid--guttered { + margin-left: -#{$grid-gutter-width}px; + + .l-blockGrid-item { + padding-left: #{$grid-gutter-width}px; + padding-bottom: #{$grid-gutter-width}px; + } +} \ No newline at end of file diff --git a/assets/src/scss/partials/components/_buttons.scss b/assets/src/scss/components/_buttons.scss similarity index 100% rename from assets/src/scss/partials/components/_buttons.scss rename to assets/src/scss/components/_buttons.scss diff --git a/assets/src/scss/partials/components/_code.scss b/assets/src/scss/components/_code.scss similarity index 100% rename from assets/src/scss/partials/components/_code.scss rename to assets/src/scss/components/_code.scss diff --git a/assets/src/scss/partials/components/_embedded-content.scss b/assets/src/scss/components/_embedded-content.scss similarity index 51% rename from assets/src/scss/partials/components/_embedded-content.scss rename to assets/src/scss/components/_embedded-content.scss index 7a6e386..a405ba7 100644 --- a/assets/src/scss/partials/components/_embedded-content.scss +++ b/assets/src/scss/components/_embedded-content.scss @@ -1,6 +1,7 @@ -/* - Embedded content - ========================================================================== */ +/** + * Embedded content + */ + img { font-style: italic; color: #c00; @@ -22,3 +23,17 @@ svg:not(:root) { overflow: hidden; } img, object, embed, video { max-width: 100%; } + +/** + * Remove the gap between audio, canvas, iframes, + * images, videos and the bottom of their containers: + * https://github.com/h5bp/html5-boilerplate/issues/440 + */ +audio, +canvas, +iframe, +img, +svg, +video { + vertical-align: middle; +} diff --git a/assets/src/scss/components/_fluid-video.scss b/assets/src/scss/components/_fluid-video.scss new file mode 100644 index 0000000..83baf96 --- /dev/null +++ b/assets/src/scss/components/_fluid-video.scss @@ -0,0 +1,19 @@ +/** + * Fluid width video + * - 16:9 aspect ratio by default + * Usage: + *