grip-grid-rails 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 86033e6c6d93c47f20bcef4c056ff9a0a951a284
+  data.tar.gz: 84830ce18d2342f78e4850762ebdabe01e7ac024
+SHA512:
+  metadata.gz: 139e68e68e8d92b04033220ae62506d5bb9d01c5161d366e1f6b3d35fe9eaa2ddc5a1eade0ab9b70057b6f3f53476658a77a857314575bef1b7afa4d437bb012
+  data.tar.gz: 1b12a78cec198b486699cab6d3f6cf332a6afdb2823ee015b3994e8af4fac4f8a7e43c65633c23a37f48c4b841c46fb989b2f0a519a33eb70a60c7a6a0523f6f

data/LICENSE

@@ -0,0 +1,9 @@
+The MIT License (MIT)
+
+Copyright (c) 2016 Curt Howard, Tom Hare
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,21 @@
+# grip-grid-rails
+
+[Grip](https://github.com/meowsus/grip), written by [Curt Howard](https://github.com/meowsus) and [Tom Hare](https://github.com/colourgarden), packaged for the Rails asset pipeline.
+
+## Usage
+
+Add the following to your `Gemfile`:
+
+```
+gem 'grip-grid-rails'
+```
+
+All the following to your stylesheets manifest:
+
+```
+@import 'grip';
+```
+
+## Disclaimer
+
+This repo is a Rails gem package. All issues with the library should be reported on the library's [GitHub page](https://github.com/meowsus/grip). This repo will be updated each time a new version of the library is released.

data/lib/grip-grid-rails.rb

@@ -0,0 +1,8 @@
+require 'grip-grid-rails/version'
+
+module GripGridRails
+  module Rails
+    class Engine < ::Rails::Engine
+    end
+  end
+end

data/lib/grip-grid-rails/version.rb

@@ -0,0 +1,5 @@
+module GripGridRails
+  module Rails
+    VERSION = '0.1.0'
+  end
+end

data/vendor/assets/stylesheets/_grip.scss

@@ -0,0 +1,323 @@
+/*! Grip | MIT License | @colourgarden & @meowsus// */
+
+////////////////////////////////////////
+//  #SETTINGS
+////////////////////////////////////////
+
+//
+// 1. prefix namespace for grid layout and cells
+// 2. the gutter applied to grid cells
+// 3. width class naming style. Options include `fraction`, `percentage` or
+//    `fragment`
+// 4. width denominator values. Modify as needed. 2 = 1/2, 3 = 1/3, 2/3, etc.
+// 5. enables permutation of all width classes with appended responsive modifier
+//    suffixes
+// 6. responsive breakpoints. Modify as needed.
+//
+$grip-namespace:  'grid' !default;  // [1]
+$grip-gutter:     20px !default;    // [2]
+
+$grip-width-class-style:  'fraction' !default;  // [3]
+$grip-widths:             (2, 3, 4) !default;   // [4]
+
+$grip-enable-responsive:  true !default;  // [5]
+$grip-breakpoints: (
+  "medium":  "screen and (min-width: 760px)",
+  "wide":    "screen and (min-width: 960px)",
+  "x-wide":  "screen and (min-width: 1160px)",
+) !default;  // [6]
+
+
+//
+// Toggleable grid layout modifiers.
+//
+$grip-enable-grid-center:       false !default;
+$grip-enable-grid-right:        false !default;
+$grip-enable-grid-middle:       false !default;
+$grip-enable-grid-bottom:       false !default;
+$grip-enable-grid-flush:        false !default;
+$grip-enable-grid-tiny:         false !default;
+$grip-enable-grid-small:        false !default;
+$grip-enable-grid-large:        false !default;
+$grip-enable-grid-huge:         false !default;
+$grip-enable-grid-auto:         false !default;
+$grip-enable-grid-rev:          false !default;
+
+
+//
+// Toggleable grid cell layout modifiers.
+//
+$grip-enable-grid-cell-center:  false !default;
+
+
+
+
+
+////////////////////////////////////////
+//  #FUNCTIONS
+////////////////////////////////////////
+//
+// Responsible for constructing the grid cell class name. Returns Strings like:
+// `grid__cell--16` or `grid__cell--16-at-medium`.
+//
+// 1. sets the width delimiter
+// 2. sets the class name to `grid__cell--1/6` or `grid__cell--1-of-6`
+// 3. sets the class name to `grid__cell--16` which is the percentage, floored
+//
+@function grip-create-class-name($style, $numerator, $denominator, $breakpoint-alias) {
+    $class-name: null;
+
+    @if ($style == 'fraction' or $style == 'fragment') {
+        $delimiter: if($style == 'fraction', \/, -of-); // [1]
+        $class-name: "#{$grip-namespace}__cell--#{$numerator}#{$delimiter}#{$denominator}#{$breakpoint-alias}"; // [2]
+    }
+    @else {
+        $class-width: floor(($numerator / $denominator) * 100);
+        $class-name: "#{$grip-namespace}__cell--#{$class-width}#{$breakpoint-alias}"; // [3]
+    }
+
+    @return $class-name;
+}
+
+
+
+
+
+////////////////////////////////////////
+//  #MIXINS
+////////////////////////////////////////
+//
+// Responsible for outputting the final list of width modifiers.
+//
+// 1. create a scoped, temporary map of width data. Used to ensure there is no
+//    class duplication
+// 2. handle the use case of someone using a `1` in the `$grid-widths` map
+// 3. loop widths as fractions
+// 4. determine if this width data is already accounted for in the temporary map
+// 5. add the new entry to the temporary map
+//
+@mixin grip-create-widths($widths, $breakpoint-alias: null) {
+    $pseudo-class-map: (); // [1]
+
+    @each $denominator in $widths {
+        @if ($denominator == 1) { // [2]
+            $class-name: grip-create-class-name($grip-width-class-style, 1, 1, $breakpoint-alias);
+
+            .#{$class-name} {
+                width: 100%;
+            }
+        }
+        @else {
+            @for $numerator from 1 to $denominator { // [3]
+                $class-name: grip-create-class-name($grip-width-class-style, $numerator, $denominator, $breakpoint-alias);
+                $width-value: percentage($numerator / $denominator);
+
+                $duplicate: map-get($pseudo-class-map, $width-value); // [4]
+                @if ($duplicate == null) {
+                    .#{$class-name} {
+                        width: $width-value;
+                    }
+
+                    $add-class: ($width-value: $class-name);
+                    $pseudo-class-map: map-merge($pseudo-class-map, $add-class); // [5]
+                }
+            }
+        }
+    }
+}
+
+
+////////////////////////////////////////
+//  #RESPOND-TO-MIXIN
+////////////////////////////////////////
+//
+// Provides a way to hook into the breakpoints defined in `$grip-breakpoints`.
+//
+// 1. search breakpoint for alias
+// 2. if alias exists, print out media query
+//
+@mixin grip-respond-to($alias) {
+    $query: map-get($grip-breakpoints, $alias); // [1]
+
+    @if ($query) { // [2]
+        @media #{$query} {
+            @content;
+        }
+    }
+    @else{
+        @error "No breakpoint found for #{$alias}";
+    }
+}
+
+
+
+
+
+////////////////////////////////////////
+//  #GRID-LAYOUT
+////////////////////////////////////////
+
+.#{$grip-namespace} {
+    display: block;
+    margin:  0;
+    margin-left: -($grip-gutter);
+    padding: 0;
+    font-size: 0;
+    list-style: none;
+}
+
+    .#{$grip-namespace}__cell {
+        display: inline-block;
+        margin:  0;
+        padding: 0;
+        padding-left: $grip-gutter;
+        width: 100%;
+        font-size: 1rem;
+        vertical-align: top;
+        box-sizing: border-box;
+    }
+
+
+
+
+
+////////////////////////////////////////
+// #TOGGLEABLE-GRID-LAYOUT-MODIFIERS
+////////////////////////////////////////
+
+@if ($grip-enable-grid-center) {
+    .#{$grip-namespace}--center {
+        text-align: center;
+
+        > .#{$grip-namespace}__cell {
+            text-align: left;
+        }
+    }
+}
+
+@if ($grip-enable-grid-right) {
+    .#{$grip-namespace}--right {
+        text-align: right;
+
+        > .#{$grip-namespace}__cell {
+            text-align: left;
+        }
+    }
+}
+
+@if ($grip-enable-grid-middle) {
+    .#{$grip-namespace}--middle {
+        > .#{$grip-namespace}__cell {
+            vertical-align: middle;
+        }
+    }
+}
+
+@if ($grip-enable-grid-bottom) {
+    .#{$grip-namespace}--bottom {
+        > .#{$grip-namespace}__cell {
+            vertical-align: bottom;
+        }
+    }
+}
+
+@if ($grip-enable-grid-flush) {
+    .#{$grip-namespace}--flush {
+        margin-left: 0;
+
+        > .#{$grip-namespace}__cell {
+            padding-left: 0;
+        }
+    }
+}
+
+@if ($grip-enable-grid-tiny) {
+    .#{$grip-namespace}--tiny {
+        margin-left: -($grip-gutter / 4);
+
+        > .#{$grip-namespace}__cell {
+            padding-left: ($grip-gutter / 4);
+        }
+    }
+}
+
+@if ($grip-enable-grid-small) {
+    .#{$grip-namespace}--small {
+        margin-left: -($grip-gutter / 2);
+
+        > .#{$grip-namespace}__cell {
+            padding-left: ($grip-gutter / 2);
+        }
+    }
+}
+
+@if ($grip-enable-grid-large) {
+    .#{$grip-namespace}--large {
+        margin-left: -($grip-gutter * 2);
+
+        > .#{$grip-namespace}__cell {
+            padding-left: ($grip-gutter * 2);
+        }
+    }
+}
+
+@if ($grip-enable-grid-huge) {
+    .#{$grip-namespace}--huge {
+        margin-left: -($grip-gutter * 4);
+
+        > .#{$grip-namespace}__cell {
+            padding-left: ($grip-gutter * 4);
+        }
+    }
+}
+
+@if ($grip-enable-grid-auto) {
+    .#{$grip-namespace}--auto {
+        > .#{$grip-namespace}__cell {
+            width: auto;
+        }
+    }
+}
+
+@if ($grip-enable-grid-rev) {
+    .#{$grip-namespace}--rev {
+        direction: rtl;
+
+        > .#{$grip-namespace}__cell {
+            direction: ltr;
+        }
+    }
+}
+
+
+////////////////////////////////////////
+//  #TOGGLEABLE-GRID-CELL-MODIFIERS
+////////////////////////////////////////
+
+@if ($grip-enable-grid-cell-center) {
+    .#{$grip-namespace}__cell--center {
+        display: block;
+        margin: 0 auto;
+    }
+}
+
+
+
+
+
+////////////////////////////////////////
+//  #GRID-WIDTHS
+////////////////////////////////////////
+//
+// 1. output default width modifiers
+// 2. if responsive flag is enabled, add responsive width modifiers
+//
+@include grip-create-widths($grip-widths); // [1]
+
+@if $grip-enable-responsive { // [2]
+    @each $alias, $query in $grip-breakpoints {
+        @media #{$query} {
+            @include grip-create-widths($grip-widths, -for-#{$alias});
+        }
+    }
+}

metadata

@@ -0,0 +1,51 @@
+--- !ruby/object:Gem::Specification
+name: grip-grid-rails
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+platform: ruby
+authors:
+- Curt Howard
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2016-07-28 00:00:00.000000000 Z
+dependencies: []
+description: A build of the Grip CSS grid system, written by written by Curt Howard,
+  packaged for the Rails asset pipeline.
+email:
+- curt@meows.us
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- LICENSE
+- README.md
+- lib/grip-grid-rails.rb
+- lib/grip-grid-rails/version.rb
+- vendor/assets/stylesheets/_grip.scss
+homepage: https://github.com/meowsus/grip-grid-rails
+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: '0'
+requirements: []
+rubyforge_project: 
+rubygems_version: 2.5.1
+signing_key: 
+specification_version: 4
+summary: A build of the Grip CSS grid system, written by written by Curt Howard, packaged
+  for the Rails asset pipeline.
+test_files: []