staple 0.1.0 → 0.1.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 1cb1ab7deac68105ba25cc4cc760b54b24eebce3
-  data.tar.gz: b90559e7aac08c6e848e6389bbbd2c07ec31ed67
+  metadata.gz: 2b2768265c039f6c125d5a0213c9e7afdc3a850d
+  data.tar.gz: 4c5ab01ee33a83747039b18f62d3c6e994a37e70
 SHA512:
-  metadata.gz: f4000c40f8e3595d9ebccaa2a45d9c93648e67046be1dd994c22471b0bf1cc663be8fb1fe03e12c02716ddf12e7fabab721e6599cc32b879c3bea8220c9cf139
-  data.tar.gz: a4f462bd3836eba657330924202f53ffcd457e1fec5070dc8b31a1acbf3fd1b368ad557675a76ace6d07cb656e502965924b55a7751968f3c29fa4f3d6783a67
+  metadata.gz: 4279b536e81a4b033fcdcae425d57ab02e50841ac46b8ffb989950dccda42de792dd852d1cb7d18143872d9066ae35712a02e47cf8e41638df48aebe8e83136e
+  data.tar.gz: 3f2838e8df5211b49268a849ea5b2da687bb1f6525f4a8ad6b97b989b53ba15d986372fbcab75717c303ed262d33ed499b0e282c15a47b5cc5bd5e93f51f1c93

data/README.md

@@ -4,11 +4,17 @@ High level UI framework. Built on top of foundation.
 
 ##TODO
 
-* add overrides to foundation file using big list, seperate into files
+* Simple default generators first. Basic Theme.
+* Load vars then override before
+* Generate override components after using vars
+* Modify files using generators or manual
+
+##LOW PRIORITY
 * declaring as dependency does not load it?
 * integration with existing projects
 
 ##Install
+
 ```ruby
 #Gemfile
 gem 'slim-rails'
@@ -41,19 +47,19 @@ section.row
 
 ##Modify Overall, Modular Style With Commands
 ```console
-staple theme:Flat
+staple theme:flat
 ```
 
 ```console
-staple typeface_primary:HelveticaNeau
+staple type-face-primary:HelveticaNeau
 ```
 
 ```console
-staple typeface_secondary:ComicSans
+staple type-face-secondary:ComicSans
 ```
 
 ```console
-staple color_scheme:Flatland
+staple color-scheme:Flatland
 ```
 
 ##Build

data/lib/staple/import_generator.rb

@@ -3,48 +3,48 @@ require 'rails/generators'
 module Staple
   class ImportGenerator < Rails::Generators::Base
     desc 'Copy refills'
-    source_root File.expand_path("../../../source", __FILE__)
-    argument :snippet, type: :string, required: true
-
-    def copy_html
-      copy_file_if_exists(
-        partial_name,
-        File.join('app', 'views', 'refills', partial_name),
-      )
-    end
-
-    def copy_styles
-      copy_file_if_exists(
-        File.join('stylesheets', 'refills', stylesheet_name),
-        File.join('app', 'assets', 'stylesheets', 'refills', stylesheet_name),
-      )
-    end
-
-    def copy_javascripts
-      copy_file_if_exists(
-        File.join('javascripts', 'refills', javascript_name),
-        File.join('app', 'assets', 'javascripts', 'refills', javascript_name),
-      )
-    end
-
-    private
-
-    def copy_file_if_exists(source, destination)
-      if File.exists?(File.join(self.class.source_root, source))
-        copy_file source, destination
-      end
-    end
-
-    def partial_name
-      "_#{snippet.underscore}.html.erb"
-    end
-
-    def stylesheet_name
-      "_#{snippet.dasherize}.scss"
-    end
-
-    def javascript_name
-      "#{snippet.underscore}.js"
-    end
+    # source_root File.expand_path("../../../source", __FILE__)
+    # argument :snippet, type: :string, required: true
+
+    # def copy_html
+    #   copy_file_if_exists(
+    #     partial_name,
+    #     File.join('app', 'views', 'refills', partial_name),
+    #   )
+    # end
+
+    # def copy_styles
+    #   copy_file_if_exists(
+    #     File.join('stylesheets', 'refills', stylesheet_name),
+    #     File.join('app', 'assets', 'stylesheets', 'refills', stylesheet_name),
+    #   )
+    # end
+
+    # def copy_javascripts
+    #   copy_file_if_exists(
+    #     File.join('javascripts', 'refills', javascript_name),
+    #     File.join('app', 'assets', 'javascripts', 'refills', javascript_name),
+    #   )
+    # end
+
+    # private
+
+    # def copy_file_if_exists(source, destination)
+    #   if File.exists?(File.join(self.class.source_root, source))
+    #     copy_file source, destination
+    #   end
+    # end
+
+    # def partial_name
+    #   "_#{snippet.underscore}.html.erb"
+    # end
+
+    # def stylesheet_name
+    #   "_#{snippet.dasherize}.scss"
+    # end
+
+    # def javascript_name
+    #   "#{snippet.underscore}.js"
+    # end
   end
 end

data/lib/staple/install_generator.rb

@@ -48,14 +48,7 @@ module Staple
 
     #import base style
     def staple_install
-      copy_file "source/stylesheets/before.scss", "app/assets/stylesheets/before.scss"
-      copy_file "source/stylesheets/after.scss", "app/assets/stylesheets/after.scss"
-      copy_file "source/stylesheets/buttons.scss", "app/assets/stylesheets/buttons.scss"
-      copy_file "source/stylesheets/color.scss", "app/assets/stylesheets/color.scss"
-      copy_file "source/stylesheets/forms.scss", "app/assets/stylesheets/forms.scss"
-      copy_file "source/stylesheets/sizing.scss", "app/assets/stylesheets/sizing.scss"
-      copy_file "source/stylesheets/typography.scss", "app/assets/stylesheets/typography.scss"
-      copy_file "source/stylesheets/utilities.scss", "app/assets/stylesheets/utilities.scss"
+      directory "source/stylesheets/staple", "app/assets/stylesheets/staple"
     end
 
     def detect_css_format

data/lib/staple/list_generator.rb

@@ -7,16 +7,16 @@ module Staple
     def list
       puts 'Available Staples'
       puts '================='
-      stylesheets.each do |file_name|
-        puts '- ' + file_name.gsub(/_|\.scss/, '')
-      end
+      # stylesheets.each do |file_name|
+      #   puts '- ' + file_name.gsub(/_|\.scss/, '')
+      # end
     end
 
-    private
-    def stylesheets
-      refills_dir = File.expand_path('../../../source/stylesheets/staple', __FILE__)
-      stylesheets = Dir.entries(refills_dir)
-      stylesheets.reject {|f| f == '.' || f == '..' }
-    end
+    # private
+    # def stylesheets
+    #   refills_dir = File.expand_path('../../../source/stylesheets/staple', __FILE__)
+    #   stylesheets = Dir.entries(refills_dir)
+    #   stylesheets.reject {|f| f == '.' || f == '..' }
+    # end
   end
 end

data/source/stylesheets/foundation_and_overrides.scss

@@ -1,3 +1,6 @@
-@import 'before';
+@import "foundation/functions";
+$include-html-classes: true;
+$include-html-global-classes: $include-html-classes;
+@import 'staple/before';
 @import 'foundation';
-@import 'after';
+@import 'staple/after';

data/source/stylesheets/{after.scss → staple/after.scss}

@@ -1,5 +1,6 @@
 //after.scss
-//Must load after foundation. Overrides some of foundations defaults
-@import 'utilities';
+//Must load after foundation. Overrides some of foundations defaults. Generators
+@import 'build_colors'
 @import 'buttons';
-@import 'forms';
+@import 'forms';
+//BUILD IT

data/source/stylesheets/staple/before.scss

@@ -0,0 +1,7 @@
+//before.scss
+//must be loaded before loading foundation because variables will affect foundation
+@import 'size';
+@import 'color';
+@import 'utilities';
+@import 'typography';
+@import 'overrides'

data/source/stylesheets/staple/build_buttons.scss

@@ -0,0 +1,32 @@
+//load functions before calling them
+@function set-text-color($color) {
+  @if (lightness($color) > 60%) {
+    @return rgba($black, $transparent-weak); // Lighter backgorund, return dark color
+  } @else {
+    @return rgba($white, $transparent-strong); // Darker background, return light color
+  }
+}
+//DEFAULT
+.button{
+	background-color: $primary-color;
+	color: set-text-color($primary-color);
+}
+.button:hover{
+	background-color: lighten($primary-color, $transition-brighten);
+}
+
+//BUTTON GENERATOR FOR EACH COLOR
+@each $color in $button-classes {
+	$i: index($button-classes, $color);
+	$temp-color: nth($button-define, $i);
+	.button.#{$color}{
+		background-color: $temp-color;
+		color: set-text-color($temp-color);
+	}
+	.button.#{$color}:hover{
+		background-color: lighten($temp-color, $transition-brighten);
+	}
+}
+
+//MODIFY DEFAULT STYLE
+//APPEND ADDITIONAL GENERATORS WITH COMMANDS AS NEEDED

data/source/stylesheets/staple/build_colors.scss

@@ -0,0 +1,45 @@
+//BACKGROUNDS
+@each $class in $accent-classes {
+	$i: index($accent-classes, $class);
+	$color: nth($accent-define, $i);
+	.#{$class}-bg{
+		background-color: $color;
+	}
+	@each $value in $opacity-values {
+		$j: index($opacity-values, $value);
+		$opacity: nth($opacity-define, $j);
+		.#{$class}-bg-#{$value}{
+			background-color: rgba($color, $opacity);
+		}
+	}
+}
+//BORDERS
+@each $class in $accent-classes {
+	$i: index($accent-classes, $class);
+	$color: nth($accent-define, $i);
+	.#{$class}-border{
+		border: $border-size solid $color;
+	}
+	@each $value in $opacity-values {
+		$j: index($opacity-values, $value);
+		$opacity: nth($opacity-define, $j);
+		.#{$class}-border-#{$value}{
+			border: $border-size solid rgba($color, $opacity);
+		}
+	}
+}
+//TEXT
+@each $class in $accent-classes {
+	$i: index($accent-classes, $class);
+	$color: nth($accent-define, $i);
+	.#{$class}-text{
+		color: $color;
+	}
+	@each $value in $opacity-values {
+		$j: index($opacity-values, $value);
+		$opacity: nth($opacity-define, $j);
+		.#{$class}-text-#{$value}{
+			color: rgba($color, $opacity);
+		}
+	}
+}

data/source/stylesheets/staple/buttons.scss

@@ -0,0 +1,60 @@
+// .button{
+// 	//permutations
+// 	font-weight: 200;
+// 	letter-spacing: 1px;
+
+// 	background-color: $primary-color;
+// 	border-color: $primary-color;
+// 	color: white;
+// 	transition: background-color 150ms ease-out;
+
+// 	padding-top: 0.9rem;
+// 	padding-right: 2.1rem;
+// 	padding-bottom: 0.96rem;
+// 	padding-left: 2.1rem;
+
+// 	margin-right: 0.5rem;//arbitrary
+// }
+// .button.tiny{
+// 	padding-top: 0.525rem;
+// 	padding-right: 1.35rem;
+// 	padding-bottom: 0.5875rem;
+// 	padding-left: 1.35rem;
+// }
+// .button.small{
+// 	padding-top: 0.775rem;
+// 	padding-right: 1.85rem;
+// 	padding-bottom: 0.8375rem;
+// 	padding-left: 1.85rem;
+// }
+// .button.large{
+// 	padding-top: 1.025rem;
+// 	padding-right: 2.55rem;
+// 	padding-bottom: 1.0875rem;
+// 	padding-left: 2.55rem;
+// }
+// //used for rounded buttons
+// .button.wider{
+// 	padding-right: 2.5rem;
+// 	padding-left: 2.5rem;
+// }
+// .button.shadow{
+// 	box-shadow: 1px 1px 1px rgba(0,0,0,0.4);
+// }
+// .button.text-shadow{
+// 	text-shadow: 1px 1px 0px rgba(0,0,0,0.3);
+// }
+// .button.inner-text-shadow{
+// 	text-shadow: 1px 1px 0px rgba(255,255,255,0.3);
+// }
+// .button.expand{
+// 	margin-right:0;
+// }
+// //FIX
+// .button-group{
+// 	.button{
+// 		margin-right:0px;
+// 	}
+// }
+
+@import 'build_buttons'

data/source/stylesheets/staple/color.scss

@@ -0,0 +1,33 @@
+$primary-color: #3389dd;
+$complement-color: adjust_hue($primary-color, 180);
+$secondary-color: adjust_hue($primary-color, 135);
+$tertiary-color: adjust_hue($primary-color, 200);
+
+//AUTO GENERATE FOUNDATION COLORS: (CAN OVERRIDE)
+@import 'color_functions';
+$alert-color: alert($primary-color);//red
+$success-color: success($primary-color);//green
+$warning-color: warning($primary-color);//yellow/orange
+$info-color: info($primary-color);//blue
+
+//BUTTON CLASSES TO GENERATE:
+$button-classes: 		primary 		compliment 			secondary 			tertiary;
+$button-define: 		$primary-color 	$complement-color	$secondary-color 	$tertiary-color;
+
+//ACCENTS CLASSES TO GENERATE: (BACKGROUNDS, BORDERS, AND TEXT-COLOR)
+$white: #ffffff;
+$black: #000000;
+$accent-classes: 	white 	black;
+$accent-define: 	$white 	$black;
+
+//OPACITY CLASSES TO GENERATE: (% OPACITY OF ACCENT CLASSES)
+$transparent-strong:0.8;
+$transparent-medium:0.6;
+$transparent-weak:0.4;
+$transparent-light:0.2;
+$opacity-values:light 				weak 				medium 					strong;
+$opacity-define:$transparent-light 	$transparent-weak 	$transparent-medium 	$transparent-strong;
+
+//DIFFERENCE IN SHADE WHEN ACCENTING COMPONENTS
+$primary-difference: 30;
+$transition-brighten: 8%;

data/source/stylesheets/staple/color_functions.scss

@@ -0,0 +1,63 @@
+//FUNCTIONS
+@function determine-color($color){
+	$high: red($color);
+	$r_color: 0;
+	@if (green($color) > $high){
+		$high: green($color);
+		$r_color: 1;
+	}
+	@if (blue($color) > $high){
+		$high: blue($color);
+		$r_color: 2;
+	}
+  @return $r_color;
+}
+
+@function alert($p-color){
+	//determine what primary color is closest to then alter
+	@if (determine-color($p-color) == 0){
+		@return adjust-hue($p-color, 0);
+	}
+	@if (determine-color($p-color) == 1){
+		@return adjust-hue($p-color, -135);
+	}
+	@if (determine-color($p-color) == 2){
+		@return adjust-hue($p-color, 150);
+	}
+}
+
+@function success($p-color){
+	@if (determine-color($p-color) == 0){
+		@return adjust-hue($p-color, 135);
+	}
+	@if (determine-color($p-color) == 1){
+		@return adjust-hue($p-color, 0);
+	}
+	@if (determine-color($p-color) == 2){
+		@return adjust-hue($p-color, -60);
+	}
+}
+
+@function warning($p-color){
+	@if (determine-color($p-color) == 0){
+		@return adjust-hue($p-color, 30);
+	}
+	@if (determine-color($p-color) == 1){
+		@return adjust-hue($p-color, 255);
+	}
+	@if (determine-color($p-color) == 2){
+		@return adjust-hue($p-color, 200);
+	}
+}
+
+@function info($p-color){
+	@if (determine-color($p-color) == 0){
+		@return adjust-hue($p-color, 200);
+	}
+	@if (determine-color($p-color) == 1){
+		@return adjust-hue($p-color, 60);
+	}
+	@if (determine-color($p-color) == 2){
+		@return adjust-hue($p-color, 0);
+	}
+}