diff --git a/.sasslintrc b/.sasslintrc new file mode 100644 index 0000000..1392187 --- /dev/null +++ b/.sasslintrc @@ -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 9ba3006..b8d8cbe 100644 --- a/package.json +++ b/package.json @@ -54,6 +54,7 @@ "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": { @@ -61,8 +62,9 @@ }, "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", + "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", 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