Init

README.md

@@ -0,0 +1,3 @@
+# TailwindCSS
+
+A utility-first CSS framework for rapid UI development.

package.json

@@ -0,0 +1,13 @@
+{
+  "name": "tailwindcss",
+  "version": "0.1.0",
+  "description": "A utility-first CSS framework for rapid UI development.",
+  "license": "MIT",
+  "author": "Adam Wathan <adam.wathan@gmail.com>",
+  "contributors": [],
+  "scripts": {},
+  "dependencies": {
+    "normalize.css": "^6.0.0",
+    "suitcss-base": "^3.0.0"
+  }
+}

src/app.less

@@ -0,0 +1,38 @@
+// Base
+@import "base/base";
+@import "base/colors";
+
+// Components
+// @import "components/grid";
+@import "components/generated-grid";
+@import "components/media-object";
+@import "components/progress";
+@import "components/forms";
+@import "components/buttons";
+@import "components/card";
+@import "components/icons";
+@import "components/lists";
+@import "components/markdown";
+@import "components/alert";
+@import "components/images";
+@import "components/horizontal-rules";
+@import "components/dropdown";
+
+// Overrides for third-party widgets
+@import "libraries/stripe-elements";
+
+// Utilities
+@import "utilities/backgrounds";
+@import "utilities/layout";
+@import "utilities/z-index";
+@import "utilities/spacing";
+@import "utilities/borders";
+@import "utilities/flex";
+@import "utilities/links";
+@import "utilities/text";
+@import "utilities/misc";
+@import "utilities/vue";
+
+// Glitter (animations, transitions, etc.)
+@import "glitter/animations";
+@import "glitter/transitions";

src/base/base.less

@@ -0,0 +1,50 @@
+@import (less) '../../../../node_modules/normalize.css/normalize.css';
+@import (less) '../../../../node_modules/suitcss-base/lib/base.css';
+
+@-moz-viewport      { width: device-width; }
+@-ms-viewport       { width: device-width; }
+@-o-viewport        { width: device-width; }
+@-webkit-viewport   { width: device-width; }
+@viewport           { width: device-width; }
+
+html {
+    font-size: 12px;
+
+    // Changes the default tap highlight to be completely transparent in iOS.
+    -webkit-tap-highlight-color: rgba(0,0,0,0);
+
+    // -webkit-font-smoothing: antialiased;
+
+    @media (min-width: @screen-xs) {
+      font-size: 16px;
+    }
+}
+
+body {
+  .bg-light;
+  font-family: @font-family-base;
+  font-size: @font-size-base;
+  font-weight: @font-weight-regular;
+  line-height: @line-height;
+  color: @text-dark;
+}
+
+textarea {
+    resize: vertical;
+}
+
+button, [role=button] {
+  cursor: pointer;
+}
+
+small {
+    font-size: @font-size-sm;
+}
+
+pre, code {
+    font-family: @font-family-mono;
+}
+
+img {
+    vertical-align: middle;
+}

src/base/colors.less

@@ -0,0 +1,109 @@
+@hue-slate: 208;
+@hue-cream: 50;
+
+@hue-brand-primary: 171;
+@color-brand-primary: #00ceae;
+
+@color-brand-gradient-start: #00b8c6;
+@color-brand-gradient-stop: #00c6a2;
+
+@hue-blue: 193;
+@color-blue: hsl(@hue-blue, 77%, 58%);
+
+@hue-green: 167;
+@color-green: hsl(@hue-green, 53%, 55%);
+
+@hue-red: 2;
+@color-danger: hsl(@hue-red, 75%, 55%);
+
+@hue-gray: 208;
+// @hue-gray: 50;
+@color-gray-10: #fff;
+@color-gray-9: hsl(@hue-gray, 20%, 98%);
+@color-gray-8: hsl(@hue-gray, 25%, 96%);
+@color-gray-7: hsl(@hue-gray, 25%, 90%);
+@color-gray-6: hsl(@hue-gray, 25%, 82%);
+@color-gray-5: hsl(@hue-gray, 25%, 62%);
+@color-gray-4: hsl(@hue-gray, 25%, 52%);
+@color-gray-3: hsl(@hue-gray, 25%, 35%);
+@color-gray-2: hsl(@hue-gray, 25%, 25%);
+@color-gray-1: hsl(@hue-gray, 25%, 16%);
+
+@color-white: @color-gray-10;
+@color-black: @color-gray-1;
+
+@color-blue-highlight: hsl(215, 99%, 63%);
+
+// Backgrounds
+@bg-light-hue: @hue-slate;
+@bg-light: hsl(@bg-light-hue, 0%, 100%);
+@bg-light-soft: hsl(@bg-light-hue, 20%, 98%);
+@bg-light-softer: hsl(@bg-light-hue, 20%, 96%);
+
+@bg-dark-hue: @hue-slate;
+@bg-dark: hsl(@bg-dark-hue, 14%, 33%);
+@bg-dark-soft: hsl(@bg-dark-hue, 14%, 42%);
+@bg-dark-softer: hsl(@bg-dark-hue, 14%, 52%);
+
+@bg-primary: @color-brand-primary;
+
+@bg-highlight: hsl(215, 99%, 63%);
+
+
+// Borders
+@border-dark-hue: @hue-slate;
+@border-dark: hsl(@border-dark-hue, 25%, 82%);
+@border-dark-soft: hsl(@border-dark-hue, 25%, 90%);
+@border-dark-softer: hsl(@border-dark-hue, 25%, 96%);
+
+@border-light: @color-white;
+@border-light-soft: fade(@color-white, 60%);
+@border-light-softer: fade(@color-white, 35%);
+
+@border-danger: @color-danger;
+@border-danger-soft: fade(@color-danger, 50%);
+
+@border-brand: @color-brand-primary;
+
+@border-default: @border-dark-soft;
+
+
+// Text
+@text-light:        @color-white;
+@text-light-soft:   fade(@color-white, 60%);
+@text-light-softer: fade(@color-white, 45%);
+@text-light-softest:  fade(@color-white, 35%);
+
+@text-dark-hue:     @hue-slate;
+@text-dark:         hsl(@text-dark-hue, 10%, 25%);
+@text-dark-soft:    hsl(@text-dark-hue, 10%, 50%);
+@text-dark-softer:  hsl(@text-dark-hue, 10%, 65%);
+@text-dark-softest:   hsl(@text-dark-hue, 10%, 75%);
+
+@text-brand: hsl(@hue-brand-primary, 100%, 40%);
+@text-danger: @color-danger;
+
+
+// Buttons
+@btn-primary-text-color: @color-white;
+@btn-primary-bg-color: @color-brand-primary;
+
+@btn-secondary-text-color: @text-dark-soft;
+@btn-secondary-bg-color: @color-white;
+@btn-secondary-border-color: @border-dark;
+
+@btn-blue-text-color: @color-white;
+@btn-blue-bg-color: @color-blue;
+
+@btn-themed-text-color: @color-white;
+
+@btn-inv-outline-text-color: @color-white;
+
+@btn-disabled-bg: @color-gray-8;
+@btn-disabled-border: @color-gray-4;
+@btn-disabled-text: @btn-disabled-border;
+
+
+// Forms
+@form-input-placeholder-color: @text-dark-softest;
+@form-input-border-error-color: lighten(@color-danger, 25%);

src/components/alert.less

@@ -0,0 +1,14 @@
+@alert-border-radius: @border-radius-1;
+
+.alert {
+    border-width: 1px;
+    border-style: solid;
+    padding: @spacer-2 @spacer-4;
+    border-radius: @border-radius-1;
+}
+
+.alert-success {
+    background-color: #e0fffa;
+    border-color: #7be0d0;
+    color: #00ab90;
+}