From 9780a80510eb4ecb7fe4a8a7dcfc2c8e6dbdc0d2 Mon Sep 17 00:00:00 2001 From: george Date: Thu, 17 Oct 2019 20:50:51 -0700 Subject: [PATCH 01/53] clean up flex mixin and add set-flow mixin to grid offset classes --- .stylelintignore | 1 + src/scss/elements/_form.scss | 10 +++++--- src/scss/layout/_grid.scss | 13 ++++++---- src/scss/utilities/_mixins.scss | 45 ++++++++++++++++++++++----------- stylelint.config.js | 2 -- 5 files changed, 46 insertions(+), 25 deletions(-) create mode 100644 .stylelintignore diff --git a/.stylelintignore b/.stylelintignore new file mode 100644 index 00000000..849ddff3 --- /dev/null +++ b/.stylelintignore @@ -0,0 +1 @@ +dist/ diff --git a/src/scss/elements/_form.scss b/src/scss/elements/_form.scss index 65ba3987..d95b45c5 100644 --- a/src/scss/elements/_form.scss +++ b/src/scss/elements/_form.scss @@ -11,7 +11,8 @@ textarea { } fieldset { - @include flex(flex, column); + display: flex; + flex-direction: column; background: $fieldset-background; border-radius: $fieldset-border-radius; border: $fieldset-border; @@ -41,12 +42,15 @@ form { } label { - @include flex(flex, column); + display: flex; + flex-direction: column; font-family: $form-font-family; } .has-check { - @include flex(flex, row, nowrap, $align: center); + display: flex; + flex-flow: row nowrap; + align-items: center; padding: $input-check-label-padding; } diff --git a/src/scss/layout/_grid.scss b/src/scss/layout/_grid.scss index c0593210..3161949e 100644 --- a/src/scss/layout/_grid.scss +++ b/src/scss/layout/_grid.scss @@ -18,7 +18,9 @@ $column: map-get($grid-classes, column); } .#{$grid} { - @include flex(flex, column, nowrap, 1, 1, 0); + display: flex; + flex-flow: column nowrap; + flex: 1 1 0; box-sizing: border-box; margin: 0 auto; max-width: $grid-width; @@ -46,15 +48,16 @@ $column: map-get($grid-classes, column); width: 100vw; .#{$row} { - @include flex($grow: 1, $shrink: 1, $basis: auto); + flex: 1 1 0; align-items: center; - align-content: center; } } } .#{$row} { - @include flex(flex, row, wrap, 1, 1, auto); + display: flex; + flex-flow: row wrap; + flex: 1 1 auto; position: relative; max-width: 100%; min-height: 1px; @@ -62,7 +65,7 @@ $column: map-get($grid-classes, column); .#{$column}s, .#{$column} { - @include flex($grow: 1, $shrink: 1, $basis: auto); + flex: 1 1 auto; box-sizing: border-box; max-width: 100%; min-height: 1px; diff --git a/src/scss/utilities/_mixins.scss b/src/scss/utilities/_mixins.scss index 0f0f29bb..91a9395e 100644 --- a/src/scss/utilities/_mixins.scss +++ b/src/scss/utilities/_mixins.scss @@ -1,28 +1,43 @@ -@mixin flex( - $display: null, - $direction: null, - $wrap: null, - $grow: null, - $shrink: null, - $basis: null, - $align: null -) { - display: $display; - flex-flow: $direction $wrap; - flex: $grow $shrink $basis; - align-items: $align; +@function str-replace($string, $search, $replace: "") { + $index: str-index($string, $search); + + @if $index { + @return str-slice($string, 1, $index - 1) + $replace + + str-replace(str-slice($string, $index + str-length($search)), $search, $replace); + } + + @return $string; +} + +@mixin set-flow($property, $value) { + $rtl-property: $property; + $rtl-value: $value; + + // output the original property + #{$property}: $value; + + // output rtl variant of property/value + html[dir="rtl"] &, + &[dir="rtl"] { + $rtl-property: str-replace($property, "left", "right"); + + @if type-of($rtl-value) == string { + $rtl-value: str-replace($value, "left", "right"); + } + #{$rtl-property}: $rtl-value; + } } @mixin grid-classes($size) { @for $i from 1 through $columns { .#{$size}-#{$i} { - @include flex($grow: 0, $shrink: 0, $basis: percentage($i / $columns)); + flex: 0 0 percentage($i / $columns); max-width: percentage($i / $columns); } @if $column-offset-classes == true { .#{$size}-offset-#{$i} { - margin-left: percentage($i / $columns); + @include set-flow("margin-left", percentage($i / $columns)); } } diff --git a/stylelint.config.js b/stylelint.config.js index dcb001c4..124dfc9c 100644 --- a/stylelint.config.js +++ b/stylelint.config.js @@ -137,8 +137,6 @@ module.exports = { "scss/map-keys-quotes": ALWAYS, - "scss/operator-no-newline-after": true, - "scss/operator-no-newline-before": true, "scss/operator-no-unspaced": true, "scss/selector-no-redundant-nesting-selector": true, From dc3cd47d256401abf4adaf26144622fbcfc8bd03 Mon Sep 17 00:00:00 2001 From: george Date: Thu, 17 Oct 2019 22:15:48 -0700 Subject: [PATCH 02/53] add set-flow to dropdown component. currently broken because missing default left positioning on various defaults of dropdown menu and arrows --- src/scss/components/_dropdown.scss | 20 ++++---- src/scss/utilities/_classes.scss | 14 ++++-- src/scss/utilities/_mixins.scss | 78 ++++++++++++++++-------------- 3 files changed, 64 insertions(+), 48 deletions(-) diff --git a/src/scss/components/_dropdown.scss b/src/scss/components/_dropdown.scss index 7a145a23..de413f9e 100644 --- a/src/scss/components/_dropdown.scss +++ b/src/scss/components/_dropdown.scss @@ -28,6 +28,7 @@ max-width: $dropdown-menu-max-width; border: $dropdown-menu-border; z-index: $dropdown-menu-index; + top: 100%; .modal-dialog & { z-index: $dropdown-menu-index-in-modal; @@ -43,6 +44,7 @@ @include breakpoint-up($dropdown-menu-direction-breakpoint) { &.is-drop-up { bottom: 100%; + top: auto; margin-bottom: $global-space; @include down-arrow( @@ -53,8 +55,8 @@ } &.is-drop-left { - right: 100%; - margin-right: $global-space; + @include set-flow("right", 100%); + @include set-flow("margin-right", $global-space); top: 0; @include right-arrow( @@ -65,8 +67,8 @@ } &.is-drop-right { - left: 100%; - margin-left: $global-space; + @include set-flow("left", 100%); + @include set-flow("margin-left", $global-space); top: 0; @include left-arrow( @@ -77,17 +79,17 @@ } &.is-aligned-right { - right: 0; + @include set-flow("right", 0); @include if-has-arrow { &::after { - left: auto; - right: $dropdown-arrow-offset; + @include set-flow("right", $dropdown-arrow-offset); + @include set-flow("left", auto); } &::before { - left: auto; - right: $dropdown-arrow-offset; + @include set-flow("right", $dropdown-arrow-offset); + @include set-flow("left", auto); } } } diff --git a/src/scss/utilities/_classes.scss b/src/scss/utilities/_classes.scss index c3c2aa1c..db3e8d91 100644 --- a/src/scss/utilities/_classes.scss +++ b/src/scss/utilities/_classes.scss @@ -15,10 +15,16 @@ font-family: $global-font-serif !important; } -@each $property in center, left, right { - .has-#{$property}-text { - text-align: $property !important; - } +.has-left-text { + @include set-flow("text-align", left !important); +} + +.has-center-text { + @include set-flow("text-align", center !important); +} + +.has-right-text { + @include set-flow("text-align", right !important); } .has-bold-text { diff --git a/src/scss/utilities/_mixins.scss b/src/scss/utilities/_mixins.scss index 91a9395e..2a46f03b 100644 --- a/src/scss/utilities/_mixins.scss +++ b/src/scss/utilities/_mixins.scss @@ -13,17 +13,25 @@ $rtl-property: $property; $rtl-value: $value; - // output the original property - #{$property}: $value; + @if type-of($value) == string { + @if str-index($value, "left") { + $rtl-value: str-replace($value, "left", "right"); + } @else if str-index($value, "right") { + $rtl-value: str-replace($value, "right", "left"); + } + } - // output rtl variant of property/value - html[dir="rtl"] &, - &[dir="rtl"] { + @if str-index($property, "left") { $rtl-property: str-replace($property, "left", "right"); + } @else if str-index($property, "right") { + $rtl-property: str-replace($property, "right", "left"); + } - @if type-of($rtl-value) == string { - $rtl-value: str-replace($value, "left", "right"); - } + html:not([dir="rtl"]) & { + #{$property}: $value; + } + + html[dir="rtl"] & { #{$rtl-property}: $rtl-value; } } @@ -97,11 +105,11 @@ $arrow-fill-position: $arrow-size * -2 + 1.5px; $arrow-border-position: $arrow-size * -2; @mixin arrow-base { - content: ""; + @include set-flow("border-left", $arrow-size solid transparent); + @include set-flow("border-right", $arrow-size solid transparent); border-bottom: $arrow-size solid transparent; border-top: $arrow-size solid transparent; - border-left: $arrow-size solid transparent; - border-right: $arrow-size solid transparent; + content: ""; position: absolute; } @@ -109,20 +117,20 @@ $arrow-border-position: $arrow-size * -2; @include if-has-arrow { &::after { @include arrow-base; - border-bottom: $arrow-size solid $fill-color; + @include set-flow("left", $edge-offset); + @include set-flow("right", auto); top: $arrow-fill-position; - left: $edge-offset; - right: auto; bottom: auto; + border-bottom: $arrow-size solid $fill-color; } &::before { @include arrow-base; - border-bottom: $arrow-size solid $border-color; + @include set-flow("left", $edge-offset); + @include set-flow("right", auto); top: $arrow-border-position; - left: $edge-offset; - right: auto; bottom: auto; + border-bottom: $arrow-size solid $border-color; } } } @@ -131,20 +139,20 @@ $arrow-border-position: $arrow-size * -2; @include if-has-arrow { &::after { @include arrow-base; - border-top: $arrow-size solid $fill-color; + @include set-flow("left", $edge-offset); + @include set-flow("right", auto); bottom: $arrow-fill-position; - left: $edge-offset; top: auto; - right: auto; + border-top: $arrow-size solid $fill-color; } &::before { @include arrow-base; - border-top: $arrow-size solid $border-color; + @include set-flow("left", $edge-offset); + @include set-flow("right", auto); bottom: $arrow-border-position; - left: $edge-offset; top: auto; - right: auto; + border-top: $arrow-size solid $border-color; } } } @@ -153,19 +161,19 @@ $arrow-border-position: $arrow-size * -2; @include if-has-arrow { &::after { @include arrow-base; - border-left: $arrow-size solid $fill-color; - right: $arrow-fill-position; + @include set-flow("border-left", $arrow-size solid $fill-color); + @include set-flow("right", $arrow-fill-position); + @include set-flow("left", auto); top: $edge-offset; - left: auto; bottom: auto; } &::before { @include arrow-base; - border-left: $arrow-size solid $border-color; - right: $arrow-border-position; + @include set-flow("border-left", $arrow-size solid $border-color); + @include set-flow("right", $arrow-border-position); + @include set-flow("left", auto); top: $edge-offset; - left: auto; bottom: auto; } } @@ -175,20 +183,20 @@ $arrow-border-position: $arrow-size * -2; @include if-has-arrow { &::after { @include arrow-base; - border-right: $arrow-size solid $fill-color; - left: $arrow-fill-position; + @include set-flow("border-right", $arrow-size solid $fill-color); + @include set-flow("left", $arrow-fill-position); + @include set-flow("right", auto); top: $edge-offset; bottom: auto; - right: auto; } &::before { @include arrow-base; - border-right: $arrow-size solid $border-color; - left: $arrow-border-position; + @include set-flow("border-right", $arrow-size solid $border-color); + @include set-flow("left", $arrow-border-position); + @include set-flow("right", auto); top: $edge-offset; bottom: auto; - right: auto; } } } From d342a8d26435a902db661095dabc16b72dc77845 Mon Sep 17 00:00:00 2001 From: george Date: Sat, 19 Oct 2019 16:27:09 -0700 Subject: [PATCH 03/53] Update scripts, spacing, and ignore reset css --- .stylelintignore | 1 + stylelint.config.js => .stylelintrc.js | 9 ++++----- package.json | 8 ++++---- src/scss/undernet.scss | 7 +++++-- src/scss/utilities/_reset.scss | 5 ++--- 5 files changed, 16 insertions(+), 14 deletions(-) rename stylelint.config.js => .stylelintrc.js (98%) diff --git a/.stylelintignore b/.stylelintignore index 849ddff3..bcda16c1 100644 --- a/.stylelintignore +++ b/.stylelintignore @@ -1 +1,2 @@ dist/ +src/scss/utilities/_reset.scss diff --git a/stylelint.config.js b/.stylelintrc.js similarity index 98% rename from stylelint.config.js rename to .stylelintrc.js index 124dfc9c..b80257ec 100644 --- a/stylelint.config.js +++ b/.stylelintrc.js @@ -8,6 +8,10 @@ module.exports = { // CSS // https://github.com/stylelint/stylelint/blob/master/docs/user-guide/rules.md + // This will be flagged by the script `scss:lint:check` + // Please ignore the error :) + "rule-empty-line-before": [ALWAYS, { except: ["first-nested"], ignore: ["after-comment"] }], + "at-rule-blacklist": ["debug"], "at-rule-name-space-after": ALWAYS, "at-rule-no-vendor-prefix": true, @@ -77,10 +81,6 @@ module.exports = { "property-no-unknown": true, - // This will be flagged by the script `scss:lint:check` - // Please ignore the error :) - "rule-empty-line-before": [ALWAYS, { except: ["first-nested"], ignore: ["after-comment"] }], - "selector-attribute-brackets-space-inside": NEVER, "selector-attribute-operator-blacklist": [], "selector-attribute-operator-space-after": NEVER, @@ -119,7 +119,6 @@ module.exports = { "scss/at-mixin-argumentless-call-parentheses": NEVER, "scss/at-mixin-parentheses-space-before": NEVER, "scss/at-each-key-value-single-line": true, - "scss/at-rule-conditional-no-parentheses": true, "scss/at-rule-no-unknown": true, "scss/declaration-nested-properties": NEVER, diff --git a/package.json b/package.json index b80093c0..dcfb3895 100644 --- a/package.json +++ b/package.json @@ -21,7 +21,7 @@ "scss:lint:check": "stylelint-config-prettier-check", "js:lint": "eslint . --ext .js -c .eslintrc.js --ignore-path .eslintignore", "build:dist": "npm run js:build && npm run js:build:rollup && npm run css:build && npm run css:minify", - "build:dist:release": "npm run clean && npm run scss:prepublish && npm run css:prepublish && npm run js:prepublish && npm run create-hashes", + "build:dist:release": "npm run clean && npm run scss:prepublish && npm run css:prepublish && npm run js:prepublish && npm run node:create-hashes", "prettify": "npm run js:prettify && npm run scss:prettify", "clean": "rm -rf dist/ lib/ && mkdir dist/ lib/", "js:build": "npm run js:build:cjs && npm run js:build:esm", @@ -39,10 +39,10 @@ "css:prepublish": "npm run css:package && cd dist/ && zip -r undernet.css.zip . -x *.js *.zip *.js.map", "scss:prettify": "prettier --write 'src/scss/**/*.scss'", "scss:prepublish": "cd src/scss/ && zip -r ../../dist/undernet.scss.zip .", - "update-version": "node bin/update-version.js", - "create-hashes": "node bin/create-hashes.js", + "node:update-version": "node bin/update-version.js", + "node:create-hashes": "node bin/create-hashes.js", "preversion": "npm run js:build && npm test", - "postversion": "npm run update-version && npm run build:dist:release && git add -A && git commit --amend" + "postversion": "npm run node:update-version && npm run build:dist:release && git add -A && git commit --amend" }, "devDependencies": { "@babel/cli": "^7.4.4", diff --git a/src/scss/undernet.scss b/src/scss/undernet.scss index 3ca75b26..192852a2 100644 --- a/src/scss/undernet.scss +++ b/src/scss/undernet.scss @@ -3,24 +3,27 @@ * Undernet v5.1.0 (https://undernet.io) * Copyright 2017-2019 George Treviranus */ + @charset "UTF-8"; @import "utilities/functions"; @import "config"; @import "utilities/mixins"; +// Enable a scope in _config.scss +// Read more here: https://www.undernet.io/docs/overview/branding +// // .#{$scope} { +// // Reset within scope is optional @import "utilities/reset"; @import "utilities/classes"; @import "layout/grid"; - @import "elements/typography"; @import "elements/button"; @import "elements/form"; - @import "components/dropdown"; @import "components/modal"; @import "components/accordion"; diff --git a/src/scss/utilities/_reset.scss b/src/scss/utilities/_reset.scss index 4811484f..d9c73b0f 100644 --- a/src/scss/utilities/_reset.scss +++ b/src/scss/utilities/_reset.scss @@ -1,9 +1,8 @@ // Modified minireset.css -/*! minireset.css v0.0.5 | MIT License | github.com/jgthms/minireset.css */ -// This file doesn't need to worry about linting or being pretty. +// minireset.css v0.0.5 | MIT License | github.com/jgthms/minireset.css -// stylelint-disable +// This file doesn't need to worry about linting or being pretty. html, body, From 6959e4de698635b5ec2be4291ece21e13f400aed Mon Sep 17 00:00:00 2001 From: george Date: Sat, 19 Oct 2019 23:38:37 -0700 Subject: [PATCH 04/53] update classes with rtl and unify names --- app/docs/alignment.md | 132 ++++++++++++++++--------------- src/scss/utilities/_classes.scss | 112 +++++++++++++++----------- src/scss/utilities/_mixins.scss | 6 +- 3 files changed, 136 insertions(+), 114 deletions(-) diff --git a/app/docs/alignment.md b/app/docs/alignment.md index 1c8e6c3a..61119752 100644 --- a/app/docs/alignment.md +++ b/app/docs/alignment.md @@ -1,4 +1,6 @@ -Included in the CSS are a few dozen utility classes for arranging content. They can be used with or without the [flex grid](/docs/layout/grid). As such, these classes are `flex` modifiers and depend on the element also having an attribute of `display: flex;`. +Included in the CSS are a few dozen utility classes for arranging content. They can be used with or without the [flex grid](/docs/layout/grid). As such, these classes are `flex` modifiers and depend on the element also having an attribute of `display: flex;`. + +When in doubt, use `is-display-flex` in addition to the class you need! ## Rows & Columns @@ -6,89 +8,89 @@ To manually arrange children in a container as in a row or in a column, you can
-

.is-flex-row

-
-
-
+

.has-direction-row

+
+
+
-

.is-flex-column

-
-
-
+

.has-direction-column

+
+
+
## Justify content -To manually apply a `justify-content` property to an element's horizontal position (or vertical if the container is a flex column), use the helper class `is-justified-X`, where `X` is the position you want. +To manually apply a `justify-content` property to an element's horizontal position (or vertical if the container is a flex column), use the helper class `has-justify-content-X`, where `X` is the position you want.
-

.is-justified-flex-start

-
-
+

.has-justify-content-flex-start

+
+
-

.is-justified-center

-
-
+

.has-justify-content-center

+
+
-

.is-justified-flex-end

-
-
+

.has-justify-content-flex-end

+
+
-

.is-justified-space-around

-
-
-
+

.has-justify-content-space-around

+
+
+
-

.is-justified-space-between

-
-
-
+

.has-justify-content-space-between

+
+
+
## Align Items & Align Content -To manually apply `align-items` or `align-content` properties to an element for vertical positioning (or horizontal if the container is a flex column), use the helper class `is-aligned-X` or `has-content-X`, respectively, where `X` is the position you want. +To manually apply `align-items` or `align-content` properties to an element for vertical positioning (or horizontal if the container is a flex column), use the helper class `has-align-content-X` or `has-content-X`, respectively, where `X` is the position you want. ### align-items
-

.is-aligned-flex-start

-
-
+

.has-align-content-flex-start

+
+
-

.is-aligned-center

-
-
+

.has-align-content-center

+
+
-

.is-aligned-flex-end

-
-
+

.has-align-content-flex-end

+
+
-

.is-aligned-stretch

-
-
+

.has-align-content-stretch

+
+
@@ -99,77 +101,77 @@ To manually apply `align-items` or `align-content` properties to an element for

.has-content-flex-start

-
-
+
+

.has-content-center

-
-
+
+

.has-content-flex-end

-
-
+
+

.has-content-space-around

-
-
+
+

.has-content-space-between

-
-
+
+

.has-content-stretch

-
-
+
+
## Grow & Shrink -To manually set elements in a container to grow or shrink, add the class `can-X`, where `X` is `grow` or `shrink`. Similarly you can force the elements to not grow or shrink with `wont-X`. +To manually set elements in a container to grow or shrink, add the class `has-X-#`, where `X` is `grow` or `shrink`, and `#` is `0` or `1`. `0` means disabled, `1` means enabled.
-
-
.can-grow
-
.can-grow
+
+
.has-grow-1
+
.has-grow-1
-
-
.wont-grow
-
.wont-grow
+
+
.has-grow-0
+
.has-grow-0
-
-
.can-shrink.wont-grow
-
.can-shrink.wont-grow
+
+
.has-shrink-1.has-grow-0
+
.has-shrink-1.has-grow-0
-
-
.wont-shrink.can-grow
-
.wont-shrink.can-grow
+
+
.has-shrink-0.has-grow-1
+
.has-shrink-0.has-grow-1
diff --git a/src/scss/utilities/_classes.scss b/src/scss/utilities/_classes.scss index db3e8d91..a9e497c2 100644 --- a/src/scss/utilities/_classes.scss +++ b/src/scss/utilities/_classes.scss @@ -5,7 +5,7 @@ @include using-keyboard; } -// Typography style modifiers +// `font-family` modifiers .has-sans-text { font-family: $global-font-sans !important; @@ -15,17 +15,7 @@ font-family: $global-font-serif !important; } -.has-left-text { - @include set-flow("text-align", left !important); -} - -.has-center-text { - @include set-flow("text-align", center !important); -} - -.has-right-text { - @include set-flow("text-align", right !important); -} +// `font-weight` modifiers .has-bold-text { font-weight: $global-font-weight-bold !important; @@ -35,7 +25,15 @@ font-style: $global-font-style-italic !important; } -// Color modifier for text and backgrounds +// `text-align` modifiers + +@each $direction in left, center, right { + .has-#{$direction}-text { + @include set-flow("text-align", $direction !important); + } +} + +// `color` modifier for text and backgrounds @each $name, $color in $full-palette { .has-#{$name}-text { @@ -47,23 +45,22 @@ } } -// Visibility modifiers by breakpoint +// `display` modifiers @each $size, $value in $breakpoints { $breakpoint-index: index($breakpoints, ($size $value)); // If the index is on the first item in $breakpoints - @if $breakpoint-index == 1 { - .is-flex { + .has-display-flex { display: flex !important; } - .is-block { + .has-display-block { display: block !important; } - .is-hidden { + .has-display-hidden { display: none !important; } } @else { @@ -76,7 +73,7 @@ // `flex-direction` modifiers @each $property in row, column { - .is-flex-#{$property} { + .has-direction-#{$property} { flex-direction: $property !important; } } @@ -84,7 +81,7 @@ // `justify-content` modifiers @each $property in center, flex-end, flex-start, space-around, space-between { - .is-justified-#{$property} { + .has-justify-content-#{$property} { justify-content: $property !important; } } @@ -92,7 +89,7 @@ // `align-items` modifiers @each $property in center, flex-end, flex-start, stretch { - .is-aligned-#{$property} { + .has-align-items-#{$property} { align-items: $property !important; } } @@ -100,27 +97,21 @@ // `align-content` modifiers @each $property in center, flex-end, flex-start, space-around, space-between, stretch { - .has-content-#{$property} { + .has-align-content-#{$property} { align-content: $property !important; } } // `flex-grow` and `flex-shrink` modifiers -.can-grow { - flex-grow: 1 !important; -} - -.can-shrink { - flex-shrink: 1 !important; -} - -.wont-grow { - flex-grow: 0 !important; -} +@each $value in 0, 1 { + .has-grow-#{$value} { + flex-grow: $value !important; + } -.wont-shrink { - flex-shrink: 0 !important; + .has-shrink-#{$value} { + flex-shrink: $value !important; + } } // Spacing modifier removes from all sides @@ -135,7 +126,17 @@ // Spacing modifier removes from a single side only -@each $side in left, right, top, bottom { +@each $side in left, right { + .has-no-padding-#{$side} { + @include set-flow("padding-#{$side}", 0 !important); + } + + .has-no-margin-#{$side} { + @include set-flow("margin-#{$side}", 0 !important); + } +} + +@each $side in top, bottom { .has-no-padding-#{$side} { padding-#{$side}: 0 !important; } @@ -157,7 +158,17 @@ // Spacing modifier on a single side only -@each $side in left, right, top, bottom { +@each $side in left, right { + .has-padding-#{$side} { + @include set-flow("padding-#{$side}", $global-space !important); + } + + .has-margin-#{$side} { + @include set-flow("margin-#{$side}", $global-space !important); + } +} + +@each $side in top, bottom { .has-padding-#{$side} { padding-#{$side}: $global-space !important; } @@ -167,9 +178,11 @@ } } -@each $size, $value in $spacing-increments { - // Spacing modifier on all sides, for each spacing increment +// 1. Spacing modifier on all sides, for each spacing increment +// 2. Spacing modifier on a single side only, for each spacing increment +@each $size, $value in $spacing-increments { + // 1 .has-padding-#{$size} { padding: $value !important; } @@ -178,9 +191,18 @@ margin: $value !important; } - // Spacing modifier on single side only, for each spacing increment + // 2 + @each $side in left, right { + .has-margin-#{$side}-#{$size} { + @include set-flow("margin-#{$side}:", $value !important); + } + + .has-padding-#{$side}-#{$size} { + @include set-flow("padding-#{$side}:", $value !important); + } + } - @each $side in left, right, top, bottom { + @each $side in top, bottom { .has-margin-#{$side}-#{$size} { margin-#{$side}: $value !important; } @@ -188,8 +210,8 @@ .has-padding-#{$side}-#{$size} { padding-#{$side}: $value !important; } - } -} + } // end @each +} // end @each // List style modifier @@ -198,12 +220,10 @@ padding-left: 0 !important; } -// A11y -// https://gomakethings.com/hidden-content-for-better-a11y/ - // Visually hide an element, but leave it available for screen readers // https://github.com/h5bp/html5-boilerplate/blob/master/dist/css/main.css // http://snook.ca/archives/html_and_css/hiding-content-for-accessibility +// https://gomakethings.com/hidden-content-for-better-a11y/ %visually-hidden { border: 0; diff --git a/src/scss/utilities/_mixins.scss b/src/scss/utilities/_mixins.scss index 2a46f03b..ceae2c84 100644 --- a/src/scss/utilities/_mixins.scss +++ b/src/scss/utilities/_mixins.scss @@ -202,15 +202,15 @@ $arrow-border-position: $arrow-size * -2; } @mixin visibility($size) { - .is-flex-#{$size} { + .has-display-flex-#{$size} { display: flex !important; } - .is-block-#{$size} { + .has-display-block-#{$size} { display: block !important; } - .is-hidden-#{$size} { + .has-display-hidden-#{$size} { display: none !important; } } From da015c0307e3bccce0488318e39c4565a3a2f785 Mon Sep 17 00:00:00 2001 From: george Date: Sun, 20 Oct 2019 14:44:13 -0700 Subject: [PATCH 05/53] update class names with logical property labels --- .stylelintignore | 1 + app/components/Footer/Footer.js | 6 +- .../__snapshots__/Footer.spec.js.snap | 6 +- app/components/PageNotFound/PageNotFound.js | 2 +- .../__snapshots__/PageNotFound.spec.js.snap | 2 +- app/components/SideNav/SideNav.js | 15 +- app/docs/accordions.md | 2 +- app/docs/alignment.md | 68 +++++----- app/docs/branding.md | 2 +- app/docs/buttons.md | 2 +- app/docs/color.md | 2 +- app/docs/display.md | 12 +- app/docs/download.md | 2 +- app/docs/dropdowns.md | 36 ++--- app/docs/forms.md | 2 +- app/docs/grid.md | 22 +-- app/docs/introduction.md | 2 +- app/docs/javascript.md | 2 +- app/docs/modals.md | 2 +- app/docs/offset-order.md | 2 +- app/docs/spacing.md | 18 +-- app/docs/text.md | 14 +- app/docs/tooltips.md | 12 +- app/docs/typography.md | 2 +- app/layouts/Main/Main.js | 3 +- .../__tests__/__snapshots__/Main.spec.js.snap | 6 +- app/pages/Home/Home.js | 16 +-- .../__tests__/__snapshots__/Home.spec.js.snap | 22 +-- src/js/tooltip.js | 4 +- src/scss/components/_dropdown.scss | 6 +- src/scss/components/_tooltip.scss | 4 +- src/scss/utilities/_classes.scss | 128 +++++++++++------- src/scss/utilities/_mixins.scss | 2 +- 33 files changed, 227 insertions(+), 200 deletions(-) diff --git a/.stylelintignore b/.stylelintignore index bcda16c1..327b016c 100644 --- a/.stylelintignore +++ b/.stylelintignore @@ -1,2 +1,3 @@ dist/ +app/docs/* src/scss/utilities/_reset.scss diff --git a/app/components/Footer/Footer.js b/app/components/Footer/Footer.js index f3e6ffaa..e42202e2 100644 --- a/app/components/Footer/Footer.js +++ b/app/components/Footer/Footer.js @@ -15,21 +15,21 @@ export default function Footer(props) {
-

+

Undernet is a front-end framework created and maintained by{" "} George Treviranus .

-

+

Animations provided by{" "} Gavin Folgert . ❤️

-
@@ -380,11 +380,11 @@ A few classes will add the styling necessary of hide/show, and add menu position - `dropdown`: the container class providing inline and relative positioning of the component. - `dropdown-menu`: the menu class that provides positioning relative to the button. -- `is-aligned-right`: a helper class that aligns the menu to the right of the dropdown button. +- `is-aligned-end`: a helper class that aligns the menu to the right of the dropdown button. - `is-aligned-bottom`: a helper class that aligns the menu to the bottom of the dropdown button. - `is-drop-up`: a helper class that positions the menu upward when open. -- `is-drop-left`: a helper class that positions the menu left when open. -- `is-drop-right`: a helper class that positions the menu right when open. +- `is-drop-start`: a helper class that positions the menu left when open. +- `is-drop-end`: a helper class that positions the menu right when open. ### API @@ -399,4 +399,4 @@ Undernet.Dropdowns.start() ```
-

Is this article inaccurate? Edit this page on Github!

+

Is this article inaccurate? Edit this page on Github!

diff --git a/app/docs/forms.md b/app/docs/forms.md index fee90853..e7ca7caa 100644 --- a/app/docs/forms.md +++ b/app/docs/forms.md @@ -155,4 +155,4 @@ The `disabled` class will visually dim the control, but not disable it functiona ```
-

Is this article inaccurate? Edit this page on Github!

+

Is this article inaccurate? Edit this page on Github!

diff --git a/app/docs/grid.md b/app/docs/grid.md index 3d231344..ca521434 100644 --- a/app/docs/grid.md +++ b/app/docs/grid.md @@ -20,7 +20,7 @@ Also worth note, but not included in detail in this article, are offset and orde The basic wrapper of a layout uses the `grid` class. Grids are automatically centered (`margin: 0 auto`) and have a left and right gutter. Note that a grid container is entirely optional if you already have a wrapper with your desired properties. -
+
.grid
@@ -36,16 +36,16 @@ A grid is a flex container with `column` direction. These are modifiers to the grid container that change its `max-width`. -
+
.narrow.grid
-
+
.grid
-
+
.wide.grid
-
+
.fluid.grid
@@ -68,13 +68,13 @@ These are modifiers to the grid container that change its `max-width`. Sections do the same, but add top and bottom padding. This can be helpful for creating content folds with colored backgrounds (i.e., for marketing pages). -
+
.small-section.grid
-
+
.medium-section.grid
-
+
.large-section.grid
@@ -120,10 +120,10 @@ If you add a column element inside a row, they stack next to each other with equ
-
+

.column

-
+

.column

@@ -319,4 +319,4 @@ By default, a row will be vertically centered. To make the row top-aligned, add [Learn more about alignment utilities.](/docs/layout/alignment)
-

Is this article inaccurate? Edit this page on Github!

+

Is this article inaccurate? Edit this page on Github!

diff --git a/app/docs/introduction.md b/app/docs/introduction.md index 983271b0..e1428d60 100644 --- a/app/docs/introduction.md +++ b/app/docs/introduction.md @@ -35,4 +35,4 @@ Undernet is completely [open source](https://en.wikipedia.org/wiki/Free_and_open Contribute on [Github](https://www.github.com/geotrev/undernet/issues) if you have questions or a want to file a bug report. Be sure to [read about contributing](https://github.com/geotrev/undernet/blob/master/CONTRIBUTING.md) before filing a bug or pull request.
-

Is this article inaccurate? Edit this page on Github!

+

Is this article inaccurate? Edit this page on Github!

diff --git a/app/docs/javascript.md b/app/docs/javascript.md index e487b55f..dc386e6e 100644 --- a/app/docs/javascript.md +++ b/app/docs/javascript.md @@ -92,4 +92,4 @@ Tooltips.start() ```
-

Is this article inaccurate? Edit this page on Github!

+

Is this article inaccurate? Edit this page on Github!

diff --git a/app/docs/modals.md b/app/docs/modals.md index 6b894cd5..ad4a1d10 100644 --- a/app/docs/modals.md +++ b/app/docs/modals.md @@ -221,4 +221,4 @@ Undernet.Modals.start() ```
-

Is this article inaccurate? Edit this page on Github!

+

Is this article inaccurate? Edit this page on Github!

diff --git a/app/docs/offset-order.md b/app/docs/offset-order.md index ce4117e7..53b94b11 100644 --- a/app/docs/offset-order.md +++ b/app/docs/offset-order.md @@ -57,4 +57,4 @@ You can also use traditional offset if you need to break out of the grid. Switch ```
-

Is this article inaccurate? Edit this page on Github!

+

Is this article inaccurate? Edit this page on Github!

diff --git a/app/docs/spacing.md b/app/docs/spacing.md index b4cb2c38..c23a3553 100644 --- a/app/docs/spacing.md +++ b/app/docs/spacing.md @@ -13,8 +13,8 @@ Add padding or margin to all sides of an element. Value defaults to `$global-spa Add padding or margin to one side, e.g. `has-margin-X`, where `X` is the side you want. Value defaults to `$global-space`. -
- .has-padding-left +
+ .has-padding-start
.has-margin-top
@@ -35,8 +35,8 @@ If the default value of `$global-space` isn't the right size, don't worry, there Define a spacing size with a side, e.g. `has-padding-X-Y`, where `X` is the side and `Y` is the size. -
- .has-padding-left-1 +
+ .has-padding-start-1
.has-margin-top-4
@@ -55,12 +55,12 @@ Remove padding or margin from all sides of an element. Further, remove padding or margin from specifically one side using `has-no-padding-X`, where `X` is the side you want. -
- .has-no-padding-left -
- .has-no-margin-top +
+ .has-no-padding-start +
+ .has-margin.has-no-margin-top
-

Is this article inaccurate? Edit this page on Github!

+

Is this article inaccurate? Edit this page on Github!

diff --git a/app/docs/text.md b/app/docs/text.md index 17abb8ae..f2716834 100644 --- a/app/docs/text.md +++ b/app/docs/text.md @@ -16,14 +16,14 @@ Change an element and/or it's children to use sans or sans-serif font family as Align text left, right, or center. -

I'm aligned left!

-

I'm aligned center!

-

I'm aligned right!

+

I'm aligned left!

+

I'm aligned center!

+

I'm aligned right!

```html -

I'm aligned left!

-

I'm aligned center!

-

I'm aligned right!

+

I'm aligned left!

+

I'm aligned center!

+

I'm aligned right!

``` ## Font Weight @@ -39,4 +39,4 @@ Make your font bold or italic. ```
-

Is this article inaccurate? Edit this page on Github!

+

Is this article inaccurate? Edit this page on Github!

diff --git a/app/docs/tooltips.md b/app/docs/tooltips.md index 50b912ce..0274ce00 100644 --- a/app/docs/tooltips.md +++ b/app/docs/tooltips.md @@ -130,16 +130,16 @@ Because `disabled` elements aren't focusable, you will need to instead place any ## Direction -Have the tooltip appear from the left, right, or bottom position by adding `is-drop-left`, `is-drop-right`, or `is-drop-down`, respectively. +Have the tooltip appear from the left, right, or bottom position by adding `is-drop-start`, `is-drop-end`, or `is-drop-down`, respectively. -
+
Right tooltip.
-
+
Left tooltip.
@@ -152,11 +152,11 @@ Have the tooltip appear from the left, right, or bottom position by adding `is-d ```html -
...
+
...
 -
...
+
...
 @@ -210,4 +210,4 @@ Undernet.Tooltips.start() ```
-

Is this article inaccurate? Edit this page on Github!

+

Is this article inaccurate? Edit this page on Github!

diff --git a/app/docs/typography.md b/app/docs/typography.md index 7938062a..074089f8 100644 --- a/app/docs/typography.md +++ b/app/docs/typography.md @@ -129,4 +129,4 @@ Ordered and unordered lists can be styled as well. You can change the bullet sty ```
-

Is this article inaccurate? Edit this page on Github!

+

Is this article inaccurate? Edit this page on Github!

diff --git a/app/layouts/Main/Main.js b/app/layouts/Main/Main.js index 3be1e355..e1ad696f 100644 --- a/app/layouts/Main/Main.js +++ b/app/layouts/Main/Main.js @@ -8,11 +8,10 @@ import Footer from "app/components/Footer" import PageNotFound from "app/components/PageNotFound" import Home from "app/pages/Home" import Docs from "app/pages/Docs" +import { FOCUSABLE_TABINDEX, UNFOCUSABLE_TABINDEX } from "./constants" import "./styles.scss" -import { FOCUSABLE_TABINDEX, UNFOCUSABLE_TABINDEX } from "./constants" - export default function Main() { const headerRef = React.useRef(null) const mainRef = React.useRef(null) diff --git a/app/layouts/Main/__tests__/__snapshots__/Main.spec.js.snap b/app/layouts/Main/__tests__/__snapshots__/Main.spec.js.snap index ebb628e9..c34b6c57 100644 --- a/app/layouts/Main/__tests__/__snapshots__/Main.spec.js.snap +++ b/app/layouts/Main/__tests__/__snapshots__/Main.spec.js.snap @@ -312,7 +312,7 @@ exports[`
#render renders 1`] = ` className="has-no-padding column" >

Undernet is a front-end framework created and maintained by @@ -325,7 +325,7 @@ exports[`

#render renders 1`] = ` .

Animations provided by @@ -338,7 +338,7 @@ exports[`

#render renders 1`] = ` . ❤️