From 2c80c1e0b93d61dd798835c25ea79447870a83cd Mon Sep 17 00:00:00 2001 From: Antoine Boulanger Date: Thu, 2 Oct 2014 13:27:43 -0400 Subject: [PATCH 1/3] fix conflicts --- project-x/Gruntfile.js | 6 +- project-x/assets/styles/dist/main.css | 430 ++++++++---------- project-x/assets/styles/src/_import.scss | 11 +- project-x/assets/styles/src/base/_base.scss | 8 +- project-x/assets/styles/src/base/_forms.scss | 41 +- project-x/assets/styles/src/base/_grid.scss | 6 +- .../assets/styles/src/base/_headings.scss | 12 +- project-x/package.json | 4 +- 8 files changed, 247 insertions(+), 271 deletions(-) diff --git a/project-x/Gruntfile.js b/project-x/Gruntfile.js index 74e68ab..b7dfcf4 100644 --- a/project-x/Gruntfile.js +++ b/project-x/Gruntfile.js @@ -1,7 +1,6 @@ module.exports = function(grunt) { 'use strict'; - // Load Grunt tasks from NPM packages - // Project configuration. + grunt.initConfig({ pkg: grunt.file.readJSON( 'package.json' ), @@ -30,7 +29,6 @@ module.exports = function(grunt) { dest: 'assets/styles/src/' } }, - autoprefixer: { build: { options: { @@ -101,7 +99,7 @@ module.exports = function(grunt) { grunt.registerTask('default', ['watch']); - grunt.registerTask('build', ['uglify']); + grunt.registerTask('build', ['uglify', 'imagemin']); grunt.registerTask('c', ['csscomb']); grunt.registerTask('s', ['sass']); diff --git a/project-x/assets/styles/dist/main.css b/project-x/assets/styles/dist/main.css index 71404f0..48def36 100644 --- a/project-x/assets/styles/dist/main.css +++ b/project-x/assets/styles/dist/main.css @@ -21,102 +21,6 @@ ========================================================================== */ /* Transitions ========================================================================== */ -/* ========================================================================== - Functions - ========================================================================== */ -/* ========================================================================== - Mixins - ========================================================================== */ -/* ========================================================================== - Helpers - ========================================================================== */ -.clearfix:before, -.clearfix:after { - content: " "; - display: table; } - -.clearfix:after { - clear: both; } - -.center-vertically { - text-align: center; - height: 100%; } - .center-vertically:before { - content: ""; - display: inline-block; - height: 100%; - vertical-align: middle; } - .center-vertically > * { - display: inline-block; - vertical-align: middle; } - -/* ========================================================================== - Trumps - ========================================================================== */ -.left { - float: left !important; } - -.right { - float: right !important; } - -.align-left { - text-align: left !important; } - -.align-right { - text-align: right !important; } - -.align-center { - text-align: center !important; } - -.is-visible { - visibility: visible !important; - opacity: 1 !important; } - -.is-hidden { - visibility: hidden !important; - opacity: 0 !important; } - -/* Accessibility - ========================================================================== */ -/* - * Hide visually and from screen readers: h5bp.com/u - */ -.hidden { - display: none !important; - visibility: hidden; } - -/* - * Hide only visually, but have it available for screen readers: h5bp.com/v - */ -.visuallyhidden { - border: 0; - clip: rect(0 0 0 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - width: 1px; } - -/* - * Extends the .visuallyhidden class to allow the element to be focusable - * when navigated to via the keyboard: h5bp.com/p - */ -.visuallyhidden.focusable:active, -.visuallyhidden.focusable:focus { - clip: auto; - height: auto; - margin: 0; - overflow: visible; - position: static; - width: auto; } - -/* - * Hide visually and from screen readers, but maintain layout - */ -.invisible { - visibility: hidden; } - /*! normalize.css v3.0.1 | MIT License | git.io/normalize */ /** * 1. Set default font family to sans-serif. @@ -126,9 +30,9 @@ html { font-family: sans-serif; /* 1 */ - -ms-text-size-adjust: 100%; - /* 2 */ -webkit-text-size-adjust: 100%; + /* 2 */ + -ms-text-size-adjust: 100%; /* 2 */ } /** @@ -144,28 +48,14 @@ body { * 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, -nav, -section, -summary { +article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: 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 { +audio, canvas, progress, video { display: inline-block; /* 1 */ vertical-align: baseline; @@ -183,8 +73,7 @@ audio:not([controls]) { * Address `[hidden]` styling not present in IE 8/9/10. * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. */ -[hidden], -template { +[hidden], template { display: none; } /* Links @@ -198,8 +87,7 @@ a { /** * Improve readability when focused and also mouse hovered in all browsers. */ -a:active, -a:hover { +a:active, a:hover { outline: 0; } /* Text-level semantics @@ -213,8 +101,7 @@ abbr[title] { /** * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. */ -b, -strong { +b, strong { font-weight: bold; } /** @@ -235,8 +122,8 @@ h1 { * Address styling not present in IE 8/9. */ mark { - background: #ff0; - color: #000; } + color: #000000; + background: #FFFF00; } /** * Address inconsistent and variable font size in all browsers. @@ -247,8 +134,7 @@ small { /** * Prevent `sub` and `sup` affecting `line-height` in all browsers. */ -sub, -sup { +sub, sup { font-size: 75%; line-height: 0; position: relative; @@ -298,10 +184,7 @@ pre { /** * Address odd `em`-unit font size rendering in all browsers. */ -code, -kbd, -pre, -samp { +code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; } @@ -317,17 +200,13 @@ samp { * 2. Correct font properties not being inherited. * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. */ -button, -input, -optgroup, -select, -textarea { - color: inherit; - /* 1 */ +button, input, optgroup, select, textarea { font: inherit; /* 2 */ margin: 0; - /* 3 */ } + /* 3 */ + color: inherit; + /* 1 */ } /** * Address `overflow` set to `hidden` in IE 8/9/10/11. @@ -341,8 +220,7 @@ button { * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. * Correct `select` style inheritance in Firefox. */ -button, -select { +button, select { text-transform: none; } /** @@ -352,29 +230,24 @@ select { * 3. Improve usability and consistency of cursor style between image-type * `input` and others. */ -button, -html input[type="button"], -input[type="reset"], -input[type="submit"] { - -webkit-appearance: button; - /* 2 */ +button, html input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; - /* 3 */ } + /* 3 */ + -webkit-appearance: button; + /* 2 */ } /** * Re-set default cursor for disabled elements. */ -button[disabled], -html input[disabled] { +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; } +button::-moz-focus-inner, input::-moz-focus-inner { + padding: 0; + border: 0; } /** * Address Firefox 4+ setting `line-height` on `input` using `!important` in @@ -390,8 +263,7 @@ input { * 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"] { +input[type="checkbox"], input[type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; @@ -402,8 +274,7 @@ input[type="radio"] { * `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 { +input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; } /** @@ -412,37 +283,36 @@ input[type="number"]::-webkit-outer-spin-button { * (include `-moz` to future-proof). */ input[type="search"] { - -webkit-appearance: textfield; - /* 1 */ /* 2 */ - box-sizing: content-box; } + box-sizing: content-box; + -webkit-appearance: textfield; + /* 1 */ } /** * 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 { +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; } + padding: 0.35em 0.625em 0.75em; + border: 1px solid #C0C0C0; } /** * 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 */ } + /* 2 */ + border: 0; + /* 1 */ } /** * Remove default vertical scrollbar in IE 8/9/10/11. @@ -463,11 +333,10 @@ optgroup { * Remove most spacing between table cells. */ table { - border-collapse: collapse; - border-spacing: 0; } + border-spacing: 0; + border-collapse: collapse; } -td, -th { +td, th { padding: 0; } /* ========================================================================== @@ -480,6 +349,9 @@ th { box-sizing: inherit; } html { + font-family: sans-serif; + font-size: 16px; + line-height: 1.4; box-sizing: border-box; font-size: 16px; font-family: sans-serif; @@ -487,37 +359,84 @@ html { color: #222222; } ::-moz-selection { - background: #b3d4fc; + background: #B3D4FC; text-shadow: none; } ::selection { - background: #b3d4fc; + background: #B3D4FC; text-shadow: none; } hr { display: block; height: 1px; - border: 0; - border-top: 1px solid #ccc; margin: 1em 0; - padding: 0; } + padding: 0; + border: 0; + border-top: 1px solid #CCCCCC; } img, svg { - vertical-align: middle; - max-width: 100%; } + max-width: 100%; + vertical-align: middle; } textarea { resize: vertical; } a { - color: #1a0dab; } + color: #1A0DAB; } a:hover { - color: #13097c; } + color: #11097c; } .container { position: relative; margin: 0 auto; } +/* ========================================================================== + Grid + ========================================================================== */ +.grid { + font-size: 0; + position: relative; + margin-left: -20px; } + +.grid--full { + margin-left: 0; } + .grid--full .grid__item, .grid--full .whole, .grid--full .half, .grid--full .third, .grid--full .two-thirds, .grid--full .quarter, .grid--full .fifth { + margin-bottom: 0; + padding-left: 0; } + +.grid__item, .whole, .half, .third, .two-thirds, .quarter, .fifth { + display: inline-block; + width: 100%; + margin-bottom: 20px; + padding-left: 20px; + vertical-align: top; } + +@media (min-width: 1024px) { + .half { + width: 50%; } } + +@media (min-width: 1024px) { + .third { + width: span(0.33333); } } + +@media (min-width: 1024px) { + .two-thirds { + width: span(0.66667); } } + +@media (min-width: 768px) { + .quarter { + width: 50%; } } +@media (min-width: 1024px) { + .quarter { + width: span(0.25); } } + +@media (min-width: 768px) { + .fifth { + width: 50%; } } +@media (min-width: 1024px) { + .fifth { + width: span(0.2); } } + /* ========================================================================== Headings ========================================================================== */ @@ -552,65 +471,18 @@ h6, .h6, .zeta { margin-top: 0; } /* ========================================================================== - Grid - ========================================================================== */ -.grid { - position: relative; - margin-left: -20px; - font-size: 0; } - -.grid--full { - margin-left: 0; } - .grid--full .grid__item, .grid--full .whole, .grid--full .half, .grid--full .third, .grid--full .two-thirds, .grid--full .quarter, .grid--full .fifth { - padding-left: 0; - margin-bottom: 0; } - -.grid__item, .whole, .half, .third, .two-thirds, .quarter, .fifth { - display: inline-block; - width: 100%; - vertical-align: top; - padding-left: 20px; - margin-bottom: 20px; } - -@media (min-width: 1024px) { - .half { - width: 50%; } } - -@media (min-width: 1024px) { - .third { - width: 33.33333%; } } - -@media (min-width: 1024px) { - .two-thirds { - width: 66.66667%; } } - -@media (min-width: 768px) { - .quarter { - width: 50%; } } -@media (min-width: 1024px) { - .quarter { - width: 25%; } } - -@media (min-width: 768px) { - .fifth { - width: 50%; } } -@media (min-width: 1024px) { - .fifth { - width: 20%; } } - -/* ========================================================================== - Forms + Forms | http://codepen.io/AntoineBoulanger/pen/uBJmi ========================================================================== */ /* Input ========================================================================== */ .input, .select__input, .checkbox__check { - background-color: #ccc; - width: 100%; + background-color: #cccccc; display: block; + width: 100%; + color: #000000; border: none; - outline: none; - color: black; border-radius: 0; + outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; } @@ -629,7 +501,7 @@ h6, .h6, .zeta { height: 100%; display: block; background-color: #ccc; - background-image: url("../../images/select-arrow.svg"); + background-image: url('../../images/select-arrow.svg'); background-repeat: no-repeat; background-position: center; pointer-events: none; } @@ -656,9 +528,103 @@ h6, .h6, .zeta { .checkbox__check:after { content: ""; display: block; - background-image: url("../../images/check.svg"); + background-image: url('../../images/check.svg'); background-repeat: no-repeat; background-position: center; width: 25px; height: 25px; visibility: hidden; } + +/* ========================================================================== + Functions + ========================================================================== */ +/* ========================================================================== + Mixins + ========================================================================== */ +/* ========================================================================== + Helpers + ========================================================================== */ +.clearfix:before, .clearfix:after { + display: table; + content: " "; } + +.clearfix:after { + clear: both; } + +.center-vertically { + height: 100%; + text-align: center; } + .center-vertically:before { + display: inline-block; + height: 100%; + content: ""; + vertical-align: middle; } + .center-vertically > * { + display: inline-block; + vertical-align: middle; } + +/* ========================================================================== + Trumps + ========================================================================== */ +.left { + float: left !important; } + +.right { + float: right !important; } + +.align-left { + text-align: left !important; } + +.align-right { + text-align: right !important; } + +.align-center { + text-align: center !important; } + +.is-visible { + visibility: visible !important; + opacity: 1 !important; } + +.is-hidden { + visibility: hidden !important; + opacity: 0 !important; } + +/* Accessibility + ========================================================================== */ +/* + * Hide visually and from screen readers: h5bp.com/u + */ +.hidden { + display: none !important; + visibility: hidden; } + +/* + * Hide only visually, but have it available for screen readers: h5bp.com/v + */ +.visuallyhidden { + position: absolute; + overflow: hidden; + clip: rect(0 0 0 0); + width: 1px; + height: 1px; + margin: -1px; + padding: 0; + border: 0; } + +/* + * Extends the .visuallyhidden class to allow the element to be focusable + * when navigated to via the keyboard: h5bp.com/p + */ +.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { + position: static; + overflow: visible; + clip: auto; + width: auto; + height: auto; + margin: 0; } + +/* + * Hide visually and from screen readers, but maintain layout + */ +.invisible { + visibility: hidden; } diff --git a/project-x/assets/styles/src/_import.scss b/project-x/assets/styles/src/_import.scss index e8ffa19..b4decd9 100644 --- a/project-x/assets/styles/src/_import.scss +++ b/project-x/assets/styles/src/_import.scss @@ -6,15 +6,16 @@ , "vendors/jacket" - , "base/base" + , "base/normalize" , "base/fonts" - , "base/forms" + , "base/base" , "base/grid" + , "base/headings" + , "base/forms" , "tools/functions" , "tools/mixins" - + , "generic/helpers" - , "generic/normalize" , "generic/trumps" - ; \ No newline at end of file + ; diff --git a/project-x/assets/styles/src/base/_base.scss b/project-x/assets/styles/src/base/_base.scss index 436f7ac..5faba52 100644 --- a/project-x/assets/styles/src/base/_base.scss +++ b/project-x/assets/styles/src/base/_base.scss @@ -6,16 +6,16 @@ } html { + font-family: $font-family; font-family: $font-family; font-size: $font-size; + font-size: $font-size; + line-height: $line-height; line-height: $line-height; box-sizing: border-box; - font-size : $font-size; - font-family : $font-family; - line-height : $line-height; - color : $color; + color: $color; } ::selection { diff --git a/project-x/assets/styles/src/base/_forms.scss b/project-x/assets/styles/src/base/_forms.scss index 599717f..a239b74 100644 --- a/project-x/assets/styles/src/base/_forms.scss +++ b/project-x/assets/styles/src/base/_forms.scss @@ -5,7 +5,6 @@ /* Input ========================================================================== */ .input { - background-color: #cccccc; display: block; width: 100%; @@ -14,6 +13,7 @@ border: none; border-radius: 0; outline: none; + background-color: #CCCCCC; -webkit-appearance: none; -moz-appearance: none; @@ -24,29 +24,35 @@ ========================================================================== */ // Wrapper .select { - display: block; position: relative; + + display: block; // Select arrow - &:after { - content: ""; + &:after { position: absolute; top: 0; right: 0; + + display: block; + width: 30px; height: 100%; - display: block; - background-color: #ccc; - background-image: url('../../images/select-arrow.svg'); + + content: ""; + pointer-events: none; + + background-color: #CCCCCC; + background-image: url("../../images/select-arrow.svg"); background-repeat: no-repeat; background-position: center; - pointer-events: none; } } // Select .select__input { - @extend .input; padding-right: 30px; + @extend .input; + &::-ms-expand { display: none; } @@ -73,20 +79,25 @@ } // Fake input visible .checkbox__check { - @extend .input; display: inline-block; + width: 25px; height: 25px; + @extend .input; + &:after { - content: ""; display: block; - background-image: url('../../images/check.svg'); - background-repeat: no-repeat; - background-position: center; + visibility: hidden; + width: 25px; height: 25px; - visibility: hidden; + + content: ""; + + background-image: url("../../images/check.svg"); + background-repeat: no-repeat; + background-position: center; } } diff --git a/project-x/assets/styles/src/base/_grid.scss b/project-x/assets/styles/src/base/_grid.scss index 4ab2b68..8e1eac5 100644 --- a/project-x/assets/styles/src/base/_grid.scss +++ b/project-x/assets/styles/src/base/_grid.scss @@ -6,7 +6,7 @@ position: relative; - margin-left: -$margin-20; + margin-left: -$margin20; } .grid--full { @@ -22,8 +22,8 @@ display: inline-block; width: 100%; - margin-bottom: $margin-20; - padding-left: $margin-20; + margin-bottom: $margin20; + padding-left: $margin20; vertical-align: top; } diff --git a/project-x/assets/styles/src/base/_headings.scss b/project-x/assets/styles/src/base/_headings.scss index a73b2a7..fc1960c 100644 --- a/project-x/assets/styles/src/base/_headings.scss +++ b/project-x/assets/styles/src/base/_headings.scss @@ -2,42 +2,42 @@ Headings ========================================================================== */ h1, .h1, .alpha { - font-size: $heading-1; + font-size: $heading1; line-height: $heading-line-height; margin-top: 0; } h2, .h2, .beta { - font-size: $heading-2; + font-size: $heading2; line-height: $heading-line-height; margin-top: 0; } h3, .h3, .gamma { - font-size: $heading-3; + font-size: $heading3; line-height: $heading-line-height; margin-top: 0; } h4, .h4, .delta { - font-size: $heading-4; + font-size: $heading4; line-height: $heading-line-height; margin-top: 0; } h5, .h5, .epsilon { - font-size: $heading-5; + font-size: $heading5; line-height: $heading-line-height; margin-top: 0; } h6, .h6, .zeta { - font-size: $heading-6; + font-size: $heading6; line-height: $heading-line-height; margin-top: 0; diff --git a/project-x/package.json b/project-x/package.json index c9272a3..c868065 100644 --- a/project-x/package.json +++ b/project-x/package.json @@ -11,13 +11,13 @@ "load-grunt-tasks": "0.6.0", "grunt-contrib-watch": "0.6.1", "grunt-contrib-sass": "0.8.1", - "grunt-sass": "^0.14.0", + "grunt-sass": "0.14.0", "grunt-notify": "0.3.1", "grunt-autoprefixer": "1.0.1", "grunt-contrib-concat": "0.5.0", "grunt-contrib-uglify": "0.6.0", "grunt-contrib-imagemin": "0.8.1", "grunt-csscomb": "3.0.0" - + } } From cf29c212441aa785962fee329a661efd02d5006b Mon Sep 17 00:00:00 2001 From: Antoine Boulanger Date: Thu, 2 Oct 2014 13:28:39 -0400 Subject: [PATCH 2/3] index --- project-x/index.html | 17 ----------------- 1 file changed, 17 deletions(-) diff --git a/project-x/index.html b/project-x/index.html index 13935ef..b24a337 100644 --- a/project-x/index.html +++ b/project-x/index.html @@ -13,23 +13,6 @@ - -

- - -

- - - From 0d99a29ce3052139eac1087c6e6ba46ff37ecf32 Mon Sep 17 00:00:00 2001 From: Antoine Boulanger Date: Thu, 2 Oct 2014 13:33:24 -0400 Subject: [PATCH 3/3] settings --- project-x/assets/styles/src/_settings.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/project-x/assets/styles/src/_settings.scss b/project-x/assets/styles/src/_settings.scss index b2f6fbd..7dcfb8d 100644 --- a/project-x/assets/styles/src/_settings.scss +++ b/project-x/assets/styles/src/_settings.scss @@ -8,6 +8,7 @@ $font-size: 16px; $line-height: 1.4; $font-family: sans-serif; $color: #222222; +// $heading1: 32px; // .alpha $heading2: 24px; // .beta $heading3: 19px; // .gamma @@ -15,6 +16,7 @@ $heading4: 16px; // .delta $heading5: 13px; // .epsilon $heading6: 11px; // .zeta $heading-line-height: 1.2; +// $milli-size: 10px !default; $micro-size: 8px !default; @@ -23,9 +25,9 @@ $micro-size: 8px !default; ========================================================================== */ $black: #000000; $white: #FFFFFF; +// $link: #1A0DAB; $link-hover: darken(#1A0DAB, 10%); -$body: #3D3D3D; /* Spacings