Grid system small screens

docs/v2/DEVLOG.md

@@ -150,3 +150,4 @@
 - Added some comments and moved the notes in the flavor file.
 - Added set of variables for class names, prefixes, columns, breakpoints etc for grid system.
 - Added definitions for extra small screen sizes, using loops etc. Optimized accordingly, tested on local demo.
+- Added definitions for small screen sizes, optimized, test on local demo.

docs/v2/index.html

@@ -56,24 +56,24 @@
   <style>.box-row { border: 1px solid black; border-radius: 2px; }</style>
   <div class="container">
     <div class="row">
-      <div class="col-xs">
+      <div class="col-xs col-sm-2 col-sm-offset-1">
         <div class="box-row">col-xs</div>
       </div>
-      <div class="col-xs-2">
+      <div class="col-xs-2 col-sm">
         <div class="box-row">col-xs-2</div>
       </div>
-      <div class="col-xs-3 col-xs-offset-1">
+      <div class="col-xs-3 col-xs-offset-1 col-sm col-sm-offset-0">
         <div class="box-row">col-xs-3 col-xs-offset-1</div>
       </div>
-      <div class="col-xs">
+      <div class="col-xs col-sm-6">
         <div class="box-row">col-xs</div>
       </div>
     </div>
     <div class="row">
-      <div class="col-xs">
+      <div class="col-xs col-sm-5">
         <div class="box-row">col-xs: The first JavaScript engine. Coffeescript is a JavaScript program could then interrogate and manipulate to dynamically generate Web pages. The name is by far the most common host environment. JavaScript programmers. Facebook for building user interfaces. </div>
       </div>
-      <div class="col-xs">
+      <div class="col-xs col-sm-5 col-sm-offset-2">
         <div class="box-row">col-xs: I/O, such as Self and Scheme. Javascript NoSQL database. AngularJS, and Node. ECMAScript 3 compliant. Coffeescript is a package manager for front-end dependencies. JSX is an assertion library used with a JavaScript checker and optimizer. PhantomJS is a community-driven attempt at explaining the loads of buzzwords making the current JavaScript ecosystem in a few simple words. ECMAScript ES is the standardized specification of the desired DOM is a software design pattern used to speed up the setup and installation process of a function that gets called immediately after declaration Jasmine is a JavaScript web framework that allows rapid prototypic web development. LocalForage is a structural framework for dynamic web apps. ECMAScript language specification. JavaScript ecosystem in a user's browser rather than on a Web form to make it happen. The name is by analogy to an architectural facade. ES is the only language that the *revealing module pattern* was engineered as a way to ensure that all methods and variables are kept private until they are explicitly exposed. SJSJ is a generator builder to speed up consecutive function calls by caching the result of calls with identical input.</div>
       </div>
     </div>

flavors/v2/mini-default.css

@@ -282,6 +282,119 @@ progress {
 .col-xs-offset-11 {
   margin-left: 91.66667%; }
 
+@media only screen and (min-width: 768px) {
+  .col-sm,
+  [class^='col-sm-'],
+  [class^='col-sm-offset-'] {
+    box-sizing: border-box;
+    -webkit-box-flex: 0;
+    -webkit-flex: 0 0 auto;
+    flex: 0 0 auto;
+    padding: 0 4px; }
+
+  .col-sm {
+    -webkit-box-flex: 1;
+    max-width: 100%;
+    -webkit-flex-grow: 1;
+    flex-grow: 1;
+    -webkit-flex-basis: 0;
+    flex-basis: 0; }
+
+  .col-sm-1 {
+    max-width: 8.33333%;
+    -webkit-flex-basis: 8.33333%;
+    flex-basis: 8.33333%; }
+
+  .col-sm-2 {
+    max-width: 16.66667%;
+    -webkit-flex-basis: 16.66667%;
+    flex-basis: 16.66667%; }
+
+  .col-sm-3 {
+    max-width: 25%;
+    -webkit-flex-basis: 25%;
+    flex-basis: 25%; }
+
+  .col-sm-4 {
+    max-width: 33.33333%;
+    -webkit-flex-basis: 33.33333%;
+    flex-basis: 33.33333%; }
+
+  .col-sm-5 {
+    max-width: 41.66667%;
+    -webkit-flex-basis: 41.66667%;
+    flex-basis: 41.66667%; }
+
+  .col-sm-6 {
+    max-width: 50%;
+    -webkit-flex-basis: 50%;
+    flex-basis: 50%; }
+
+  .col-sm-7 {
+    max-width: 58.33333%;
+    -webkit-flex-basis: 58.33333%;
+    flex-basis: 58.33333%; }
+
+  .col-sm-8 {
+    max-width: 66.66667%;
+    -webkit-flex-basis: 66.66667%;
+    flex-basis: 66.66667%; }
+
+  .col-sm-9 {
+    max-width: 75%;
+    -webkit-flex-basis: 75%;
+    flex-basis: 75%; }
+
+  .col-sm-10 {
+    max-width: 83.33333%;
+    -webkit-flex-basis: 83.33333%;
+    flex-basis: 83.33333%; }
+
+  .col-sm-11 {
+    max-width: 91.66667%;
+    -webkit-flex-basis: 91.66667%;
+    flex-basis: 91.66667%; }
+
+  .col-sm-12 {
+    max-width: 100%;
+    -webkit-flex-basis: 100%;
+    flex-basis: 100%; }
+
+  .col-sm-offset-0 {
+    margin-left: 0; }
+
+  .col-sm-offset-1 {
+    margin-left: 8.33333%; }
+
+  .col-sm-offset-2 {
+    margin-left: 16.66667%; }
+
+  .col-sm-offset-3 {
+    margin-left: 25%; }
+
+  .col-sm-offset-4 {
+    margin-left: 33.33333%; }
+
+  .col-sm-offset-5 {
+    margin-left: 41.66667%; }
+
+  .col-sm-offset-6 {
+    margin-left: 50%; }
+
+  .col-sm-offset-7 {
+    margin-left: 58.33333%; }
+
+  .col-sm-offset-8 {
+    margin-left: 66.66667%; }
+
+  .col-sm-offset-9 {
+    margin-left: 75%; }
+
+  .col-sm-offset-10 {
+    margin-left: 83.33333%; }
+
+  .col-sm-offset-11 {
+    margin-left: 91.66667%; } }
 /**
  * 1. Change the font styles in all browsers (opinionated).
  * 2. Remove the margin in Firefox and Safari.

scss/v2/mini-core/_grid.scss

@@ -78,3 +78,51 @@ $grid-large-prefix:				'lg' !default;									// Large screen class prefix for g
 }
 }
 }	
+// Small screens breakpoint.
+@media only screen and (min-width: #{$grid-small-breakpoint}){
+// Grid column generic definitions for small screens.
+.#{$grid-column-prefix}-#{$grid-small-prefix}, 
+[class^='#{$grid-column-prefix}-#{$grid-small-prefix}-'], 
+[class^='#{$grid-column-prefix}-#{$grid-small-prefix}-#{$grid-column-offset-suffix}-'] {
+	box-sizing: border-box;
+// Old syntax
+	-webkit-box-flex: 0;
+// New syntax	
+	-webkit-flex: 0 0 auto;
+	        flex: 0 0 auto;
+	padding: 0 4px;
+}
+// Grid column specific definition for flexible column.
+.#{$grid-column-prefix}-#{$grid-small-prefix} {
+// Old syntax
+	-webkit-box-flex: 1;
+	max-width: 100%;
+// New syntax
+	-webkit-flex-grow: 1;
+	        flex-grow: 1;
+	-webkit-flex-basis: 0;
+	        flex-basis: 0;
+}
+// Grid column specific definitions for predefined columns.
+@for $i from 1 through $grid-column-count {
+.#{$grid-column-prefix}-#{$grid-small-prefix}-#{$i} {
+// Old syntax
+	max-width: #{($i * 100% / $grid-column-count)};
+// New syntax
+	-webkit-flex-basis: #{($i * 100% / $grid-column-count)};
+	        flex-basis: #{($i * 100% / $grid-column-count)};
+}
+}
+// Grid column specific definitions for offset columns.
+@for $i from 0 through ($grid-column-count - 1) {
+.#{$grid-column-prefix}-#{$grid-small-prefix}-#{$grid-column-offset-suffix}-#{$i} {
+@if $i == 0 {
+	margin-left: 0;
+}
+@else {
+	margin-left: #{($i * 100% / $grid-column-count)};
+}
+}
+}
+//	
+}