From 0c218242cdc076e5d7879e07ac420f9ab18b21ee Mon Sep 17 00:00:00 2001 From: Stephen Date: Wed, 1 Oct 2014 17:55:55 -0400 Subject: [PATCH] make sass and csscomb work --- project-x/.csscomb.json | 309 +++++++++- project-x/Gruntfile.js | 27 +- project-x/assets/styles/dist/main.css | 543 ++++++++++++++++++ project-x/assets/styles/src/_import.scss | 28 +- project-x/assets/styles/src/_settings.scss | 41 +- project-x/assets/styles/src/base/_base.scss | 36 +- project-x/assets/styles/src/base/_forms.scss | 13 +- project-x/assets/styles/src/base/_grid.scss | 18 +- .../assets/styles/src/base/_headings.scss | 54 +- .../assets/styles/src/generic/_helpers.scss | 38 +- .../assets/styles/src/generic/_normalize.scss | 209 +++---- .../assets/styles/src/generic/_trumps.scss | 44 +- .../styles/src/{project-x.scss => main.scss} | 4 +- .../assets/styles/src/tools/_functions.scss | 6 +- project-x/package.json | 3 +- 15 files changed, 1123 insertions(+), 250 deletions(-) create mode 100644 project-x/assets/styles/dist/main.css rename project-x/assets/styles/src/{project-x.scss => main.scss} (75%) diff --git a/project-x/.csscomb.json b/project-x/.csscomb.json index 5267577..fc44ae5 100644 --- a/project-x/.csscomb.json +++ b/project-x/.csscomb.json @@ -1,4 +1,9 @@ { + "exclude": [ + ".git/**", + "node_modules/**", + "bower_components/**" + ], "remove-empty-rulesets": true, "always-semicolon": true, "color-case": "upper", @@ -16,9 +21,309 @@ "space-between-declarations": "\n", "space-before-opening-brace": " ", "space-after-opening-brace": "\n", - "space-before-selector-delimiter": "", + "space-after-selector-delimiter": " ", "space-before-closing-brace": "\n", "strip-spaces": true, "unitless-zero": true, - "vendor-prefix-align": true + "vendor-prefix-align": true, + "sort-order": [ + [ + "font", + "font-family", + "font-size", + "font-weight", + "font-style", + "font-variant", + "font-size-adjust", + "font-stretch", + "font-effect", + "font-emphasize", + "font-emphasize-position", + "font-emphasize-style", + "font-smooth", + "line-height" + ], + [ + "position", + "z-index", + "top", + "right", + "bottom", + "left" + ], + [ + "display", + "visibility", + "float", + "clear", + "overflow", + "overflow-x", + "overflow-y", + "-ms-overflow-x", + "-ms-overflow-y", + "clip", + "zoom", + "flex-direction", + "flex-order", + "flex-pack", + "flex-align" + ], + [ + "-webkit-box-sizing", + "-moz-box-sizing", + "box-sizing", + "width", + "min-width", + "max-width", + "height", + "min-height", + "max-height", + "margin", + "margin-top", + "margin-right", + "margin-bottom", + "margin-left", + "padding", + "padding-top", + "padding-right", + "padding-bottom", + "padding-left" + ], + [ + "table-layout", + "empty-cells", + "caption-side", + "border-spacing", + "border-collapse", + "list-style", + "list-style-position", + "list-style-type", + "list-style-image" + ], + [ + "content", + "quotes", + "counter-reset", + "counter-increment", + "resize", + "cursor", + "-webkit-user-select", + "-moz-user-select", + "-ms-user-select", + "user-select", + "nav-index", + "nav-up", + "nav-right", + "nav-down", + "nav-left", + "-webkit-transition", + "-moz-transition", + "-ms-transition", + "-o-transition", + "transition", + "-webkit-transition-delay", + "-moz-transition-delay", + "-ms-transition-delay", + "-o-transition-delay", + "transition-delay", + "-webkit-transition-timing-function", + "-moz-transition-timing-function", + "-ms-transition-timing-function", + "-o-transition-timing-function", + "transition-timing-function", + "-webkit-transition-duration", + "-moz-transition-duration", + "-ms-transition-duration", + "-o-transition-duration", + "transition-duration", + "-webkit-transition-property", + "-moz-transition-property", + "-ms-transition-property", + "-o-transition-property", + "transition-property", + "-webkit-transform", + "-moz-transform", + "-ms-transform", + "-o-transform", + "transform", + "-webkit-transform-origin", + "-moz-transform-origin", + "-ms-transform-origin", + "-o-transform-origin", + "transform-origin", + "-webkit-animation", + "-moz-animation", + "-ms-animation", + "-o-animation", + "animation", + "-webkit-animation-name", + "-moz-animation-name", + "-ms-animation-name", + "-o-animation-name", + "animation-name", + "-webkit-animation-duration", + "-moz-animation-duration", + "-ms-animation-duration", + "-o-animation-duration", + "animation-duration", + "-webkit-animation-play-state", + "-moz-animation-play-state", + "-ms-animation-play-state", + "-o-animation-play-state", + "animation-play-state", + "-webkit-animation-timing-function", + "-moz-animation-timing-function", + "-ms-animation-timing-function", + "-o-animation-timing-function", + "animation-timing-function", + "-webkit-animation-delay", + "-moz-animation-delay", + "-ms-animation-delay", + "-o-animation-delay", + "animation-delay", + "-webkit-animation-iteration-count", + "-moz-animation-iteration-count", + "-ms-animation-iteration-count", + "-o-animation-iteration-count", + "animation-iteration-count", + "-webkit-animation-direction", + "-moz-animation-direction", + "-ms-animation-direction", + "-o-animation-direction", + "animation-direction", + "text-align", + "-webkit-text-align-last", + "-moz-text-align-last", + "-ms-text-align-last", + "text-align-last", + "vertical-align", + "white-space", + "text-decoration", + "text-emphasis", + "text-emphasis-color", + "text-emphasis-style", + "text-emphasis-position", + "text-indent", + "-ms-text-justify", + "text-justify", + "letter-spacing", + "word-spacing", + "-ms-writing-mode", + "text-outline", + "text-transform", + "text-wrap", + "text-overflow", + "-ms-text-overflow", + "text-overflow-ellipsis", + "text-overflow-mode", + "-ms-word-wrap", + "word-wrap", + "word-break", + "-ms-word-break", + "-moz-tab-size", + "-o-tab-size", + "tab-size", + "-webkit-hyphens", + "-moz-hyphens", + "hyphens", + "pointer-events" + ], + [ + "opacity", + "filter:progid:DXImageTransform.Microsoft.Alpha(Opacity", + "-ms-filter:\\'progid:DXImageTransform.Microsoft.Alpha", + "-ms-interpolation-mode", + "color", + "border", + "border-width", + "border-style", + "border-color", + "border-top", + "border-top-width", + "border-top-style", + "border-top-color", + "border-right", + "border-right-width", + "border-right-style", + "border-right-color", + "border-bottom", + "border-bottom-width", + "border-bottom-style", + "border-bottom-color", + "border-left", + "border-left-width", + "border-left-style", + "border-left-color", + "-webkit-border-radius", + "-moz-border-radius", + "border-radius", + "-webkit-border-top-left-radius", + "-moz-border-radius-topleft", + "border-top-left-radius", + "-webkit-border-top-right-radius", + "-moz-border-radius-topright", + "border-top-right-radius", + "-webkit-border-bottom-right-radius", + "-moz-border-radius-bottomright", + "border-bottom-right-radius", + "-webkit-border-bottom-left-radius", + "-moz-border-radius-bottomleft", + "border-bottom-left-radius", + "-webkit-border-image", + "-moz-border-image", + "-o-border-image", + "border-image", + "-webkit-border-image-source", + "-moz-border-image-source", + "-o-border-image-source", + "border-image-source", + "-webkit-border-image-slice", + "-moz-border-image-slice", + "-o-border-image-slice", + "border-image-slice", + "-webkit-border-image-width", + "-moz-border-image-width", + "-o-border-image-width", + "border-image-width", + "-webkit-border-image-outset", + "-moz-border-image-outset", + "-o-border-image-outset", + "border-image-outset", + "-webkit-border-image-repeat", + "-moz-border-image-repeat", + "-o-border-image-repeat", + "border-image-repeat", + "outline", + "outline-width", + "outline-style", + "outline-color", + "outline-offset", + "background", + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader", + "background-color", + "background-image", + "background-repeat", + "background-attachment", + "background-position", + "background-position-x", + "-ms-background-position-x", + "background-position-y", + "-ms-background-position-y", + "-webkit-background-clip", + "-moz-background-clip", + "background-clip", + "background-origin", + "-webkit-background-size", + "-moz-background-size", + "-o-background-size", + "background-size", + "box-decoration-break", + "-webkit-box-shadow", + "-moz-box-shadow", + "box-shadow", + "filter:progid:DXImageTransform.Microsoft.gradient", + "-ms-filter:\\'progid:DXImageTransform.Microsoft.gradient", + "text-shadow" + ] + ] } \ No newline at end of file diff --git a/project-x/Gruntfile.js b/project-x/Gruntfile.js index f8aed9b..ffc89a0 100644 --- a/project-x/Gruntfile.js +++ b/project-x/Gruntfile.js @@ -1,9 +1,6 @@ module.exports = function(grunt) { 'use strict'; - // Load Grunt tasks from NPM packages - require('load-grunt-tasks')(grunt); - // Project configuration. grunt.initConfig({ pkg: grunt.file.readJSON( 'package.json' ), @@ -21,12 +18,18 @@ module.exports = function(grunt) { sass: { dist: { files: { - 'assets/styles/dist/main.css': 'assets/styles/src/main.scss', - 'assets/styles/dist/main.ie8.css': 'assets/styles/src/main.ie8.scss' + 'assets/styles/dist/main.css': 'assets/styles/src/main.scss' } } }, - + csscomb: { + build: { + expand: true, + cwd: 'assets/styles/src/', + src: ['**/*.scss'], + dest: 'assets/styles/src/' + } + }, autoprefixer: { build: { options: { @@ -86,7 +89,19 @@ module.exports = function(grunt) { } }); + grunt.loadNpmTasks('grunt-contrib-watch'); + //grunt.loadNpmTasks('grunt-contrib-sass'); + grunt.loadNpmTasks('grunt-sass'); + grunt.loadNpmTasks('grunt-notify'); + grunt.loadNpmTasks('grunt-autoprefixer'); + grunt.loadNpmTasks('grunt-contrib-concat'); + grunt.loadNpmTasks('grunt-contrib-uglify'); + grunt.loadNpmTasks('grunt-csscomb'); + + grunt.registerTask('default', ['watch']); grunt.registerTask('build', ['uglify']); + 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 new file mode 100644 index 0000000..69edeab --- /dev/null +++ b/project-x/assets/styles/dist/main.css @@ -0,0 +1,543 @@ +/** + * Project-x / Public Site + * ========================================================================== + * + */ +/* ========================================================================== + Imports + ========================================================================== */ +/* ========================================================================== + Settings + ========================================================================== */ +/* Typography + ========================================================================== */ +/* Colour Palette + ========================================================================== */ +/* Spacings + ========================================================================== */ +/* Z-index + ========================================================================== */ +/* Screen widths + ========================================================================== */ +/* Transitions + ========================================================================== */ +/* ========================================================================== + Base + ========================================================================== */ +*, *:before, *:after { + box-sizing: inherit; } + +html { + box-sizing: border-box; + font-size: 16px; + font-family: sans-serif; + line-height: 1.4; + color: #3d3d3d; } + +::-moz-selection { + background: #b3d4fc; + text-shadow: none; } + +::selection { + background: #b3d4fc; + text-shadow: none; } + +hr { + display: block; + height: 1px; + border: 0; + border-top: 1px solid #ccc; + margin: 1em 0; + padding: 0; } + +img, svg { + vertical-align: middle; + max-width: 100%; } + +textarea { + resize: vertical; } + +a { + color: #1a0dab; } + a:hover { + color: #11097c; } + +.container { + position: relative; + margin: 0 auto; } + +/* ========================================================================== + Fonts + ========================================================================== */ +/* ========================================================================== + Forms + ========================================================================== */ +.input { + width: 100%; + display: block; + border: none; + outline: none; + color: #000000; + border-radius: 0; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; } + +/* ========================================================================== + 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: 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); } } + +/* ========================================================================== + 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; } + +/*! normalize.css v3.0.1 | MIT License | git.io/normalize */ +/** + * 1. Set default font family to sans-serif. + * 2. Prevent iOS text size adjust after 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, 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 { + display: inline-block; + /* 1 */ + vertical-align: baseline; + /* 2 */ } + +/** + * Prevent modern browsers from displaying `audio` without controls. + * Remove excess height in iOS 5 devices. + */ +audio:not([controls]) { + display: none; + height: 0; } + +/** + * 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 { + display: none; } + +/* Links + ========================================================================== */ +/** + * Remove the gray background color from active links in IE 10. + */ +a { + background: transparent; } + +/** + * Improve readability when focused and also mouse hovered in all browsers. + */ +a:active, a:hover { + outline: 0; } + +/* Text-level semantics + ========================================================================== */ +/** + * Address styling not present in IE 8/9/10/11, Safari, and Chrome. + */ +abbr[title] { + border-bottom: 1px dotted; } + +/** + * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. + */ +b, strong { + font-weight: bold; } + +/** + * 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. + */ +figure { + margin: 1em 40px; } + +/** + * 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. + */ +button, input, optgroup, select, textarea { + color: inherit; + /* 1 */ + font: inherit; + /* 2 */ + margin: 0; + /* 3 */ } + +/** + * Address `overflow` set to `hidden` in IE 8/9/10/11. + */ +button { + overflow: visible; } + +/** + * 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"], input[type="reset"], input[type="submit"] { + -webkit-appearance: button; + /* 2 */ + cursor: pointer; + /* 3 */ } + +/** + * 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; } + +/** + * 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 + * (include `-moz` to future-proof). + */ +input[type="search"] { + -webkit-appearance: textfield; + /* 1 */ + /* 2 */ + box-sizing: content-box; } + +/** + * 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; } + +/** + * 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; } + +/* ========================================================================== + 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; } diff --git a/project-x/assets/styles/src/_import.scss b/project-x/assets/styles/src/_import.scss index 6ed9036..3689c8a 100644 --- a/project-x/assets/styles/src/_import.scss +++ b/project-x/assets/styles/src/_import.scss @@ -2,17 +2,27 @@ Imports ========================================================================== */ @import - 'settings' + "settings" - , 'vendor/jacket' + , "vendors/jacket" - , 'tools/functions' - , 'tools/mixins' - , 'tools/trumps' + , "base/base" + , "base/fonts" + , "base/forms" + , "base/grid" - , 'base/fonts' - , 'base/normalize' - , 'base/page' - , 'base/headings' + , "tools/functions" + , "tools/mixins" + + , "generic/helpers" + , "generic/normalize" + , "generic/trumps" ; + +p { + position: absolute; + + color: red; + border: 1px solid red; +} diff --git a/project-x/assets/styles/src/_settings.scss b/project-x/assets/styles/src/_settings.scss index 3d0ec07..f9908d1 100644 --- a/project-x/assets/styles/src/_settings.scss +++ b/project-x/assets/styles/src/_settings.scss @@ -7,16 +7,14 @@ $font-size: 16px; $line-height: 1.4; $font-family: sans-serif; -$color: #222; - -$heading-1: 32px; // .alpha -$heading-2: 24px; // .beta -$heading-3: 19px; // .gamma -$heading-4: 16px; // .delta -$heading-5: 13px; // .epsilon -$heading-6: 11px; // .zeta +$color: #222222; +$heading-n1: 32px; // .alpha +$heading-n2: 24px; // .beta +$heading-n3: 19px; // .gamma +$heading-n4: 16px; // .delta +$heading-n5: 13px; // .epsilon +$heading-n6: 11px; // .zeta $heading-line-height: 1.2; - $milli-size: 10px !default; $micro-size: 8px !default; @@ -24,37 +22,34 @@ $micro-size: 8px !default; /* Colour Palette ========================================================================== */ $black: #000000; -$white: #ffffff; - -$link: #1a0dab; -$link-hover: darken(#1a0dab, 10%); +$white: #FFFFFF; +$link: #1A0DAB; +$link-hover: darken(#1A0DAB, 10%); +$body: #3D3D3D; /* Spacings ========================================================================== */ -$margin-10: 10px; -$margin-20: 20px; -$margin-30: 30px; -$margin-40: 40px; +$margin-n10: 10px; +$margin-n20: 20px; +$margin-n30: 30px; +$margin-n40: 40px; /* Z-index ========================================================================== */ -$z-index-1: 50; -$z-index-2: 150; -$z-index-3: 250; +$z-index-n1: 50; +$z-index-n2: 150; +$z-index-n3: 250; /* Screen widths ========================================================================== */ $from-tablet: 768px; $to-tablet: $from-tablet - 1; - $from-desktop: 1024px; $to-desktop: $from-desktop - 1; - $from-laptop: 1280px; $to-laptop: $from-laptop - 1; - $from-wide: 1680px; $to-wide: $from-wide - 1; diff --git a/project-x/assets/styles/src/base/_base.scss b/project-x/assets/styles/src/base/_base.scss index dc2180b..5d63e4f 100644 --- a/project-x/assets/styles/src/base/_base.scss +++ b/project-x/assets/styles/src/base/_base.scss @@ -6,34 +6,39 @@ } html { + font-family: $font-family; + font-size: $font-size; + line-height: $line-height; + box-sizing: border-box; - font-size : $font-size; - font-family : $font-family; - line-height : $line-height; - color : $ia-body-text-color; + + color: $body; } ::selection { - background: #b3d4fc; - text-shadow: none; + background: #B3D4FC; + text-shadow: none; } hr { - display: block; - height: 1px; - border: 0; - border-top: 1px solid #ccc; - margin: 1em 0; - padding: 0; + display: block; + + height: 1px; + margin: 1em 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; + resize: vertical; } a { @@ -46,5 +51,6 @@ a { .container { position: relative; + margin: 0 auto; } diff --git a/project-x/assets/styles/src/base/_forms.scss b/project-x/assets/styles/src/base/_forms.scss index cf19c90..67ca0e5 100644 --- a/project-x/assets/styles/src/base/_forms.scss +++ b/project-x/assets/styles/src/base/_forms.scss @@ -2,21 +2,20 @@ Forms ========================================================================== */ .input { - width: 100%; display: block; - border: none; - outline: none; + + width: 100%; + color: $black; + border: none; border-radius: 0; + outline: none; + -webkit-appearance: none; -moz-appearance: none; appearance: none; } -.select { -} -.checkbox { -} diff --git a/project-x/assets/styles/src/base/_grid.scss b/project-x/assets/styles/src/base/_grid.scss index 4424b74..4ab2b68 100644 --- a/project-x/assets/styles/src/base/_grid.scss +++ b/project-x/assets/styles/src/base/_grid.scss @@ -2,26 +2,30 @@ Grid ========================================================================== */ .grid { - position: relative; - margin-left: -$margin-20; font-size: 0; + + position: relative; + + margin-left: -$margin-20; } .grid--full { margin-left: 0; .grid__item { - padding-left: 0; margin-bottom: 0; + padding-left: 0; } } .grid__item { - display: inline-block; - width: 100%; - vertical-align: top; - padding-left: $margin-20; + display: inline-block; + + width: 100%; margin-bottom: $margin-20; + padding-left: $margin-20; + + vertical-align: top; } .whole { diff --git a/project-x/assets/styles/src/base/_headings.scss b/project-x/assets/styles/src/base/_headings.scss index 75117be..a73b2a7 100644 --- a/project-x/assets/styles/src/base/_headings.scss +++ b/project-x/assets/styles/src/base/_headings.scss @@ -1,38 +1,44 @@ /* ========================================================================== Headings ========================================================================== */ -h1, .h1, .alpha{ - font-size: $heading-1; - line-height: $heading-line-height; - margin-top: 0; +h1, .h1, .alpha { + font-size: $heading-1; + line-height: $heading-line-height; + + margin-top: 0; } -h2, .h2, .beta{ - font-size: $heading-2; - line-height: $heading-line-height; - margin-top: 0; +h2, .h2, .beta { + font-size: $heading-2; + line-height: $heading-line-height; + + margin-top: 0; } -h3, .h3, .gamma{ - font-size: $heading-3; - line-height: $heading-line-height; - margin-top: 0; +h3, .h3, .gamma { + font-size: $heading-3; + line-height: $heading-line-height; + + margin-top: 0; } -h4, .h4, .delta{ - font-size: $heading-4; - line-height: $heading-line-height; - margin-top: 0; +h4, .h4, .delta { + font-size: $heading-4; + line-height: $heading-line-height; + + margin-top: 0; } -h5, .h5, .epsilon{ - font-size: $heading-5; - line-height: $heading-line-height; - margin-top: 0; +h5, .h5, .epsilon { + font-size: $heading-5; + line-height: $heading-line-height; + + margin-top: 0; } -h6, .h6, .zeta{ - font-size: $heading-6; - line-height: $heading-line-height; - margin-top: 0; +h6, .h6, .zeta { + font-size: $heading-6; + line-height: $heading-line-height; + + margin-top: 0; } diff --git a/project-x/assets/styles/src/generic/_helpers.scss b/project-x/assets/styles/src/generic/_helpers.scss index ae8e2be..47b0f6b 100644 --- a/project-x/assets/styles/src/generic/_helpers.scss +++ b/project-x/assets/styles/src/generic/_helpers.scss @@ -1,29 +1,33 @@ /* ========================================================================== Helpers ========================================================================== */ -.clearfix:before, -.clearfix:after { - content: " "; - display: table; +.clearfix:before, .clearfix:after { + display: table; + + content: " "; } .clearfix:after { - clear: both; + clear: both; } .center-vertically { - text-align: center; - height: 100%; + height: 100%; - &:before { - content : ""; - display : inline-block; - height : 100%; - vertical-align : middle; - } + text-align: center; - > * { - display : inline-block; - vertical-align : middle; - } + &:before { + display: inline-block; + + height: 100%; + + content: ""; + vertical-align: middle; + } + + > * { + display: inline-block; + + vertical-align: middle; + } } diff --git a/project-x/assets/styles/src/generic/_normalize.scss b/project-x/assets/styles/src/generic/_normalize.scss index 08f8950..1ce5c93 100644 --- a/project-x/assets/styles/src/generic/_normalize.scss +++ b/project-x/assets/styles/src/generic/_normalize.scss @@ -7,9 +7,10 @@ */ html { - font-family: sans-serif; /* 1 */ - -ms-text-size-adjust: 100%; /* 2 */ - -webkit-text-size-adjust: 100%; /* 2 */ + font-family: sans-serif; /* 1 */ + + -webkit-text-size-adjust: 100%; /* 2 */ + -ms-text-size-adjust: 100%; /* 2 */ } /** @@ -17,7 +18,7 @@ html { */ body { - margin: 0; + margin: 0; } /* HTML5 display definitions @@ -29,19 +30,8 @@ body { * Correct `block` display not defined for `main` in IE 11. */ -article, -aside, -details, -figcaption, -figure, -footer, -header, -hgroup, -main, -nav, -section, -summary { - display: block; +article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { + display: block; } /** @@ -49,12 +39,10 @@ summary { * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. */ -audio, -canvas, -progress, -video { - display: inline-block; /* 1 */ - vertical-align: baseline; /* 2 */ +audio, canvas, progress, video { + display: inline-block; /* 1 */ + + vertical-align: baseline; /* 2 */ } /** @@ -63,8 +51,9 @@ video { */ audio:not([controls]) { - display: none; - height: 0; + display: none; + + height: 0; } /** @@ -72,9 +61,8 @@ audio:not([controls]) { * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. */ -[hidden], -template { - display: none; +[hidden], template { + display: none; } /* Links @@ -85,16 +73,15 @@ template { */ a { - background: transparent; + background: transparent; } /** * Improve readability when focused and also mouse hovered in all browsers. */ -a:active, -a:hover { - outline: 0; +a:active, a:hover { + outline: 0; } /* Text-level semantics @@ -105,16 +92,15 @@ a:hover { */ abbr[title] { - border-bottom: 1px dotted; + border-bottom: 1px dotted; } /** * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. */ -b, -strong { - font-weight: bold; +b, strong { + font-weight: bold; } /** @@ -122,7 +108,7 @@ strong { */ dfn { - font-style: italic; + font-style: italic; } /** @@ -131,8 +117,9 @@ dfn { */ h1 { - font-size: 2em; - margin: 0.67em 0; + font-size: 2em; + + margin: 0.67em 0; } /** @@ -140,8 +127,8 @@ h1 { */ mark { - background: #ff0; - color: #000; + color: #000000; + background: #FFFF00; } /** @@ -149,27 +136,28 @@ mark { */ small { - font-size: 80%; + 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; +sub, sup { + font-size: 75%; + line-height: 0; + + position: relative; + + vertical-align: baseline; } sup { - top: -0.5em; + top: -0.5em; } sub { - bottom: -0.25em; + bottom: -0.25em; } /* Embedded content @@ -180,7 +168,7 @@ sub { */ img { - border: 0; + border: 0; } /** @@ -188,7 +176,7 @@ img { */ svg:not(:root) { - overflow: hidden; + overflow: hidden; } /* Grouping content @@ -199,7 +187,7 @@ svg:not(:root) { */ figure { - margin: 1em 40px; + margin: 1em 40px; } /** @@ -207,9 +195,9 @@ figure { */ hr { - -moz-box-sizing: content-box; - box-sizing: content-box; - height: 0; + -moz-box-sizing: content-box; + box-sizing: content-box; + height: 0; } /** @@ -217,19 +205,16 @@ hr { */ pre { - overflow: auto; + overflow: auto; } /** * Address odd `em`-unit font size rendering in all browsers. */ -code, -kbd, -pre, -samp { - font-family: monospace, monospace; - font-size: 1em; +code, kbd, pre, samp { + font-family: monospace, monospace; + font-size: 1em; } /* Forms @@ -247,14 +232,12 @@ samp { * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. */ -button, -input, -optgroup, -select, -textarea { - color: inherit; /* 1 */ - font: inherit; /* 2 */ - margin: 0; /* 3 */ +button, input, optgroup, select, textarea { + font: inherit; /* 2 */ + + margin: 0; /* 3 */ + + color: inherit; /* 1 */ } /** @@ -262,7 +245,7 @@ textarea { */ button { - overflow: visible; + overflow: visible; } /** @@ -272,9 +255,8 @@ button { * Correct `select` style inheritance in Firefox. */ -button, -select { - text-transform: none; +button, select { + text-transform: none; } /** @@ -285,31 +267,29 @@ select { * `input` and others. */ -button, -html input[type="button"], /* 1 */ -input[type="reset"], -input[type="submit"] { - -webkit-appearance: button; /* 2 */ - cursor: pointer; /* 3 */ +button, html input[type="button"], /* 1 */ +input[type="reset"], input[type="submit"] { + cursor: pointer; /* 3 */ + + -webkit-appearance: button; /* 2 */ } /** * Re-set default cursor for disabled elements. */ -button[disabled], -html input[disabled] { - cursor: default; +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; } /** @@ -318,7 +298,7 @@ input::-moz-focus-inner { */ input { - line-height: normal; + line-height: normal; } /** @@ -329,10 +309,9 @@ input { * 2. Remove excess padding in IE 8/9/10. */ -input[type="checkbox"], -input[type="radio"] { - box-sizing: border-box; /* 1 */ - padding: 0; /* 2 */ +input[type="checkbox"], input[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ } /** @@ -341,9 +320,8 @@ input[type="radio"] { * decrement button to change from `default` to `text`. */ -input[type="number"]::-webkit-inner-spin-button, -input[type="number"]::-webkit-outer-spin-button { - height: auto; +input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { + height: auto; } /** @@ -353,10 +331,11 @@ input[type="number"]::-webkit-outer-spin-button { */ input[type="search"] { - -webkit-appearance: textfield; /* 1 */ - -moz-box-sizing: content-box; - -webkit-box-sizing: content-box; /* 2 */ - box-sizing: content-box; + -webkit-box-sizing: content-box; /* 2 */ + -moz-box-sizing: content-box; + box-sizing: content-box; + + -webkit-appearance: textfield; /* 1 */ } /** @@ -365,9 +344,8 @@ input[type="search"] { * padding (and `textfield` appearance). */ -input[type="search"]::-webkit-search-cancel-button, -input[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; +input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; } /** @@ -375,9 +353,10 @@ input[type="search"]::-webkit-search-decoration { */ fieldset { - border: 1px solid #c0c0c0; - margin: 0 2px; - padding: 0.35em 0.625em 0.75em; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; + + border: 1px solid #C0C0C0; } /** @@ -386,8 +365,9 @@ fieldset { */ legend { - border: 0; /* 1 */ - padding: 0; /* 2 */ + padding: 0; /* 2 */ + + border: 0; /* 1 */ } /** @@ -395,7 +375,7 @@ legend { */ textarea { - overflow: auto; + overflow: auto; } /** @@ -404,7 +384,7 @@ textarea { */ optgroup { - font-weight: bold; + font-weight: bold; } /* Tables @@ -415,11 +395,10 @@ optgroup { */ table { - border-collapse: collapse; - border-spacing: 0; + border-spacing: 0; + border-collapse: collapse; } -td, -th { - padding: 0; +td, th { + padding: 0; } diff --git a/project-x/assets/styles/src/generic/_trumps.scss b/project-x/assets/styles/src/generic/_trumps.scss index 1b6a8c2..09ce57a 100644 --- a/project-x/assets/styles/src/generic/_trumps.scss +++ b/project-x/assets/styles/src/generic/_trumps.scss @@ -23,11 +23,13 @@ .is-visible { visibility: visible !important; + opacity: 1 !important; } .is-hidden { visibility: hidden !important; + opacity: 0 !important; } @@ -38,8 +40,8 @@ */ .hidden { - display: none !important; - visibility: hidden; + display: none !important; + visibility: hidden; } /* @@ -47,14 +49,17 @@ */ .visuallyhidden { - border: 0; - clip: rect(0 0 0 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - width: 1px; + position: absolute; + + overflow: hidden; + clip: rect(0 0 0 0); + + width: 1px; + height: 1px; + margin: -1px; + padding: 0; + + border: 0; } /* @@ -62,14 +67,15 @@ * 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; +.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { + position: static; + + overflow: visible; + clip: auto; + + width: auto; + height: auto; + margin: 0; } /* @@ -77,5 +83,5 @@ */ .invisible { - visibility: hidden; + visibility: hidden; } diff --git a/project-x/assets/styles/src/project-x.scss b/project-x/assets/styles/src/main.scss similarity index 75% rename from project-x/assets/styles/src/project-x.scss rename to project-x/assets/styles/src/main.scss index 45042d7..7f6e155 100644 --- a/project-x/assets/styles/src/project-x.scss +++ b/project-x/assets/styles/src/main.scss @@ -3,6 +3,6 @@ * ========================================================================== * */ -$jacket : vanilla; +$jacket: vanilla; -@import 'import'; +@import "import"; diff --git a/project-x/assets/styles/src/tools/_functions.scss b/project-x/assets/styles/src/tools/_functions.scss index e159056..07b6f54 100644 --- a/project-x/assets/styles/src/tools/_functions.scss +++ b/project-x/assets/styles/src/tools/_functions.scss @@ -2,13 +2,13 @@ Functions ========================================================================== */ @function em($px, $base: $font-size) { - @return ($px / $base) * 1em; + @return ($px / $base) * 1em; } @function rem($px, $base: $font-size) { - @return ($px / $base) * 1rem; + @return ($px / $base) * 1rem; } @function span($fraction) { - @return $fraction * 100%; + @return $fraction * 100%; } diff --git a/project-x/package.json b/project-x/package.json index 5b5eaf5..c9272a3 100644 --- a/project-x/package.json +++ b/project-x/package.json @@ -11,12 +11,13 @@ "load-grunt-tasks": "0.6.0", "grunt-contrib-watch": "0.6.1", "grunt-contrib-sass": "0.8.1", - "grunt-sass": "0.14.2", + "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" + } }