apollo-grid 1.0.0.pre.alpha.3

data/lib/style.scss

@@ -0,0 +1,48 @@
+/**
+ * Apollo Grid
+ *
+ * Actually, this project is a port of Bootstrap 4 grid system for React but is aimed to evolve in its own path.
+ * That's why you will find similarities with Bootstrap in here.
+ */
+
+/**
+ * Grid breakpoints
+ *
+ * Define the minimum and maximum dimensions at which your layout will change,
+ * adapting to different screen sizes, for use in media queries.
+ */
+$grid-breakpoints: (
+  xs: 0,
+  sm: 544px,
+  md: 768px,
+  lg: 992px,
+  xl: 1200px
+) !default;
+
+/**
+ * Grid containers
+ *
+ * Define the maximum width of `.container` for different screen sizes.
+ */
+$container-max-widths: (
+  sm: 576px,
+  md: 720px,
+  lg: 940px,
+  xl: 1140px
+) !default;
+
+/**
+ * Grid columns
+ *
+ * Set the number of columns and specify the width of the gutters.
+ */
+$grid-columns: 12 !default;
+$grid-gutter-width: 1.875rem !default; // 30px
+
+// Build the grid
+@import './styles/variables';
+@import './styles/mixins/clearfix';
+@import './styles/mixins/breakpoints';
+@import './styles/mixins/grid-framework';
+@import './styles/mixins/grid';
+@import './styles/grid';

data/lib/styles/grid.scss

@@ -0,0 +1,86 @@
+/**
+ * Set the container width, and set media queries behavior for it.
+ */
+.container {
+  @include make-container();
+  @include make-container-max-widths();
+
+}
+
+/**
+ * Utilizes the mixin meant for fixed width containers, but without any defined
+ * width for fluid, full width layouts.
+ */
+.container-fluid {
+  @include make-container();
+}
+
+
+/**
+ * Rows contain and clear the floats of your columns.
+ */
+@if $enable-grid-classes {
+  .row {
+    @include make-row();
+  }
+}
+
+/**
+ * Common styles for small and large grid columns.
+ */
+@if $enable-grid-classes {
+  @include make-grid-columns();
+}
+
+/**
+ * Custom styles for additional flex alignment options.
+ */
+@if $enable-flex and $enable-grid-classes {
+
+  // Flex column reordering.
+  @each $breakpoint in map-keys($grid-breakpoints) {
+    @include media-breakpoint-up($breakpoint) {
+      .col-#{$breakpoint}-first {
+        order: -1;
+      }
+
+      .col-#{$breakpoint}-last {
+        order: 1;
+      }
+    }
+  }
+
+  // Alignment for every column in row.
+  @each $breakpoint in map-keys($grid-breakpoints) {
+    @include media-breakpoint-up($breakpoint) {
+      .row-#{$breakpoint}-top {
+        align-items: flex-start;
+      }
+
+      .row-#{$breakpoint}-center {
+        align-items: center;
+      }
+
+      .row-#{$breakpoint}-bottom {
+        align-items: flex-end;
+      }
+    }
+  }
+
+  // Alignment per column.
+  @each $breakpoint in map-keys($grid-breakpoints) {
+    @include media-breakpoint-up($breakpoint) {
+      .col-#{$breakpoint}-top {
+        align-self: flex-start;
+      }
+
+      .col-#{$breakpoint}-center {
+        align-self: center;
+      }
+
+      .col-#{$breakpoint}-bottom {
+        align-self: flex-end;
+      }
+    }
+  }
+}

data/lib/styles/mixins/breakpoints.scss

@@ -0,0 +1,98 @@
+/**
+ * Maximum breakpoint width. Null for the largest (last) breakpoint.
+ * The maximum value is calculated as the minimum of the next one less 0.1.
+ *
+ *    >> breakpoint-max(sm, (xs: 0, sm: 544px, md: 768px))
+ *    767px
+ */
+@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
+  $next: breakpoint-next($name, $breakpoints);
+  @return if($next, breakpoint-min($next, $breakpoints) - 1px, null);
+}
+
+/**
+ * Minimum breakpoint width. Null for the smallest (first) breakpoint.
+ *
+ *    >> breakpoint-min(sm, (xs: 0, sm: 544px, md: 768px))
+ *    544px
+ */
+@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
+  $min: map-get($breakpoints, $name);
+  @return if($min != 0, $min, null);
+}
+
+/**
+ * Breakpoint viewport sizes and media queries.
+ * Breakpoints are defined as a map of (name: minimum width), order from small to large:
+ *
+ *    (xs: 0, sm: 544px, md: 768px)
+ *
+ * The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.
+ * Name of the next breakpoint, or null for the last breakpoint.
+ *
+ *    >> breakpoint-next(sm)
+ *    md
+ *    >> breakpoint-next(sm, (xs: 0, sm: 544px, md: 768px))
+ *    md
+ *    >> breakpoint-next(sm, $breakpoint-names: (xs sm md))
+ *    md
+ */
+@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
+  $n: index($breakpoint-names, $name);
+  @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
+}
+
+/**
+ * Media that spans multiple breakpoint widths.
+ * Makes the @content apply between the min and max breakpoints.
+ */
+@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) {
+  @include media-breakpoint-up($lower, $breakpoints) {
+    @include media-breakpoint-down($upper, $breakpoints) {
+      @content;
+    }
+  }
+}
+
+/**
+ * Media of at most the maximum breakpoint width. No query for the largest breakpoint.
+ * Makes the @content apply to the given breakpoint and narrower.
+ */
+@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {
+  $max: breakpoint-max($name, $breakpoints);
+  @if $max {
+    @media (max-width: $max) {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}
+
+/**
+ * Media between the breakpoint's minimum and maximum widths.
+ * No minimum for the smallest breakpoint, and no maximum for the largest one.
+ * Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
+ */
+@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {
+  @include media-breakpoint-up($name, $breakpoints) {
+    @include media-breakpoint-down($name, $breakpoints) {
+      @content;
+    }
+  }
+}
+
+/**
+ * Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
+ * Makes the @content apply to the given breakpoint and wider.
+ */
+@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
+  $min: breakpoint-min($name, $breakpoints);
+  @if $min {
+    @media (min-width: $min) {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}

data/lib/styles/mixins/clearfix.scss

@@ -0,0 +1,7 @@
+@mixin clearfix() {
+  &::after {
+    clear: both;
+    content: '';
+    display: table;
+  }
+}

data/lib/styles/mixins/grid-framework.scss

@@ -0,0 +1,50 @@
+/**
+ * Used to generate the correct number of grid classes given any value of `$grid-columns`.
+ */
+@mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {
+
+  // Common properties for all breakpoints.
+  %grid-column {
+    // Prevent columns from collapsing when empty
+    min-height: 1px;
+    // Inner gutter via padding
+    padding-left: ($gutter / 2);
+    padding-right: ($gutter / 2);
+
+    position: relative;
+  }
+
+  @each $breakpoint in map-keys($breakpoints) {
+    @for $i from 1 through $columns {
+      .col-#{$breakpoint}-#{$i} {
+        @extend %grid-column;
+      }
+    }
+
+    @include media-breakpoint-up($breakpoint) {
+
+      // Work around cross-media @extend (https://github.com/sass/sass/issues/1050).
+      %grid-column-float-#{$breakpoint} {
+        float: left;
+      }
+
+      @for $i from 1 through $columns {
+        .col-#{$breakpoint}-#{$i} {
+          @if not $enable-flex {
+            @extend %grid-column-float-#{$breakpoint};
+          }
+
+          @include make-col-span($i, $columns);
+        }
+      }
+
+      @each $modifier in (pull, push, offset) {
+        @for $i from 0 through $columns {
+          .col-#{$breakpoint}-#{$modifier}-#{$i} {
+            @include make-col-modifier($modifier, $i, $columns)
+          }
+        }
+      }
+    }
+  }
+}

data/lib/styles/mixins/grid.scss

@@ -0,0 +1,76 @@
+/**
+ * Generate semantic grid columns with these mixins.
+ */
+@mixin make-container($gutter: $grid-gutter-width) {
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: ($gutter / 2);
+  padding-right: ($gutter / 2);
+  @if not $enable-flex {
+    @include clearfix();
+  }
+}
+
+/**
+ * For each breakpoint, define the maximum width of the container in a media query.
+ */
+@mixin make-container-max-widths($max-widths: $container-max-widths) {
+  @each $breakpoint, $container-max-width in $max-widths {
+    @include media-breakpoint-up($breakpoint) {
+      max-width: $container-max-width;
+    }
+  }
+}
+
+@mixin make-row($gutter: $grid-gutter-width) {
+  @if $enable-flex {
+    display: flex;
+    flex-wrap: wrap;
+  } @else {
+    @include clearfix();
+  }
+  margin-left: ($gutter / -2);
+  margin-right: ($gutter / -2);
+}
+
+@mixin make-col($gutter: $grid-gutter-width) {
+  @if not $enable-flex {
+    float: left;
+  }
+  min-height: 1px;
+  padding-left: ($gutter / 2);
+  padding-right: ($gutter / 2);
+  position: relative;
+}
+
+@mixin make-col-span($size, $columns: $grid-columns) {
+  @if $enable-flex {
+    flex: 0 0 percentage($size / $columns);
+  } @else {
+    width: percentage($size / $columns);
+  }
+}
+
+@mixin make-col-offset($size, $columns: $grid-columns) {
+  margin-left: percentage($size / $columns);
+}
+
+@mixin make-col-push($size, $columns: $grid-columns) {
+  left: if($size > 0, percentage($size / $columns), auto);
+}
+
+@mixin make-col-pull($size, $columns: $grid-columns) {
+  right: if($size > 0, percentage($size / $columns), auto);
+}
+
+@mixin make-col-modifier($type, $size, $columns) {
+
+  // Work around the lack of dynamic mixin @include support (https://github.com/sass/sass/issues/626).
+  @if $type == push {
+    @include make-col-push($size, $columns);
+  } @else if $type == pull {
+    @include make-col-pull($size, $columns);
+  } @else if $type == offset {
+    @include make-col-offset($size, $columns);
+  }
+}

data/lib/styles/variables.scss

@@ -0,0 +1,11 @@
+/**
+ * Grid structure options.
+ */
+$enable-flex: false !default;
+$enable-grid-classes: true !default;
+
+/**
+ * Grid configuration.
+ */
+$grid-columns: 12 !default;
+$grid-gutter-width: 1.875rem !default; // 30px

metadata

@@ -0,0 +1,58 @@
+--- !ruby/object:Gem::Specification
+name: apollo-grid
+version: !ruby/object:Gem::Version
+  version: 1.0.0.pre.alpha.3
+platform: ruby
+authors:
+- Nicolas Cava
+- Julien Rodrigues
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2016-02-26 00:00:00.000000000 Z
+dependencies: []
+description: ''
+email: n.cava@mapleinside.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- lib/Col/index.js
+- lib/Container/index.js
+- lib/Row/index.js
+- lib/components/Col/index.js
+- lib/components/Container/index.js
+- lib/components/Row/index.js
+- lib/style.css
+- lib/style.scss
+- lib/styles/grid.scss
+- lib/styles/mixins/breakpoints.scss
+- lib/styles/mixins/clearfix.scss
+- lib/styles/mixins/grid-framework.scss
+- lib/styles/mixins/grid.scss
+- lib/styles/variables.scss
+homepage: https://mapleinside.github.io/apollo-grid
+licenses:
+- MIT
+metadata: {}
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">"
+    - !ruby/object:Gem::Version
+      version: 1.3.1
+requirements: []
+rubyforge_project: 
+rubygems_version: 2.6.0
+signing_key: 
+specification_version: 4
+summary: Apollo Grid
+test_files: []