diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..7baa2ca --- /dev/null +++ b/.editorconfig @@ -0,0 +1,25 @@ +# EditorConfig helps developers define and maintain consistent +# coding styles between different editors and IDEs +# editorconfig.org + +root = true + + +[*] +# Change these settings to your own preference +indent_style = tab +indent_size = 2 + +# We recommend you to keep these unchanged +end_of_line = lf +charset = utf-8 +trim_trailing_whitespace = true +insert_final_newline = false + +[*.md] +trim_trailing_whitespace = false + +[*.json] +trim_trailing_whitespace = false +indent_style = space +indent_size = 2 diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..16dc100 --- /dev/null +++ b/.gitignore @@ -0,0 +1,3 @@ +node_modules +dist +styleguide diff --git a/index.css b/index.css new file mode 100644 index 0000000..cfd6b33 --- /dev/null +++ b/index.css @@ -0,0 +1,58 @@ +@import "lib/font-size.css"; +@import "lib/font-weight.css"; +@import "lib/font-family.css"; +@import "lib/font-style.css"; +@import "lib/text-align.css"; +@import "lib/space.css"; +@import "lib/display.css"; +@import "lib/float.css"; +@import "lib/vertical-align.css"; +@import "lib/position.css"; +@import "lib/sides.css"; +@import "lib/flex.css"; +@import "lib/size.css"; +@import "lib/line-height.css"; +@import "lib/letter-spacing.css"; +@import "lib/text-decoration.css"; +@import "lib/overflow.css"; +@import "lib/radius.css"; + +:root { + --mqs: n, xs, sm ,md, lg, xl; + --ms: -6, -5, -4, -3, -2, -1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10; + --z: \.4, \.5, \.6, \.7, \.8, \.9, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10; + --f-f-styles: (sans, serif, mono), (f-f-sans, f-f-serif, f-f-mono); + --f-f-sans: sans-serif; + --f-f-serif: serif; + --f-f-mono: monospace; + --f-s-styles: (normal, italic, oblique), (n, i, o); + --f-w-min: 100; + --f-w-max: 900; + --l-h: (d, t, n, l), (1, var(--ms2), var(--ms1), var(--ms4)); + --l-s: (d, t, n, l), (initial, -0.8em, .16em, .32em); + --dirs: all, top, bottom, x, y; + --dirs-short: a, t, b, x, y; + --ms-6: .335rem; + --ms-5: .402rem; + --ms-4: .482rem; + --ms-3: .579rem; + --ms-2: .694rem; + --ms-1: .833rem; + --ms0: 0; + --ms1: 1rem; + --ms2: 1.2rem; + --ms3: 1.44rem; + --ms4: 1.728rem; + --ms5: 2.074rem; + --ms6: 2.488rem; + --ms7: 2.986rem; + --ms8: 3.582rem; + --ms9: 4.3rem; + --ms10: 5.16rem; +} + +@custom-media --mq-xs (min-width: 20em); +@custom-media --mq-sm (min-width: 30em); +@custom-media --mq-md (min-width: 37em); +@custom-media --mq-lg (min-width: 50em); +@custom-media --mq-xl (min-width: 75em); diff --git a/lib/display.css b/lib/display.css new file mode 100644 index 0000000..0ec8f6b --- /dev/null +++ b/lib/display.css @@ -0,0 +1,38 @@ +:root { + --display-props: block, inline-block, inline, flex, table, table-cell; + --display-shorthands: b, ib, i, f, t, tc; +} +@each $mq in var(--mqs) { + @each $prop, $short in (var(--display-props)), (var(--display-shorthands)) { + @if $(mq) == n { + /*--- + title: $(prop) + section: Display + --- + + ```html +
d:$(short) + ``` + */ + .d\:$(short) { + display: $(prop); + } + } @else { + @media(--mq-$(mq)) { + /*--- + title: $(prop) + section: Display + --- + + ```html +
d:$(short) + ``` + */ + .d\:$(short)\@$(mq) { + display: $(prop); + } + } + } + } +} + diff --git a/lib/flex.css b/lib/flex.css new file mode 100644 index 0000000..9a58240 --- /dev/null +++ b/lib/flex.css @@ -0,0 +1,280 @@ +:root { + --flx-direction: (row, row-reverse, column, column-reverse), (r, r-r, c, c-r); + --flx-wrap: (nowrap, wrap, wrap-reverse), (n, w, w-r); + --flx-j-c: (flex-start, flex-end, center, space-between, space-around), (f-s, f-e, c, s-b, s-a); + --flx-a-i: (flex-start, flex-end, center, baseline, stretch), (f-s, f-e, c, b, s); + --flx-a-c: (flex-start, flex-end, center, stretch, space-between, space-around), (f-s, f-e, c, s, s-b, s-a); + --flx-a-s: (flex-start, flex-end, center, stretch, auto), (f-s, f-e, c, s, a); + +} +@each $mq in var(--mqs) { + @each $prop, $short in var(--flx-direction) { + @if $(mq) == n { + /*--- + title: Direction: $(prop) + section: Flex + --- + + ```html +
flx-d:$(short) + ``` + */ + .flx-d\:$(short) { + flex-direction: $(prop); + } + } @else { + @media(--mq-$(mq)) { + /*--- + title: Direction: $(prop) + section: Flex + --- + + ```html +
flx-d:$(short)@$(mq) + ``` + */ + .flx-d\:$(short)\@$(mq) { + flex-direction: $(prop); + } + } + } + } +} + +@each $mq in var(--mqs) { + @each $prop, $short in var(--flx-wrap) { + @if $(mq) == n { + /*--- + title: Wrap: $(prop) + section: Flex + --- + + ```html +
flx-w:$(short) + ``` + */ + .flx-w\:$(short) { + flex-wrap: $(prop); + } + } @else { + @media(--mq-$(mq)) { + /*--- + title: Wrap: $(prop) + section: Flex + --- + + ```html +
flx-w:$(short)@$(mq) + ``` + */ + .flx-w\:$(short)\@$(mq) { + flex-wrap: $(prop); + } + } + } + } +} + +@each $mq in var(--mqs) { + @each $prop, $short in var(--flx-j-c) { + @if $(mq) == n { + /*--- + title: Justify Content: $(prop) + section: Flex + --- + + ```html +
j-c:$(short) + ``` + */ + .j-c\:$(short) { + justify-content: $(prop); + } + } @else { + @media(--mq-$(mq)) { + /*--- + title: Justify Content: $(prop) + section: Flex + --- + + ```html +
j-c:$(short)@$(mq) + ``` + */ + .j-c\:$(short)\@$(mq) { + justify-content: $(prop); + } + } + } + } +} + +@each $mq in var(--mqs) { + @each $prop, $short in var(--flx-j-c) { + @if $(mq) == n { + /*--- + title: Align Items: $(prop) + section: Flex + --- + + ```html +
a-i:$(short) + ``` + */ + .a-i\:$(short) { + align-items: $(prop); + } + } @else { + @media(--mq-$(mq)) { + /*--- + title: Align Items: $(prop) + section: Flex + --- + + ```html +
a-i:$(short)@$(mq) + ``` + */ + .a-i\:$(short)\@$(mq) { + align-items: $(prop); + } + } + } + } +} + +@each $mq in var(--mqs) { + @each $prop, $short in var(--flx-a-c) { + @if $(mq) == n { + /*--- + title: Align Content: $(prop) + section: Flex + --- + + ```html +
a-c:$(short) + ``` + */ + .a-c\:$(short) { + align-content: $(prop); + } + } @else { + @media(--mq-$(mq)) { + /*--- + title: Align Content: $(prop) + section: Flex + --- + + ```html +
a-c:$(short)@$(mq) + ``` + */ + .a-c\:$(short)\@$(mq) { + align-content: $(prop); + } + } + } + } +} + +@each $mq in var(--mqs) { + @each $prop, $short in var(--flx-a-s) { + @if $(mq) == n { + /*--- + title: Align Self: $(prop) + section: Flex + --- + + ```html +
a-s:$(short) + ``` + */ + .a-s\:$(short) { + align-self: $(prop); + } + } @else { + @media(--mq-$(mq)) { + /*--- + title: Align Self: $(prop) + section: Flex + --- + + ```html +
a-s:$(short)@$(mq) + ``` + */ + .a-s\:$(short)\@$(mq) { + align-self: $(prop); + } + } + } + } +} + +@each $mq in var(--mqs) { + @for $i from 0 to 10 { + @if $(mq) == n { + /*--- + title: Order: $i + section: Flex + --- + + ```html +
ord:$i + ``` + */ + .ord\:$i { + order: $i; + } + } @else { + @media(--mq-$(mq)) { + /*--- + title: Order: $i + section: Flex + --- + + ```html +
ord:$i@$(mq) + ``` + */ + .ord\:$i\@$(mq) { + order: $i; + } + } + } + } +} + +@each $mq in var(--mqs) { + @for $i from 0 to 10 { + @if $(mq) == n { + /*--- + title: Grow: $i + section: Flex + --- + + ```html +
flx-g:$i + ``` + */ + .flx-g\:$i { + flex-grow: $i 1 0%; + } + } @else { + @media(--mq-$(mq)) { + /*--- + title: Order: $i + section: Flex + --- + + ```html +
flx-g:$i@$(mq) + ``` + */ + .flx-g\:$i\@$(mq) { + flex-grow: $i 1 0%; + } + } + } + } +} diff --git a/lib/float.css b/lib/float.css new file mode 100644 index 0000000..42ce788 --- /dev/null +++ b/lib/float.css @@ -0,0 +1,51 @@ +:root { + --fl-options: (left, right, none, clear), (l, r, n, c); +} + +@each $mq in var(--mqs) { + @if $(mq) == n { + @each $style, $var in var(--fl-options) { + /*--- + title: $(style) + section: Float + --- + + ```html + fl:$(var) + ``` + */ + @if $(style) == clear { + .fl\:$(var)::before, + .fl\:$(var)::after { + content: " "; + display: table; + } + + .fl\:$(var)::after { + clear: both; + } + } @else { + .fl\:$(var) { + float: $(style); + } + } + } + } @else { + @media (--mq-$(mq)) { + @each $style, $var in var(--fl-options) { + /*--- + title: $(style) + section: Float + --- + + ```html + fl:$(var)@$(mq) + ``` + */ + .fl\:$(var)\@$(mq) { + float: $(style); + } + } + } + } +} diff --git a/lib/font-family.css b/lib/font-family.css new file mode 100644 index 0000000..0685fa9 --- /dev/null +++ b/lib/font-family.css @@ -0,0 +1,22 @@ +:root { + --f-f-sans: sans-serif; + --f-f-serif: serif; + --f-f-mono: monospace; + --f-f-styles: (sans, serif, mono), (f-f-sans, f-f-serif, f-f-mono); +} + +@each $style, $var in var(--f-f-styles) { + /*--- + title: Font Family + section: Typography + --- + + ```html + f-f:$(style) + ``` + */ + .f-f\:$(style) { + font-family: var(--$(var)); + } +} + diff --git a/lib/font-size.css b/lib/font-size.css new file mode 100644 index 0000000..d89881b --- /dev/null +++ b/lib/font-size.css @@ -0,0 +1,37 @@ +@each $mq in var(--mqs) { + @if $(mq) == n { + @each $ms, $z in (var(--ms)), (var(--z)) { + /*--- + title: Font Size + section: Typography + --- + + ```html + f:$(z) + ``` + */ + .f\:$(z), + .f-z\:$(z) { + font-size: var(--ms$(ms)); + } + } + } @else { + @media (--mq-$(mq)) { + @each $ms, $z in (var(--ms)), (var(--z)) { + /*--- + title: Font Size + section: Typography + --- + + ```html + f:$(z)@$(mq) + ``` + */ + .f\:$(z)\@$(mq), + .f-z\:$(z)\@$(mq) { + font-size: var(--ms$(ms)); + } + } + } + } +} diff --git a/lib/font-style.css b/lib/font-style.css new file mode 100644 index 0000000..5e5bc82 --- /dev/null +++ b/lib/font-style.css @@ -0,0 +1,39 @@ +:root { + --f-s-styles: (normal, italic, oblique), (n, i, o); +} + +@each $mq in var(--mqs) { + @if $(mq) == n { + @each $style, $var in var(--f-s-styles) { + /*--- + title: $(style) + section: Font Style + --- + + ```html + f-s:$(var) + ``` + */ + .f-s\:$(var) { + font-style: $(style); + } + } + } @else { + @media (--mq-$(mq)) { + @each $style, $var in (var(--f-s-styles)), (var(--f-s-styles-short)) { + /*--- + title: $(style) + section: Font Style + --- + + ```html + f-s:$(var)@$(mq) + ``` + */ + .f-s\:$(var)\@$(mq) { + font-style: $(style); + } + } + } + } +} diff --git a/lib/font-weight.css b/lib/font-weight.css new file mode 100644 index 0000000..64d4637 --- /dev/null +++ b/lib/font-weight.css @@ -0,0 +1,39 @@ +:root { + --f-w-min: 100; + --f-w-max: 900; +} +@each $mq in var(--mqs) { + @if $(mq) == n { + @for $weight from var(--f-w-min) to var(--f-w-max) by 100 { + /*--- + title: Font Weight + section: Typography + --- + + ```html + f-w:$(weight) + ``` + */ + .f-w\:$(weight) { + font-size: $(weight); + } + } + } @else { + @media (--mq-$(mq)) { + @for $weight from var(--f-w-min) to var(--f-w-max) by 100 { + /*--- + title: Font Weight + section: Typography + --- + + ```html + f-w:$(weight)@$(mq) + ``` + */ + .f-w\:$(weight)\@$(mq) { + font-size: $(weight); + } + } + } + } +} diff --git a/lib/letter-spacing.css b/lib/letter-spacing.css new file mode 100644 index 0000000..5c2c63f --- /dev/null +++ b/lib/letter-spacing.css @@ -0,0 +1,36 @@ +:root { + --l-s: (d, t, n, l), (initial, -0.8em, .16em, .32em); +} +@each $mq in var(--mqs) { + @each $short, $val in var(--l-s) { + @if $(mq) == n { + /*--- + title: $(short) + section: Letter Spacing + --- + + ```html +
l-s:$(short) + ``` + */ + .l-s\:$(short) { + letter-spacing: $(val); + } + } @else { + @media(--mq-$(mq)) { + /*--- + title: $(short) + section: Letter Spacing + --- + + ```html +
l-s:$(short)@$(mq) + ``` + */ + .l-s\:$(short)\@$(mq) { + letter-spacing: $(val); + } + } + } + } +} diff --git a/lib/line-height.css b/lib/line-height.css new file mode 100644 index 0000000..6391833 --- /dev/null +++ b/lib/line-height.css @@ -0,0 +1,36 @@ +:root { + --l-h: (d, t, n, l), (1, var(--ms2), var(--ms1), var(--ms4)); +} +@each $mq in var(--mqs) { + @each $short, $val in var(--l-h) { + @if $(mq) == n { + /*--- + title: $(short) + section: Line Height + --- + + ```html +
l-h:$(short) + ``` + */ + .l-h\:$(short) { + line-height: $(val); + } + } @else { + @media(--mq-$(mq)) { + /*--- + title: $(short) + section: Line Height + --- + + ```html +
l-h:$(short)@$(mq) + ``` + */ + .l-h\:$(short)\@$(mq) { + line-height: $(val); + } + } + } + } +} diff --git a/lib/max-width.css b/lib/max-width.css new file mode 100644 index 0000000..2fdd400 --- /dev/null +++ b/lib/max-width.css @@ -0,0 +1,35 @@ +@each $mq in var(--mqs) { + @if $(mq) == n { + @each $ms, $z in (var(--ms)), (var(--z)) { + /*--- + title: $(z) + section: Max Width + --- + + ```html + m-w:$(z) + ``` + */ + .m-w\:$(z) { + max-width: var(--ms$(ms)); + } + } + } @else { + @media (--mq-$(mq)) { + @each $ms, $z in (var(--ms)), (var(--z)) { + /*--- + title: $(z) + section: Max Width + --- + + ```html + m-w:$(z)@$(mq) + ``` + */ + .m-w\:$(z)\@$(mq) { + max-width: var(--ms$(ms)); + } + } + } + } +} diff --git a/lib/overflow.css b/lib/overflow.css new file mode 100644 index 0000000..de0fb6f --- /dev/null +++ b/lib/overflow.css @@ -0,0 +1,101 @@ +:root { + --o-types: (hidden, visible, scroll, auto), (h, v, s, a); +} + +@each $mq in var(--mqs) { + @each $prop, $short in var(--o-types) { + @if $(mq) == n { + /*--- + title: $(prop) + section: Overflow + --- + + ```html +
o:$(short) + ``` + */ + .o\:$(short) { + overflow: $(prop); + } + } @else { + @media(--mq-$(mq)) { + /*--- + title: $(prop) + section: Overflow + --- + + ```html +
o:$(short)@$(mq) + ``` + */ + .o\:$(short)\@$(mq) { + overflow: $(prop); + } + } + } + } + + @each $prop, $short in var(--o-types) { + @if $(mq) == n { + /*--- + title: $(prop) + section: Overflow X + --- + + ```html +
o-x:$(short) + ``` + */ + .o-x\:$(short) { + overflow-x: $(prop); + } + } @else { + @media(--mq-$(mq)) { + /*--- + title: $(prop) + section: Overflow X + --- + + ```html +
o-x:$(short)@$(mq) + ``` + */ + .o-x\:$(short)\@$(mq) { + overflow-x: $(prop); + } + } + } + } + + @each $prop, $short in var(--o-types) { + @if $(mq) == n { + /*--- + title: $(prop) + section: Overflow Y + --- + + ```html +
o-y:$(short) + ``` + */ + .o-y\:$(short) { + overflow-y: $(prop); + } + } @else { + @media(--mq-$(mq)) { + /*--- + title: $(prop) + section: Overflow Y + --- + + ```html +
o-y:$(short)@$(mq) + ``` + */ + .o-y\:$(short)\@$(mq) { + overflow-y: $(prop); + } + } + } + } +} diff --git a/lib/position.css b/lib/position.css new file mode 100644 index 0000000..626ac25 --- /dev/null +++ b/lib/position.css @@ -0,0 +1,51 @@ +:root { + --pos-options: (absolute, relative, static, fixed, cover), (a, r, s, f, c); +} + +@each $mq in var(--mqs) { + @if $(mq) == n { + @each $position, $pos in var(--pos-options) { + /*--- + title: $(position) + section: position + --- + + ```html + pos:$(pos) + ``` + */ + @if $(position) == cover { + .pos\:$(pos) { + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + } @else { + .pos\:$(pos) { + position: $(position); + } + } + } + } @else { + @media (--mq-$(mq)) { + @each $position, $pos in var(--pos-options) { + /*--- + title: $(position) + section: position + --- + + ```html + pos:$(post)@$(mq) + ``` + */ + .pos\:$(pos)\@$(mq) { + position: $(position); + } + } + } + } +} + + diff --git a/lib/radius.css b/lib/radius.css new file mode 100644 index 0000000..e68dd89 --- /dev/null +++ b/lib/radius.css @@ -0,0 +1,19 @@ +:root { + --dirs: all, top, bottom, x, y; + --dirs-short: a, t, b, x, y; +} + +@each $ms, $z in (var(--ms)), (var(--z)) { + /*--- + title: all + section: Border Radius + --- + + ```html +
b-r:$(z) + ``` + */ + .b-r\:$(z) { + border-radius: var(--ms$(ms)); + } +} diff --git a/lib/sides.css b/lib/sides.css new file mode 100644 index 0000000..550874b --- /dev/null +++ b/lib/sides.css @@ -0,0 +1,57 @@ +:root { + --pos-options: (top, bottom, left, right); +} + +@each $mq in var(--mqs) { + @each $pos in var(--pos-options) { + @if $(mq) == n { + .$(pos) { + $(pos): 100%; + } + + @each $ms, $z in (var(--ms)), (var(--z)) { + /*--- + title: Position $( + section: Side + --- + + ```html + $(pos):$(z) + ``` + */ + .$(pos)\:$(z) { + $(pos): var(--ms$(ms)); + } + + .$(pos)\:-$(z) { + $(pos): -var(--ms$(ms)); + } + } + } @else { + @media (--mq-$(mq)) { + .$(pos)\@$(mq) { + $(pos): 100%; + } + + @each $ms, $z in (var(--ms)), (var(--z)) { + /*--- + title: Position $( + section: Side + --- + + ```html + $(pos):$(z)@$(mq) + ``` + */ + .$(pos)\:$(z)\@$(mq) { + $(pos): var(--ms$(ms)); + } + + .$(pos)\:-$(z)\@$(mq) { + $(pos): -var(--ms$(ms)); + } + } + } + } + } +} diff --git a/lib/size.css b/lib/size.css new file mode 100644 index 0000000..73893f5 --- /dev/null +++ b/lib/size.css @@ -0,0 +1,39 @@ +:root { + --w-sizes: (1of12, 1of10, 1of8, 1of6, 2of12, 1of5, 2of10, 1of4, 2of8, 3of12, 3of10, 1of3, 2of6, 4of12, 3of8, 2of5, 4of10, 5of12, 1of2, 2of4, 3of6, 4of8, 5of10, 6of12, 7of12, 3of5, 6of10, 5of8, 2of3, 4of6, 8of12, 7of10, 3of4, 6of8, 9of12, 4of5, 8of10, 5of6, 10of12, 7of8, 9of10, 11of12, full), (calc(100% * 1 / 12), 10%, 12.5%, calc(100% * 1 / 6), calc(100% * 1 / 6), 20%, 20%, 25%, 25%, 25%, 30%, calc(100% * 1 / 3), calc(100% * 1 / 3), calc(100% * 1 / 3), 37.5%, 40%, 40%, calc(100% * 5 / 12), 50%, 50%, 50%, 50%, 50%, 50%, calc(100% * 7 / 12), 60%, 60%, 62.5%, calc(100% * 2 / 3), calc(100% * 2 / 3), calc(100% * 2 / 3), 70%, 75%, 75%, 75%, 80%, 80%, calc(100% * 5 / 6), calc(100% * 5 / 6), 87.5%, 90%, calc(100% * 11 / 12), 100%); +} + +@each $mq in var(--mqs) { + @each $name, $z in var(--w-sizes) { + @if $(mq) == n { + /*--- + title: $(name) + section: Widths + --- + + ```html +
w:$(name) + ``` + */ + + .w\:$(name) { + width: $(z); + } + } @else { + @media(--mq-$(mq)) { + /*--- + title: $(name) + section: Widths + --- + + ```html +
w:$(name)@$(mq) + ``` + */ + + .w\:$(name)\@$(mq) { + width: $(z); + } + } + } + } +} diff --git a/lib/space.css b/lib/space.css new file mode 100644 index 0000000..7800507 --- /dev/null +++ b/lib/space.css @@ -0,0 +1,152 @@ +@each $mq in var(--mqs) { + @each $prop, $short in (margin, padding), (m, p) { + @each $dir, $dir-short in (var(--dirs)), (var(--dirs-short)) { + @if $(mq) == n { + @if $(prop) == margin { + @if $(dir) == x { + .$(short)-$(dir-short)\:a { + $(prop)-left: auto; + $(prop)-right: auto; + } + } @else if $(dir) == y { + .$(short)-$(dir-short)\:a { + $(prop)-top: auto; + $(prop)-bottom: auto; + } + } @else { + .$(short)-$(dir-short)\:a { + $(prop)-$(dir): auto; + } + } + } + @each $ms, $z in (var(--ms)), (var(--z)) { + @if $(dir) == all { + /*--- + title: $(prop) + section: Spacing + --- + + ```html +
$(short):$(z) + ``` + */ + .$(short)\:$(z) { + $(prop): var(--ms$(ms)); + } + @if $(prop) == margin { + .$(short)\:-$(z) { + $(prop): -var(--ms$(ms)); + } + } + } @else { + /*--- + title: $(prop) + section: Spacing + --- + + ```html +
$(short)-$(dir):$(z) + ``` + */ + @if $(dir) == x { + .$(short)-$(dir-short)\:$(z) { + $(prop)-left: var(--ms$(ms)); + $(prop)-right: var(--ms$(ms)); + } + } @else if $(dir) == y { + .$(short)-$(dir-short)\:$(z) { + $(prop)-top: var(--ms$(ms)); + $(prop)-bottom: var(--ms$(ms)); + } + } @else { + .$(short)-$(dir-short)\:$(z) { + $(prop)-$(dir): var(--ms$(ms)); + } + @if $(prop) == margin { + .$(short)-$(dir-short)\:-$(z) { + $(prop)-$(dir): -var(--ms$(ms)); + } + } + } + } + } + } @else { + @media(--mq-$(mq)) { + @if $(prop) == margin { + @if $(dir) == all { + .$(short)-$(dir)\:a\@$(mq) { + $(prop): auto; + } @else if $(dir) == x { + .$(short)-$(dir-short)\:a\@$(mq) { + $(prop)-left: auto; + $(prop)-right: auto; + } + } @else if $(dir) == y { + .$(short)-$(dir-short)\:a\@$(mq) { + $(prop)-top: auto; + $(prop)-bottom: auto; + } + } @else { + .$(short)-$(dir)\:a\@$(mq) { + $(prop)-$(dir-short): auto; + } + } + } + } + + @each $ms, $z in (var(--ms)), (var(--z)) { + @if $(dir) == all { + /*--- + title: $(prop) + section: Spacing + --- + + ```html +
$(short):$(z)@$(mq) + ``` + */ + .$(short)\:$(z)\@$(mq) { + $(prop): var(--ms$(ms)); + } + @if $(prop) == margin { + .$(short)\:-$(z)\@$(mq) { + $(prop): -var(--ms$(ms)); + } + } + } @else { + /*--- + title: $(prop) + section: Spacing + --- + + ```html +
$(short)-$(dir):$(z)@$(mq) + ``` + */ + @if $(dir) == x { + .$(short)-$(dir-short)\:$(z)\@$(mq) { + $(prop)-left: var(--ms$(ms)); + $(prop)-right: var(--ms$(ms)); + } + } @else if $(dir) == y { + .$(short)-$(dir-short)\:$(z)\@$(mq) { + $(prop)-top: var(--ms$(ms)); + $(prop)-bottom: var(--ms$(ms)); + } + } @else { + .$(short)-$(dir-short)\:$(z)\@$(mq) { + $(prop)-$(dir): var(--ms$(ms)); + } + @if $(prop) == margin { + .$(short)-$(dir-short)\:-$(z)\@$(mq) { + $(prop)-$(dir): -var(--ms$(ms)); + } + } + } + } + } + } + } + } + } +} diff --git a/lib/text-align.css b/lib/text-align.css new file mode 100644 index 0000000..beada3f --- /dev/null +++ b/lib/text-align.css @@ -0,0 +1,40 @@ +:root { + --t-a-options: (left, right, center, justify), (l, r, c, j); +} + +@each $mq in var(--mqs) { + @if $(mq) == n { + @each $style, $var in var(--t-a-options) { + /*--- + title: $(style) + section: Font Style + --- + + ```html + t-a:$(var) + ``` + */ + .t-a\:$(var) { + text-align: $(style); + } + } + } @else { + @media (--mq-$(mq)) { + @each $style, $var in var(--t-a-options) { + /*--- + title: $(style) + section: Font Style + --- + + ```html + t-a:$(var)@$(mq) + ``` + */ + .t-a\:$(var)\@$(mq) { + text-align: $(style); + } + } + } + } +} + diff --git a/lib/text-decoration.css b/lib/text-decoration.css new file mode 100644 index 0000000..baeb3c4 --- /dev/null +++ b/lib/text-decoration.css @@ -0,0 +1,37 @@ +:root { + --t-d: (n, u, s), (none, underline, strikethrough); +} +@each $mq in var(--mqs) { + @each $short, $val in var(--t-d) { + @if $(mq) == n { + /*--- + title: $(short) + section: Text Decoration + --- + + ```html +
t-d:$(short) + ``` + */ + .t-d\:$(short) { + text-decoration: $(val); + } + } @else { + @media(--mq-$(mq)) { + /*--- + title: $(short) + section: Text Decoration + --- + + ```html +
t-d:$(short)@$(mq) + ``` + */ + .t-d\:$(short)\@$(mq) { + text-decoration: $(val); + } + } + } + } +} + diff --git a/lib/vertical-align.css b/lib/vertical-align.css new file mode 100644 index 0000000..29acd2d --- /dev/null +++ b/lib/vertical-align.css @@ -0,0 +1,54 @@ +:root { + --v-a-options: (middle, baseline, top, bottom, center), (m, b, t, b, c); +} + +@each $mq in var(--mqs) { + @if $(mq) == n { + @each $style, $var in var(--v-a-options) { + /*--- + title: $(style) + section: vertical-alignment + --- + + ```html + v-a:$(var) + ``` + */ + @if $(style) == center { + .v-a\:$(var) { + top: 50%; + transform: translateY(-50%); + } + } @else { + .v-a\:$(var) { + vertical-align: $(style); + } + } + } + } @else { + @media (--mq-$(mq)) { + @each $style, $var in var(--v-a-options) { + /*--- + title: $(style) + section: vertical-alignment + --- + + ```html + v-a:$(var)@$(mq) + ``` + */ + @if $(style) == center { + .v-a\:$(var) { + top: 50%; + transform: translateY(-50%); + } + } @else { + .v-a\:$(var)\@$(mq) { + vertical-align: $(style); + } + } + } + } + } +} + diff --git a/package.json b/package.json new file mode 100644 index 0000000..dd4e70a --- /dev/null +++ b/package.json @@ -0,0 +1,52 @@ +{ + "name": "funct", + "version": "0.1.0", + "description": "ted funct", + "main": "index.css", + "style": "index.css", + "files": [ + "index.css", + "dist", + "lib" + ], + "scripts": { + "install-peers": "npm ls 2>/dev/null | grep \"UNMET PEER DEPENDENCY\" | awk '{print $NF}' | xargs npm install -D", + "start": "npm run dev", + "dev": "npm-run-all build:css --parallel watch:css serve", + "compile:css": "postcss -u postcss-import -u postcss-at-rules-variables -u postcss-for -u postcss-each -u postcss-conditionals -u mdcss -u postcss-cssnext index.css -d ./dist", + "compress:css": "postcss -u cssnano ./dist/index.css -d ./dist", + "watch:css": "npm run compile:css -- -w './**/*.css'", + "build:css": "npm run compile:css", + "serve": "browser-sync start --server --files \"dist/*.css\" --index \"./styleguide/index.html\" --port \"1337\" --no-open", + "prepublish": "run-s compile:css compress:css", + "test": "echo \"Error: no test specified\" && exit 1", + "push_pages": "npm run build:docs && git add . && git commit -m 'update docs' && git subtree push --prefix demo/dist/ origin gh-pages" + }, + "keywords": [ + "css", + "functional", + "atomic", + "immutable", + "utility classes" + ], + "author": "Vince Speelman", + "license": "ISC", + "devDependencies": { + "browser-sync": "2.12.8", + "chokidar-cli": "1.2.0", + "cssnano": "3.5.2", + "mdcss": "1.5.1", + "mdcss-theme-github": "2.2.0", + "npm-run-all": "2.1.0", + "postcss-cli": "2.5.2" + }, + "peerDependencies": { + "postcss": "5.0.21", + "postcss-at-rules-variables": "0.0.21", + "postcss-conditionals": "2.0.2", + "postcss-cssnext": "2.5.2", + "postcss-each": "0.9.1", + "postcss-for": "2.0.2", + "postcss-import": "8.1.2" + } +} diff --git a/readme.md b/readme.md new file mode 100644 index 0000000..ed4a0e8 --- /dev/null +++ b/readme.md @@ -0,0 +1,44 @@ +# Funco :: type + +## Functional CSS Type Utility + +### setup + +`@import "lib/{size|weight|letter-spacing|leading}/{short|long}"` + +```css +:root { + --funco-type-size---5: .125rem; + --funco-type-size---4: .25rem; + --funco-type-size---3: .333rem; + --funco-type-size---2: .5rem; + --funco-type-size---2: .666rem; + --funco-type-size---1: .8rem; + --funco-type-size--0: 1rem; + --funco-type-size--1: 1.125rem; + --funco-type-size--2: 1.25rem; + --funco-type-size--3: 1.5rem; + --funco-type-size--4: 1.75rem; + --funco-type-size--5: 2rem; + --funco-type-size--6: 3rem; + --funco-type-size--7: 4rem; + --funco-type-size--8: 5rem; + --funco-type-size--9: 6rem; + --funco-type-size--10: 7rem; + --funco-type-letter-spacing--tight: 7rem; + --funco-type-letter-spacing--normal: 7rem; + --funco-type-letter-spacing--loose: 7rem; + --funco-type-leading--title: 1.25; + --funco-type-leading--copy: 1.55; + --funco-type-leading--normal: 1; + --funco-type-weight--light: light; + --funco-type-weight--normal: normal; + --funco-type-weight--bold: bold; +} + +@custom-media --mq-xs (min-width: 20em); +@custom-media --mq-sm (min-width: 30em); +@custom-media --mq-md (min-width: 37em); +@custom-media --mq-lg (min-width: 43em); +@custom-media --mq-xl (min-width: 50em); +```