Merge pull request #17 from sts-ryan-holton/v1.1.0-dev

v1.1.0 dev

.stylelintignore

@@ -0,0 +1 @@
+/assets/scss/_normalize.scss

.stylelintrc.json

@@ -0,0 +1,47 @@
+{
+  "rules": {
+    "block-no-empty": true,
+    "comment-no-empty": true,
+    "color-no-invalid-hex": true,
+    "declaration-block-no-duplicate-properties": null,
+    "font-family-no-duplicate-names": true,
+    "font-family-no-missing-generic-family-keyword": true,
+    "function-calc-no-unspaced-operator": true,
+    "function-linear-gradient-no-nonstandard-direction": true,
+    "no-duplicate-at-import-rules": true,
+    "no-extra-semicolons": true,
+    "property-no-unknown": true,
+    "string-no-newline": true,
+    "selector-pseudo-class-no-unknown": true,
+    "selector-pseudo-element-no-unknown": true,
+    "selector-type-no-unknown": true,
+    "unit-no-unknown": true,
+    "declaration-no-important": true,
+    "length-zero-no-unit": true,
+    "length-zero-no-unit": true,
+    "max-empty-lines": 1,
+    "number-leading-zero": "never",
+    "number-no-trailing-zeros": true,
+    "property-no-vendor-prefix": true,
+    "unit-whitelist": ["px", "em", "rem", "deg", "%", "s", "vw", "vh"],
+    "unit-blacklist": [["px"], {
+      "ignoreProperties": {
+         "px": [
+           "width",
+           "height",
+           "min-width",
+           "max-width",
+           "min-height",
+           "max-height",
+           "box-shadow",
+           "text-shadow",
+           "background"
+         ]
+      },
+      "ignoreMediaFeatureNames": {
+        "px": [ "min-width", "max-width", "/height$/" ],
+        "dpi": [ "resolution" ]
+      }
+    }]
+  }
+}

README.md

@@ -1,4 +1,4 @@
-# Rocket CSS
+# :rocket: Rocket CSS
 
 ### Rocket CSS is an open source, lightweight CSS framework built using Flexbox.
 

assets/scss/_alignment.scss

@@ -1,23 +1,23 @@
-.rkt-align-top {
+.align-top {
   vertical-align: top;
 }
 
-.rkt-align-middle {
+.align-middle {
   vertical-align: middle;
 }
 
-.rkt-align-bottom {
+.align-bottom {
   vertical-align: bottom;
 }
 
-.rkt-align-baseline {
+.align-baseline {
   vertical-align: baseline;
 }
 
-.rkt-align-text-top {
+.align-text-top {
   vertical-align: text-top;
 }
 
-.rkt-align-text-bottom {
+.align-text-bottom {
   vertical-align: text-bottom;
 }

assets/scss/_buttons.scss

@@ -11,45 +11,45 @@ p {
   }
 }
 
-.rkt-btn {
+.btn {
   display: inline-block;
   text-align: center;
   font-weight: $font-weight-normal;
   vertical-align: middle;
   user-select: none;
-  letter-spacing: .15px;
-  border: 1px solid transparent;
-  padding: 6px 12px;
-  padding: .7em 1.2em;
-  font-size: .9em;
+  letter-spacing: .009rem;
+  border: .0625rem solid transparent;
+  padding: .375rem .75rem;
+  padding: .7rem 1.2rem;
+  font-size: .9rem;
   cursor: pointer;
 }
 
-.rkt-btn-rounded {
-  border-radius: 50px;
+.btn-rounded {
+  border-radius: 3.125rem;
 }
 
-.rkt-btn-small {
-  padding: .6em .8em;
-  font-size: .8em;
+.btn-small {
+  padding: .6rem .8rem;
+  font-size: .8rem;
 }
 
-.rkt-btn-medium {
-  padding: .8em 1.6em;
-  font-size: 1em;
+.btn-medium {
+  padding: .8rem 1.6rem;
+  font-size: 1rem;
 }
 
-.rkt-btn-large {
-  padding: .9em 2em;
-  font-size: 1.1em;
+.btn-large {
+  padding: .9rem 2rem;
+  font-size: 1.1rem;
 }
 
-.rkt-btn-block {
+.btn-block {
   display: block;
   width: 100%;
 }
 
-.rkt-btn-primary {
+.btn-primary {
   background-color: $primary;
   border-color: $primary;
   color: $white;
@@ -59,7 +59,7 @@ p {
   }
 }
 
-.rkt-btn-secondary {
+.btn-secondary {
   background-color: $secondary;
   border-color: $secondary;
   color: $white;
@@ -69,7 +69,7 @@ p {
   }
 }
 
-.rkt-btn-success {
+.btn-success {
   background-color: $success;
   border-color: $success;
   color: $white;
@@ -79,7 +79,7 @@ p {
   }
 }
 
-.rkt-btn-warning {
+.btn-warning {
   background-color: $warning;
   border-color: $warning;
   color: $white;
@@ -89,7 +89,7 @@ p {
   }
 }
 
-.rkt-btn-danger {
+.btn-danger {
   background-color: $danger;
   border-color: $danger;
   color: $white;
@@ -99,7 +99,7 @@ p {
   }
 }
 
-.rkt-btn-info {
+.btn-info {
   background-color: $info;
   border-color: $info;
   color: $white;
@@ -109,7 +109,7 @@ p {
   }
 }
 
-.rkt-btn-dark {
+.btn-dark {
   background-color: $dark;
   border-color: $dark;
   color: $white;
@@ -119,7 +119,7 @@ p {
   }
 }
 
-.rkt-btn-light {
+.btn-light {
   background-color: $light;
   border-color: $light;
   color: darken($light, 10%);
@@ -129,7 +129,7 @@ p {
   }
 }
 
-.rkt-btn-black {
+.btn-black {
   background-color: $black;
   border-color: $black;
   color: $white;
@@ -139,7 +139,7 @@ p {
   }
 }
 
-.rkt-btn-white {
+.btn-white {
   background-color: $white;
   border-color: $white;
   color: $dark;
@@ -149,7 +149,7 @@ p {
   }
 }
 
-.rkt-btn-outline-primary {
+.btn-outline-primary {
   background-color: transparent;
   border-color: $primary;
   color: $primary;
@@ -159,7 +159,7 @@ p {
   }
 }
 
-.rkt-btn-outline-secondary {
+.btn-outline-secondary {
   background-color: transparent;
   border-color: $secondary;
   color: $secondary;
@@ -169,7 +169,7 @@ p {
   }
 }
 
-.rkt-btn-outline-success {
+.btn-outline-success {
   background-color: transparent;
   border-color: $success;
   color: $success;
@@ -179,7 +179,7 @@ p {
   }
 }
 
-.rkt-btn-outline-warning {
+.btn-outline-warning {
   background-color: transparent;
   border-color: $warning;
   color: $warning;
@@ -189,7 +189,7 @@ p {
   }
 }
 
-.rkt-btn-outline-danger {
+.btn-outline-danger {
   background-color: transparent;
   border-color: $danger;
   color: $danger;
@@ -199,7 +199,7 @@ p {
   }
 }
 
-.rkt-btn-outline-info {
+.btn-outline-info {
   background-color: transparent;
   border-color: $info;
   color: $info;
@@ -209,7 +209,7 @@ p {
   }
 }
 
-.rkt-btn-outline-dark {
+.btn-outline-dark {
   background-color: transparent;
   border-color: $dark;
   color: $dark;
@@ -219,7 +219,7 @@ p {
   }
 }
 
-.rkt-btn-outline-light {
+.btn-outline-light {
   background-color: transparent;
   border-color: $light;
   color: darken($light, 10%);
@@ -229,7 +229,7 @@ p {
   }
 }
 
-.rkt-btn-outline-black {
+.btn-outline-black {
   background-color: transparent;
   border-color: $black;
   color: $black;
@@ -239,7 +239,7 @@ p {
   }
 }
 
-.rkt-btn-outline-white {
+.btn-outline-white {
   background-color: transparent;
   border-color: $white;
   color: $white;