Migrate existing stuff from private project

.editorconfig

@@ -0,0 +1,15 @@
+root = true
+
+[*]
+charset = utf-8
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true
+max_line_length = 98
+
+[*.md]
+trim_trailing_whitespace = false
+
+[Makefile]
+indent_style = tab

.gitignore

@@ -0,0 +1,2 @@
+/*.css
+/*.css.map

Makefile

@@ -0,0 +1,11 @@
+.EXPORT_ALL_VARIABLES:
+.PHONY: help dev build
+
+help: #: show this help menu
+	@grep "#:" Makefile* | grep -v "@grep" | sed "s/\([A-Za-z_ -]*\):.*#\(.*\)/$$(tput setaf 3)\1$$(tput sgr0)\2/g"
+
+dev: #: watch the source files and rebuild when they change
+	@sass index.scss:index.css --embed-source-map --watch
+
+build: #: build the final output file
+	@sass inex.scss:inex.min.css --style=compressed

README.md

@@ -1 +1,15 @@
-# Sass Style System
+# Sass Style System (SSS)
+
+## Usage
+
+```sass
+@use "sss" with (
+  $sizes: (
+    sm: 576px,
+    md: 768px,
+    lg: 992px,
+    xl: 1200px,
+    xxl: 1400px
+  )
+);
+```

index.scss

@@ -0,0 +1,3 @@
+@use "vendor/normalize";
+
+@forward "src";

lib/breakpoints.scss

@@ -0,0 +1,58 @@
+@use "sass:list";
+@use "sass:map";
+@use "variables";
+
+@mixin media-up-to($size) {
+  $value: map.get(variables.$sizes, $size);
+
+  @if $value == null {
+    @error "`#{$value}` is not a valid size";
+  }
+
+  @media (min-width: $value) {
+    @content;
+  }
+}
+
+@mixin media-down-to($size) {
+  $value: map.get(variables.$sizes, $size);
+
+  @if $value == null {
+    @error "`#{$value}` is not a valid size";
+  }
+
+  @media (max-width: $value - 1) {
+    @content;
+  }
+}
+
+@mixin media-only($size) {
+  $value: map.get(variables.$sizes, $size);
+
+  @if $value == null {
+    @error "`#{$size}` is not a valid size";
+  }
+
+  $index: list.index(variables.$sizes, $size $value);
+  $value-up: list.nth(map.values(variables.$sizes), $index + 1);
+
+  @media (min-width: $value) and (max-width: $value-up - 1) {
+    @content;
+  }
+}
+
+@mixin media-between($size1, $size2) {
+  $value1: map.get(variables.$sizes, $size1);
+  $value2: map.get(variables.$sizes, $size2);
+
+  @if $value1 == null {
+    @error "`#{$size1}` is not a valid size";
+  }
+  @if $value2 == null {
+    @error "`#{$size2}` is not a valid size";
+  }
+
+  @media (min-width: $value1) and (max-width: $value2 - 1) {
+    @content;
+  }
+}

lib/colors.scss

@@ -0,0 +1,34 @@
+$-default-colors: (
+  "black", "silver", "gray", "white", "maroon", "red", "purple", "fuchsia", "green", "lime",
+  "olive", "yellow", "navy", "blue", "teal", "aqua", "orange", "aliceblue", "antiquewhite",
+  "aquamarine", "azure", "beige", "bisque", "blanchedalmond", "blueviolet", "brown", "burlywood",
+  "cadetblue", "chartreuse", "chocolate", "coral", "cornflowerblue", "cornsilk", "crimson",
+  "cyan", "darkblue", "darkcyan", "darkgoldenrod", "darkgray", "darkgreen", "darkgrey",
+  "darkkhaki", "darkmagenta", "darkolivegreen", "darkorange", "darkorchid", "darkred",
+  "darksalmon", "darkseagreen", "darkslateblue", "darkslategray", "darkslategrey",
+  "darkturquoise", "darkviolet", "deeppink", "deepskyblue", "dimgray", "dimgrey", "dodgerblue",
+  "firebrick", "floralwhite", "forestgreen", "gainsboro", "ghostwhite", "gold", "goldenrod",
+  "greenyellow", "grey", "honeydew", "hotpink", "indianred", "indigo", "ivory", "khaki",
+  "lavender", "lavenderblush", "lawngreen", "lemonchiffon", "lightblue", "lightcoral",
+  "lightcyan", "lightgoldenrodyellow", "lightgray", "lightgreen", "lightgrey", "lightpink",
+  "lightsalmon", "lightseagreen", "lightskyblue", "lightslategray", "lightslategrey",
+  "lightsteelblue", "lightyellow", "limegreen", "linen", "magenta", "mediumaquamarine",
+  "mediumblue", "mediumorchid", "mediumpurple", "mediumseagreen", "mediumslateblue",
+  "mediumspringgreen", "mediumturquoise", "mediumvioletred", "midnightblue", "mintcream",
+  "mistyrose", "moccasin", "navajowhite", "oldlace", "olivedrab", "orangered", "orchid",
+  "palegoldenrod", "palegreen", "paleturquoise", "palevioletred", "papayawhip", "peachpuff",
+  "peru", "pink", "plum", "powderblue", "rosybrown", "royalblue", "saddlebrown", "salmon",
+  "sandybrown", "seagreen", "seashell", "sienna", "skyblue", "slateblue", "slategray",
+  "slategrey", "snow", "springgreen", "steelblue", "tan", "thistle", "tomato", "turquoise",
+  "violet", "wheat", "whitesmoke", "yellowgreen", "rebeccapurple", "transparent"
+);
+
+@mixin content($bp) {
+  .#{$bp}current { color: currentColor; }
+  .#{$bp}bg-current { background-color: currentColor; }
+
+  @each $value in $-default-colors {
+    .#{$bp}#{$value} { color: unquote($value); }
+    .#{$bp}bg-#{$value} { background-color: unquote($value); }
+  }
+}

lib/index.scss

@@ -0,0 +1,31 @@
+@use "sass:meta";
+@use "breakpoints";
+@use "colors";
+@use "variables";
+
+@forward "breakpoints";
+@forward "colors";
+@forward "prefixer";
+@forward "variables";
+
+$-bp: null;
+
+@mixin system() {
+  @content;
+
+  @if meta.global-variable-exists("sizes", $module: variables)
+    and meta.type-of(variables.$sizes) == map {
+
+    @each $name, $value in variables.$sizes {
+      $-bp: $name + "\\:" !global;
+
+      @include breakpoints.media-up-to($name) { @content }
+    }
+  } @else {
+    @error "Expected `$sizes` to exist as a map";
+  }
+}
+
+@include system {
+  @include colors.content($-bp);
+}

lib/prefixer.scss

@@ -0,0 +1,79 @@
+// Necessary mixins pulled from http://shouldiprefix.com
+
+@mixin transform($value) {
+	-webkit-transform: $value;
+	-ms-transform: $value;
+	transform: $value;
+}
+
+@mixin appearance($value) {
+	-webkit-appearance: $value;
+	-moz-appearance: $value;
+	appearance: $value;
+}
+
+@mixin background-clip($value) {
+	-webkit-background-clip: $value;
+	background-clip: $value;
+}
+
+@mixin filter($value) {
+	-webkit-filter: $value;
+	filter: $value;
+}
+
+@mixin grid {
+	display: -ms-grid;
+	display: grid;
+}
+
+@mixin flexbox {
+	display: -webkit-box;
+	display: -moz-box;
+	display: -ms-flexbox;
+	display: -webkit-flex;
+	display: flex;
+}
+
+@mixin flexbox-inline {
+	display: -webkit-inline-box;
+	display: -moz-inline-box;
+	display: -webkit-inline-flex;
+	display: -ms-inline-flexbox;
+	display: inline-flex;
+}
+
+@mixin flex($value) {
+	-webkit-box-flex: $value;
+	-webkit-flex: $value;
+	-ms-flex: $value;
+	flex: $value;
+}
+
+@mixin object-fit($value) {
+	-o-object-fit: $value;
+	object-fit: $value;
+}
+
+@mixin animation($value) {
+	-webkit-animation: $value;
+	animation: $value;
+}
+
+@mixin user-select($value) {
+	-webkit-touch-callout: $value;
+	-webkit-user-select: $value;
+	-moz-user-select: $value;
+	-ms-user-select: $value;
+	user-select: $value;
+}
+
+@mixin keyframes($value) {
+	@-webkit-keyframes #{$value} {
+		@content;
+	}
+
+	@keyframes #{$value} {
+		@content;
+	}
+}

lib/variables.scss

@@ -0,0 +1,7 @@
+$sizes: (
+  sm: 576px,
+  md: 768px,
+  lg: 992px,
+  xl: 1200px,
+  xxl: 1400px
+) !default;