sass-flexi 0.1.alpha.1

data/lib/sass-flexi.rb

@@ -0,0 +1,3 @@
+require 'compass'
+extension_path = File.expand_path(File.join(File.dirname(__FILE__), ".."))
+Compass::Frameworks.register('sass-flexi', :path => extension_path)

data/stylesheets/_sass-flexi.scss

@@ -0,0 +1,5 @@
+// This is your framework's main stylesheet. Use it to import all default modules.
+
+@import "bundle/normalize";
+@import "bundle/grid";
+@import "bundle/typography";

data/stylesheets/bundle/_grid.scss

@@ -0,0 +1,141 @@
+//===========================
+// felxi-grids bundle
+// created by : MrAhmad
+// date : 10 June 2014
+// website : http://sass-flexi.com/
+// version : 0.1.alpha.1
+//============================
+
+//============================
+// Description :
+// this the heart of flexi-grid framework, will include all the mixin and the placeholders
+//=============================
+
+// 1- flexi-grid variables
+$gutter-width  : 30 !default;
+$total-columns : 12 !default;	
+
+// 2- flexi-grid mixin 
+
+// define the clearfix hack
+%clear {
+	&:before,&:after{
+		content: " ";
+		display: table;
+	}
+	&:after{
+		clear: both;
+	}
+}
+
+// define the column shape
+%column{
+	min-height: 1px;
+	position: relative;
+	padding-left: ($gutter-width/2) * 1px;
+	padding-right: ($gutter-width/2) * 1px;
+}
+
+// define the box sizing
+@mixin box-sizing($type:border-box) {
+	-webkit-box-sizing: $type;
+	-moz-box-sizing: $type;
+	box-sizing: $type;
+}
+
+// define the container for the grid system
+@mixin container($gutter-width:30) {
+	margin : 0 auto; // centering the page contents
+	padding-left: ($gutter-width/2)  * 1px;
+	padding-right: ($gutter-width/2) * 1px;
+	@extend %clear;
+}
+
+// define the raw for the grid system, used to create horizantal of columns
+@mixin row($gutter-width:30) {
+	margin-left: ($gutter-width/-2) * 1px;
+	margin-right: ($gutter-width/-2) * 1px;
+	*zoom: 1;
+	@extend %clear;
+}
+
+// define center block
+@mixin center-block() {
+	margin: 0 auto;
+	display: block;
+}
+
+// define center image
+@mixin center-img() {
+	margin: 0 auto;
+	display: block;;
+}
+
+// define image for samll medias
+@mixin img-respon() {
+	max-width: 100%;
+	height: auto;
+}
+
+// define the width for any element,class, or ID
+@mixin width($no-columns,$total-columns:12) {
+	width: floor(percentage($no-columns/$total-columns));
+}
+
+
+// Generate the columns for the grid system
+@mixin columns($property:col,$total-columns:12) {
+	@for $i from 1 through $total-columns {
+		.#{$property}-#{$i}{
+			@extend %column;
+		}
+	}
+}
+
+// define the width,offest,push, and pull for the grid system
+
+// column width
+@mixin column-width($property:col,$total-columns:12) {
+	@for $i from 1 through $total-columns {
+		.#{$property}-#{$i}{
+			width: ((100/$total-columns)*$i) *1%;
+		}
+	}
+}
+
+// column offset
+@mixin offset($property:offset,$total-columns:12){
+	@for $i from 1 through $total-columns{
+		.#{$property}-#{$i}{
+			margin-right: ((100/$total-columns)*$i) *1%;
+		}
+	}
+}
+
+// column push
+@mixin push($property:push,$total-columns:12){
+	@for $i from 1 through $total-columns{
+		.#{$property}-#{$i}{
+			left: ((100/$total-columns)*$i) *1%;
+		}
+	}
+}
+
+// column pull
+@mixin pull($property:pull,$total-columns:12){
+	@for $i from 1 through $total-columns{
+		.#{$property}-#{$i}{
+			right: ((100/$total-columns)*$i) *1%;
+		}
+	}
+}
+
+
+// float column
+@mixin direction($property:col,$total-columns:12){
+	@for $i from 1 through $total-columns{
+		.#{$property}-#{$i}{
+			@extend %float;
+		}
+	}
+}

data/stylesheets/bundle/_normalize.scss

@@ -0,0 +1,425 @@
+/*! normalize.css v3.0.1 | MIT License | git.io/normalize */
+
+/**
+ * 1. Set default font family to sans-serif.
+ * 2. Prevent iOS text size adjust after orientation change, without disabling
+ *    user zoom.
+ */
+
+html {
+  font-family: sans-serif; /* 1 */
+  -ms-text-size-adjust: 100%; /* 2 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/**
+ * Remove default margin.
+ */
+
+body {
+  margin: 0;
+}
+
+/* HTML5 display definitions
+   ========================================================================== */
+
+/**
+ * Correct `block` display not defined for any HTML5 element in IE 8/9.
+ * Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox.
+ * Correct `block` display not defined for `main` in IE 11.
+ */
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+nav,
+section,
+summary {
+  display: block;
+}
+
+/**
+ * 1. Correct `inline-block` display not defined in IE 8/9.
+ * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
+ */
+
+audio,
+canvas,
+progress,
+video {
+  display: inline-block; /* 1 */
+  vertical-align: baseline; /* 2 */
+}
+
+/**
+ * Prevent modern browsers from displaying `audio` without controls.
+ * Remove excess height in iOS 5 devices.
+ */
+
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+
+/**
+ * Address `[hidden]` styling not present in IE 8/9/10.
+ * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
+ */
+
+[hidden],
+template {
+  display: none;
+}
+
+/* Links
+   ========================================================================== */
+
+/**
+ * Remove the gray background color from active links in IE 10.
+ */
+
+a {
+  background: transparent;
+}
+
+/**
+ * Improve readability when focused and also mouse hovered in all browsers.
+ */
+
+a:active,
+a:hover {
+  outline: 0;
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
+ */
+
+abbr[title] {
+  border-bottom: 1px dotted;
+}
+
+/**
+ * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
+ */
+
+b,
+strong {
+  font-weight: bold;
+}
+
+/**
+ * Address styling not present in Safari and Chrome.
+ */
+
+dfn {
+  font-style: italic;
+}
+
+/**
+ * Address variable `h1` font-size and margin within `section` and `article`
+ * contexts in Firefox 4+, Safari, and Chrome.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/**
+ * Address styling not present in IE 8/9.
+ */
+
+mark {
+  background: #ff0;
+  color: #000;
+}
+
+/**
+ * Address inconsistent and variable font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` affecting `line-height` in all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sup {
+  top: -0.5em;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove border when inside `a` element in IE 8/9/10.
+ */
+
+img {
+  border: 0;
+}
+
+/**
+ * Correct overflow not hidden in IE 9/10/11.
+ */
+
+svg:not(:root) {
+  overflow: hidden;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * Address margin not present in IE 8/9 and Safari.
+ */
+
+figure {
+  margin: 1em 40px;
+}
+
+/**
+ * Address differences between Firefox and other browsers.
+ */
+
+hr {
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+  height: 0;
+}
+
+/**
+ * Contain overflow in all browsers.
+ */
+
+pre {
+  overflow: auto;
+}
+
+/**
+ * Address odd `em`-unit font size rendering in all browsers.
+ */
+
+code,
+kbd,
+pre,
+samp {
+  font-family: monospace, monospace;
+  font-size: 1em;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * Known limitation: by default, Chrome and Safari on OS X allow very limited
+ * styling of `select`, unless a `border` property is set.
+ */
+
+/**
+ * 1. Correct color not being inherited.
+ *    Known issue: affects color of disabled elements.
+ * 2. Correct font properties not being inherited.
+ * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  color: inherit; /* 1 */
+  font: inherit; /* 2 */
+  margin: 0; /* 3 */
+}
+
+/**
+ * Address `overflow` set to `hidden` in IE 8/9/10/11.
+ */
+
+button {
+  overflow: visible;
+}
+
+/**
+ * Address inconsistent `text-transform` inheritance for `button` and `select`.
+ * All other form control elements do not inherit `text-transform` values.
+ * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
+ * Correct `select` style inheritance in Firefox.
+ */
+
+button,
+select {
+  text-transform: none;
+}
+
+/**
+ * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+ *    and `video` controls.
+ * 2. Correct inability to style clickable `input` types in iOS.
+ * 3. Improve usability and consistency of cursor style between image-type
+ *    `input` and others.
+ */
+
+button,
+html input[type="button"], /* 1 */
+input[type="reset"],
+input[type="submit"] {
+  -webkit-appearance: button; /* 2 */
+  cursor: pointer; /* 3 */
+}
+
+/**
+ * Re-set default cursor for disabled elements.
+ */
+
+button[disabled],
+html input[disabled] {
+  cursor: default;
+}
+
+/**
+ * Remove inner padding and border in Firefox 4+.
+ */
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+
+/**
+ * Address Firefox 4+ setting `line-height` on `input` using `!important` in
+ * the UA stylesheet.
+ */
+
+input {
+  line-height: normal;
+}
+
+/**
+ * It's recommended that you don't attempt to style these elements.
+ * Firefox's implementation doesn't respect box-sizing, padding, or width.
+ *
+ * 1. Address box sizing set to `content-box` in IE 8/9/10.
+ * 2. Remove excess padding in IE 8/9/10.
+ */
+
+input[type="checkbox"],
+input[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Fix the cursor style for Chrome's increment/decrement buttons. For certain
+ * `font-size` values of the `input`, it causes the cursor style of the
+ * decrement button to change from `default` to `text`.
+ */
+
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
+ * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
+ *    (include `-moz` to future-proof).
+ */
+
+input[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  -moz-box-sizing: content-box;
+  -webkit-box-sizing: content-box; /* 2 */
+  box-sizing: content-box;
+}
+
+/**
+ * Remove inner padding and search cancel button in Safari and Chrome on OS X.
+ * Safari (but not Chrome) clips the cancel button when the search input has
+ * padding (and `textfield` appearance).
+ */
+
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * Define consistent border, margin, and padding.
+ */
+
+fieldset {
+  border: 1px solid #c0c0c0;
+  margin: 0 2px;
+  padding: 0.35em 0.625em 0.75em;
+}
+
+/**
+ * 1. Correct `color` not being inherited in IE 8/9/10/11.
+ * 2. Remove padding so people aren't caught out if they zero out fieldsets.
+ */
+
+legend {
+  border: 0; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Remove default vertical scrollbar in IE 8/9/10/11.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * Don't inherit the `font-weight` (applied by a rule above).
+ * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
+ */
+
+optgroup {
+  font-weight: bold;
+}
+
+/* Tables
+   ========================================================================== */
+
+/**
+ * Remove most spacing between table cells.
+ */
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+td,
+th {
+  padding: 0;
+}

data/stylesheets/bundle/_typography.scss

@@ -0,0 +1,274 @@
+//===========================
+// created by : MrAhmad
+// date : 10 June 2014
+// website : http://sass-flexi.com/
+// version : 0.1.alpha.1
+//============================
+
+//============================
+// Description :
+// this the heart of flexi-typography framework, will include all the mixin and the placeholders
+//=============================
+
+// 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
+//---------------------------------------------------
+$scale-ratio : 1.5 !default;
+$font-size   : 16 !default;
+$line-height : 24 !default; // the line height is >=150% of font size
+
+// calculate the headingline elements
+$h1 : $font-size * 3.375;
+$h2 : $font-size * 2.25 ;
+$h3 : $font-size * 1.5  ;
+$h4 : $font-size * 1.0  ;
+$h5 : $font-size / 1.5  ;
+$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
+//---------------------------------------------------
+$scale-ratio  : 1.5 !default;
+$font-size-mob: 13 !default;
+$line-height-mob  : 21 !default; // the line height is >=150% of font size
+
+// calculate the headingline elements
+$h1-mob : $font-size-mob * 2.25;
+$h2-mob : $font-size-mob * 1.5 ;
+$h3-mob : $font-size-mob * 1.25 ;
+$h4-mob : $font-size-mob * 1.0  ;
+$h5-mob : $font-size-mob / 1.5  ;
+$h6-mob : $font-size-mob / 2.25 ; 
+
+
+// color variables for body and headline
+$text-color : #333 !default;
+$head-color : #111 !default;
+
+
+// 3- Functions
+//---------------------------------------------------
+
+// html font size in %
+@function font-html($font-size,$base:16){
+    @return ($base / $font-size) * 100%;
+}
+
+// px function
+@function px($font-size){
+    @return $font-size *1px;
+}
+
+// rem function
+@function rem($font-size,$base:16){
+    @return ($font-size / $base) *1rem;
+}
+
+//---------------------------------------------------
+
+// 4- placeholders
+//---------------------------------------------------
+%head-family{
+    font-family: inherit;
+    color: $head-color;
+    text-transform :capitalize;
+    text-shadow: 0 1px 1px rgba(255,255,255,0.6);
+    font-weight: 600;
+    line-height: 1.1;
+}
+
+%margin{
+    margin: 0 0 px($font-size) 0;
+}
+
+
+// 5- Mixin
+//---------------------------------------------------
+
+// html font size in % - the root of typo system, because we are going to use rem size for the font
+@mixin html($font-size,$base:16){
+    font-size: font-html($font-size,$base);
+    -webkit-font-smoothing:antialiased !important;
+}
+
+// body and headline font size and font-family
+@mixin body-headline($font-size,$line-height:24,$base:16){
+    body{
+        font-family: "Helvetica Neue",Helvetica, Arial, sans-serif;
+        font-size: px($font-size);
+        font-size: rem($font-size,$base);
+        line-height: $line-height / $font-size ;
+        color: $text-color;
+    }
+    
+    h1, .h1{
+        font-size: px($h1);
+        font-size: rem($h1,$base);
+        letter-spacing: px(-2);
+        @extend %head-family;
+    }
+    h2, .h2{
+        font-size: px($h2);
+        font-size: rem($h2,$base);
+        letter-spacing: px(-1);
+        @extend %head-family;
+    }
+    h3, .h3{
+        font-size: px($h3);
+        font-size: rem($h3,$base);
+        @extend %head-family;
+    }
+    h4, .h4{
+        font-size: px($h4);
+        font-size: rem($h4,$base);
+        @extend %head-family;
+    }
+    h5, .h5{
+        font-size: px($h5);
+        font-size: rem($h5,$base);
+        @extend %head-family;
+    }
+    h6, .h6{
+        font-size: px($h6);
+        font-size: rem($h6,$base);
+        @extend %head-family;
+    }
+    .lead{
+        font-size: px($font-size * 1.125);
+        font-size: rem(($font-size *1.125) ,$base);
+        font-weight: 600;
+        margin-left: auto;
+        margin-right: auto;
+    }
+    p{
+        @extend %margin;
+    }
+}
+
+// define the link elements
+@mixin link($color){
+    &:link{
+    color  : $color;
+    text-decoration: none;
+    }
+    &:visited{
+        text-decoration: none;
+        color  : $color;
+    }
+    &:hover{
+        color : lighten($color,15%);
+        border-bottom: 1px solid lighten($color,15%);
+    }
+    &:active{
+        color : lighten($color,15%);
+        border-bottom: 1px solid lighten($color,15%);
+    }
+}
+
+// define the blockquote elements
+@mixin blockquote($padding-left,$color){
+    border-left : 5px solid rgba(0, 0, 0, 0.1);
+    padding-left: px($padding-left);
+    color: $color; 
+}
+
+// define pre,code, and kbd elements
+@mixin pre($color,$bg-color){
+    display: block;
+    padding: 1rem;
+    font-size: 1.3rem;
+    line-height: 1.43;
+    color: $color;
+    word-break: break-all;
+    word-wrap: break-word;
+    background-color: $bg-color;
+    border: 1px solid #ccc;
+    
+}
+
+@mixin code($color){
+    padding: 2px 4px;
+    font-size: 90%;
+    color: $color; 
+    white-space: nowrap;
+    background-color: lighten($color,47%);
+   
+}
+
+@mixin kbd($color,$bg-color){
+    padding: 2px 4px;
+    font-size: 90%;
+    color: $color;
+    background-color:$bg-color; 
+    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .25);
+
+}
+
+@mixin mobile($fon-size-mob,$line-height: 21,$base:16){
+    body{
+        font-size: px($font-size-mob);
+        font-size: rem($font-size-mob,$base);
+        line-height: $line-height-mob / $font-size-mob;
+    }
+    
+    h1, .h1{
+        font-size: px($h1-mob);
+        font-size: rem($h1-mob,$base);
+        
+    }
+    h2, .h2{
+        font-size: px($h2-mob);
+        font-size: rem($h2-mob,$base);
+        
+    }
+    h3, .h3{
+        font-size: px($h3-mob);
+        font-size: rem($h3-mob,$base);
+        
+    }
+    h4, .h4{
+        font-size: px($h4-mob);
+        font-size: rem($h4-mob,$base);
+        
+    }
+    h5, .h5{
+        font-size: px($h5-mob);
+        font-size: rem($h5-mob,$base);
+       
+    }
+    h6, .h6{
+        font-size: px($h6-mob);
+        font-size: rem($h6-mob,$base);
+        
+    }
+    .lead{
+        font-size: px($font-size-mob * 1.125);
+        font-size: rem(($font-size-mob *1.125) ,$base);
+        font-weight: 700;
+        margin-left: auto;
+        margin-right: auto;
+    }
+    
+    p,ul,ol,blockquote,pre{
+        margin: 0 0 px($font-size-mob) 0;
+    }
+    
+    pre,code{
+       font-size: px($font-size-mob) - px(1);
+        font-size: rem($font-size-mob,$base)- rem(1,10);
+        line-height: inherit;
+    }
+    
+}
+
+// others
+@mixin raduis($raduis:5){
+    -webkit-border-radius:  px($raduis);
+    -moz-border-radius: px($raduis);
+    border-radius: px($raduis);
+}

data/templates/project/index.html

@@ -0,0 +1,85 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<title>sass-flexi example page</title>
+	<!-- attcahe screen.css stylesheet -->
+</head>
+<body>
+
+	<!-- create the container -->
+	<div class="container">
+		<!-- cerate the wrapper -->
+       <div class="wrapper">
+       	<!-- here you add the colimns  -->
+       	<div class="col-6">Col-6</div>
+       	<div class="col-6">Coll-6</div>
+
+       	<div class="col-1">Col-1</div>
+       	<div class="col-1">Col-1</div>
+       	<div class="col-1">col-1</div>
+       	<div class="col-1">Col-1</div>
+       	<div class="col-1">Col-1</div>
+       	<div class="col-1">Col-1</div>
+       	<div class="col-1">Col-1</div>
+       	<div class="col-1">Col-1</div>
+       	<div class="col-1">Col-1</div>
+       	<div class="col-1">Col-1</div>
+       	<div class="col-1">Col-1</div>
+       	<div class="col-1">Col-1</div>
+       </div>
+       <!-- end of columns -->
+
+       <!-- add new columns -->
+       <div class="wrapper">
+       	<div class="col-3">Col-3</div>
+       	<div class="col-3">Col-3</div>
+       	<div class="col-3">Col-3</div>
+       	<div class="col-3">Col-3</div>
+
+       	<div class="col-4">Col-4</div>
+       	<div class="col-4">Col-4</div>
+       	<div class="col-4">Col-4</div>
+       </div>
+
+       <!-- you can add also offset,push, and pull  -->
+       <div class="wrapper">
+         <div class="col-6 offset-3">Col-6 offset-3</div>
+         <div class="Col-6 push-3">Col-6 push-3</div>
+       </div>
+  </div>
+       <!-- typography -->
+ <div class="container">
+       <div class="wrapper">
+       	<div class="col-4">
+       		<h1>TITLE</h1>
+             
+             <h2>headline</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>
+
+       		<p>Aperiam, illum enim eaque iure labore necessitatibus distinctio eius fugiat repellat aliquid. Labore, saepe debitis nemo perferendis non molestiae unde beatae. Odio, natus, non ipsa sapiente nulla excepturi libero obcaecati!</p>
+
+       		<p>Nulla, totam, ad, quam eveniet sunt qui in voluptas quia porro officia illum blanditiis nostrum harum neque libero ut nisi iusto odio quod aspernatur dolorum modi earum fuga magnam aliquid?</p>
+
+       		<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>
+
+<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>
+
+<ul>
+	<li><a href="/">Lik-1</a></li>
+	<li><a href="/">link-2</a></li>
+	<li><a href="/">link-3</a></li>
+</ul>
+
+       	</div>
+       </div>
+	</div>
+	
+</body>
+</html>

data/templates/project/manifest.rb

@@ -0,0 +1,15 @@
+# Make sure you list all the project template files here in the manifest.
+stylesheet 'screen.scss', :media => 'screen, projection'
+html 'index.html'
+
+
+description "sass-flexi framework, used for grid and typography, and help web designers for create web layouts."
+
+help %Q{
+Installs some html, a stylesheet bundle, and 
+you can use directly or refer to as an example.
+}
+
+welcome_message %Q{
+please refer to index.html file, and how to markup the framework, also you can check the stylesheet
+}

data/templates/project/screen.scss

@@ -0,0 +1,166 @@
+// This is where you put the contents of the main stylesheet for the user's project.
+// It should import your sass stylesheets and demonstrate how to use them.
+
+@import "sass-flexi";
+
+//=============================
+// flexi-grid framework
+//=============================
+
+// assign the box-sizing global
+* {
+	@include box-sizing(border-box);
+}
+
+// create container for the grid system
+.container{
+	@include container(30);
+}
+
+// create the wrapper for the grid system
+.wrapper{
+	@include row(30);
+}
+
+// create clearfix 
+.clear{
+	@extend %clear;
+}
+
+// generate the columns for the grid systen
+@include columns(col,12);
+
+
+// Generate the viewports
+//-----------------------
+
+// 1- tablet viewport (width 768px)
+@media screen and (min-width:768px){
+	%float{
+		float: left;
+	}
+	@include column-width(col,12);
+	@include offset(offset,12);
+	@include push(push,12);
+	@include pull(pull,12);
+}
+@include direction(col,12);
+
+
+// 2- desktop viewport (width 992px)
+@media screen and (min-width:992px){
+	%float{
+		float: left;
+	}
+	@include column-width(col,12);
+	@include offset(offset,12);
+	@include push(push,12);
+	@include pull(pull,12);
+}
+@include direction(col,12);
+
+
+// 3- large viewport (width 1200px)
+@media screen and (min-width:1200px){
+	%float{
+		float: left;
+	}
+	@include column-width(col,12);
+	@include offset(offset,12);
+	@include push(push,12);
+	@include pull(pull,12);
+}
+@include direction(col,12);
+//===== end flexi-grid framework =======
+
+//======================================
+// flexi-typography framework
+//======================================
+
+html{
+    @include html(16,10);
+}
+
+// body and headline font-size and font-family
+@include body-headline(16,24,10);
+
+//  link elements
+a{
+    @include link(#C02942); // define the color for the link elements, you can change the color number is you wish
+}
+
+// blockqoute elements
+blockquote{
+    @include blockquote(16,#C02942);
+    @extend %margin;
+}
+
+// define pre,code, and kbd elements
+pre{
+    @include pre(#031634,#f5f5f5);
+    @include raduis(4);
+    @extend %margin;
+    code{
+    padding: 0;
+    font-size: inherit;
+    color: inherit;
+    white-space: pre-wrap;
+    background-color: transparent;
+    @include raduis(0);
+    }
+}
+
+code{
+    @include code(blue);
+    @include raduis(4);
+}
+
+kbd{
+    @include kbd(#fff,#033649);
+    @include raduis(4);
+}
+
+// define the fixed font
+pre, code{
+    font-family : Consolas, Courier New, monospace;
+    line-height : inherit;
+}
+
+// define italic & bold elements
+em, i, blockquote{
+    font-style : italic;
+}
+b, strong{
+    color : inherit;
+    font-weight: bold;
+}
+
+// define the ol, ul list
+ul{list-style-type: disc; @extend %margin;}
+ol{list-style-type: decimal;@extend %margin;}
+
+// others defines
+abbr[title], abbr[data-original-title]{
+    cursor: help;
+    border-bottom: 1px dotted;
+}
+abbr.initialism {
+    font-size: 90%;
+    text-transform: uppercase;
+}
+small, .small{font-size: 80%;}
+
+
+
+@media screen and (max-width:600px){
+      @include mobile(13,21,10);
+  }
+
+
+// modifers
+.text-left{text-align: left;}
+.text-right{text-align: right;}
+.text-center{text-align: center;}
+.text-justify{text-align: justify;}
+//===== end flexi-typography framework =======
+

metadata

@@ -0,0 +1,71 @@
+--- !ruby/object:Gem::Specification 
+name: sass-flexi
+version: !ruby/object:Gem::Version 
+  version: 0.1.alpha.1
+platform: ruby
+authors: 
+- Ahmad Araj
+autorequire: 
+bindir: bin
+cert_chain: []
+
+date: 2014-06-10 00:00:00 +04:00
+default_executable: 
+dependencies: 
+- !ruby/object:Gem::Dependency 
+  name: compass
+  type: :runtime
+  version_requirement: 
+  version_requirements: !ruby/object:Gem::Requirement 
+    requirements: 
+    - - ">="
+      - !ruby/object:Gem::Version 
+        version: "0.12"
+    version: 
+description: "a flexi grid and typography to create web layouts, mobile first friends,.... "
+email: info@sass-flexi.com
+executables: []
+
+extensions: []
+
+extra_rdoc_files: []
+
+files: 
+- lib/sass-flexi.rb
+- stylesheets/_sass-flexi.scss
+- stylesheets/bundle/_grid.scss
+- stylesheets/bundle/_normalize.scss
+- stylesheets/bundle/_typography.scss
+- templates/project/index.html
+- templates/project/manifest.rb
+- templates/project/screen.scss
+has_rdoc: true
+homepage: http://sass-flexi.com/
+licenses: []
+
+post_install_message: 
+rdoc_options: []
+
+require_paths: 
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement 
+  requirements: 
+  - - ">="
+    - !ruby/object:Gem::Version 
+      version: "0"
+  version: 
+required_rubygems_version: !ruby/object:Gem::Requirement 
+  requirements: 
+  - - ">"
+    - !ruby/object:Gem::Version 
+      version: 1.3.1
+  version: 
+requirements: []
+
+rubyforge_project: 
+rubygems_version: 1.3.5
+signing_key: 
+specification_version: 3
+summary: sass-flexi framework, flexi tools for web designers
+test_files: []
+