init

VinSpee · Jun 3, 2016 · 1199893 · 1199893
commit 1199893
Show file tree

Hide file tree

Showing 6 changed files with 169 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+npm-debug.log
+/node_modules/
diff --git a/app/index.html b/app/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en" class="f-f:sans bg:blue c:white">
+	<head>
+		<meta charset="UTF-8">
+		<title>shed prototype</title>
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+		<link rel="stylesheet" href="styles/index.css" />
+	</head>
+<body>
+	<h1 class="f:5 t-a:c p-y:5 l-h:n">Prototype Away!</h1>
+</body>
+</html>
diff --git a/app/styles/index.css b/app/styles/index.css
@@ -0,0 +1,3 @@
+@import "sanitize.css/lib/sanitize.css";
+@import "shed-css/lib/index.css";
+@import "theme";
diff --git a/dist/.gitkeep b/dist/.gitkeep
diff --git a/package.json b/package.json
@@ -0,0 +1,53 @@
+{
+  "name": "shed-starter",
+  "version": "0.1.0",
+  "description": "Starter kit for rapid prototyping with shed.css",
+  "main": "index.js",
+  "config": {
+    "css_entry": "app/styles/index.css",
+    "css_out": "dist/styles/",
+    "html_in": "app/*.html",
+    "out": "dist/"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "css:compile": "postcss -u postcss-import -u postcss-for -u postcss-each -u postcss-conditionals -u postcss-cssnext",
+    "css:watch": "npm run css:compile -- $npm_package_config_css_entry -w -d $npm_package_config_css_out",
+    "css:build": "npm run css:compile -- $npm_package_config_css_entry -d $npm_package_config_css_out",
+    "html:compile": "cp $npm_package_config_html_in $npm_package_config_out",
+    "html:watch": "chokidar $npm_package_config_html_in -c 'npm run html:compile'",
+    "serve": "browser-sync start --server $npm_package_config_out --files $npm_package_config_out --port 1337 --no-open",
+    "start": "npm-run-all html:compile css:build && npm-run-all -p *:watch serve"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/VinSpee/shed-starter.git"
+  },
+  "keywords": [
+    "shed",
+    "css",
+    "prototyping",
+    "utilities",
+    "starter"
+  ],
+  "author": "Vince Speelman",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/VinSpee/shed-starter/issues"
+  },
+  "homepage": "https://github.com/VinSpee/shed-starter#readme",
+  "devDependencies": {
+    "browser-sync": "2.12.10",
+    "chokidar-cli": "1.2.0",
+    "npm-run-all": "2.1.1",
+    "postcss": "5.0.21",
+    "postcss-cli": "2.5.2",
+    "postcss-conditionals": "2.0.2",
+    "postcss-cssnext": "2.5.2",
+    "postcss-each": "0.9.3",
+    "postcss-for": "2.0.3",
+    "postcss-import": "8.1.2",
+    "sanitize.css": "3.3.0",
+    "shed-css": "file:shed-css"
+  }
+}
diff --git a/web_modules/theme/index.css b/web_modules/theme/index.css
@@ -0,0 +1,99 @@
+
+:root {
+	--white: #ffffff;
+	--black: #000000;
+	--blue: #0F1A64;
+
+	--f-f-sans: Helvetica Neue, sans-serif;
+	--f-f-serif: Georgia, serif;
+	--f-f-mono: Monaco, monospace;
+}
+
+@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);
+
+@each $color in blue, white, black {
+	.c\:$color {
+		color: var(--$color);
+	}
+
+	.bg\:$color,
+	.bg-c\:$color {
+		background: var(--$color);
+
+	}
+
+	.hover\/c\:$color:hover {
+		color: var(--$color);
+	}
+
+	.hover\/bg\:$color:hover,
+	.hover\/bg-c\:$color:hover {
+		background: var(--$color);
+	}
+
+	@for $i from 1 to 9 {
+		.bg\:$color\.$i {
+			background-color: color(var(--$color) alpha(calc($i / 10)));
+		}
+
+		.c\:$color\.$i {
+			color: color(var(--$color) alpha(calc($i / 10)));
+		}
+
+		.hover\/bg\:$color\.$i:hover {
+			background-color: color(var(--$color) alpha(calc($i / 10)));
+		}
+
+		.hover\/c\:$color\.$i:hover {
+			color: color(var(--$color) alpha(calc($i / 10)));
+		}
+	}
+
+	@each $mq in xs, sm, md, lg, xl {
+		@media(--mq-$mq) {
+			.c\:$color\@$mq {
+				color: var(--$color);
+			}
+
+			.bg\:$color,
+			.bg-c\:$color\@$mq {
+				background: var(--$color);
+			}
+
+			.hover\/c\:$color\@$mq:hover {
+				color: var(--$color);
+			}
+
+			.hover\/bg\:$color\@$mq:hover,
+			.hover\/bg-c\:$color\@$mq:hover {
+				background: var(--$color);
+			}
+
+			@for $i from 1 to 9 {
+				.bg\:$color\.$i\@$mq {
+					background-color: color(var(--$color) alpha(calc($i / 10)));
+				}
+
+				.c\:$color\.$i\@$mq {
+					color: color(var(--$color) alpha(calc($i / 10)));
+				}
+
+				.hover\/bg\:$color\.$i\@$mq:hover {
+					background-color: color(var(--$color) alpha(calc($i / 10)));
+				}
+
+				.hover\/c\:$color\.$i\@$mq:hover {
+					color: color(var(--$color) alpha(calc($i / 10)));
+				}
+			}
+		}
+	}
+
+	.b\:$(color) {
+		border: 1px solid var(--$(color));
+	}
+}