heyalbert · December 2, 2015 11:23 · Dec 2, 2015
diff --git a/_grid.scss b/_grid.scss
@@ -0,0 +1,111 @@
+// Main containers
+.container {
+  @include outer-container();
+}
+
+// Rows
+.row {
+  @include row();
+  padding-right: 15px;
+  padding-left: 15px;
+}
+
+
+// A basic column without a defined width or height
+.col {
+  float: left;
+  display:inline-block;
+}
+
+// Common styles for small and large grid columns
+.col-xs-1,
+.col-xs-2,
+.col-xs-3,
+.col-xs-4,
+.col-xs-5,
+.col-xs-6,
+.col-xs-7,
+.col-xs-8,
+.col-xs-9,
+.col-xs-10,
+.col-xs-11,
+.col-xs-12,
+.col-sm-1,
+.col-sm-2,
+.col-sm-3,
+.col-sm-4,
+.col-sm-5,
+.col-sm-6,
+.col-sm-7,
+.col-sm-8,
+.col-sm-9,
+.col-sm-10,
+.col-sm-11,
+.col-sm-12,
+.col-md-1,
+.col-md-2,
+.col-md-3,
+.col-md-4,
+.col-md-5,
+.col-md-6,
+.col-md-7,
+.col-md-8,
+.col-md-9,
+.col-md-10,
+.col-md-11,
+.col-md-12,
+.col-lg-1,
+.col-lg-2,
+.col-lg-3,
+.col-lg-4,
+.col-lg-5,
+.col-lg-6,
+.col-lg-7,
+.col-lg-8,
+.col-lg-9,
+.col-lg-10,
+.col-lg-11,
+.col-lg-12 {
+  position: relative;
+  // Prevent columns from collapsing when empty
+  min-height: 1px;
+}
+// Create the Extra small grid
+@include grid-core(xs);
+
+// Create the small grid
+@include media(min-width $screen-sm) {
+  .container {
+	max-width: $screen-sm;
+	@include grid-core(sm);
+  }
+}
+
+// Create the medium grid
+@include media(min-width $screen-md) {
+  .container {
+	max-width: $screen-md;
+	@include grid-core(md);
+  }
+}
+
+// Create the large grid
+@include media(min-width $screen-lg) {
+  .container {
+	@include outer-container;
+	@include grid-core(lg);
+  }
+}
+
+// centered columns styles
+.row-centered {
+  text-align:center !important;
+}
+.col-centered {
+  display:inline-block !important;
+  float:none !important;
+  /* reset the text-align */
+  text-align:left;
+  /* inline-block space fix */
+  // margin-right:-4px;
+}
diff --git a/_mixins.scss b/_mixins.scss
@@ -0,0 +1,25 @@
+// Grid Mixins
+
+// Create the grid for a given size
+// This will loop over the number of columns and create a css class
+// for each. If it's the last gride size, then let's not add a float
+@mixin grid-core($size) {
+  @for $i from 1 through $grid-columns {
+	.col-#{$size}-#{$i} {
+	  // Ignore float for the largest grid size
+	  @if $i < $grid-columns {
+		float: left;
+		@include span-columns($i);
+	  }
+	}
+	// If it's not the screen-xs, then let's add push and pull helper classes
+	@if $size != "xs" {
+	  .col-#{$size}-push-#{$i} {
+		left: flex-grid($i, $grid-columns) + flex-gutter($grid-columns);
+	  }
+	  .col-#{$size}-pull-#{$i} {
+		right: flex-grid($i, $grid-columns) + flex-gutter($grid-columns);
+	  }
+	}
+  }
+}
diff --git a/_variables.scss b/_variables.scss
@@ -0,0 +1,97 @@
+//Neat Grid System
+
+//phone:
+$phone: 480px;
+
+//tablet:
+$tablet: 720px;
+
+//desktop:
+$desktop: 982px;
+
+//tv:
+$tv: 1278px;
+
+
+$grid-columns: 12 !default;
+$max-width: $tv;
+$border-box-sizing: true !default;
+// Padding, to be divided by two and applied to the left and right of all columns
+$modular-scale-ratio: $golden;
+$modular-scale-base: 1.2em;
+$gutter: modular-scale(1, 1);
+
+
+
+//== Media queries breakpoints
+//
+//## Define the breakpoints at which your layout will change, adapting to different screen sizes.
+
+// Extra small screen / phone
+//** Deprecated `$screen-xs` as of v3.0.1
+$screen-xs:                  $phone !default;
+//** Deprecated `$screen-xs-min` as of v3.2.0
+$screen-xs-min:              $screen-xs !default;
+//** Deprecated `$screen-phone` as of v3.0.1
+$screen-phone:               $screen-xs-min !default;
+
+// Small screen / tablet
+//** Deprecated `$screen-sm` as of v3.0.1
+$screen-sm:                  $tablet !default;
+$screen-sm-min:              $screen-sm !default;
+//** Deprecated `$screen-tablet` as of v3.0.1
+$screen-tablet:              $screen-sm-min !default;
+
+// Medium screen / desktop
+//** Deprecated `$screen-md` as of v3.0.1
+$screen-md:                  $desktop !default;
+$screen-md-min:              $screen-md !default;
+//** Deprecated `$screen-desktop` as of v3.0.1
+$screen-desktop:             $screen-md-min !default;
+
+// Large screen / wide desktop
+//** Deprecated `$screen-lg` as of v3.0.1
+$screen-lg:                  $tv !default;
+$screen-lg-min:              $screen-lg !default;
+//** Deprecated `$screen-lg-desktop` as of v3.0.1
+$screen-lg-desktop:          $screen-lg-min !default;
+
+// So media queries don't overlap when required, provide a maximum
+$screen-xs-max:              ($screen-sm-min - 1) !default;
+$screen-sm-max:              ($screen-md-min - 1) !default;
+$screen-md-max:              ($screen-lg-min - 1) !default;
+
+
+//== Grid system
+//
+//## Define your custom responsive grid.
+
+//** Number of columns in the grid.
+$grid-columns:              12 !default;
+//** Padding between columns. Gets divided in half for the left and right.
+$grid-gutter-width:         30px !default;
+// Navbar collapse
+//** Point at which the navbar becomes uncollapsed.
+$grid-float-breakpoint:     $screen-sm-min !default;
+//** Point at which the navbar begins collapsing.
+$grid-float-breakpoint-max: ($grid-float-breakpoint - 1) !default;
+
+
+//== Container sizes
+//
+//## Define the maximum width of `.container` for different screen sizes.
+
+// Small screen / tablet
+$container-tablet:             ($tablet + $grid-gutter-width) !default;
+//** For `$screen-sm-min` and up.
+$container-sm:                 $container-tablet !default;
+
+// Medium screen / desktop
+$container-desktop:            ($desktop + $grid-gutter-width) !default;
+//** For `$screen-md-min` and up.
+$container-md:                 $container-desktop !default;
+
+// Large screen / wide desktop
+$container-large-desktop:      ($tv + $grid-gutter-width) !default;
+//** For `$screen-lg-min` and up.
+$container-lg:                 $container-large-desktop !default;