sass-flexi 1.0.2 → 1.0.3

checksums.yaml

@@ -1,7 +1,7 @@
 --- 
-SHA512: 
-  data.tar.gz: 6664a554b865e13168ee71b2219a940a6e82408edc8c5f99c5d9915c79d35866a3f948ff202168d80acbbf72284c6b37db745cad988f7bd215e6038eac247e29
-  metadata.gz: 8213f638313fe4e5b2be507bb2233b6c4053c294b58aa39226fd6e9c08a14e4a8fcf611f293ef771cc200d648a4bc1f6e6b23de67f9c2fe306816a3f1c3ddff8
 SHA1: 
-  data.tar.gz: 4e72c9e6c0352662852d629596872e38e9dd8b7c
-  metadata.gz: fcdcb116846a39aa25f066993867818dba8dbc34
+  metadata.gz: cd177fbeed51cc0d17cbf15bda53ca853fa26392
+  data.tar.gz: 29a4d8c94bc9bbffede02fd6eb694c12d25b7703
+SHA512: 
+  metadata.gz: 62e7bee5297c0b77bd1a7fd859c283111db1f3e842a8fc83e0f3fd9b96db5bdac2131142d72133fadd564d4b8fc990e814a947617f29fae6929b3d8f24ae307b
+  data.tar.gz: 66a4af35aacce816dd2bc0f9cc8d265b179fd7f5c921f61523ee315878932e64fb36bca66fff36d670be589d66cc0a47c617a9f79060a70799c7e1662af063b3

data/stylesheets/bundle/_grid.scss

@@ -3,7 +3,7 @@
 // created by : MrAhmad
 // date : 10 June 2014
 // website : http://sass-flexi.com/
-// version : 0.1.alpha.1
+// version : 1.0.3
 //============================
 
 //============================
@@ -51,7 +51,7 @@ $total-columns : 12 !default;
 	@extend %clear;
 }
 
-// define the raw for the grid system, used to create horizantal of columns
+// define the raw for the grid system, used to create horizontal of columns
 @mixin row($gutter-width:30) {
 	margin-left: ($gutter-width/-2) * 1px;
 	margin-right: ($gutter-width/-2) * 1px;
@@ -71,7 +71,7 @@ $total-columns : 12 !default;
 	display: block;;
 }
 
-// define image for samll medias
+// define image for small medias
 @mixin img-respon() {
 	max-width: 100%;
 	height: auto;
@@ -92,7 +92,7 @@ $total-columns : 12 !default;
 	}
 }
 
-// define the width,offest,push, and pull for the grid system
+// define the width,offset,push, and pull for the grid system
 
 // column width
 @mixin column-width($property:col,$total-columns:12) {

data/stylesheets/bundle/_normalize.scss

@@ -1,3 +1,6 @@
+@mixin normalize() {
+  
+
 /*! normalize.css v3.0.1 | MIT License | git.io/normalize */
 
 /**
@@ -422,4 +425,5 @@ table {
 td,
 th {
   padding: 0;
+}
 }

data/stylesheets/bundle/_typography.scss

@@ -2,7 +2,7 @@
 // created by : MrAhmad
 // date : 10 June 2014
 // website : http://sass-flexi.com/
-// version : 0.1.alpha.1
+// version : 1.0.3
 //============================
 
 //============================
@@ -13,12 +13,12 @@
 // 1- Modular scale for (tablet,desktop, and large media)
 // 2:3 perfect fifth
 // 16px @ 1:1.5	ideal text size
-// 95px @ 1:1.5	important number - choosen from column width
+// 95px @ 1:1.5	important number - chosen from column width
 //---------------------------------------------------
 $scale-ratio : 1.5 !default;
 $font-size   : 16 !default;
 
-// calculate the headingline elements
+// calculate the heading elements
 $h1 : $font-size * 3.375;
 $h2 : $font-size * 2.25 ;
 $h3 : $font-size * 1.5  ;
@@ -30,13 +30,13 @@ $h6 : $font-size / 2.25 ;
 // 2- Modular scale for mobile media
 // 2:3 perfect fifth
 // 13px @ 1:1.5	ideal text size
-// 480px @ 1:1.5	important number - choosen from column width
+// 480px @ 1:1.5	important number - chosen from column width
 //---------------------------------------------------
 $scale-ratio  : 1.5 !default;
 $font-size-mob: 13 !default;
 
 
-// calculate the headingline elements
+// calculate the heading elements
 $h1-mob : $font-size-mob * 2.25;
 $h2-mob : $font-size-mob * 1.5 ;
 $h3-mob : $font-size-mob * 1.25 ;
@@ -53,6 +53,8 @@ $head-color : darken($text-color, 20%) !default;
 // font-family 
 $sans-serif : "Helvetica Neue",Helvetica, Arial, sans-serif !default;
 $serif :  Georgia, Times, "Times New Roman", serif !default;
+$body-font : $sans-serif;
+$heading-font : $serif;
 
 
 // 3- Functions
@@ -78,7 +80,7 @@ $serif :  Georgia, Times, "Times New Roman", serif !default;
 // 4- placeholders
 //---------------------------------------------------
 %head-family{
-    font-family: $sans-serif;
+    font-family: $heading-font;
     color: $head-color;
     text-transform :capitalize;
     text-shadow: 0 1px 1px rgba(255,255,255,0.6);
@@ -101,7 +103,7 @@ $serif :  Georgia, Times, "Times New Roman", serif !default;
 }
 
 // body and headline font size and font-family
-@mixin body-headline($font-size,$base:16){
+@mixin body-heading($font-size,$base:16){
     body{
         font-family: $sans-serif;
         font-size: px($font-size);
@@ -276,3 +278,7 @@ $serif :  Georgia, Times, "Times New Roman", serif !default;
     -moz-border-radius: px($raduis);
     border-radius: px($raduis);
 }
+
+@mixin text($value) {
+    text-align: $value;
+}

data/templates/project/index.html

@@ -5,6 +5,7 @@
       <meta name="viewport" content="width=device-width,  initial-scale=1.0">
 	<title>sass-flexi example page</title>
 	<!-- attcahe screen.css stylesheet -->
+      <link rel="stylesheet" href="stylesheets/screen.css">
 </head>
 <body>
 
@@ -52,10 +53,10 @@
        <!-- typography -->
  <div class="container">
        <div class="wrapper">
-       	<div class="col-4">
-       		<h1>TITLE</h1>
+       	<div class="col-8 push-1">
+       		<h1>Title</h1>
              
-             <h2>headline</h2>
+             <h2>heading title</h2>
        		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid, ullam, similique adipisci magnam officia accusamus temporibus ratione nam eligendi laborum eos ea minus asperiores voluptate praesentium laboriosam illo. Ullam, soluta.</p>
 
        		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur, totam, quidem quis nisi quas nostrum ipsam voluptas ratione qui accusantium mollitia magni unde aliquid sapiente tempora iure ex veniam. Non?</p>
@@ -67,8 +68,8 @@
        		<blockquote>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, repudiandae, ut, nostrum natus quasi eius assumenda aliquam reprehenderit neque commodi doloremque ducimus itaque ex distinctio quam quidem odit facilis. Saepe!</blockquote>
 
        		<pre><code>@mixin flexi(cool){
-       		margin : 0px;
-       	}</code></pre>
+margin : 0px;
+</code></pre>
 
 <p>Lorem ipsum dolor sit amet, <strong>consectetur</strong> adipisicing elit. <em>loaoll</em> culpa labore pariatur maiores unde totam odio accusamus assumenda voluptatum nam? Facere, <code>quis</code> debitis ratione quisquam eveniet rerum dolore labore dignissimos?</p>
 

data/templates/project/screen.scss

@@ -3,6 +3,12 @@
 
 @import "sass-flexi";
 
+
+//=============================
+// normalize
+//=============================
+@include normalize();
+
 //=============================
 // flexi-grid framework
 //=============================
@@ -27,14 +33,14 @@
 	@extend %clear;
 }
 
-// generate the columns for the grid systen
+// generate the columns for the grid system
 @include columns(col,12);
 
 
 // Generate the viewports
 //-----------------------
 
-// 1- tablet viewport (width 768px)
+// 1- tablet view-port (width 768px)
 @media screen and (min-width:768px){
 	%float{
 		float: left;
@@ -47,7 +53,7 @@
 @include direction(col,12);
 
 
-// 2- desktop viewport (width 992px)
+// 2- desktop view-port (width 992px)
 @media screen and (min-width:992px){
 	%float{
 		float: left;
@@ -60,7 +66,7 @@
 @include direction(col,12);
 
 
-// 3- large viewport (width 1200px)
+// 3- large view-port (width 1200px)
 @media screen and (min-width:1200px){
 	%float{
 		float: left;
@@ -77,15 +83,15 @@
 // flexi-typography framework
 //======================================
 
-html{
+html {
     @include html(16,10);
 }
 
 // body and headline font-size and font-family
-@include body-headline(16,10);
+@include body-heading(16,10);
 
 //  link elements
-a{
+a {
     @include link(#C02942); // define the color for the link elements, you can change the color number is you wish
 }
 
@@ -157,10 +163,18 @@ small, .small{font-size: 80%;}
   }
 
 
-// modifers
-.text-left{text-align: left;}
-.text-right{text-align: right;}
-.text-center{text-align: center;}
-.text-justify{text-align: justify;}
+// modifiers
+.text-left{
+    @include text(left);
+}
+.text-right{
+    @include text(right);
+}
+.text-center{
+    @include text(center);
+}
+.text-justify{
+   @include text(justify);
+}
 //===== end flexi-typography framework =======
 

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification 
 name: sass-flexi
 version: !ruby/object:Gem::Version 
-  version: 1.0.2
+  version: 1.0.3
 platform: ruby
 authors: 
 - Ahmad Araj
@@ -9,7 +9,7 @@ autorequire:
 bindir: bin
 cert_chain: []
 
-date: 2014-06-28 00:00:00 Z
+date: 2014-06-29 00:00:00 Z
 dependencies: 
 - !ruby/object:Gem::Dependency 
   name: compass