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
+
+ ```
+ */
+ @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\:$(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);
+```