HeflerDev · HeflerDev · Jun 4, 2020 · Jun 4, 2020 · Jun 4, 2020
diff --git a/.sass-cache/20e78a5707d52be05a69192700c63b9c8d219d65/master.scssc b/.sass-cache/20e78a5707d52be05a69192700c63b9c8d219d65/master.scssc
diff --git a/README.md b/README.md
@@ -0,0 +1,42 @@
+# BitBox Framework
+
+## Introduction
+
+This project is made to create a custom personal framework, which I use in my projects.
+Heavily inspired in the Bootstrap framework, it's totally Flex based(even the grid), and
+it's free, feel free to fork/clone/modify/etc.
+
+## Why create a Bootstrap related framework instead of only using Bootstrap?
+
+I love Bootstrap but there are some things that I didn't liked it, so I made
+more 'speakable', more alike to the English language, so the classes in the tags
+looks more like phrases, for example:
+
+```
+  <div class='minibox border rounded bolder'>
+    <span> Content </span>
+  </div>
+```
+
+Another thing is that: I love Flex, so I tried to do as 'Flexier' as possible,
+making more self-adjustable.
+
+## Built With
+
+- **CSS**
+- **SCSS**
+
+## Author
+
+**Henrique Hefler**
+
+- Github: [@Kasuhira](https://github.com/Kasuhira)
+
+## Contributing
+
+Contribution, issues and feature requests are widely welcome!
+
+## Suport
+
+Give a star if you liked this project, and credit if you used it, would be very
+supportive to me.
diff --git a/index.html b/index.html
@@ -7,17 +7,13 @@
   </head>
   <body>
 
-    <div class='box border rounded soft'>
-        <div class='box-child'>
-          <span>Text</span>
-          <span>Text</span>
-          <span>Text</span>
-        </div>
-        <div> Text </div>
-        <span> Text </span>
-        <div> Text </div>
-        <div> Text </div>
+    <div class='box'>
+      <div class='minibox'>
+        <div style="width:400px"> Text </div>
+        <div style="width:400px"> Text </div>
+        <div style="width:800px"> Text </div>
         <div> Text </div>
+      </div>
     </div>
 
 

diff --git a/master.css b/master.css
diff --git a/master.css.map b/master.css.map
diff --git a/master.scss b/master.scss
@@ -1,5 +1,21 @@
 @import './reset.css' ;
 
+// Number of Columns
+  $grid-columns: 12;
+
+  $content-padding: 5px;
+  $content-padding-2: 10px;
+  $content-padding-3: 15px;
+  $content-padding-4: 20px;
+
+  $content-margin: 5px;
+  $content-margin-2: 10px;
+  $content-margin-3: 15px;
+  $content-margin-4: 20px;
+//grid gap
+  :root {
+    --grid-gap: 10px;
+  }
 // Margins
   $margin: 1rem ;
   $margin-s: 2rem ;
@@ -53,6 +69,37 @@
 
 
 // Patterns
+
+// Grid System Logic
+//flex container definition
+
+.flex-grid {
+  display: flex;
+  flex-wrap: wrap;
+  margin: calc(var(--grid-gap) * -1) 0 0 calc(var(--grid-gap) * -1);
+}
+
+.col {
+  box-sizing: border-box;
+  background-clip: content-box;
+  flex-basis: 100%;
+}
+
+//round flex items' width
+@function round-width($i) {
+  $width: floor(100 * $i * 100 / $grid-columns) / 100;
+  @return $width#{"%"};
+}
+
+//utility classes
+
+@for $i from 1 through $grid-columns {
+  .col-#{$i} {
+    flex-basis: round-width($i);
+    max-width: round-width($i);
+  }
+}
+
 html{
   font-size: $text-mobile;
 
@@ -95,6 +142,8 @@ html{
 .minibox {
   display: flex ;
   width: 100% ;
+  flex-wrap: wrap;
+  margin: calc(var(--grid-gap) * -1) 0 0 calc(var(--grid-gap) * -1);
 
   @media screen and (max-width: $breakpoint-phone) {
     margin: auto ;
@@ -223,3 +272,24 @@ html{
   background: $color-primary;
   color: $color-opposite ;
 }
+
+
+@media only screen and (min-width: 768px) {
+  @for $i from 1 through $grid-columns {
+    .col-m-#{$i} {
+      flex-basis: round-width($i);
+      max-width: round-width($i);
+    }
+  }
+
+}
+
+@media only screen and (min-width: 1024px) {
+  @for $i from 1 through $grid-columns {
+    .col-l-#{$i} {
+      flex-basis: round-width($i);
+      max-width: round-width($i);
+    }
+  }
+
+}