From 36cf700762489a429a135ae481d6a8469f5a38ec Mon Sep 17 00:00:00 2001 From: Jack McNicol Date: Mon, 1 Aug 2016 15:33:46 +0930 Subject: [PATCH 1/4] add sass-lint support --- .sass-lint.yml | 74 ++++++++++++++++++++++++++ package.json | 140 +++++++++++++++++++++++++------------------------ 2 files changed, 145 insertions(+), 69 deletions(-) create mode 100644 .sass-lint.yml diff --git a/.sass-lint.yml b/.sass-lint.yml new file mode 100644 index 0000000..1392187 --- /dev/null +++ b/.sass-lint.yml @@ -0,0 +1,74 @@ +######################### +## Sass Lint File +## See rules https://github.com/sasstools/sass-lint/tree/master/docs/rules +######################### +# Linter Options +options: + # Don't merge default rules + merge-default-rules: false +# File Options +files: + include: 'src/**/*.s+(a|c)ss' + ignore: + - 'node_modules/**/*.*' +# Rule Configuration +rules: + attribute-quotes: + - 2 + - + include: true + extends-before-mixins: 2 + extends-before-declarations: 2 + placeholder-in-extend: 2 + mixins-before-declarations: + - 2 + - + exclude: + - breakpoint + - mq + nesting-depth: + - 1 + - + max-depth: 2 + no-warn: 1 + no-debug: 1 + no-ids: 2 + no-duplicate-properties: 1 + no-trailing-whitespace: 2 + + leading-zero: + - 2 + - + include: false + no-vendor-prefixes: + - 2 + - + ignore-non-standard: true + no-important: 2 + hex-notation: + - 2 + - + style: lowercase + indentation: + - 2 + - + size: 'tab' + property-sort-order: + - 1 + - + order: 'alphabetical' + ignore-custom-properties: true + property-units: + - 1 + - + global: ['em', 'rem', '%'] + quotes: 2 + space-after-colon: 2 + space-after-comma: 2 + single-line-per-selector: 2 + variable-for-property: + - 2 + - + properties: + - color + zero-unit: 2 diff --git a/package.json b/package.json index fce167c..323d46a 100644 --- a/package.json +++ b/package.json @@ -1,71 +1,73 @@ { - "name": "milligram", - "version": "1.1.0", - "description": "A minimalist CSS framework.", - "homepage": "http://milligram.github.io", - "repository": "milligram/milligram", - "license": "MIT", - "author": "CJ Patoilo ", - "main": "dist/milligram.css", - "keywords": [ - "bootstrap", - "css", - "css3", - "flexbox", - "front-end", - "framework", - "html", - "html5", - "kickstarter", - "less", - "responsive", - "mobile", - "mobile-first", - "postcss", - "responsive", - "sass", - "scss", - "stylus" - ], - "ignore": [ - ".editorconfig", - ".github", - ".gitignore", - ".npmignore", - ".travis.yml", - "bower.json", - "changelog.md", - "component.json", - "composer.json", - "package.js", - "package.json", - "src", - "test" - ], - "dependencies": { - "normalize.css": "latest" - }, - "devDependencies": { - "autoprefixer": "^6.3.6", - "backstopjs": "^1.3.5", - "browser-sync": "^2.13.0", - "node-sass": "^3.7.0", - "npm-run-all": "^2.1.1", - "onchange": "^2.4.0", - "postcss-cli": "^2.5.2", - "slimerjs": "^0.906.2" - }, - "engines": { - "node": "^6.0.0" - }, - "scripts": { - "banner": "for m in dist/*.css; do echo '/*!\n * Milligram v1.1.0\n * http://milligram.github.io\n *\n * Copyright (c) 2016 CJ Patoilo\n * Licensed under the MIT license\n*/\n' | cat - $m > temp && mv temp $m; done", - "sass": "node-sass --output-style expanded src/milligram.sass dist/milligram.css && node-sass --output-style compressed src/milligram.sass dist/milligram.min.css", - "autoprefixer": "postcss -u autoprefixer --no-map.inline --autoprefixer.browsers 'last 1 versions' -r dist/*.css", - "build": "npm-run-all sass autoprefixer banner", - "watch": "onchange src -- npm run build", - "serve": "browser-sync start -s test --ss dist -f dist", - "start": "npm-run-all -p watch serve", - "test": "cd node_modules/backstopjs && npm run test -- --configPath=../../test/visual/backstop.config.js && cd ../../" - } + "name": "milligram", + "version": "1.1.0", + "description": "A minimalist CSS framework.", + "homepage": "http://milligram.github.io", + "repository": "milligram/milligram", + "license": "MIT", + "author": "CJ Patoilo ", + "main": "dist/milligram.css", + "keywords": [ + "bootstrap", + "css", + "css3", + "flexbox", + "front-end", + "framework", + "html", + "html5", + "kickstarter", + "less", + "responsive", + "mobile", + "mobile-first", + "postcss", + "responsive", + "sass", + "scss", + "stylus" + ], + "ignore": [ + ".editorconfig", + ".github", + ".gitignore", + ".npmignore", + ".travis.yml", + "bower.json", + "changelog.md", + "component.json", + "composer.json", + "package.js", + "package.json", + "src", + "test" + ], + "dependencies": { + "normalize.css": "latest" + }, + "devDependencies": { + "autoprefixer": "^6.3.6", + "backstopjs": "^1.3.5", + "browser-sync": "^2.13.0", + "node-sass": "^3.7.0", + "npm-run-all": "^2.1.1", + "onchange": "^2.4.0", + "postcss-cli": "^2.5.2", + "sass-lint": "^1.8.2", + "slimerjs": "^0.906.2" + }, + "engines": { + "node": "^6.0.0" + }, + "scripts": { + "banner": "for m in dist/*.css; do echo '/*!\n * Milligram v1.1.0\n * http://milligram.github.io\n *\n * Copyright (c) 2016 CJ Patoilo\n * Licensed under the MIT license\n*/\n' | cat - $m > temp && mv temp $m; done", + "sass": "node-sass --output-style expanded src/milligram.sass dist/milligram.css && node-sass --output-style compressed src/milligram.sass dist/milligram.min.css", + "autoprefixer": "postcss -u autoprefixer --no-map.inline --autoprefixer.browsers 'last 1 versions' -r dist/*.css", + "build": "npm-run-all lint sass autoprefixer banner", + "lint": "sass-lint -c .sass-lint.yml 'src/*.sass' --verbose --no-exit", + "watch": "onchange src -- npm run build", + "serve": "browser-sync start -s test --ss dist -f dist", + "start": "npm-run-all -p watch serve", + "test": "cd node_modules/backstopjs && npm run test -- --configPath=../../test/visual/backstop.config.js && cd ../../" + } } From 926e8c7ba9d37526c2be5ce684f8928f7fc6d6cc Mon Sep 17 00:00:00 2001 From: Jack McNicol Date: Mon, 1 Aug 2016 15:34:03 +0930 Subject: [PATCH 2/4] update src to correct lint issue --- src/_Blockquote.sass | 2 +- src/_Button.sass | 12 ++++++------ src/_Code.sass | 2 +- src/_Form.sass | 8 ++++---- src/_Grid.sass | 43 ++++++++++++++++++------------------------- 5 files changed, 30 insertions(+), 37 deletions(-) diff --git a/src/_Blockquote.sass b/src/_Blockquote.sass index 29e5772..1305284 100644 --- a/src/_Blockquote.sass +++ b/src/_Blockquote.sass @@ -3,7 +3,7 @@ // –––––––––––––––––––––––––––––––––––––––––––––––––– blockquote - border-left: 0.3rem solid $color-quaternary + border-left: .3rem solid $color-quaternary margin-left: 0 margin-right: 0 padding: 1rem 1.5rem diff --git a/src/_Button.sass b/src/_Button.sass index 7c1763c..27279f9 100644 --- a/src/_Button.sass +++ b/src/_Button.sass @@ -33,8 +33,8 @@ input[type='submit'] &.button-disabled, &[disabled] - opacity: .5 cursor: default + opacity: .5 &:hover, &:focus @@ -42,33 +42,33 @@ input[type='submit'] border-color: $color-primary &.button-outline - color: $color-primary background-color: transparent + color: $color-primary &:hover, &:focus - color: $color-secondary background-color: transparent border-color: $color-secondary + color: $color-secondary &.button-disabled, &[disabled] &:hover, &:focus - color: $color-primary border-color: inherit + color: $color-primary &.button-clear - color: $color-primary background-color: transparent border-color: transparent + color: $color-primary &:hover, &:focus - color: $color-secondary background-color: transparent border-color: transparent + color: $color-secondary &.button-disabled, &[disabled] diff --git a/src/_Code.sass b/src/_Code.sass index 09e17c2..79cf17b 100644 --- a/src/_Code.sass +++ b/src/_Code.sass @@ -6,8 +6,8 @@ code background: $color-tertiary border-radius: .4rem font-size: 86% - padding: .2rem .5rem margin: 0 .2rem + padding: .2rem .5rem white-space: nowrap pre diff --git a/src/_Form.sass b/src/_Form.sass index 6270d2e..b57ea23 100644 --- a/src/_Form.sass +++ b/src/_Form.sass @@ -25,22 +25,22 @@ select outline: 0 select - padding: 0.6rem 3rem 0.6rem 1rem background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAyOSAxNCIgd2lkdGg9IjI5Ij48cGF0aCBmaWxsPSIjZDFkMWQxIiBkPSJNOS40IDMuNmw1IDcgNS4yLTciLz48L3N2Zz4=) center right no-repeat + padding: .6rem 3rem .6rem 1rem &:focus background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAyOSAxNCIgd2lkdGg9IjI5Ij48cGF0aCBmaWxsPSIjOWI0ZGNmIiBkPSJNMTkuNiAzLjZIOS40bDUgNyIvPjwvc3ZnPg==) textarea + min-height: 6.5rem padding-bottom: .6rem padding-top: .6rem - min-height: 6.5rem label, legend + display: block font-size: 1.6rem font-weight: 700 - display: block margin-bottom: .5rem fieldset @@ -52,6 +52,6 @@ input[type='radio'] display: inline .label-inline - font-weight: normal display: inline-block + font-weight: normal margin-left: .5rem diff --git a/src/_Grid.sass b/src/_Grid.sass index f46489a..08295a4 100644 --- a/src/_Grid.sass +++ b/src/_Grid.sass @@ -21,21 +21,15 @@ padding: 0 width: 100% + // Larger than mobile screen + @media (min-width: 40.0rem) + flex-direction: row + margin-left: -1.0rem + width: calc(100% + 2.0rem) + &.row-wrap flex-wrap: wrap - &.row-no-padding - padding: 0 - - &> .column - padding: 0 - - // & + .row - // margin-top: -.5rem - // padding-top: 0 - - // Vertically Align Columns - // .row-* vertically aligns every .col in the .row &.row-top align-items: flex-start @@ -51,6 +45,12 @@ &.row-baseline align-items: baseline + &.row-no-padding + padding: 0 + + &> .column + padding: 0 + .column display: block flex: 1 @@ -58,6 +58,10 @@ max-width: 100% width: 100% + @media (min-width: 40.0rem) + margin-bottom: inherit + padding: 0 1.0rem + // .column-* vertically aligns an individual .column .col-top align-self: flex-start @@ -131,7 +135,8 @@ flex: 0 0 60% max-width: 60% - &.column-66, &.column-67 + &.column-66, + &.column-67 flex: 0 0 66.6666% max-width: 66.6666% @@ -146,15 +151,3 @@ &.column-90 flex: 0 0 90% max-width: 90% - -// Larger than mobile screen -@media (min-width: 40.0rem) - - .row - flex-direction: row - margin-left: -1.0rem - width: calc(100% + 2.0rem) - - .column - margin-bottom: inherit - padding: 0 1.0rem From 4cf06b0d0bddddbcd68155df8ee8a1bdd008e94f Mon Sep 17 00:00:00 2001 From: CJ Patoilo Date: Sat, 6 Aug 2016 09:34:11 -0300 Subject: [PATCH 3/4] Fix space to tab --- package.json | 143 ++++++++++++++++++++++++++------------------------- 1 file changed, 72 insertions(+), 71 deletions(-) diff --git a/package.json b/package.json index 323d46a..b8d8cbe 100644 --- a/package.json +++ b/package.json @@ -1,73 +1,74 @@ { - "name": "milligram", - "version": "1.1.0", - "description": "A minimalist CSS framework.", - "homepage": "http://milligram.github.io", - "repository": "milligram/milligram", - "license": "MIT", - "author": "CJ Patoilo ", - "main": "dist/milligram.css", - "keywords": [ - "bootstrap", - "css", - "css3", - "flexbox", - "front-end", - "framework", - "html", - "html5", - "kickstarter", - "less", - "responsive", - "mobile", - "mobile-first", - "postcss", - "responsive", - "sass", - "scss", - "stylus" - ], - "ignore": [ - ".editorconfig", - ".github", - ".gitignore", - ".npmignore", - ".travis.yml", - "bower.json", - "changelog.md", - "component.json", - "composer.json", - "package.js", - "package.json", - "src", - "test" - ], - "dependencies": { - "normalize.css": "latest" - }, - "devDependencies": { - "autoprefixer": "^6.3.6", - "backstopjs": "^1.3.5", - "browser-sync": "^2.13.0", - "node-sass": "^3.7.0", - "npm-run-all": "^2.1.1", - "onchange": "^2.4.0", - "postcss-cli": "^2.5.2", - "sass-lint": "^1.8.2", - "slimerjs": "^0.906.2" - }, - "engines": { - "node": "^6.0.0" - }, - "scripts": { - "banner": "for m in dist/*.css; do echo '/*!\n * Milligram v1.1.0\n * http://milligram.github.io\n *\n * Copyright (c) 2016 CJ Patoilo\n * Licensed under the MIT license\n*/\n' | cat - $m > temp && mv temp $m; done", - "sass": "node-sass --output-style expanded src/milligram.sass dist/milligram.css && node-sass --output-style compressed src/milligram.sass dist/milligram.min.css", - "autoprefixer": "postcss -u autoprefixer --no-map.inline --autoprefixer.browsers 'last 1 versions' -r dist/*.css", - "build": "npm-run-all lint sass autoprefixer banner", - "lint": "sass-lint -c .sass-lint.yml 'src/*.sass' --verbose --no-exit", - "watch": "onchange src -- npm run build", - "serve": "browser-sync start -s test --ss dist -f dist", - "start": "npm-run-all -p watch serve", - "test": "cd node_modules/backstopjs && npm run test -- --configPath=../../test/visual/backstop.config.js && cd ../../" - } + "name": "milligram", + "version": "1.1.0", + "description": "A minimalist CSS framework.", + "homepage": "http://milligram.github.io", + "repository": "milligram/milligram", + "license": "MIT", + "author": "CJ Patoilo ", + "main": "dist/milligram.css", + "keywords": [ + "bootstrap", + "css", + "css3", + "flexbox", + "front-end", + "framework", + "html", + "html5", + "kickstarter", + "less", + "responsive", + "mobile", + "mobile-first", + "postcss", + "responsive", + "sass", + "scss", + "stylus" + ], + "ignore": [ + ".editorconfig", + ".github", + ".gitignore", + ".npmignore", + ".travis.yml", + ".versions", + "bower.json", + "changelog.md", + "component.json", + "composer.json", + "package.js", + "package.json", + "src", + "test" + ], + "dependencies": { + "normalize.css": "latest" + }, + "devDependencies": { + "autoprefixer": "^6.3.6", + "backstopjs": "^1.3.5", + "browser-sync": "^2.13.0", + "node-sass": "^3.7.0", + "npm-run-all": "^2.1.1", + "onchange": "^2.4.0", + "postcss-cli": "^2.5.2", + "sass-lint": "^1.8.2", + "slimerjs": "^0.906.2" + }, + "engines": { + "node": "^6.0.0" + }, + "scripts": { + "banner": "for m in dist/*.css; do echo '/*!\n * Milligram v1.1.0\n * http://milligram.github.io\n *\n * Copyright (c) 2016 CJ Patoilo\n * Licensed under the MIT license\n*/\n' | cat - $m > temp && mv temp $m; done", + "autoprefixer": "postcss -u autoprefixer --no-map.inline --autoprefixer.browsers 'last 1 versions' -r dist/*.css", + "sass": "node-sass --output-style expanded src/milligram.sass dist/milligram.css && node-sass --output-style compressed src/milligram.sass dist/milligram.min.css", + "lint": "sass-lint -c .sasslintrc 'src/*.sass' --verbose --no-exit", + "build": "npm-run-all sass autoprefixer banner", + "watch": "onchange src -- npm run build", + "serve": "browser-sync start -s test --ss dist -f dist", + "start": "npm-run-all -p watch serve", + "test": "cd node_modules/backstopjs && npm run test -- --configPath=../../test/visual/backstop.config.js && cd ../../" + } } From 63e8700a7f6b1ec15f2a7b31e050ebe80666e516 Mon Sep 17 00:00:00 2001 From: CJ Patoilo Date: Sat, 6 Aug 2016 09:36:03 -0300 Subject: [PATCH 4/4] Rename .sass-lint to .sasslintrc Rename .sass-lint to .sasslintrc --- .sass-lint.yml => .sasslintrc | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename .sass-lint.yml => .sasslintrc (100%) diff --git a/.sass-lint.yml b/.sasslintrc similarity index 100% rename from .sass-lint.yml rename to .sasslintrc