first version final 1.0.1

mcofie · Jul 21, 2017 · 16ddb33 · 16ddb33
1 parent 0c2e886
commit 16ddb33
Show file tree

Hide file tree

Showing 33 changed files with 3,754 additions and 657 deletions.
diff --git a/.sass-cache/08be99a60e97eb342b327489b4b3325d7ee13ce8/filters.scssc b/.sass-cache/08be99a60e97eb342b327489b4b3325d7ee13ce8/filters.scssc
diff --git a/.sass-cache/1466d2f53696947839df3416e614fbc99c477955/translation.scssc b/.sass-cache/1466d2f53696947839df3416e614fbc99c477955/translation.scssc
diff --git a/.sass-cache/166002549fa73755c7e42ef062cf3957eb686a4d/krymoh.scssc b/.sass-cache/166002549fa73755c7e42ef062cf3957eb686a4d/krymoh.scssc
diff --git a/.sass-cache/72974d542890d4849b2f61cfa2559f157be00cb1/colors.scssc b/.sass-cache/72974d542890d4849b2f61cfa2559f157be00cb1/colors.scssc
diff --git a/.sass-cache/7aa1508f962b4c1596a196cbacacf6631f62d79b/_blackish.scssc b/.sass-cache/7aa1508f962b4c1596a196cbacacf6631f62d79b/_blackish.scssc
diff --git a/.sass-cache/7aa1508f962b4c1596a196cbacacf6631f62d79b/_blue-seal.scssc b/.sass-cache/7aa1508f962b4c1596a196cbacacf6631f62d79b/_blue-seal.scssc
diff --git a/.sass-cache/7aa1508f962b4c1596a196cbacacf6631f62d79b/_blue_seal.scssc b/.sass-cache/7aa1508f962b4c1596a196cbacacf6631f62d79b/_blue_seal.scssc
diff --git a/.sass-cache/7aa1508f962b4c1596a196cbacacf6631f62d79b/_function.scssc b/.sass-cache/7aa1508f962b4c1596a196cbacacf6631f62d79b/_function.scssc
diff --git a/.sass-cache/7aa1508f962b4c1596a196cbacacf6631f62d79b/_gold_coal.scssc b/.sass-cache/7aa1508f962b4c1596a196cbacacf6631f62d79b/_gold_coal.scssc
diff --git a/.sass-cache/7aa1508f962b4c1596a196cbacacf6631f62d79b/_green_corel.scssc b/.sass-cache/7aa1508f962b4c1596a196cbacacf6631f62d79b/_green_corel.scssc
diff --git a/.sass-cache/7aa1508f962b4c1596a196cbacacf6631f62d79b/_saucy_red.scssc b/.sass-cache/7aa1508f962b4c1596a196cbacacf6631f62d79b/_saucy_red.scssc
diff --git a/.sass-cache/7aa1508f962b4c1596a196cbacacf6631f62d79b/gradient.scssc b/.sass-cache/7aa1508f962b4c1596a196cbacacf6631f62d79b/gradient.scssc
diff --git a/README.md b/README.md
@@ -8,13 +8,13 @@ Krymoh is a CSS framework that focuses on cinematic features in css that adds li
 The framework can be added to your project using two approaches. 
 
 
-1.First it can be install using `npm` as demostrated below. 
+1.Install using `npm` as demostrated below. 
    ```bash
       $npm install krymoh.css --save
    ```
 
 
-2.It can be cloned from GitHub and added to your web application as so. 
+2.It can be cloned from GitHub and added to your web application as illustrated below. 
    ```html 
       <head>
         <link rel="stylesheet" href="krymoh.min.css" type="text/css">
@@ -33,7 +33,7 @@ __Krymoh__ ships with these core components:
 
 
 ### Animations
-The animation component of krymoh is mostly preceded with `.ani-<animation-name>`. These are powerful motion effects that makes user interaction fluid.
+The animation component of krymoh takes the form `.ani-<animation-name>`. These are powerful motion effects that makes user interaction fluid.
 Below are a list of animations that ships with the framework.
 
 | Animation Name | Class Name   |
@@ -53,7 +53,7 @@ Below are a list of animations that ships with the framework.
 
 
 ### Filters
-These are great bits of codes that bring indepth and a bit more color to your web sites. They defuse the obvious and creates a cinematic illusion. The filters are preceded with `.ftr-<filter-name>-<intensity>`. The following are a list of filters. The *intensity* starts from _0_ and ends at _200_
+They are great bits of codes that bring indepth and a bit more hue to your web sites. They defuse the obvious and creates a cinematic illusion. The filters are written in this form `.ftr-<filter-name>-<intensity>`. The following are a list of filters. The *intensity* starts from _10_ and ends at _500_ with a step size of _10_
 
 | Filter Name  | Class Name |
 | -----------  | ---------- |
@@ -63,11 +63,12 @@ These are great bits of codes that bring indepth and a bit more color to your we
 | Invert       | `invert`|
 | Saturate | `saturate`|
 | Opacity | `opacity` |
+| Hue Rate| `hue-rate` |
 
 
 
 __K - Special__
-`tint` This class is used to add a color tone or rather tint to a given object.
+`tint` this class is used to add a color tone or tint to a given element .i.e an image.
 ```html
    <div class="tint">
       <img src="<img_url>" style="background-color:red;">
@@ -77,16 +78,19 @@ __K - Special__
 
 
 ### Gradient
-Color gradients give indepth and different perspectives of emphasis to our web pages. Here are a list of the various color gradients in `krymoh`. For gradients, they are preceded with `grad-<radial-type>`
-
-| Gradient Name | Class Name |
-| ------------: | :--------- |
-| Blue Seal | `blue-seal`|
+Color gradients give indepth and different perspectives of emphasis to web pages. Here are a list of the various color gradients in `krymoh`. For gradients, they are written as `grad-<gradient-type>`
 
+| Gradient Name | Class Name |  Type |
+| ------------: | :--------- | :---: |
+| Blue Seal | `blue-seal`| Linear |
+| Green Corel | `green-corel` | Linear |
+| Saucy Red | `saucy-red` | Linear |
+| Gold Coal | `gold-coal` | Linear |
+| Blackish | `blackish` | Linear |
 
 
 ### Transition
-This built in transitions create a seamless movement between objects or elements. It comes in different
+The transition classes create a seamless movement between objects or elements. It comes in different
 types and forms with some custom types. A typical transition takes this form `.trns-<transition-funtion>-<time>`.
 
 | Transition Name | Class Name |
@@ -122,22 +126,23 @@ This component determines how a given element on a web page should be oriented.
 | Translation Name | Class Name | Condition |
 | ---------------: | :--------: | :-------: |
 | Scale | `sc-ml<num>-mg<num>` *or* `sc-<num>` | `where  1 <= num <= 5`  |
-| Skew | `sk-<r or l>-<num>` | |
+| Skew | `sk-<r or l>-<num>` | `where  10 <= num <= 360` |
 | Rotate | `rte-<rad or grad or deg>-<num>`| `where  10 <= num <= 360` |
-| Translate | `trnl-<num>-<num>` |   |
+| Translate | `trnl-<num>-<num>` | `where  10 <= num <= 360`  |
 
 *ml* represents multiplier and *mg* magnitude
 
 
 ## Miscellaneous
-These are miscellaneous properties that apply to most of the components listed above.
+These are miscellaneous properties that can be applied to most of the components listed above.
 
 | Property | Description | Type |
-| -------: | :---------: | :--: |
+| :------: | :---------: | :--: |
 | `forever`| Infinite iteration for animations | class |
 | `-hvr` | Perform translation or transition on `:hover`| postfix |
 
 
+
 ## Contributing
-I plead your indulgence to help make this piece of code better and robust enough for everyone to use.
->Written in Accra with :heart:
+Any form of support & contributions to this framework is warmly welcome.
+>Written in Accra with :heart:
diff --git a/components/colors/colors.scss b/components/colors/colors.scss
@@ -11,7 +11,7 @@ $lavender:('lavender':#E6E6FA);
 $silver:('silver':#C0C0C0);
 $chocolate:('chocolate':#D2691E);
 $grey:('grey':#CCCCCC);
-$blue:('blue':#4056f3);
+$brown:('brown':#5d3f32);
 $pink:('pink':#ff6ec5);
 $yellow:('yellow':#ffdc2f);
 $green:('green':#3cc165);
@@ -24,7 +24,7 @@ $blue:('blue':#00BFFF);
 
 //Colors in a Map
 $colors:($red,$turquiose,$crimson,$moccasin,$lavender,$silver,$chocolate,$grey,$blue,$pink,
-$yellow,$green,$ivory,$violet,$white,$navy,$orange,$black);
+$yellow,$green,$ivory,$violet,$white,$navy,$orange,$black,$brown);
 
 @each $x in $colors{
     @each $i,$o in $x{
@@ -35,6 +35,4 @@ $yellow,$green,$ivory,$violet,$white,$navy,$orange,$black);
             }
         }
     }
-}
-
-
+}
diff --git a/components/filters/filters.scss b/components/filters/filters.scss
@@ -3,7 +3,7 @@
   --
 *******************************************************************************************************************/
 //Intervals
-$end:200;
+$end:500;
 $start:0;
 $step:10;
 

diff --git a/components/gradients/_blackish.scss b/components/gradients/_blackish.scss
@@ -0,0 +1,4 @@
+//Blackish
+.grad-blackish{
+  @include grad('linear-gradient', #424242,#000000 );
+}
diff --git a/components/gradients/_blue_seal.scss b/components/gradients/_blue_seal.scss
@@ -0,0 +1,4 @@
+//Blue Seal
+.grad-blue-seal{
+  @include grad('linear-gradient', #3d97cc,#07203e );
+}
diff --git a/components/gradients/_function.scss b/components/gradients/_function.scss
@@ -0,0 +1,22 @@
+$gradient-type:('radial-gradient','linear-gradient','repeating-linear-gradient','repeating-radial-gradient');
+$grd-alias:('rgrd','lgrd','rlgrd','rrgrd');
+$bl:'(';
+$br:')';
+
+$turquiose:#ededed;
+
+@mixin grad($grad-type,$clr_1,$clr_2){
+  background: -webkit-#{$grad-type}#{$bl}$clr_1,$clr_2#{$br}; 
+  background: -o-#{$grad-type}#{$bl}$clr_1, $clr_2#{$br}; 
+  background: -moz-#{$grad-type}#{$bl}$clr_1,$clr_2#{$br}; 
+  background: #{$grad-type}#{$bl}$clr_1,$clr_2#{$br}; 
+
+}
+
+
+@mixin grad-nth($grad-type,$dir,$clr_1,$clr_2){
+  background: -webkit-#{$grad-type}#{$bl}$dir,$clr_1, yellow#{$br}; 
+  background: -o-#{$grad-type}#{$bl}$dir,$clr_1, yellow#{$br};
+  background: -moz-#{$grad-type}#{$bl}$dir,$clr_1, yellow#{$br}; 
+  background: #{$grad-type}#{$bl}$dir,$clr_1, yellow#{$br}; 
+}
diff --git a/components/gradients/_gold_coal.scss b/components/gradients/_gold_coal.scss
@@ -0,0 +1,4 @@
+//Gold Coal
+.grad-gold-coal{
+  @include grad('linear-gradient', #fff6b3, #ffbd04 );
+}
diff --git a/components/gradients/_green_corel.scss b/components/gradients/_green_corel.scss
@@ -0,0 +1,4 @@
+//Green Corel
+.grad-green-corel{
+  @include grad('linear-gradient',#c6ffbc, #03482b);
+}
diff --git a/components/gradients/_saucy_red.scss b/components/gradients/_saucy_red.scss
@@ -0,0 +1,4 @@
+//Saucy Red
+.grad-saucy-red{
+  @include grad('linear-gradient', #ff6e6e, #6b3026 );
+}
diff --git a/components/gradients/gradient.scss b/components/gradients/gradient.scss
@@ -3,84 +3,14 @@
   --
 *******************************************************************************************************************/
 
-
 //*==Gradient
-$gradient-type:('radial-gradient','linear-gradient','repeating-linear-gradient','repeating-radial-gradient');
-$grd-alias:('rgrd','lgrd','rlgrd','rrgrd');
-$bl:'(';
-$br:')';
-
-$turquiose:#ededed;
-
-@mixin grad($grad-type,$clr_1,$clr_2){
-  background: -webkit-#{$grad-type}#{$bl}$clr_1, yellow#{$br}; 
-  background: -o-#{$grad-type}#{$bl}$clr_1, yellow#{$br}; 
-  background: -moz-#{$grad-type}#{$bl}$clr_1, yellow#{$br}; 
-  background: #{$grad-type}#{$bl}$clr_1, yellow#{$br}; 
-
-}
-
-
-@mixin grad-nth($grad-type,$dir,$clr_1,$clr_2){
-  background: -webkit-#{$grad-type}#{$bl}$dir,$clr_1, yellow#{$br}; 
-  background: -o-#{$grad-type}#{$bl}$dir,$clr_1, yellow#{$br};
-  background: -moz-#{$grad-type}#{$bl}$dir,$clr_1, yellow#{$br}; 
-  background: #{$grad-type}#{$bl}$dir,$clr_1, yellow#{$br}; 
-}
-
-
-//gradient without direction
-@each $r in $gradient-type {
-
-  @if $r == 'radial-gradient' {
-    .grad-#{'rgrd'} {
-      @include grad(#{$r},$turquiose,$color);
-    }
-  } @else if $r == 'linear-gradient' {
-    .grad-#{'lgrd'} {
-      @include grad(#{$r},$turquiose,$color);
-    }
-  } @else if $r == 'repeating-linear-gradient' {
-    .grad-#{'rlgrd'} {
-      @include grad(#{$r},$turquiose,$color);
-    }
-  } @else if $r == 'repeating-radial-gradient' {
-    .grad-#{'rrgrd'} {
-      @include grad(#{$r},$turquiose,$color);
-    }
-  }
-
-}
-
+//import partial gradient files
+@import '_function.scss','_blue_seal.scss','_blackish.scss','_gold_coal.scss','_green_corel.scss',
+'_saucy_red.scss';
 
-$dir:(left,right,to right,left top,bottom right,to bottom right);
 
-//gradient with direction -> properties
-@each $r in $gradient-type {
 
-  @each $v in $dir{
-    @if $r == 'linear-gradient' {
-      .grad-#{'lgrd'}-#{$v}{
-        @include grad-nth(#{$r},$v,$turquiose,$color);
-      }
-    }
-  }
-
-}
 
-$grad_deg_step:10;
-$grad_deg_start:10;
-$grad_deg_end:360;
 
 
-@while $grad_deg_start < $grad_deg_end{
-  @each $r in $gradient-type{
-    @if $r == 'linear-gradient' {
-    .grad-#{'lgrd'}-#{$grad_deg_start}{
-      @include grad-nth(#{$r},$grad_deg_start#{deg},$turquiose,$color);
-    }
-  }
 
-  $grad_deg_start: $grad_deg_start + $grad_deg_step;
-}
-}
diff --git a/components/translations/translation.scss b/components/translations/translation.scss
@@ -2,18 +2,19 @@
   TRANSLATIONS
   --
 *******************************************************************************************************************/
-@import '_rotate.scss','_scale.scss','skew.scss','_translate';
+@import '_rotate.scss','_scale.scss','_skew.scss','_translate';
 
 // Rotation Using Degree, Radian & Gradient
 // deg -> rad -> grad for short
 $rte-val:(deg,rad,grad);
 
 //Intervals
 $start:-10;
-$end:10;
+$end:500;
 $step:10;
 
 
+
 //Loop
 @while $end > 0 {
    @each $a in $rte-val {
@@ -36,12 +37,11 @@ $step:10;
             }
         }
    }
-  $end: $end - $step;
 }
+$end: $end - $step;
 }
 
 
-
 //scale multiplier
 $s-mul:(1,2,3,4,5);
 
@@ -74,8 +74,8 @@ $s:1;
 
 
 
-$sk-end:60;
-$ks-start:360;
+$sk-end:360;
+$ks-start:10;
 $sk-step:10;
 
 @while $sk-end > 0{
@@ -90,8 +90,8 @@ $sk-step:10;
 
 
 //Interval
-$sk-end:60;
-$ks-start:360;
+$sk-end:360;
+$ks-start:10;
 $sk-step:10;
 
 //Horizontal ->
@@ -109,10 +109,11 @@ $sk-step:10;
 
 //Intervals
 $trans-step:10;
-$trans-end:100;
+$trans-end:500;
 $trans-start:10;
 $trans-count:10;
 
+
 //Loops
 @while $trans-start < $trans-end{
   @while $trans-count < $trans-end {
@@ -126,6 +127,4 @@ $trans-count:10;
     $trans-count: $trans-count + $trans-step;
   }
   $trans-start: $trans-start + $trans-step;
-} 
-
-
+} 
diff --git a/docs/css/.sass-cache/153105deef7b2a743cfec7cb55c095403a1168b3/style.scssc b/docs/css/.sass-cache/153105deef7b2a743cfec7cb55c095403a1168b3/style.scssc