Merge pull request #8 from sts-ryan-holton/v0.1.0-dev

V0.1.0 dev

README.md

@@ -2,21 +2,37 @@
 
 ### Rocket CSS is an open source, lightweight CSS framework built using Flexbox.
 
-Rocket CSS is a small, lightweight CSS-only framework that allows you to quickly build web applications without the hassle of remembering 1,000s of classes. Unlike other CSS frameworks like Twitter Bootstrap, Rocket CSS comes with a handful of simple components which are all prefixed with the class .rkt- which makes it easier to integrate Rocket CSS into an existing site.
+Rocket CSS is a small, lightweight CSS-only framework that allows you to quickly build web applications without the hassle of remembering 1,000s of classes. Unlike other CSS frameworks like Twitter Bootstrap, Rocket CSS comes with a handful of simple components which are all prefixed with the class `.rkt-` which makes it easier to integrate Rocket CSS into an existing site.
 
 ## Getting Started
 
 Please visit the Rocket CSS site to get started: https://sts-ryan-holton.github.io/rocket-css/
 
+## Browser Support
+
+Rocket CSS aims to support modern browsers. If you're using an older version than listed below, or your browser isn't listed, there's likely little support for this browser.
+
+```
+browsers: [
+  "last 2 versions",
+  ">= 0.2%",
+  "Chrome >= 55",
+  "Firefox >= 54",
+  "iOS >= 10",
+  "Safari >= 10",
+  "Android >= 4.4"
+]
+```
+
 ## Issues
 
-Submit a new relevant issue here: https://github.com/sts-ryan-holton/rocket-css/issues
+Submit a new relevant issue here: https://github.com/sts-ryan-holton/rocket-css/issues/new?template=bug_report.md
 
 **Please be sure to search open issues first.**
 
 ## Feature Requests
 
-If you have a feature request, please submit one here: https://github.com/sts-ryan-holton/rocket-css/issues/new
+If you have a feature request, please submit one here: https://github.com/sts-ryan-holton/rocket-css/issues/new?template=feature_request.md
 
 ## License
 

assets/scss/_buttons.scss

@@ -46,6 +46,7 @@ p {
 
 .rkt-btn-block {
   display: block;
+  width: 100%;
 }
 
 .rkt-btn-primary {
@@ -128,6 +129,16 @@ p {
   }
 }
 
+.rkt-btn-black {
+  background-color: $black;
+  border-color: $black;
+  color: $white;
+  &:hover, &:focus {
+    background-color: darken($black, 5%);
+    border-color: darken($black, 5%);
+  }
+}
+
 .rkt-btn-white {
   background-color: $white;
   border-color: $white;
@@ -218,6 +229,16 @@ p {
   }
 }
 
+.rkt-btn-outline-black {
+  background-color: transparent;
+  border-color: $black;
+  color: $black;
+  &:hover, &:focus {
+    border-color: darken($black, 5%);
+    color: darken($black, 5%);
+  }
+}
+
 .rkt-btn-outline-white {
   background-color: transparent;
   border-color: $white;

assets/scss/_utilities.scss

@@ -29,11 +29,11 @@ figure.rkt-highlight {
   }
 }
 
-.w-100 {
+.rkt-w-100 {
   width: 100%;
 }
 
-.h-100 {
+.rkt-h-100 {
   height: 100%;
 }
 

assets/scss/rocketcss-theme.scss

@@ -92,6 +92,16 @@
   }
 }
 
+@media (max-width: 992px) {
+
+  .rkt-highlight-code {
+    pre {
+      overflow-x: auto;
+    }
+  }
+
+}
+
 @media (max-width: 576px) {
 
   .rkt-home-buttons {

assets/scss/rocketcss.scss

@@ -1,6 +1,13 @@
+/*
+Name: Rocket CSS
+Author: Ryan Holton
+Version: 1.0.0
+Github: https://github.com/sts-ryan-holton/rocket-css
+Website: https://sts-ryan-holton.github.io/rocket-css/
+*/
+
 // Base
 @import 'variables';
-@import 'mixins';
 @import 'normalize';
 @import 'resets';
 

components/docs-nav.vue

@@ -11,7 +11,6 @@
       </div>
       <div class="rkt-docnav-item">
         <nuxt-link to="/docs/layout/grid" class="rkt-docs-item rkt-d-block rkt-p-y-1" active-class="rkt-docs-item-active">Layout</nuxt-link>
-
         <ul class="rkt-marginless rkt-paddingless">
           <li>
             <nuxt-link to="/docs/layout/grid" class="rkt-docs-item rkt-text-secondary rkt-d-block rkt-p-y-1" active-class="rkt-docs-item-active" exact>Grid</nuxt-link>
@@ -35,9 +34,24 @@
           <li>
             <nuxt-link to="/docs/utilities/colours" class="rkt-docs-item rkt-text-secondary rkt-d-block rkt-p-y-1" active-class="rkt-docs-item-active" exact>Colours</nuxt-link>
           </li>
+          <li>
+            <nuxt-link to="/docs/utilities/flex" class="rkt-docs-item rkt-text-secondary rkt-d-block rkt-p-y-1" active-class="rkt-docs-item-active" exact>Flex</nuxt-link>
+          </li>
+          <li>
+            <nuxt-link to="/docs/utilities/helpers" class="rkt-docs-item rkt-text-secondary rkt-d-block rkt-p-y-1" active-class="rkt-docs-item-active" exact>Helpers</nuxt-link>
+          </li>
+          <li>
+            <nuxt-link to="/docs/utilities/images" class="rkt-docs-item rkt-text-secondary rkt-d-block rkt-p-y-1" active-class="rkt-docs-item-active" exact>Images</nuxt-link>
+          </li>
           <li>
             <nuxt-link to="/docs/utilities/spacing" class="rkt-docs-item rkt-text-secondary rkt-d-block rkt-p-y-1" active-class="rkt-docs-item-active" exact>Spacing</nuxt-link>
           </li>
+          <li>
+            <nuxt-link to="/docs/utilities/typography" class="rkt-docs-item rkt-text-secondary rkt-d-block rkt-p-y-1" active-class="rkt-docs-item-active" exact>Typography</nuxt-link>
+          </li>
+          <li>
+            <nuxt-link to="/docs/utilities/visibility" class="rkt-docs-item rkt-text-secondary rkt-d-block rkt-p-y-1" active-class="rkt-docs-item-active" exact>Visibility</nuxt-link>
+          </li>
         </ul>
       </div>
     </nav>

docs/200.html

@@ -1,9 +1,9 @@
 <!DOCTYPE html>
 <html data-n-head="">
   <head>
-    <meta data-n-head="true" charset="utf-8"/><meta data-n-head="true" name="viewport" content="width=device-width, initial-scale=1"/><meta data-n-head="true" data-hid="description" name="description" content="The home of the open source lightweight Rocket CSS framework."/><title data-n-head="true">Rocket CSS</title><link data-n-head="true" rel="icon" type="image/x-icon" href="/rocket-css/favicon.ico"/><link rel="preload" href="/rocket-css/_nuxt/manifest.3bd25bac2f3defb16296.js" as="script" /><link rel="preload" href="/rocket-css/_nuxt/vendor.69c901455c0df985e130.js" as="script" /><link rel="preload" href="/rocket-css/_nuxt/app.7cc8ca4ea79e0a926920.js" as="script" /><link rel="prefetch" href="/rocket-css/_nuxt/pages/index.9f6ced60f08d5133ed3a.js" /><link rel="prefetch" href="/rocket-css/_nuxt/layouts/default.c791e191015f53d6b16a.js" />
+    <meta data-n-head="true" charset="utf-8"/><meta data-n-head="true" name="viewport" content="width=device-width, initial-scale=1"/><meta data-n-head="true" data-hid="description" name="description" content="Rocket CSS is an open source, lightweight CSS framework built using Flexbox. Download for FREE today."/><title data-n-head="true">Rocket CSS - simple, lightweight CSS framework built using Flexbox</title><link data-n-head="true" rel="icon" type="png" href="/rocket-css/favicon.png"/><link data-n-head="true" rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"/><link data-n-head="true" rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css"/><link rel="preload" href="/rocket-css/_nuxt/manifest.c1fba43fa593e1bb095e.js" as="script" /><link rel="preload" href="/rocket-css/_nuxt/vendor.604f0ac8481e0aa8cad1.js" as="script" /><link rel="preload" href="/rocket-css/_nuxt/app.3f116e4dbbdbb948d7d1.js" as="script" /><link rel="prefetch" href="/rocket-css/_nuxt/pages/docs/utilities/colours.5f74b7bc83c8a017b8c9.js" /><link rel="prefetch" href="/rocket-css/_nuxt/layouts/docs.24f5194bd73663e2b024.js" /><link rel="prefetch" href="/rocket-css/_nuxt/layouts/default.1c78e92b7e4725b98841.js" /><link rel="prefetch" href="/rocket-css/_nuxt/pages/about.81301676af271422cf6b.js" /><link rel="prefetch" href="/rocket-css/_nuxt/pages/index.033f7029c449cd9b2dda.js" /><link rel="prefetch" href="/rocket-css/_nuxt/pages/docs/utilities/spacing.ebbe5685108bd388c004.js" /><link rel="prefetch" href="/rocket-css/_nuxt/pages/docs/layout/grid.317562e8e48dada748f4.js" /><link rel="prefetch" href="/rocket-css/_nuxt/pages/docs/index.508f4db307cc39f09b0f.js" /><link rel="prefetch" href="/rocket-css/_nuxt/pages/docs/components/hero.98e070d1b9074fc0e38d.js" /><link rel="prefetch" href="/rocket-css/_nuxt/pages/docs/components/buttons.34c5dcb9464d433a90a7.js" />
   </head>
   <body data-n-head="">
     <div id="__nuxt"><style>body, html, #__nuxt {  background-color: white;  width: 100%;  height: 100%;  display: flex;  justify-content: center;  align-items: center;  margin: 0;  padding: 0;}.spinner {  width: 40px;  height: 40px;  margin: 100px auto;  background-color: #dbe1ec;  border-radius: 100%;  -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;  animation: sk-scaleout 1.0s infinite ease-in-out;}@-webkit-keyframes sk-scaleout {  0% { -webkit-transform: scale(0) }  100% {    -webkit-transform: scale(1.0);    opacity: 0;  }}@keyframes sk-scaleout {  0% {    -webkit-transform: scale(0);    transform: scale(0);  } 100% {    -webkit-transform: scale(1.0);    transform: scale(1.0);    opacity: 0;  }}</style><div class="spinner">  <div class="double-bounce1"></div>  <div class="double-bounce2"></div></div><!-- http://tobiasahlin.com/spinkit --></div>
-  <script type="text/javascript" src="/rocket-css/_nuxt/manifest.3bd25bac2f3defb16296.js"></script><script type="text/javascript" src="/rocket-css/_nuxt/vendor.69c901455c0df985e130.js"></script><script type="text/javascript" src="/rocket-css/_nuxt/app.7cc8ca4ea79e0a926920.js"></script></body>
+  <script type="text/javascript" src="/rocket-css/_nuxt/manifest.c1fba43fa593e1bb095e.js"></script><script type="text/javascript" src="/rocket-css/_nuxt/vendor.604f0ac8481e0aa8cad1.js"></script><script type="text/javascript" src="/rocket-css/_nuxt/app.3f116e4dbbdbb948d7d1.js"></script></body>
 </html>