diff --git a/.kickoff/config.js b/.kickoff/config.js index 0f7a0378..9a4f8d60 100644 --- a/.kickoff/config.js +++ b/.kickoff/config.js @@ -24,7 +24,7 @@ const ConfigOptions = function () { // We are supporting the last 2 browsers, any browsers with >5% market share, // and ensuring we support IE9+ with prefixes - browsers: ['> 5%', 'last 2 versions', 'ie > 8'], // config.css.browsers + browsers: ['> 1%', 'last 1 versions', 'ie > 9', 'not ie <= 8', 'edge >= 12'], // config.css.browsers }; // Javascript-related vars @@ -78,7 +78,7 @@ const ConfigOptions = function () { * ╚═╝ ╚═╝╚═╝ ╚═════╝╚═╝ ╚═╝ ╚═════╝ ╚═╝ ╚═╝ * ${pkg.title} v${pkg.version} * ${pkg.homepage} - * ${pkg.repo} + * ${pkg.repository.page} */ `, diff --git a/.kickoff/tasks/css.js b/.kickoff/tasks/css.js index a5a84dad..562be220 100644 --- a/.kickoff/tasks/css.js +++ b/.kickoff/tasks/css.js @@ -16,6 +16,7 @@ const path = require('path'); const autoprefixer = require('autoprefixer'); const cssnano = require('cssnano'); const flexbugsFixes = require('postcss-flexbugs-fixes'); +const pxtorem = require('postcss-pxtorem'); const config = require('../config'); @@ -30,7 +31,13 @@ gulp.task('css', () => { // Sass Compilation .pipe( sass( - eyeglass() + eyeglass({ + // put node-sass options you need here. + + eyeglass: { // eyeglass options + root: __dirname, + } + }) ).on('error', sass.logError) ) @@ -39,6 +46,10 @@ gulp.task('css', () => { postcss([ flexbugsFixes(), autoprefixer({browsers: config.css.browsers}), + pxtorem({ // See other options at https://github.com/cuth/postcss-pxtorem#options + rootValue: 20, + selectorBlackList: ['html'], + }), ]) ) diff --git a/assets/src/scss/README.md b/assets/src/scss/README.md index 814e3743..9e2c540c 100644 --- a/assets/src/scss/README.md +++ b/assets/src/scss/README.md @@ -1,52 +1,190 @@ -# Kickoff scss -> Find out more at https://trykickoff.now.sh/learn/css.html +# Kickoff Sass (.scss) source +> Find out more at http://trykickoff.com/learn/css.html -## Important files +### The purpose of this repo is to separate the main CSS framework from the main kickoff repo. This is so that the CSS can be included into any project regardless of project type i.e. a React/Angular/Vue/Drupal/etc/etc project. -It’s important to become familiar with all of these files so you can make full use of the framework. +Kickoff's CSS framework is based on Sass, and this repo does not deal with compilation, only the source files. -### `kickoff.scss` +## Installation -All roads lead to here. This file is where all of Kickoff’s Sass dependencies are defined. It imports all of the scss files that will be compiled into your project. If you need to add or remove a file, do it here. The order of the imported files is the same order that the CSS will be compiled to. +```sh +npm install -S @kickoff/scss -### `_global.scss` -This file contains all styles that do not obviously fit within any other scss partial. For example, we include our body’s background styles and the main .l-container styles. Try not to fill this up with all your styles though. Your Sass should be written in a modular way, and so the majority of your Sass should be organised within the components, partials or views directories. +# or -### `_helper-classes.scss` -This file contains a bunch of helper styles, like .clearfix (for clearing floats), .ir for using background image replacement, .is-hidden etc. +yarn add @kickoff/scss +``` + +### Install the dependencies alongside the scss source +This might be useful if you want to update some of the 3rd party Sass dependencies (like our utils or include-media) and not Kickoff's scss source. + +```sh +npm install -S @kickoff/scss kickoff-utils.scss kickoff-grid.css kickoff-fluidVideo.css include-media normalize.css + +# or + +yarn add @kickoff/scss kickoff-utils.scss kickoff-grid.css kickoff-fluidVideo.css include-media normalize.css +``` + +### Copy to your project directory +Once installed, copy the `node_modules/@kickoff/scss` directory to your main project directory + +## Dependencies +### Kickoff's external Sass modules +* [kickoff-utils.scss](https://github.com/TryKickoff/kickoff-utils.scss) - Kickoff's Sass utility functions and mixins +* [kickoff-grid.css](https://github.com/TryKickoff/kickoff-grid.css) - our Sass grid framework +* [kickoff-fluidVideo.css](https://github.com/TryKickoff/kickoff-fluidVideo.css) - Simple fluid-width videos using only CSS + +### 3rd party Sass modules +* [include-media](https://include-media.com) is used for improved media queries, [see below](#media-queries) for more about this +* [normalize.css](https://github.com/JohnAlbin/normalize-scss) - Normalize.css is now imported using a Sass port of the library + +### Important Sass files + +It’s important to become familiar with **all of these files** so you can make full use of the framework. + +#### [kickoff.scss](https://github.com/TryKickoff/scss/blob/master/kickoff.scss) +All roads lead to here. This is the base SCSS file and is the hook by which Grunt compiles the projects CSS. `kickoff.scss` is compiled to `/assets/dist/css/kickoff.css` and is used on Internet Explorer 9+, Chrome, Safari, Firefox and Opera. + +#### [_global.scss](https://github.com/TryKickoff/scss/blob/master/_global.scss) +This file contains all styles that do not obviously fit within any other scss partial. For example, we include our body's background styles and the main `.l-container` styles. **Try not to fill this up with all your styles though.** Your Sass should be written in a modular way, and so the majority of your Sass should be organised within the `components`, `partials` or `views` directories. + +#### [_helper-classes.scss](https://github.com/TryKickoff/scss/blob/master/_helper-classes.scss) +This file contains a bunch of helper styles, like `.clearfix` (for clearing floats), `.ir` for using background image replacement, `.is-hidden` etc. ## Sass Variables -We take full advantage of Sass’ variables and there are two key files that should be edited at the start of development on any new Kickoff project. These are `_variables.scss` and `_color-palette.scss`. +We take full advantage of Sass' variables and there are two key files that should be edited at the start of development on any new Kickoff project. These are `scss/_variables.scss` and `scss/_color-palette.scss`. -### `_variables.scss` +#### [_variables.scss](https://github.com/TryKickoff/scss/blob/master/_variables.scss) This is where you define your global Sass variables. Here you can define your: -* Global typographic styles — including font choices and typographic scale. -* Responsive breakpoints — we try not to target specific devices or device types with these variables. Instead they should be set with the design in mind. +* **Global typographic styles** — including font choices and typographic scale. +* **Responsive breakpoints** — we try not to target specific devices or device types with these variables. Instead they should be set with the design in mind. The `$breakpoints` sass map, contains our default breakpoints, these are used by the grid and can be referenced by using the `bp(mid)` sass function. See how to use the breakpoints when using our mixins, [below](#responsive). -#### _color-palette.scss +#### [_color-palette.scss](https://github.com/TryKickoff/scss/blob/master/_color-palette.scss) Text colour, link colours, background colour, form fields and various component colours can all be set in this file. ---- +
+ + +## Useful CSS classes & styles + +* `.l-container`: found in `/assets/src/scss/_global.scss`, this class controls the main content 'column' on your site. +* `.btn`: found in `/assets/src/scss/components/_buttons.scss` for buttons. See the possible modifiers on the [components demo page](/demos/components.html#buttons) +* Anchor links (`a`) are styled in `/assets/src/scss/components/_links.scss` +* `.l-mb0` or `.l-mt0`: for zeroing any `margin-bottom/top` values. See also the other helper classes in `/assets/src/scss/_helper-classes.scss` +* `.clearfix`: for clearing floats. See also the other helper classes in `/assets/src/scss/_helper-classes.scss` +* `.h1`, `.h2`, `.h3`, `.h4`: font-sizing helper classes for headings + +
+ + +## Responsive +Kickoff does not enforce a mobile first approach to CSS, but it is encouraged and it takes a fairly unique approach to responsive sites. + +### Media queries +#### Media queries v8.0.0 and above +**Kickoff v8.0.0 introduced a new mixin library to handle media-queries**. This library, [include-media](http://include-media.com/) allows for a more simple syntax and better control of media-queries. There is just one mixin call that takes a few different options: + +#### Example +```scss +// The keywords below are from the $breakpoints map in _variables.scss -## Views, partials & components +// Equivalent to min-width query +@include media(">m") { + width: 50%; +} -Our distinction between views, partials and components: +// Equivalent to min-width and max-width query +@include media(">s", "<=xl") { + width: 50%; +} -### Components +// Equivalent to min-width +@include media(">200px") { + width: 50%; +} +``` -Small, self-contained files that concern one type of thing, that crucially, are reusable. For example, lists, forms etc. We have included quite a few in the components directory: buttons, forms, fluid video or grid for example, but you should add your components there too. Please browse through the included components to see what Kickoff offers, or see some of them in action in our demo area. +#### Better media query example +Rather than having all of your media queries for different widths stored in separate scss files or placed at the bottom of each SCSS partial, we suggest making use of Sass' nested media queries. -### Partials +This means that all styles related to an element are together, for example: -Partials are partial parts of a page, like a masthead, sidebar or footer. They can have components inside them and can also be reusable. The partials directory should contain style partials, like _footer.scss or _masthead.scss. +```scss +a { + padding: 1em; -### Views + @include media('>800') { + padding: 2em; + } +} +``` -Used for entire views (or pages). Usually these files consist of small tweaks that only concern a particular view. The views directory should contain view-specific styles that don’t fit into their own module, think _home.scss or `_recipe-page.scss` for example. +## CSS Naming scheme +Kickoff uses a bespoke naming scheme for classnames, inspired loosely by the [BEM naming scheme](http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/). -N.b. We recommend that it is better to make reusable components rather than styling based on a view. Therefore, the styles in this folder _should _ be minimal. +This obviously isn’t compulsory to use in your own Kickoff projects, but is documented here as guidance, and is what we use across our Kickoff projects. + +```scss +/* Descriptors use camel-casing if more than one word: e.g. twoWords */ +.form { + ... +} + +/* ========= */ + +/* Child elements use single hyphens: - */ +.form-controlGroup { + ... +} + +/* ========= */ + +/* Modifier element use a double hyphen: -- */ +.form { + ... +} +.form--horizontal { + ... +} + +/* ========= */ + +/* Element state: .is- or .has- */ +.is-active { + ... +} + +/* ========= */ + +/* Sass variables use dash-case */ +a { + color: $color-primary; +} +``` + +--- + +### Elements, components, partials & views +We use a similar philosophy to [Atomic Design](http://bradfrost.com/blog/post/atomic-web-design/) but instead of atoms, molecules, organisms & templates we use elements, components, partials & views; below is out distinction. + +#### Elements +Elements are single elements. + +#### Components +Components are small, self-contained files that concern one type of thing, that crucially, are reusable. For example, lists, forms etc. We have included quite a few in the [components](https://github.com/TryKickoff/scss/blob/master/components/) directory: [buttons](https://github.com/TryKickoff/scss/blob/master/components/_buttons.scss) & [forms](https://github.com/TryKickoff/scss/blob/master/components/_forms.scss) for example, but you should add your components there too. Please [browse through](https://github.com/TryKickoff/scss/blob/master/components/) the included components to see what Kickoff offers, or see some of them in action in our [demo area](../demos/). + +#### Partials +Partials are partial parts of a page, like a masthead, sidebar or footer. They typically have multiple 'components' inside them and can also be reusable. The [partials](https://github.com/TryKickoff/scss/blob/master/partials/) directory should contain style partials, like `_footer.scss` or `_masthead.scss`. + +#### Views +Used for entire views (or pages). Usually these files consist of small tweaks that only concern a particular view. The [views](https://github.com/TryKickoff/scss/blob/master/views/) directory should contain view-specific styles that don't fit into their own module, think `_home.scss` or `_recipe-page.scss` for example. **N.b.** We recommend that it is better to make reusable components rather than styling based on a view. Therefore, the styles in this folder *should* be minimal. ### Mixins & Functions +We make use of a lot of these, but they are not stored within the repo. Please visit [github.com/TryKickoff/kickoff-utils.scss](https://github.com/TryKickoff/kickoff-utils.scss) to find out more about them. If you need your own, please create a relevant `functions` or `mixins` directory for whichever you need. + +--- -We make use of a lot of these, but they are not stored within the repo. Please visit [github.com/TryKickoff/kickoff-utils.scss](https://github.com/TryKickoff/kickoff-utils.scss) to find out more about them. +## Upgrade path +As with anything Kickoff-related, it can be tricky to upgrade because this dependency shouldn't be treated like standard dependencies, it should be treated as another part of your codebase. With that in mind, updating to a newer version of this should be done with great care because local changes will be overwritten by the new update. Remember that after each update, you will need to copy these files into your project directory. diff --git a/assets/src/scss/_color-palette.scss b/assets/src/scss/_color-palette.scss index 0c5ec103..72be6f3c 100644 --- a/assets/src/scss/_color-palette.scss +++ b/assets/src/scss/_color-palette.scss @@ -6,55 +6,70 @@ * - Common colors * - Links * - Text selection - * -
* - Any others.. */ -// Generic colors -$blue : #288ad6; -$green : #16c98d; -$red : #fa5e5b; -$yellow : #feef6d; -$orange : #fe7c08; -$pink : #ff708e; -$purple : #8e44ad; -$gray : #95a5a6; - -$dark : #000; -$bright : #fff; - -$color-kickoff-blue : #181830; -$color-kickoff-orange : #fe7c08; - -// Color Scheme -$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%); +$color-palette: ( + bright: ( + base: #F9FAFB, + dark: #F4F6F8, + darker: #DFE4E8 + ), -// Text Selection -$color-selection : #fff; -$color-selection-bg : $color-primary; + dark: ( + base: #212B35, + light: #454F5B, + lighter: #637381 + ), + + primary: ( + base: #181830, + light: #292952, + dark: #0d0d19 + ), + + secondary: ( + base: #fe7c08, + light: #fea04c, + dark: #d26401 + ), + + text: ( + base: #212B35, + light: #454F5B + ), + background: ( + base: #f1f1f1 + ), -//
border color -$hr-color : lighten(#000, 70%); + link: ( + base: #fe7c08, + over: #fea04c + ) +); + +// Generic colors +$blue: #288ad6; +$green: #16c98d; +$red: #fa5e5b; +$yellow: #feef6d; +$orange: #fe7c08; +$pink: #ff708e; +$purple: #8e44ad; +$gray: #95a5a6; + +$color-kickoff-blue: #181830; +$color-kickoff-orange: #fe7c08; + +// Text Selection +$color-selection: ko-color(bright); +$color-selection-bg: ko-color(primary); // 3rd party brand colors - find more at brandcolors.net -$color-twitter : #55acee; -$color-facebook : #3b5998; -$color-youtube : #cd201f; -$color-pinterest : #bd081c; -$color-instagram : #e4405f; -$color-whatsapp : #25d366; +$color-twitter: #55acee; +$color-facebook: #3b5998; +$color-youtube: #cd201f; +$color-pinterest: #bd081c; +$color-instagram: #e4405f; +$color-whatsapp: #25d366; diff --git a/assets/src/scss/_global.scss b/assets/src/scss/_global.scss index 85a68c18..68254dca 100644 --- a/assets/src/scss/_global.scss +++ b/assets/src/scss/_global.scss @@ -3,7 +3,7 @@ * ================================= */ body { - background-color: $color-bg; + background-color: ko-color(background); } /** @@ -14,3 +14,7 @@ body { max-width: #{$layout-max-width}px; margin: 0 auto; } + +// Uncomment to include responsive helper classes +// See https://github.com/TryKickoff/kickoff-utils.scss#_responsive-revealscss +// @include ko-rwd-reveal(); diff --git a/assets/src/scss/_helper-classes.scss b/assets/src/scss/_helper-classes.scss index c8d22aa4..82a2fbd4 100644 --- a/assets/src/scss/_helper-classes.scss +++ b/assets/src/scss/_helper-classes.scss @@ -2,12 +2,18 @@ * Helper classes * ================================= * Non-semantic helper classes + * - Clearfix + * - State helpers + * - Layout helpers + * - Margin helpers + * - Typography helpers + * - Misc helpers */ /** * Clearfix * http://www.cssmojo.com/latest_new_clearfix_so_far/ - * See mixins/_utility.scss for a mixin version of this + * @kickoff/utils also includes a mixin version of this */ .clearfix::after { content: ""; @@ -15,23 +21,9 @@ clear: both; } - -// For background image replacement -.ir { - background-color: transparent; - background-repeat: no-repeat; - border: 0; - direction: ltr; - display: block; - overflow: hidden; - text-align: left; - text-indent: -999em; - - br { - display: none; - } -} - +/** + * State helpers + */ // Hide from both screenreaders and browsers: h5bp.com/u .is-hidden { @@ -39,7 +31,11 @@ visibility: hidden !important; } -.is-shown { display: block; } +.is-shown { display: block !important; } +.is-visible { visibility: visible !important; } + +// Hide visually and from screenreaders, but maintain layout +.is-invisible { visibility: hidden !important; } // Hide only visually, but have it available for screenreaders: h5bp.com/v .is-visuallyHidden { @@ -64,30 +60,70 @@ } } -// Hide visually and from screenreaders, but maintain layout -.is-invisible { visibility: hidden; } - -.l-floatLeft { - float: left; -} - -.l-floatRight { - float: right; -} +/** + * Layout helpers + */ +.l-floatLeft { float: left; } +.l-floatRight { float: right; } .l-clear { clear: both; float: none; } +/** + * Margin helpers + */ .l-mb0 { margin-bottom: 0 !important; } +.l-mb1 { margin-bottom: $baseline !important; } +.l-mb2 { margin-bottom: ko-multiply(2) !important; } +.l-mb3 { margin-bottom: ko-multiply(3) !important; } + .l-mt0 { margin-top: 0 !important; } +.l-mb1 { margin-top: $baseline !important; } +.l-mb2 { margin-top: ko-multiply(2) !important; } +.l-mb3 { margin-top: ko-multiply(3) !important; } +/** + * Typography helpers + */ +.text-centre, +.text-center { text-align: center; } +.text-left { text-align: left; } +.text-right { text-align: right; } +.text-uppercase { text-transform: uppercase; } +.text-lowercase { text-transform: lowercase; } + +// https://justmarkup.com/log/2015/07/dealing-with-long-words-in-css/ +.text-hyphenate { + overflow-wrap: break-word; + word-wrap: break-word; + hyphens: auto; +} +/** + * Misc helpers + */ * { -webkit-tap-highlight-color: transparent !important; } +// For background image replacement +.ir { + background-color: transparent; + background-repeat: no-repeat; + border: 0; + direction: ltr; + display: block; + overflow: hidden; + text-align: left; + text-indent: -999em; + + br { + display: none; + } +} + /* A hack for HTML5 contenteditable attribute on mobile */ textarea[contenteditable] { -webkit-appearance: none; diff --git a/assets/src/scss/_typography.scss b/assets/src/scss/_typography.scss index 0975f30f..e403a855 100644 --- a/assets/src/scss/_typography.scss +++ b/assets/src/scss/_typography.scss @@ -9,47 +9,37 @@ * - Utilities * * Body font size, leadings etc have been set in _variables.scss - * - * See http://modularscale.com for - * */ html { - font-size: $font-size-base-narrow-px; + font-size: $font-size-base - 2; -webkit-text-size-adjust: 100%; + // font-variant-ligatures: common-ligatures; + -webkit-font-smoothing: antialiased; - @include media('>mid') { - font-size: $font-size-base-px; + // This needs to come after -webkit-font-smoothing + // stylelint-disable-next-line declaration-block-properties-order + -moz-osx-font-smoothing: grayscale; + text-size-adjust: 100%; + text-rendering: optimizeLegibility; + + @include media('>m') { + font-size: $font-size-base; } } +html, body { font-family: $font-family-base; - @include ko-font-size(base); line-height: $leading-base; - color: $color-text; - - // Add ligatures - font-feature-settings: "liga", "dlig", "hist"; - font-variant-ligatures: common-ligatures discretionary-ligatures historical-ligatures; - - // 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; - // font-smooth:always; - - // 2. - // opacity: 0.99; + color: ko-color(text); + font-weight: $font-weight-normal; } /** * Paragraphs */ p { - font-family: $font-family-base; - @include ko-font-size(base); margin-top: 0; margin-bottom: $baseline; @@ -66,72 +56,79 @@ h3, h4, h5, h6 { - margin: 0; font-family: $font-family-headings; font-weight: $font-weight-headings; line-height: $line-height-headings; - text-rendering: optimizelegibility; // Fix the character spacing for headings margin-top: 0; margin-bottom: $baseline; +} + +h1 { + font-size: ko-font-size(xl); + margin-bottom: ko-multiply(2); - small { - font-weight: normal; + @include media('>m') { + font-size: ko-font-size(xxl); } } -// Use the helper classes to emulate styles for another element -// For example: h3.h1 or h3.alpha -h1, -.h1, -.alpha { - @include ko-font-size(jumbo); - margin-bottom: $baseline * 2; -} +h2 { + font-size: ko-font-size(l); -h2, -.h2, -.beta { - @include ko-font-size(large); + @include media('>m') { + font-size: ko-font-size(xl); + } } -h3, -.h3, -.gamma { - @include ko-font-size(mid); +h3 { + font-size: ko-font-size(m); + + @include media('>m') { + font-size: ko-font-size(l); + } } -h4, -.h4, -.delta { - @include ko-font-size(base); +h4 { + font-size: ko-font-size(s); + + @include media('>m') { + font-size: ko-font-size(m); + } } h5, -.h5, -.epsilon, -h6, -.h6, -.zeta { - @include ko-font-size(base); +h6 { + font-size: ko-font-size(s); margin-bottom: 0; + + @include media('>m') { + font-size: ko-font-size(m); + } } -// Only give these headings a margin-top if they are after other elements +// Only give headings a margin-top if they are after other elements * + h1, -* + .h1, -* + .alpha, * + h2, -* + .h2, -* + .beta, * + h3, -* + .h3, -* + .gamma, * + h4, -* + .h4, -* + .delta { +* + h5, +* + h6 { margin-top: $baseline; } +/** + * 🚨 font-size helper classes + * See https://github.com/TryKickoff/kickoff-utils.scss#_type-sizesscss + * for more info + * + * Usage: + * @include ko-type-sizes(); + * @include ko-type-sizes($type, (h1: 50px, h2: 35px, h3: l, h4: m)); + * + * Uncomment the line below to include + */ +// @include ko-type-sizes(); + small { font-size: 80%; } @@ -157,55 +154,6 @@ abbr[title] { cursor: help; } -/** - * Blockquotes - */ -blockquote { - padding-left: 10px; - margin: $baseline; - border-left: 4px solid lighten(#000, 80%); - - p { - margin-bottom: 0; - @include ko-font-size(base); - font-weight: 300; - } - - small { - display: block; - color: lighten(#000, 70%); - - &::before { - content: '\2014 \00A0'; - } - } -} - -// Quotes -q, -blockquote { - &::before, - &::after { - content: ""; - } -} - -cite { - font-style: normal; -} - -// Addresses styling not present in S5, Chrome -dfn { - font-style: italic; -} - -// Addresses styling not present in IE6/7/8/9 -mark { - background: $yellow; - padding: 2px 4px; - border-radius: 3px; -} - // Prevents sub and sup affecting line-height in all browsers // gist.github.com/413930 sub, @@ -218,38 +166,14 @@ sup { sup { top: -0.5em; } sub { bottom: -0.25em; } -samp { font-family: $font-family-mono; } - - -/** - * Utilities - */ -.text-centre, // British or US English spellings.. -.text-center { - text-align: center; -} - -.text-left { - text-align: left; -} - -.text-right { - text-align: right; -} +samp { font-family: ko-font(mono); } @include ko-text-selection($color-selection, $color-selection-bg); // Horizontal rules hr { - margin: ($baseline) 0; + margin: $baseline 0; border: 0; height: 1px; - background-color: $hr-color; -} - -// https://justmarkup.com/log/2015/07/dealing-with-long-words-in-css/ -.hyphenate { - overflow-wrap: break-word; - word-wrap: break-word; - hyphens: auto; + background-color: ko-color(dark); } diff --git a/assets/src/scss/_variables.scss b/assets/src/scss/_variables.scss index ffe4f282..5aeb4868 100644 --- a/assets/src/scss/_variables.scss +++ b/assets/src/scss/_variables.scss @@ -3,56 +3,72 @@ * ================================= * - Typography * - Breakpoints - * - Paths * - Layout & Grid * - App-specific */ -/* stylelint-disable indentation */ +// stylelint-disable indentation /** * Typography * ================================= * - * Base sizes: - * Set this in pixels (but do not add px), - * the font-size mixin will convert to REMS + * 🚨 If you change the $font-size-base value, you will also need + * to update the pxtorem `rootValue` in `.kickoff/css.js` */ -$font-size-base : 20; -$font-size-base-px : $font-size-base * 1px; -$font-size-base-narrow : $font-size-base - 2; -$font-size-base-narrow-px : $font-size-base-narrow * 1px; +$font-size-base: 20px; // 🚨 Read above if you change this +$leading-base: 1.4; +$baseline: round($font-size-base * $leading-base); // 20 * 1.4 -$leading-base : 1.4; -$line-height-base : round($font-size-base * $leading-base); // 20 * 1.4 -$baseline : $line-height-base * 1px; - -$type-scale : 1.25; // Major third +$modularscale: ( // From https://github.com/modularscale/modularscale-sass/ + base: 20px 25px, + ratio: 1.5 // 1.25 === Major third. See modularscale.com +); +/** + * Type sizes $map + * ================================= + * Kickoff's type is set using sizes defined in this + * Sass map. They are set using a modular scale by + * default, but values can be changed to px, rem etc if needed + * + * Usage: + * font-size: ko-font-size(base); + * font-size: ko-font-size(xl); + * + * Use the ms() function if you want to size fonts + * indepently using the modular scale. See + * https://github.com/modularscale/modularscale-sass for more info + */ $type: ( - micro : ko-ms(-2), - small : ko-ms(-1), // h5, h6 - base : ko-ms(0), // p, h4 - mid : ko-ms(1), // h3 - large : ko-ms(2), // h2 - jumbo : ko-ms(3) // h1 + xs: ms(-2), + s: ms(-1), + base: ms(0), // [default] p, h5, h6 + m: ms(1), // h4 + l: ms(2), // h3 + xl: ms(3), // h2 + xxl: ms(4) // h1 ); -// Useful to set here when bold webfonts come as 400 font-weight. -$font-weight-bold : bold; - -// Font stacks -$font-family-system : -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; -$font-family-sans : "Helvetica Neue", Helvetica, Arial, sans-serif; -$font-family-serif : Georgia, "Times New Roman", Times, serif; -$font-family-mono : Menlo, Monaco, "Courier New", monospace; - -$font-family-base : $font-family-system; -$font-family-alt : $font-family-serif; +/** + * Font stacks + * ================================= + * + * Usage: ko-font(system), ko-font(sans) + */ +$font-family: ( + system: #{-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans"}, + sans: #{"Helvetica Neue", Helvetica, Arial, sans-serif}, + serif: #{Georgia, "Times New Roman", Times, serif}, + mono: #{Menlo, Monaco, "Courier New", monospace} +); -$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; +$font-family-base: ko-font(system); +$font-family-headings: ko-font(serif); +$line-height-headings: 1.1; +$font-weight-normal: 300; // Useful to set here if using anything other than `normal` +$font-weight-bold: bold; // Useful to set here when bold webfonts come as 400 font-weight. +$font-weight-headings: bold; // instead of browser default, bold /** @@ -62,21 +78,22 @@ $line-height-headings : 1.1; * You'll need to define your own breakpoints to suit your design * Add your breakpoints to this Sass map * Used in the Kickoff grid + * Usage: ko-bp(100) */ $breakpoints: ( - narrow : 400px, - mid : 750px, - wide : 1000px, - huge : 1250px + s: 400px, + m: 750px, + l: 1000px, + xl: 1250px ); // Setup layout max-width -$layout-margin : 0; // [in pixels] Space outside the grid -$layout-max-width : 1000; // [in pixels] -$layout-min-width : 960; // [in pixels] Minimum width for layout in */ -.l-list--centred, .l-list--centered { +.l-list--centred, +.l-list--centered { text-align: center; li { @@ -97,7 +100,7 @@ dd { margin-left: $baseline; } @include ko-clearfix; li { - float: left; + // float: left; display: inline-block; } } diff --git a/assets/src/scss/components/_quotes.scss b/assets/src/scss/components/_quotes.scss new file mode 100644 index 00000000..6630fa83 --- /dev/null +++ b/assets/src/scss/components/_quotes.scss @@ -0,0 +1,39 @@ +/** + * Blockquotes + * ===================== + * + * Usage: +
+

Quoted text

+ Citation +
+ */ +blockquote { + padding-left: 10px; + margin: $baseline; + border-left: 4px solid ko-color(text, light); + + p { + margin-bottom: 0; + font-size: ko-font-size(m); + font-weight: 300; + } + + small { + display: block; + color: ko-color(text, light); + + &::before { + content: '\2014 \00A0'; + } + } +} + +// Remove quotation marks if something else is adding them +q, +blockquote { + &::before, + &::after { + content: ""; + } +} diff --git a/assets/src/scss/components/_scrollbars.scss b/assets/src/scss/components/_scrollbars.scss deleted file mode 100644 index bf2eb99b..00000000 --- a/assets/src/scss/components/_scrollbars.scss +++ /dev/null @@ -1,15 +0,0 @@ -/** - * Scrollbar styling (only in webkit) - * ================================= - */ - -::-webkit-scrollbar { - width: 10px; - height: 10px; - background-color: darken($color-bg, 10%); -} - -::-webkit-scrollbar-thumb { - background: darken($color-bg, 40%); - cursor: pointer; -} diff --git a/assets/src/scss/components/_tables.scss b/assets/src/scss/components/_tables.scss index 6df4605f..77943524 100644 --- a/assets/src/scss/components/_tables.scss +++ b/assets/src/scss/components/_tables.scss @@ -11,15 +11,15 @@ /** * Define associated Table variables */ -$table-bgColor : $color-bg !default; // Default background color used for all tables. -$table-bgColor--accent : #f9f9f9 !default; // Background color used for `.table-striped`. -$table-bgColor--hover : inherit !default; // Background color used for `.table-hover` – set to 'inherit' by default (so no hover effect) -$table-borderColor : #ccc !default; // Border color for table and cell borders. +$table-bgColor: ko-color(background) !default; // Default background color used for all tables. +$table-bgColor--accent: #f9f9f9 !default; // Background color used for `.table-striped`. +$table-bgColor--hover: inherit !default; // Background color used for `.table-hover` – set to 'inherit' by default (so no hover effect) +$table-borderColor: #ccc !default; // Border color for table and cell borders. /** * Customizes the `.table` component with basic values, each used across all table variations. */ -$table-cell-padding : 8px !default; // Padding for ``s and ``s. +$table-cell-padding: 8px !default; // Padding for ``s and ``s. // Baseline styles @@ -83,7 +83,7 @@ table { // Nesting & table, & .table { - background-color: $color-bg; + background-color: ko-color(background); } } @@ -112,9 +112,9 @@ th { * https://github.com/filamentgroup/tablesaw */ .responsiveTable { - @include media('mid') { +@include media('>m') { /** * Horizontal-specific styles * ================================= diff --git a/assets/src/scss/components/forms/_forms-custom-radioscheckboxes.scss b/assets/src/scss/components/forms/_forms-custom-radioscheckboxes.scss index 6cab92ef..2b4e96f6 100644 --- a/assets/src/scss/components/forms/_forms-custom-radioscheckboxes.scss +++ b/assets/src/scss/components/forms/_forms-custom-radioscheckboxes.scss @@ -24,13 +24,12 @@ * * * ================================= */ -// $custom-input-color: $color-primary; -$custom-input-color: $color-primary; -$custom-input-selected-color: $color-bg; +$custom-input-color: ko-color(primary); +$custom-input-selected-color: ko-color(background); $custom-input-length: 1.3em; $custom-input-border-width: 1px; $custom-input-borderColor: #ccc !default; -$custom-input-borderColor--focus: $color-primary !default; +$custom-input-borderColor--focus: ko-color(primary) !default; $checkbox-indicator-width: 0.1em; .control--custom { @@ -73,7 +72,7 @@ $checkbox-indicator-width: 0.1em; // :focus styles .control--custom-input:focus ~ .control-indicator { - box-shadow: 0 0 0 2px $color-bg, 0 0 0 3px $custom-input-borderColor--focus; + box-shadow: 0 0 0 2px ko-color(background), 0 0 0 3px $custom-input-borderColor--focus; } // Checkbox modifiers diff --git a/assets/src/scss/components/forms/_forms-custom-select.scss b/assets/src/scss/components/forms/_forms-custom-select.scss index 25b41bc1..33be5550 100644 --- a/assets/src/scss/components/forms/_forms-custom-select.scss +++ b/assets/src/scss/components/forms/_forms-custom-select.scss @@ -22,7 +22,7 @@ /* Custom arrow sits on top of the select - could be an image, SVG, icon font, etc. or the arrow could just baked into the bg image on the select */ &:after { - color: $color-primary; + color: ko-color(primary); content: "\25BC"; font-size: .7em; padding: 0; diff --git a/assets/src/scss/components/forms/_forms.scss b/assets/src/scss/components/forms/_forms.scss index 1abbf9fc..1a4ca969 100644 --- a/assets/src/scss/components/forms/_forms.scss +++ b/assets/src/scss/components/forms/_forms.scss @@ -199,7 +199,7 @@ input[type="submit"] { line-height: 1; & + & { - margin-top: ko-multiply($baseline, 0.5); + margin-top: ko-multiply(0.5); } input { diff --git a/assets/src/scss/styleguide/_swatch.scss b/assets/src/scss/components/styleguide/_swatch.scss similarity index 56% rename from assets/src/scss/styleguide/_swatch.scss rename to assets/src/scss/components/styleguide/_swatch.scss index fceba73e..169dfb28 100644 --- a/assets/src/scss/styleguide/_swatch.scss +++ b/assets/src/scss/components/styleguide/_swatch.scss @@ -2,7 +2,7 @@ * Colour swatches */ .sg-swatch { - border: 1px solid rgba(#000, .2); + border: 1px solid rgba(ko-color(dark), 0.2); border-radius: 4px; padding: 15px; margin: 15px; @@ -11,7 +11,7 @@ cursor: pointer; &:hover { - border-color: rgba(#000, .6); + border-color: rgba(ko-color(dark), 0.6); } &.is-active { @@ -20,7 +20,7 @@ } @keyframes sgSwatch { - 50% { opacity: .3; } + 50% { opacity: 0.3; } } .sg-swatch-color { @@ -34,7 +34,7 @@ .sg-swatch-text { font-weight: bold; - @include ko-font-size(60); + font-size: 60px; line-height: 1; display: inline-block; vertical-align: middle; @@ -43,7 +43,7 @@ .sg-swatch-var { width: 100%; - font-family: $font-family-mono; + font-family: ko-font(mono); margin-top: 15px; font-size: 12px; display: block; @@ -61,34 +61,18 @@ } .sg-swatch-var { - &:after { + &::after { content: '#{$color}'; display: block; } } } -.sg-color-link-hover { - @include ko-swatch($color-link-hover); -} -.sg-color-primary { - @include ko-swatch($color-primary); -} -.sg-color-secondary { - @include ko-swatch($color-secondary); -} -.sg-color-highlight { - @include ko-swatch($color-highlight); -} -.sg-color-text { - @include ko-swatch($color-text, $color-bg); -} -.sg-color-background { - @include ko-swatch($color-bg); -} -.sg-color-border { - @include ko-swatch($color-border); -} -.sg-color-link { - @include ko-swatch($color-link-default); -} +.sg-color-bright { @include ko-swatch(ko-color(bright)); } +.sg-color-dark { @include ko-swatch(ko-color(dark)); } +.sg-color-primary { @include ko-swatch(ko-color(primary)); } +.sg-color-secondary { @include ko-swatch(ko-color(secondary)); } +.sg-color-text { @include ko-swatch(ko-color(text)); } +.sg-color-background { @include ko-swatch(ko-color(background)); } +.sg-color-link { @include ko-swatch(ko-color(link)); } +.sg-color-link-over { @include ko-swatch(ko-color(link, over)); } diff --git a/assets/src/scss/components/styleguide/_vars.scss b/assets/src/scss/components/styleguide/_vars.scss new file mode 100644 index 00000000..934fce7c --- /dev/null +++ b/assets/src/scss/components/styleguide/_vars.scss @@ -0,0 +1,37 @@ +@mixin ko-sgVar($var) { + line-height: 2; + font-family: ko-font(mono); + border-bottom: 1px solid rgba(#000, 0.1); + font-size: 12px; + + strong { + opacity: 0.6; + text-transform: uppercase; + display: block; + user-select: none; + } + + &::after { + content: '#{$var}'; + } +} + +.sg-var-item { + color: ko-color(secondary); + margin-right: 10px; + display: inline-block; +} + +.sg-var--baseFontSize { @include ko-sgVar($font-size-base); } +.sg-var--leadingBase { @include ko-sgVar($leading-base); } +.sg-var--baseline { @include ko-sgVar($baseline); } +.sg-var--modularscale { @include ko-sgVar($modularscale); } +.sg-var--fontFamilyMono { @include ko-sgVar(ko-font(mono)); } +.sg-var--fontFamilySystem { @include ko-sgVar(ko-font(system)); } +.sg-var--fontFamilySans { @include ko-sgVar(ko-font(sans)); } +.sg-var--fontFamilySerif { @include ko-sgVar(ko-font(serif)); } +.sg-var--breakpoints { @include ko-sgVar($breakpoints); } +.sg-var--layoutWidth { @include ko-sgVar($layout-max-width); } +.sg-var--gridColumns { @include ko-sgVar($grid-column-count); } +.sg-var--gridGutter { @include ko-sgVar($grid-gutter-width); } +.sg-var--zindex { @include ko-sgVar($z-index); } diff --git a/assets/src/scss/kickoff.scss b/assets/src/scss/kickoff.scss index 084b0f76..736a06f6 100644 --- a/assets/src/scss/kickoff.scss +++ b/assets/src/scss/kickoff.scss @@ -36,7 +36,7 @@ /* * Mixins, helpers and functions */ -@import "kickoff-utils"; // From github.com/mrmartineau/kickoff-utils.scss +@import "kickoff-utils"; // From github.com/TryKickoff/kickoff-utils.scss @import "include-media"; // From include-media.com @@ -75,10 +75,10 @@ @import "components/lists"; @import "components/embedded-content"; // images etc @import "components/icons"; +@import "components/quotes"; @import "components/skip-navigation"; @import "components/code"; @import "components/tables"; -// @import "components/scrollbars"; // yo:start -- component // yo:end -- component diff --git a/assets/src/scss/styleguide.scss b/assets/src/scss/styleguide.scss index eaa0f49d..d9cd810d 100644 --- a/assets/src/scss/styleguide.scss +++ b/assets/src/scss/styleguide.scss @@ -8,10 +8,11 @@ @import "variables"; @import "kickoff-grid"; // https://github.com/mrmartineau/kickoff-grid.css -$styleguide-color-primary: $color-primary; -$styleguide-type: $font-family-system; +$styleguide-color-primary: ko-color(primary); +$styleguide-type: ko-font(system); -@import "styleguide/swatch"; +@import "components/styleguide/swatch"; +@import "components/styleguide/vars"; /** * Styleguide styles @@ -66,8 +67,8 @@ body { color: #fff; padding: 30px; margin-top: 30px; - font-family: $font-family-mono; - @include ko-font-size(12); + font-family: ko-font(mono); + font-size: 12px; h1 { margin-bottom: 0.2em; @@ -96,11 +97,13 @@ body { .sg-logo { padding: 1em; text-align: center; - color: $color-primary; + color: ko-color(primary); + fill: ko-color(dark, lighter); &--dark { - background-color: #000; + background-color: ko-color(dark); color: #fff; + fill: ko-color(secondary); } svg { @@ -120,7 +123,7 @@ body { code { border: 0; background-color: transparent; - @include ko-font-size(12); + font-size: 12px; } [data-copy] { @@ -128,35 +131,31 @@ code { &:hover, &:active { - opacity: 0.5; + opacity: 0.8; } } @mixin ko-sgTypeTest($size) { .sg-type-item { - @include ko-font-size($size); + font-size: ko-font-size($size); &::after { - content: 'Name: #{$size} // Size: #{ko-getValue($size, $type)}px // Use: @include ko-font-size(#{$size}) '; - @include ko-font-size(micro); + content: '* #{$size} = #{ko-font-size($size)} | font-size: ko-font-size(#{$size})'; + font-size: 12px; display: block; font-weight: normal; - font-family: $font-family-mono; + font-family: ko-font(mono); opacity: 0.6; } } } - -.sg-type-micro { @include ko-sgTypeTest(micro); } -.sg-type-smallest { @include ko-sgTypeTest(smallest); } -.sg-type-smaller { @include ko-sgTypeTest(smaller); } -.sg-type-small { @include ko-sgTypeTest(small); } -.sg-type-base { @include ko-sgTypeTest(base); } -.sg-type-mid { @include ko-sgTypeTest(mid); } -.sg-type-large { @include ko-sgTypeTest(large); } -.sg-type-largest { @include ko-sgTypeTest(largest); } -.sg-type-jumbo { @include ko-sgTypeTest(jumbo); } +.sg-type-xs { @include ko-sgTypeTest(xs); } +.sg-type-s { @include ko-sgTypeTest(s); } +.sg-type-m { @include ko-sgTypeTest(m); } +.sg-type-l { @include ko-sgTypeTest(l); } +.sg-type-xl { @include ko-sgTypeTest(xl); } +.sg-type-xxl { @include ko-sgTypeTest(xxl); } .sg-typeSpecimen { margin-bottom: 0; @@ -168,28 +167,29 @@ code { display: block; @extend .sg-interfaceType; @extend .sg-interfaceType--subtle; - @include ko-font-size(16); + font-size: ko-font-size(m); margin-top: 5px; border-top: 1px solid #ddd; font-weight: normal; } } -// h1.typeSpecimen::after { content: "Font stack: #{$font-family-headings}"; } -// p.typeSpecimen::after { content: "Font stack: #{$font-family-base}"; } +// h1.typeSpecimen::after { content: "Font stack: #{ko-font(headings)}"; } +// p.typeSpecimen::after { content: "Font stack: #{ko-font(base)}"; } -.sg-typeSpecimen--primary { - @include ko-font-size(30); +.sg-typeSpecimen--body { + font-size: 30px; font-family: $font-family-base; + font-weight: 200; } -.sg-typeSpecimen--secondary { - @include ko-font-size(30); - font-family: $font-family-alt; +.sg-typeSpecimen--headings { + font-size: 30px; + font-family: $font-family-headings; } .sg-typeSpecimen--giant { - @include ko-font-size(120); + font-size: 120px; line-height: 1; } @@ -217,83 +217,10 @@ code { .sg-hr { height: 3px; - margin: ($baseline * 2) 0; + margin: ko-multiply(2) 0; } .sg-hr--subtle { height: 3px; - background-color: fade-out($hr-color, 0.6); -} - -@mixin ko-sgVar($var) { - line-height: 2; - font-family: $font-family-mono; - border-bottom: 1px solid rgba(#000, 0.1); - @include ko-font-size(12); - - strong { - opacity: 0.6; - text-transform: uppercase; - display: block; - user-select: none; - - @include media('>mid') { - width: 20%; - display: inline-block; - } - } - - &::after { - content: '#{$var}'; - } -} - -.sg-var-item { - color: $color-secondary; - margin-right: 10px; - display: inline-block; -} - -.sg-var--baseFontSize { - @include ko-sgVar($font-size-base); -} - -.sg-var--leadingBase { - @include ko-sgVar($leading-base); -} - -.sg-var--typeScale { - @include ko-sgVar($type-scale); -} - -.sg-var--fontFamilyMono { - @include ko-sgVar($font-family-mono); -} - -.sg-var--fontFamilySystem { - @include ko-sgVar($font-family-system); -} - -.sg-var--fontFamilySans { - @include ko-sgVar($font-family-sans); -} - -.sg-var--fontFamilySerif { - @include ko-sgVar($font-family-serif); -} - -.sg-var--breakpoints { - @include ko-sgVar($breakpoints); -} - -.sg-var--layoutWidth { - @include ko-sgVar($layout-max-width); -} - -.sg-var--gridColumns { - @include ko-sgVar($grid-column-count); -} - -.sg-var--gridGutter { - @include ko-sgVar($grid-gutter-width); + background-color: fade-out(ko-color(dark, light), 0.6); } diff --git a/package.json b/package.json index bb57eae7..107b95a2 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,6 @@ "description": "A lightweight front-end framework for creating scalable, responsive websites", "version": "8.0.0", "homepage": "http://trykickoff.com", - "repo": "https://github.com/TryKickoff/kickoff/", "authors": [ { "name": "Zander Martineau", @@ -31,6 +30,7 @@ "compile:release": "gulp compile --release", "compile:all": "gulp compile", "compile:css": "gulp css", + "compile:css:debug": "DEBUG=* gulp css", "compile:js": "gulp javascript", "compile:svg": "gulp svg", "compress:images": "gulp images", @@ -39,15 +39,12 @@ "copy": "gulp copy", "lint:js": "xo", "lint:css": "gulp test:css", - "fix:js": "xo --fix", - "release-patch": "release-it --non-interactive patch", - "release-minor": "release-it --non-interactive minor", - "release-major": "release-it --non-interactive major", - "release-premajor": "release-it premajor --prereleaseId=\"beta\"" + "fix:js": "xo --fix" }, "repository": { "type": "git", - "url": "git://github.com/TryKickoff/kickoff.git" + "url": "git://github.com/TryKickoff/kickoff.git", + "page": "https://github.com/TryKickoff/kickoff/" }, "bugs": { "url": "https://github.com/TryKickoff/kickoff/issues" @@ -57,25 +54,26 @@ "node": ">=6.0" }, "dependencies": { + "@kickoff/utils.scss": "3.0.1", "console": "0.5.2", "copy-js": "0.1.1", "double-dollar": "1.0.0", "include-media": "1.4.9", "kickoff-fluidVideo.css": "1.1.0", "kickoff-grid.css": "1.1.2", - "kickoff-utils.scss": "2.0.3", "kickoff-welcome.js": "1.4.0", "lite-ready": "1.0.4", - "normalize-scss": "6.0.0", + "normalize-scss": "^7.0.0", + "postcss-pxtorem": "^4.0.1", "svg4everybody": "2.1.8" }, "devDependencies": { - "autoprefixer": "6.7.7", + "autoprefixer": "^7.1.1", "babel-core": "6.24.1", "babel-loader": "7.0.0", "babel-plugin-transform-object-assign": "6.22.0", "babel-preset-es2015": "6.24.1", - "browser-sync": "2.18.8", + "browser-sync": "^2.18.11", "case-sensitive-paths-webpack-plugin": "2.0.0", "cssnano": "3.10.0", "del": "2.2.2", @@ -84,21 +82,20 @@ "gulp": "3.9.1", "gulp-banner": "0.1.3", "gulp-imagemin": "3.2.0", - "gulp-postcss": "6.4.0", + "gulp-postcss": "^7.0.0", "gulp-sass": "3.1.0", - "gulp-sourcemaps": "^2.4.1", + "gulp-sourcemaps": "^2.6.0", "gulp-stylelint": "3.9.0", - "gulp-svgmin": "1.2.3", + "gulp-svgmin": "^1.2.4", "gulp-svgstore": "6.1.0", "gulp-tap": "1.0.1", "gulp-util": "3.0.8", "imagemin-pngquant": "5.0.0", "opn": "5.0.0", - "postcss-flexbugs-fixes": "2.1.1", - "release-it": "^2.5.4", + "postcss-flexbugs-fixes": "^3.0.0", "stylelint": "7.10.1", "stylelint-config-standard": "16.0.0", - "webpack": "2.5.0", + "webpack": "^2.5.1", "xo": "0.19.0" }, "keywords": [ diff --git a/readme.md b/readme.md index 90f711b1..c2931d89 100644 --- a/readme.md +++ b/readme.md @@ -2,7 +2,10 @@ > A lightweight front-end framework for creating scalable and performant, responsive sites -[![devDependency Status](https://david-dm.org/trykickoff/kickoff/dev-status.png)](https://david-dm.org/trykickoff/kickoff#info=devDependencies) [![Build status](https://ci.appveyor.com/api/projects/status/g699smb2tsoakc8k/branch/master?svg=true)](https://ci.appveyor.com/project/mrmartineau/kickoff/branch/master) [![Dependency Status](https://dependencyci.com/github/TryKickoff/kickoff/badge)](https://dependencyci.com/github/TryKickoff/kickoff) [![XO code style](https://img.shields.io/badge/code_style-XO-5ed9c7.svg)](https://github.com/sindresorhus/xo) [![bitHound Overall Score](https://www.bithound.io/github/TryKickoff/kickoff/badges/score.svg)](https://www.bithound.io/github/TryKickoff/kickoff) +[![npm version](https://img.shields.io/npm/v/@kickoff/utils.scss.svg?style=flat-square)](https://www.npmjs.com/package/@kickoff/utils.scss) +![](https://img.shields.io/badge/css-.scss-ff69b4.svg?style=flat-square) ![](https://img.shields.io/badge/javascript-ES6-ffb400.svg?style=flat-square) [![XO code style](https://img.shields.io/badge/code_style-XO-5ed9c7.svg?style=flat-square)](https://github.com/sindresorhus/xo) +[![Build status](https://ci.appveyor.com/api/projects/status/g699smb2tsoakc8k?svg=true)](https://ci.appveyor.com/project/mrmartineau/kickoff) +[![devDependency Status](https://david-dm.org/trykickoff/kickoff/dev-status.svg)](https://david-dm.org/trykickoff/kickoff#info=devDependencies) [![Dependency Status](https://dependencyci.com/github/TryKickoff/kickoff/badge)](https://dependencyci.com/github/TryKickoff/kickoff) [![bitHound Overall Score](https://www.bithound.io/github/TryKickoff/kickoff/badges/score.svg)](https://www.bithound.io/github/TryKickoff/kickoff) Developed and maintained by [Ashley Nolan](https://github.com/ashleynolan) & [Zander Martineau](https://github.com/mrmartineau) diff --git a/styleguide/index.html b/styleguide/index.html index a0e41c9c..92146bac 100644 --- a/styleguide/index.html +++ b/styleguide/index.html @@ -37,7 +37,7 @@

Styleguide

Logo

-
+
+
+ +

Swatches

-
-
-
+
+
+
Aa
-
$color-primary
+
ko-color(primary)
-
-
+
+
Aa
-
$color-secondary
+
ko-color(secondary)
-
-
+
+
Aa
-
$color-highlight
+
ko-color(text)
-
-
+
+
Aa
-
$color-text
+
ko-color(background)
-
-
+
+
-
-
+
+
-
-