staple 0.1.3 → 0.1.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 61a568ef5e83f4e773d61df426b0e7d18d45bdd7
-  data.tar.gz: 70e98cb8d4544b32f4a79acb23c93f2b55ea40be
+  metadata.gz: c37d0764086efb578d6cc28f12f14746086b5934
+  data.tar.gz: d6d2e172de9105a12f05edf2da1c9c07af88dce1
 SHA512:
-  metadata.gz: 94a434fa9733ef33a6efc4aacfaf4b35a83f0d9d3dd2e5f0c0bef1bc0a07068e7109631589b40c0efc170a48c489ff00984b0f805221d18a5e2398785c2120af
-  data.tar.gz: 7448335b4aec2a1d132ca7b1162fcbd05c62bdaa20c360f03e943f812b02f85a4561aab14719fe704939c8c4e45ea8d180dff7a602c7a0ed6603874ab55d6038
+  metadata.gz: 8ce84e3377512e09f2b772b7ee1db20ce995b4528dda64875ee1653913bf9e6d1c54c1bc3eff0eeb17ec99381e17bed8358da7cbdd13287b0b0895516fdb8b6e
+  data.tar.gz: 8c1a7037ce59105e21c595c25c289efd18cfa50497d55b7a304a180113b39e499ff91a939d9483a5118afbeefa9b0b819b3e3bede74ac6cd865e03446159b848

data/README.md

@@ -4,9 +4,9 @@ High level UI framework. Built on top of foundation.
 
 ##TODO
 
-* Load vars then override before
-* Generate override components after using vars
-* Modify files using generators or manual
+* See buttons for config
+* can pull in partials/components and new css, not included w/install
+* can then customize those with variables. Ask if you want to import if not in project
 
 ##LOW PRIORITY
 * declaring as dependency does not load it?

data/lib/staple/install_generator.rb

@@ -8,6 +8,7 @@ module Staple
       generate "foundation:install", "--slim" #rails g foundation:install --slim
       # trim fat
       copy_file "source/stylesheets/foundation_and_overrides.scss", "app/assets/stylesheets/foundation_and_overrides.scss", :force => true
+      gsub_file "app/assets/javascripts/application.js", "$(function(){ $(document).foundation(); });", "var ready = function() {\n$(document).foundation();\n$(document).foundation('abide', {\ninit: false,\n});\n}\n\n$(ready);\n$(document).on('page:load', ready);"
     end
 
     def simple_form_install

data/source/stylesheets/staple/builders/build_typography.scss

@@ -0,0 +1,35 @@
+@each $class in $typeface-classes {
+	$i: index($typeface-classes, $class);
+	$typeface: nth($typeface-define, $i);
+
+	.#{$class}{
+		font-family: $typeface;
+	}
+}
+
+@each $class in $weight-classes{
+	$i: index($weight-classes, $class);
+	$weight: nth($weight-define, $i);
+
+	.#{$class}{
+		font-weight: $weight;
+	}
+}
+
+@each $class in $transform-classes{
+	$i: index($transform-classes, $class);
+	$transform: nth($transform-define, $i);
+
+	.#{$class}{
+		text-transform: $transform;
+	}
+}
+
+@each $class in $spacing-classes{
+	$i: index($spacing-classes, $class);
+	$spacing: nth($spacing-define, $i);
+
+	.#{$class}{
+		letter-spacing: $spacing;
+	}
+}

data/source/stylesheets/staple/buttons.scss

@@ -1 +1,3 @@
+//SET DEFAULT BUTTON STYLE with variables. Modify variables with thor/generators
+//Variables determine what to write to css
 @import 'builders/build_buttons'

data/source/stylesheets/staple/forms.scss

@@ -1,52 +1,16 @@
 //STYLE OVERRIDES
-//take away pointer on label
-label{
-	cursor: default;
-}
 //take away asterix
 div.required{
 	abbr{
 		display: none;
 	}
 }
-//REMOVE FOUNDATION GLOW
-input[type="text"],
-input[type="password"],
-input[type="date"],
-input[type="datetime"],
-input[type="datetime-local"],
-input[type="month"],
-input[type="week"],
-input[type="email"],
-input[type="number"],
-input[type="search"],
-input[type="tel"],
-input[type="time"],
-input[type="url"],
-input[type="color"],
-textarea {
-	box-shadow: none;
-	transition: border-color 0.15s ease-in-out;
-}
-input[type="text"]:focus,
-input[type="password"]:focus,
-input[type="date"]:focus,
-input[type="datetime"]:focus,
-input[type="datetime-local"]:focus,
-input[type="month"]:focus,
-input[type="week"]:focus,
-input[type="email"]:focus,
-input[type="number"]:focus,
-input[type="search"]:focus,
-input[type="tel"]:focus,
-input[type="time"]:focus,
-input[type="url"]:focus,
-input[type="color"]:focus,
-textarea:focus {
-	box-shadow: none;
-	outline: none;
-}
-//NOT ITALICS
-[data-abide] .error small.error{
-	font-style: normal;
+
+div.error{
+	*{ //hack: could be troublesome
+		border-color: $alert-color;
+	}
+	*:focus{
+		border-color: $alert-color;
+	}
 }

data/source/stylesheets/staple/init/overrides.scss

@@ -91,11 +91,11 @@ $font-weight-bold: bold !default;
 
 
 // // We use these to control various global styles
-$body-bg: $white;
-$body-font-color: rgba($black, $transparent-strong);
-$body-font-family: $font-family-sans-serif;
-$body-font-weight: $font-weight-normal;
-$body-font-style: normal;
+// $body-bg: $white;
+// $body-font-color: rgba($black, $transparent-strong);
+// $body-font-family: $font-family-sans-serif;
+// $body-font-weight: $font-weight-normal;
+// $body-font-style: normal;
 
 // // We use this to control font-smoothing
 $font-smoothing: antialiased;
@@ -394,7 +394,7 @@ $button-font-tny: rem-calc($scale-factor*11);
 $button-font-sml: rem-calc($scale-factor*13);
 $button-font-med: rem-calc($scale-factor*15);
 $button-font-lrg: rem-calc($scale-factor*21);
-$button-font-weight: 100;
+$button-font-weight: 200;
 $button-font-align: center;
 
 // We use these to control various hover effects.
@@ -571,7 +571,7 @@ $button-group-border-width: 1px;
 $form-spacing: rem-calc($scale-factor*16);
 
 // We use these to style the labels in different ways
-$form-label-pointer: pointer;
+$form-label-pointer: default;
 $form-label-font-size: rem-calc(14);
 $form-label-font-weight: $font-weight-normal;
 $form-label-line-height: 1.5;
@@ -582,15 +582,15 @@ $input-font-family: inherit;
 $input-font-color: rgba(0,0,0,0.75);
 $input-font-size: rem-calc(14);
 $input-bg-color: $white;
-$input-focus-bg-color: scale-color($white, $lightness: -2%);
+$input-focus-bg-color: default;
 $input-border-color: scale-color($white, $lightness: -20%);
-$input-focus-border-color: scale-color($white, $lightness: -40%);
+$input-focus-border-color: $primary-color;
 $input-border-style: solid;
 $input-border-width: 1px;
 $input-border-radius: $global-radius;
 $input-disabled-bg: rgba($black, $transparent-weak);
 // $input-disabled-cursor: $cursor-default-value;
-$input-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
+$input-box-shadow: none;
 
 // We use these to style the fieldset border and spacing.
 $fieldset-border-style: solid;
@@ -621,12 +621,12 @@ $input-error-message-padding: rem-calc(6 9 9);
 $input-error-message-top: -1px;
 $input-error-message-font-size: rem-calc(12);
 $input-error-message-font-weight: $font-weight-normal;
-$input-error-message-font-style: italic;
-$input-error-message-font-color: $white;
+$input-error-message-font-style: normal;
+$input-error-message-font-color: rgba($white, $transparent-strong);
 $input-error-message-font-color-alt: rgba($black, $transparent-strong);
 
 // We use this to style the glowing effect of inputs when focused
-$input-include-glowing-effect: true;
+$input-include-glowing-effect: false;
 $glowing-effect-fade-time: 0.45s;
 $glowing-effect-color: $input-focus-border-color;
 

data/source/stylesheets/staple/typography.scss

@@ -1,13 +1,44 @@
-//IMPORT FONTS HERE
-$type-face-primary:"Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
-$type-face-secondary:Georgia, Cambria, "Times New Roman", Times, serif;
+//IMPORT FONTS HERE Typekit vs google fonts
+// @import url(http://fonts.googleapis.com/css?family=Slabo+27px);
+// @import url(http://fonts.googleapis.com/css?family=Chivo);
+// @import url(http://fonts.googleapis.com/css?family=VT323);
 
-//FOUNDATION STYLES: CAN BE OVERRIDDEN BUT NEEDED
-$font-family-sans-serif: $type-face-primary;
-$font-family-serif: $type-face-secondary;
-$font-family-monospace: Consolas, "Liberation Mono", Courier, monospace;
+//DEFAULTS
+$typeface-primary: sans-serif;
+$typeface-secondary: serif;
+$typeface-tertiary: monospace;
+$normal-font-weight: 400;
+
+//NOT HOOKED UP YET:
+$default-font-size: 16px;
+$default-line-height: 150%;
+$default-letter-spacing: 0.005rem;
 
+//FOUNDATION STYLES: CAN BE OVERRIDDEN BUT NEEDED
+$font-family-sans-serif: $typeface-primary;
+$font-family-serif: $typeface-secondary;
+$font-family-monospace: $typeface-tertiary;
+$body-bg: $white;//can use any from colors
+$body-font-color: rgba($black, $transparent-strong);
+$body-font-family: $font-family-sans-serif;
+$body-font-weight: $normal-font-weight;
 
 //FONT CLASSES TO GENERATE
+$typeface-classes: primary secondary tertiary;
+$typeface-define: $typeface-primary $typeface-secondary $typeface-tertiary;
+
+//WEIGHT CLASSES IN ADDITION TO DEFAULT
+$weight-classes:light strong;
+$weight-define: 200 700;
+
+//TEXT Transform: Underline, uppercase, etc text-transform: uppercase, lowercase, capitalize;
+$transform-classes: up down cap;//shorter names for simplicity when chaining
+$transform-define: uppercase lowercase capitalize;
+
+//Letter spacing varients
+$spacing-classes: sleak wide;
+$spacing-define: 0.2rem 1rem;
+
+@import "builders/build_typography"
 
-//SET FONT
+//TODO: COOL FONT SHADOW EFFECT ON http://fittextjs.com

data/source/stylesheets/staple/utilities.scss

@@ -11,22 +11,6 @@ $global-rounded: 1000px;
 
 //ADDITIONAL UTILITIES
 //need vertical alignment
-//font weights
-.fontweight-light{
-	font-weight: 200;
-}
-.fontweight-normal{
-	font-weight: 400;
-}
-.fontweight-medium{
-	font-weight: 500;
-}
-.fontweight-strong{
-	font-weight: 700;
-}
-.uppercase{
-	text-transform: uppercase;
-}
 // hack: needed for admin
 .row.full-width {
   width: 100%;

data/staple.gemspec

@@ -4,7 +4,7 @@ $LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
 
 Gem::Specification.new do |spec|
   spec.name          = "staple"
-  spec.version       = "0.1.3"
+  spec.version       = "0.1.4"
   spec.summary       = "A high level ui generator. WIP."
   spec.description   = "Coming Soon. Built on top of foundation."
   spec.authors       = ["Ryan Helsing"]

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: staple
 version: !ruby/object:Gem::Version
-  version: 0.1.3
+  version: 0.1.4
 platform: ruby
 authors:
 - Ryan Helsing
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2014-11-12 00:00:00.000000000 Z
+date: 2014-11-13 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: foundation-rails
@@ -87,6 +87,7 @@ files:
 - source/stylesheets/foundation_and_overrides.scss
 - source/stylesheets/staple/builders/build_buttons.scss
 - source/stylesheets/staple/builders/build_colors.scss
+- source/stylesheets/staple/builders/build_typography.scss
 - source/stylesheets/staple/buttons.scss
 - source/stylesheets/staple/colors.scss
 - source/stylesheets/staple/forms.scss