griddyup 0.0.3 → 0.0.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 863144c0380c37585497e0a3dcc883af207a9aa6
-  data.tar.gz: 8fe94ce800e71ecbd462ece8fb328f32560ac0ea
+  metadata.gz: 88a69789bc421e5712f2f6f2ed4e6674ab459a26
+  data.tar.gz: 4a64f3e4628fa58b00a2d6e514570860637cb9bc
 SHA512:
-  metadata.gz: b3d0d810bb3a57173b8a0aea2b29c46ca91d2e7e89f6a6839e4c17f0bb31529034272c6db82846850a83707bb11b707ed439a855c320016b66a508240ba16609
-  data.tar.gz: 1c49c813dbaa26842ec6fee580b79e47ee0cd3e394f4a3e50efd32aae55f5d96e250f89a8314dcf1674cc9d715eb2db896d2fa41c799b48be54b36cc2435e819
+  metadata.gz: '048f0b83476d5a907fb20e2cf20e61cf0053abf8ac824d88d2738919fd2e8de3a9e476efb88799b62911c913aac0772f3c0df72a9b0d7fa0d1ef2d4c8879f249'
+  data.tar.gz: 87c328377b562542a6db0ddb0c30a836d9d2bc5f57e021216287569e31acfd95d63d8aa0fd9ba45ee006d6dc28db7c2217441e69e989c61cff1e0943164e2561

data/app/assets/javascripts/griddyup.js

@@ -1 +1 @@
-var GriddyUp = {};
+var GriddyUp = {};

data/app/assets/stylesheets/_colors.scss

@@ -0,0 +1,53 @@
+// SASS style sheet */
+// Palette color codes */
+// Palette URL: http://paletton.com/#uid=33n0u0kiTy18TRjekHDmOterrph */
+
+// Feel free to copy&paste color codes to your application */
+
+
+// As hex codes */
+
+$color-primary-0: #4692A4;	// Main Primary color */
+$color-primary-1: #A5D6E2;
+$color-primary-2: #6FB4C4;
+$color-primary-3: #2C7D90;
+$color-primary-4: #15697D;
+
+$color-secondary-1-0: #FFD169;	// Main Secondary color (1) */
+$color-secondary-1-1: #FFE9B8;
+$color-secondary-1-2: #FFDC8D;
+$color-secondary-1-3: #E9B643;
+$color-secondary-1-4: #C9951D;
+
+$color-secondary-2-0: #FF7A69;	// Main Secondary color (2) */
+$color-secondary-2-1: #FFC0B8;
+$color-secondary-2-2: #FF9A8D;
+$color-secondary-2-3: #E95643;
+$color-secondary-2-4: #C9311D;
+
+
+
+// As RGBa codes */
+
+$rgba-primary-0: rgba( 70,146,164,1);	// Main Primary color */
+$rgba-primary-1: rgba(165,214,226,1);
+$rgba-primary-2: rgba(111,180,196,1);
+$rgba-primary-3: rgba( 44,125,144,1);
+$rgba-primary-4: rgba( 21,105,125,1);
+
+$rgba-secondary-1-0: rgba(255,209,105,1);	// Main Secondary color (1) */
+$rgba-secondary-1-1: rgba(255,233,184,1);
+$rgba-secondary-1-2: rgba(255,220,141,1);
+$rgba-secondary-1-3: rgba(233,182, 67,1);
+$rgba-secondary-1-4: rgba(201,149, 29,1);
+
+$rgba-secondary-2-0: rgba(255,122,105,1);	// Main Secondary color (2) */
+$rgba-secondary-2-1: rgba(255,192,184,1);
+$rgba-secondary-2-2: rgba(255,154,141,1);
+$rgba-secondary-2-3: rgba(233, 86, 67,1);
+$rgba-secondary-2-4: rgba(201, 49, 29,1);
+
+
+
+// Generated by Paletton.com © 2002-2014 */
+// http://paletton.com */

data/app/assets/stylesheets/griddyup.scss

@@ -62,7 +62,8 @@ $secondary-color-dark-text:#fff;
 $font-family-sans-serif:  "Helvetica Neue", Helvetica, Arial, sans-serif;
 $font-family-serif:       Georgia, "Times New Roman", Times, serif;
 $font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace;
-$font-family-base:        $font-family-sans-serif;
+$font-family-lucida:      "Lucida Sans Unicode","Lucida Grande", sans-serif;
+$font-family-base:        $font-family-lucida;
 
 $font-size-base:          14px;
 $font-size-large:         ceil(($font-size-base * 1.25)); // ~18px
@@ -113,7 +114,7 @@ $bp-xlarge-up: "only screen and (min-width: #{nth($bp-xlarge,1)})";
 $bp-xlarge-only: "only screen and (min-width: #{nth($bp-xlarge,1)}) and (max-width:#{nth($bp-xlarge,2)})";
 $bp-xlarge-down: "only screen";
 
-* {
+*, *:before, *:after {
   box-sizing: border-box;
 }
 
@@ -121,8 +122,13 @@ html,body {
   height:100%;
 }
 
+div {
+  display: block;
+}
+
 body {
   font-size: $font-size-base;
+  font-family: $font-family-base;
 }
 
 .font-large {
@@ -146,7 +152,7 @@ body {
   display: grid;
   grid-row-gap: 0.4rem;
   &.fixed {
-    max-width: 60em;
+    max-width: 64em;
     margin-left: auto;
     margin-right: auto;
   }
@@ -156,6 +162,8 @@ body {
   display:grid;
   grid-template-columns: repeat($max-columns,1fr);
   grid-gap: 0.4rem;
+  min-height: 0;
+  min-width: 0;
 }
 
 @for $i from 1 through $max-columns {
@@ -174,7 +182,9 @@ body {
 @mixin columns($size) {
   @for $i from 1 through $max-columns {
     .#{$size}-col-#{$i} {
-      grid-column: span $i;
+      grid-column-end: span $i;
+      min-width: 0; // required for FF
+      overflow: hidden; // required for FF
     }
   }
 }
@@ -224,6 +234,8 @@ body {
 @for $i from 1 through $max-columns {
   .col-#{$i} {
     grid-column: span $i;
+    min-width: 0; // required for FF
+    overflow: hidden; // required for FF
   }
 }
 
@@ -258,101 +270,116 @@ $btn-color-default:#FFF ;
 $btn-color-default-text:#333333;
 $btn-color-default-hover:darken($btn-color-default,10%);
 
-$btn-color-primary:#BDE5F8 ;
-$btn-color-primary-text:#00529B;
+$btn-color-primary:#15697D ; //#bde5f8
+$btn-color-primary-text:#fff; //00529b
 $btn-color-primary-hover:darken($btn-color-primary,10%);
 
-$btn-color-success:#DFF2BF;
-$btn-color-success-text:#4F8A10;
+$btn-color-success:#17A117;
+$btn-color-success-text:#fff;
 $btn-color-success-hover:darken($btn-color-success,10%);;
 
-$btn-color-warning:#FEEFB3;
-$btn-color-warning-text:#9F6000;
+$btn-color-warning:#C9951D;
+$btn-color-warning-text:#fff;
 $btn-color-warning-hover:darken($btn-color-warning,10%);;
 
-$btn-color-alert:#FFBABA;
-$btn-color-alert-text:#D8000C;
+$btn-color-alert:#C9311D;
+$btn-color-alert-text:#fff;
 $btn-color-alert-hover:darken($btn-color-alert,10%);;
 
 form {
-  max-width: 100%;
   display: grid;
   grid-gap: 0.4rem;
   & .form-group {
     display:grid;
     grid-gap: 0.2rem;
-    grid-template-areas: "l" "i";
     & label {
-      grid-area: l;
-      max-width: 100%;
+      font-weight: bold;
     }
     & input {
-      grid-area: i;
       max-width: 100%;
     }
     &.inline {
-      grid-template-areas: "l i";
       grid-template-columns: 1fr 2fr;
       align-items: center;
     }
-    @for $i from 3 through 10 {
+
+    @for $i from 2 through $max-columns {
       &.inline-#{$i} {
-        grid-template-columns: repeat($i,1fr);
-        align-items: center;
+        min-width: 0; // required for FF
+        overflow: hidden; // required for FF
+        grid-template-columns: repeat($i,1fr);
+        & label {
+          grid-column-start: 1;
+          grid-column-end: span $i+1;
+        }
+        & input {
+          overflow: hidden;
+        }
       }
     }
   }
 
-  button {
-    background-color: $btn-color-default;
-    border-color: $btn-color-default;
-    color: $btn-color-default-text;
+
+}
+button {
+  background-color: $btn-color-default;
+  border-color: $btn-color-default;
+  color: $btn-color-default-text;
+  &:hover {
+    background-color: $btn-color-default-hover;
+  }
+  &.primary {
+    background-color: $btn-color-primary;
+    border-color: $btn-color-primary;
+    color: $btn-color-primary-text;
     &:hover {
-      background-color: $btn-color-default-hover;
-    }
-    &.primary {
-      background-color: $btn-color-primary;
-      border-color: $btn-color-primary;
-      color: $btn-color-primary-text;
-      &:hover {
-        background-color: $btn-color-primary-hover;
-      }
+      background-color: $btn-color-primary-hover;
+      border-color: $btn-color-primary-hover;
     }
-    &.success {
-      background-color: $btn-color-success;
-      border-color: $btn-color-success;
-      color: $btn-color-success-text;
-      &:hover {
-        background-color: $btn-color-success-hover;
-      }
+  }
+  &.success {
+    background-color: $btn-color-success;
+    border-color: $btn-color-success;
+    color: $btn-color-success-text;
+    &:hover {
+      background-color: $btn-color-success-hover;
+      border-color: $btn-color-success-hover;
     }
-    &.warning {
-      background-color: $btn-color-warning;
-      border-color: $btn-color-warning;
-      color: $btn-color-warning-text;
-      &:hover {
-        background-color: $btn-color-warning-hover;
-      }
+  }
+  &.warning {
+    background-color: $btn-color-warning;
+    border-color: $btn-color-warning;
+    color: $btn-color-warning-text;
+    &:hover {
+      background-color: $btn-color-warning-hover;
+      border-color: $btn-color-warning-hover;
     }
-    &.alert {
-      background-color: $btn-color-alert;
-      border-color: $btn-color-alert;
-      color: $btn-color-alert-text;
-      &:hover {
-        background-color: $btn-color-alert-hover;
-      }
+  }
+  &.alert {
+    background-color: $btn-color-alert;
+    border-color: $btn-color-alert;
+    color: $btn-color-alert-text;
+    &:hover {
+      background-color: $btn-color-alert-hover;
+      border-color: $btn-color-alert-hover;
     }
   }
 }
-
 input, button, select, textarea {
-  padding: 0.3rem;
-  border: 0.5px #333 solid;
-  border-radius: 0.2rem;
+  padding: 0.4rem;
+  border: 1px #bebebe solid;
+  outline: none;
   &:focus {
     border-color: $primary-color-light;
+    box-shadow: 0 0 0.2rem $primary-color-light;
   }
   &:invalid {
     border-color: #990000;
   }
 }
+
+a.btn {
+  @extend button;
+  color: inherit;
+  text-decoration: none;
+}

data/lib/griddyup/version.rb

@@ -1,3 +1,3 @@
 module Griddyup
-  VERSION = '0.0.3'
+  VERSION = '0.0.4'
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: griddyup
 version: !ruby/object:Gem::Version
-  version: 0.0.3
+  version: 0.0.4
 platform: ruby
 authors:
 - hawry
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2017-08-14 00:00:00.000000000 Z
+date: 2017-08-16 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -52,7 +52,9 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: '5.0'
-description: Griddyup is a CSS-grid tool for (a bit) faster prototyping
+description: Griddyup is a CSS-grid tool for (a bit) faster prototyping using CSS-Grid
+  layout. Therefore, you should be careful using this if you wish to have any backwards
+  compatibility.
 email:
 - hawry@hawry.net
 executables: []
@@ -63,6 +65,7 @@ files:
 - README.md
 - Rakefile
 - app/assets/javascripts/griddyup.js
+- app/assets/stylesheets/_colors.scss
 - app/assets/stylesheets/griddyup.scss
 - app/assets/stylesheets/normalize/_normalize.scss
 - app/assets/stylesheets/normalize/_variables.scss
@@ -91,7 +94,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
 requirements: []
 rubyforge_project: 
-rubygems_version: 2.6.10
+rubygems_version: 2.6.12
 signing_key: 
 specification_version: 4
 summary: Griddyup is a CSS-Grid tool