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 <[email protected]>",
+ "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;
+}