diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..69812ee
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,22 @@
+.DS_Store
+node_modules
+/dist
+# local env files
+.env.local
+.env.*.local
+index.html
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+package-lock.json*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..7c83dd2
--- /dev/null
+++ b/package.json
@@ -0,0 +1,16 @@
+{
+  "name": "simplify",
+  "version": "1.0.0",
+  "description": "Simplify is progressive css framework.",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build-sass": "node-sass --output-style expanded --source-map true simplify.scss css/simplify.css",
+    "start": "npm run build-sass -- --watch"
+  },
+  "author": "Kishor Kumar Namdeo",
+  "license": "ISC",
+  "dependencies": {
+    "node-sass": "^4.13.0"
+  }
+}
diff --git a/scss/_variables.scss b/scss/_variables.scss
new file mode 100644
index 0000000..a683a4e
--- /dev/null
+++ b/scss/_variables.scss
@@ -0,0 +1,459 @@
+$config: '';
+$defaultTheme: (
+  screens: (
+    'sm': 640px,
+    'md': 768px,
+    'lg': 1024px,
+    'xl': 1281px
+  ),
+  opacity: (
+    '0': 0,
+    '25': 0.25,
+    '50': 0.5,
+    '75': 0.75,
+    '100': 1,
+  ),
+  colors: (
+    white: #fff,
+    black: #000,
+    gray: #808080,
+    primary: #7504f5,
+    secendory: #0abdf3,
+    warning: #ffa500,
+    error: #ff0000,
+    info: #1564e2,
+    success: #00d66b
+  ),
+  useColorWithOpacity: false,
+  spacings: (
+    '0': 0,
+    '1': 0.25rem,
+    '2': 0.5rem,
+    '3': 0.75rem,
+    '4': 1rem,
+    '5': 1.25rem,
+    '6': 1.5rem,
+    '8': 2rem,
+    '10': 2.5rem,
+    '12': 3rem,
+    '16': 4rem,
+    '20': 5rem,
+    '24': 6rem,
+    '32': 8rem,
+    '40': 10rem,
+    '48': 12rem,
+    '56': 14rem,
+    '64': 16rem
+  ),
+  fontSizes: (
+    xxs: 0.5rem,
+    xs: 0.75rem,
+    sm: 0.875rem,
+    base: 1rem,
+    lg: 1.125rem,
+    xl: 1.25rem,
+    2xl: 1.5rem,
+    3xl: 1.875rem,
+    4xl: 2.25rem,
+    5xl: 3rem,
+    6xl: 4rem
+  ),
+  fontWeight: (
+    normal: 400,
+    medium: 500,
+    semibold: 600,
+    bold: 700,
+    black: 900,
+  ),
+  borderWidths: (
+    default: 1px,
+    0: 0,
+    2: 2px,
+    4: 4px,
+    6: 6px,
+    8: 8px
+  ),
+  borderStyle: (
+    solid: solid,
+    dashed: dashed,
+    dotted: dotted,
+    double: double,
+    none: none
+  ),
+  borderRadius: (
+    default: 4px,
+    none: 0,
+    2: 2px,
+    6: 6px,
+    8: 8px,
+    10: 10px,
+    full: 50%
+  ),
+  zIndex: (
+    auto: auto,
+    0: 0,
+    10: 10,
+    20: 20,
+    30: 30,
+    40: 40,
+    50: 50,
+    100: 100,
+  ),
+ 
+  width: (
+    'auto': auto,
+    '1-by-2': 50%,
+    '1-by-3': 3.333333%,
+    '2-by-3': 66.666667%,
+    '1-by-4': 25%,
+    '2-by-4': 50%,
+    '3-by-4': 75%,
+    '1-by-5': 20%,
+    '2-by-5': 40%,
+    '3-by-5': 60%,
+    '4-by-5': 80%,
+    '1-by-6': 16.666667%,
+    '2-by-6': 33.333333%,
+    '3-by-6': 50%,
+    '4-by-6': 66.666667%,
+    '5-by-6': 83.333333%,
+    '1-by-12': 8.333333%,
+    '2-by-12': 16.666667%,
+    '3-by-12': 25%,
+    '4-by-12': 33.333333%,
+    '5-by-12': 41.666667%,
+    '6-by-12': 50%,
+    '7-by-12': 58.333333%,
+    '8-by-12': 66.666667%,
+    '9-by-12': 75%,
+    '10-by-12': 83.333333%,
+    '11-by-12': 91.666667%,
+    'full': 100%,
+    'screen': 100vw,
+  )
+);
+
+
+$plugins: (
+  textAligns: (left,  right, center, justify),
+  textTransforms: (
+    'uppercase': uppercase,
+    'lowercase': lowercase,
+    'capitalize': capitalize,
+    'normal': none
+  ),
+  textDecorations: (
+    'underline': underline,
+    'line-through': line-through,
+    'capitalize': capitalize,
+    'no-underline': none
+  ),
+  directions: (
+    'x': x,
+    'y': y,
+    'l': left,
+    'r': right,
+    't': top,
+    'b': bottom
+  ),
+  backgroundPosition: (
+    bottom: bottom,
+    center: center,
+    left: left,
+    'left-bottom': left bottom,
+    'left-top': left top,
+    right: right,
+    'right-bottom': right bottom,
+    'right-top': right top,
+    top: top,
+  ),
+  backgroundSize: (
+    auto: auto,
+    cover: cover,
+    contain: contain,
+  ),
+  backgroundAttachment: (
+    fixed: fixed,
+    local: local,
+    scroll: scroll,
+  ),
+  backgroundRepeat: (
+    repeat: repeat,
+    'no-repeat': no-repeat,
+    'repeat-x': repeat-x,
+    'repeat-y': repeat-y,
+    round: round,
+    space: space
+  ),
+  boxShadow: (
+    default: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
+    md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
+    lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
+    xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
+    '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
+    inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',
+    outline: '0 0 0 3px rgba(66, 153, 225, 0.5)',
+    none: 'none',
+  ),
+  height: (
+    'auto': auto,
+    'px': 1px,
+    'full': 100%,
+    'screen': 100vh,
+  ),
+  width: (
+    'auto': auto,
+    'px': 1px,
+    'half': 50%,
+    'full': 100%,
+    'screen': 100vw,
+  ),
+  display: (
+    block: block,
+    inline-block: inline-block,
+    inline: inline,
+    flex: flex,
+    inline-flex: inline-flex,
+    table: table,
+    table-cell: table-cell,
+    none: none
+  ),
+  alignContent: (
+    center: center,
+    flex-start: flex-start,
+    flex-end: flex-end,
+    space-between: space-between,
+    space-around: space-around,
+  ),
+  alignItems: (
+    flex-start: flex-start,
+    flex-end: flex-end,
+    center: center,
+    baseline: baseline,
+    stretch: stretch
+  ),
+  alignSelf: (
+    auto: auto,
+    flex-start: flex-start,
+    flex-end: flex-end,
+    center: center,
+    stretch: stretch
+  ),
+  justifyContent: (
+    center: center,
+    flex-start: flex-start,
+    flex-end: flex-end,
+    space-between: space-between,
+    space-around: space-around,
+    space-evenly: space-evenly
+  ),
+  appearance: (
+    none: none
+  ),
+  flexDirection: (
+    row: row,
+    row-reverse: row-reverse,
+    column: column,
+    column-reverse: column-reverse
+  ),
+  flex: (
+    1: 1 1 0%,
+    auto: 1 1 auto,
+    initial: 0 1 auto,
+    none: none,
+  ),
+  flexGrow: (
+    0: 0,
+    default: 1,
+  ),
+  flexShrink: (
+    0: 0,
+    default: 1,
+  ),
+  flexWrap: (
+    wrap: wrap,
+    wrap-reverse: wrap-reverse,
+    no-wrap: nowrap
+  ),
+  order: (
+    first: -9999,
+    last: 9999,
+    none: 0,
+    '1': 1,
+    '2': 2,
+    '3': 3,
+    '4': 4,
+    '5': 5,
+    '6': 6,
+    '7': 7,
+    '8': 8,
+    '9': 9,
+    '10': 10,
+    '11': 11,
+    '12': 12,
+  ),
+  
+  variants: 'normal' 'hover' 'focus'
+);
+
+@if variable-exists(theme) {
+  $config: $theme;
+} @else {
+  $config: $defaultTheme;
+}
+
+
+@function str-replace($string, $search, $replace: '') {
+  $index: str-index($string, $search);
+  @if $index {
+    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
+  }
+  @return $string;
+}
+
+@function formated-name($string) {
+  $chars: ( ':' : '\:');
+  @each $str, $rpc in $chars {
+   $string: str-replace($string, $str, $rpc) 
+  }
+  @return $string;
+}
+
+@function map-deep-get($map, $keys...) {
+  @each $key in $keys {
+      $map: map-get($map, $key);
+  }
+  @return $map;
+}
+
+@mixin screen($size, $value) {
+  @if $size == 'base'{
+    @content;
+  } @else {
+    @media screen and (min-width: $value){
+      @content
+    }
+  }
+};
+
+/* Reset default css tag & selecters*/
+blockquote,
+dl,
+dd,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+figure,
+p,
+pre {
+  margin: 0;
+}
+button {
+  background: transparent;
+  padding: 0;
+}
+button:focus {
+  outline: 1px dotted;
+  outline: 5px auto -webkit-focus-ring-color;
+}
+
+fieldset {
+  margin: 0;
+  padding: 0;
+}
+
+ol,
+ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  line-height: 1.5;
+}
+::before,
+::after {
+  box-sizing: border-box; 
+  border-width: 0;
+  border-style: solid;
+  border-color: #e2e8f0
+}
+
+hr {
+  border-top-width: 1px;
+}
+
+img {
+  border-style: solid;
+}
+
+textarea {
+  resize: vertical;
+}
+
+input::placeholder,
+textarea::placeholder {
+  color: #a0aec0;
+}
+
+button,
+[role="button"] {
+  cursor: pointer;
+}
+
+table {
+  border-collapse: collapse;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: inherit;
+  font-weight: inherit;
+}
+a {
+  color: inherit;
+  text-decoration: inherit;
+}
+button,
+input,
+optgroup,
+select,
+textarea {
+  padding: 0;
+  line-height: inherit;
+  color: inherit;
+}
+
+pre,
+code,
+kbd,
+samp {
+  font-family: inherit
+}
+
+img,
+svg,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
+  display: block;
+  vertical-align: middle;
+}
+img,
+video {
+  max-width: 100%;
+  height: auto;
+}
\ No newline at end of file
diff --git a/simplify.scss b/simplify.scss
new file mode 100644
index 0000000..8020f9c
--- /dev/null
+++ b/simplify.scss
@@ -0,0 +1,307 @@
+@import './scss/variables';
+
+
+@each $screen, $size in map-merge(('base': auto ), map-deep-get($config, 'screens')) {
+  $prefix: '';
+  @if $screen != 'base' {
+    $prefix:'#{$screen}\\:';
+  }
+  @include screen ($screen, $size){
+    @each $name in map-deep-get($plugins, 'textAligns') {
+      .#{$prefix}text-#{$name} {
+        text-align: $name;
+      }
+    }
+
+    @each $name, $value in map-deep-get($plugins, 'textTransforms'){
+      .#{$prefix}text-#{$name} {
+        text-transform: $value;
+      }
+    }
+
+    @each $name, $value in  map-deep-get($plugins, 'textDecorations') {
+      .#{$prefix}text-#{$name} {
+        text-decoration: $value;
+      }
+    }
+
+    @each $name, $value in map-deep-get($config, 'fontSizes') {    
+      .#{$prefix}text-#{$name} {
+        font-size: $value;
+      }
+    }
+    @each $name, $value in map-deep-get($config, 'fontWeight') {
+      .#{$prefix}font-weight-#{$name} {
+        font-weight: $value;
+      }
+    }
+    @each $name, $value in map-deep-get($plugins, 'backgroundPosition') {
+      .#{$prefix}bg-#{$name} {
+        background-position: $value;
+      }
+    }
+    @each $name, $value in map-deep-get($plugins, 'backgroundSize') {
+      .#{$prefix}bg-#{$name} {
+        background-size: $value;
+      }
+    }
+    @each $name, $value in map-deep-get($plugins, 'backgroundAttachment') {
+      .#{$prefix}bg-#{$name} {
+        background-attachment: $value;
+      }
+    }
+    @each $name, $value in map-deep-get($plugins, 'backgroundRepeat') {
+      .#{$prefix}bg-#{$name} {
+        background-repeat: $value;
+      }
+    }
+    @each $name, $value in map-deep-get($config, 'borderWidths') {
+      @if $name == 'default' {
+        .#{$prefix}border{
+          border-width: $value;
+        }
+      } @else {
+        .#{$prefix}border-#{$name} {
+          border-width: $value;
+        }
+      }
+    }
+    @each $name, $value in map-deep-get($config, 'borderStyle') {
+      .#{$prefix}border-#{$name} {
+        border-style: $value;
+      }
+    }
+
+    @each $name, $value in map-deep-get($config, 'borderRadius') {
+      @if $name == 'default' {
+        .#{$prefix}border-rounded{
+          border-radius: $value;
+        }
+      } @else {
+        .#{$prefix}border-rounded-#{$name} {
+          border-radius: $value;
+        }
+      }
+    }
+    @each $name, $value in map-deep-get($plugins, 'display') {
+      .#{$prefix}display-#{$name} {
+        display: $value;
+      }
+    }
+    @each $name, $value in map-deep-get($plugins, 'alignContent') {
+      .#{$prefix}align-content-#{$name} {
+        align-content: $value;
+      }
+    }
+    @each $name, $value in map-deep-get($plugins, 'alignItems') {
+      .#{$prefix}align-items-#{$name} {
+        align-items: $value;
+      }
+    }
+    @each $name, $value in map-deep-get($plugins, 'alignSelf') {
+      .#{$prefix}align-self-#{$name} {
+        align-self: $value;
+      }
+    }
+    @each $name, $value in map-deep-get($plugins, 'appearance') {
+      .#{$prefix}appearance-#{$name} {
+        appearance: $value;
+      }
+    }
+    @each $name, $value in map-deep-get($plugins, 'flexDirection') {
+      .#{$prefix}flex-direction-#{$name} {
+        flex-direction: $value;
+      }
+    }
+
+     @each $name, $value in map-deep-get($plugins, 'flex') {
+      .#{$prefix}flex-#{$name} {
+        flex: $value;
+      }
+    }
+
+    @each $name, $value in map-deep-get($plugins, 'flexGrow') {
+      .#{$prefix}flex-grow-#{$name} {
+        flex-grow: $value;
+      }
+    }
+    @each $name, $value in map-deep-get($plugins, 'flexShrink') {
+      .#{$prefix}flex-shrink-#{$name} {
+        flex-shrink: $value;
+      }
+    }
+
+    @each $name, $value in map-deep-get($plugins, 'flexShrink') {
+      .#{$prefix}flex-shrink-#{$name} {
+        flex-shrink: $value;
+      }
+    }
+
+    @each $name, $value in map-deep-get($plugins, 'flexWrap') {
+      .#{$prefix}flex-wrap-#{$name} {
+        flex-wrap: $value;
+      }
+    }
+
+    @each $name, $value in map-deep-get($plugins, 'order') {
+      .#{$prefix}order-#{$name} {
+        order: $value;
+      }
+    }
+    
+    
+
+
+
+
+    @each $name, $value in map-deep-get($config, 'zIndex') {
+      .#{$prefix}z-index-#{$name} {
+        z-index: $value;
+      }
+    }
+    @each $name, $value in map-deep-get($plugins, 'boxShadow') {
+      @if $name == 'default' and $prefix == '' {
+        .#{$prefix}box-shadow{
+          box-shadow: $value;
+        }
+      } @else {
+        .#{$prefix}box-shadow-#{$name} {
+          box-shadow: $value;
+        }
+      }
+    }
+    @each $name, $value in map-deep-get($config, 'opacity') {
+      .#{$prefix}opacity-#{$name}{
+        opacity: $value;
+      }
+    }
+
+    @each $name, $value in map-merge(map-deep-get($config, 'spacings'), ('auto': auto )){
+      @if $name != 'auto' {
+        .#{$prefix}p-#{$name} {
+          padding: $value;
+        }
+        .#{$prefix}m-#{$name} {
+          margin: $value;
+        }
+        @if $name != '0'{
+          .#{$prefix}-m-#{$name} {
+            margin: -$value;
+          }
+        }
+      }
+      @each $name1, $value1 in map-deep-get($plugins, 'directions'){
+        @if $name1 == 'x'{
+          @if $name != 'auto' {
+            .#{$prefix}p-#{$name1}-#{$name} {
+              padding-left: $value;
+              padding-right: $value;
+            }
+          }
+          .#{$prefix}m-#{$name1}-#{$name} {
+            margin-left: $value;
+            margin-right: $value;
+          }
+          @if $name != '0' and $name != 'auto' {
+            .#{$prefix}-m-#{$name1}-#{$name} {
+              margin-left: -$value;
+              margin-right: -$value;
+            }
+          }
+        } @else if $name1 == 'y' {
+          @if $name != 'auto' {
+            .#{$prefix}p-#{$name1}-#{$name} {
+              padding-top: $value;
+              padding-bottom: $value;
+            }
+          }
+          .#{$prefix}m-#{$name1}-#{$name} {
+            margin-top: $value;
+            margin-bottom: $value;
+          }
+          @if $name != '0' and $name != 'auto'{
+            .#{$prefix}-m-#{$name1}-#{$name} {
+              margin-top: -$value;
+              margin-bottom: -$value;
+            }
+          }
+        } @else {
+          @if $name != 'auto' {
+            .#{$prefix}p-#{$name1}-#{$name} {
+              padding-#{$value1}: $value;
+            }
+          }
+          .#{$prefix}m-#{$name1}-#{$name} {
+            margin-#{$value1}: $value;
+          }
+          @if $name != '0' and $name != 'auto' {
+            .#{$prefix}-m-#{$name1}-#{$name} {
+              margin-#{$value1}: -$value;
+            }
+          }
+        }
+      }
+    }
+    
+    @each $name, $value in map-merge(map-deep-get($config, 'spacings'), map-deep-get($config, 'width')){
+      .#{$prefix}w-#{$name}{
+        width: $value;
+      }
+    }
+    
+    @each $name, $value in map-merge(map-deep-get($config, 'spacings'), map-deep-get($plugins, 'width')) {  
+      .#{$prefix}min-w-#{$name}{
+        min-width: $value;
+      }
+      .#{$prefix}max-w-#{$name}{
+        max-width: $value;
+      }
+    }
+   
+    @each $name, $value in map-merge(map-deep-get($config, 'spacings'), map-deep-get($plugins, 'height')) {
+      .#{$prefix}h-#{$name}{
+        height: $value;
+      }
+      .#{$prefix}min-h-#{$name}{
+        min-height: $value;
+      }
+      .#{$prefix}max-w-#{$name}{
+        max-height: $value;
+      }
+    }
+
+    @each $varName in map-deep-get($plugins, 'variants') {
+      $varPrefix : '';
+      $varPostfix : '';
+      @if $varName != 'normal' {
+        $varPrefix:'#{$varName}\\:';
+        $varPostfix: '\:#{$varName}';
+      }
+      /* ----------------- TYPOGRAPHY -----------------*/ 
+      @each $name, $value in map-deep-get($config, 'colors') {
+        .#{$prefix}#{$varPrefix}text-#{$name}#{$varPostfix} {
+          color: $value;
+        }
+        .#{$prefix}#{$varPrefix}border-#{$name}#{$varPostfix} {
+          border-color: $value;
+        }
+        .#{$prefix}#{$varPrefix}bg-#{$name}#{$varPostfix} {
+          background-color: $value;
+        }
+        @if map-deep-get($config, 'useColorWithOpacity') == true {
+          @each $name1, $value1 in map-deep-get($config, 'opacity') {
+            .#{$prefix}#{$varPrefix}text-#{$name}-opacity-#{$name1}#{$varPostfix} {
+              color: rgba($value, $value1);
+            }
+            .#{$prefix}#{$varPrefix}border-#{$name}-opacity-#{$name1}#{$varPostfix} {
+              border-color: rgba($value, $value1);
+            }
+            .#{$prefix}#{$varPrefix}bg-#{$name}-opacity-#{$name1}#{$varPostfix} {
+              background-color: rgba($value, $value1);
+            }
+          }
+        }
+      }
+    }
+  }
+}