singularity-quick-spanner 0.1.1

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 38deba1770ea38217a35bcdf3177da601deeec72
+  data.tar.gz: e0b7187f77a2f7a24376b54c808a81ec4738efab
+SHA512:
+  metadata.gz: ff3a6d3424d7aac2a5a092f44de93ab8c2b113130b268f19b5f21893ffdcfc951813b845a53a9f9ed17c1127ccc73c3f727c95d8c23dd36711c82d6409e6f8d8
+  data.tar.gz: ea9235fdd410228d4af02737f7e8cf1bd0708d14dabc3ddf303c8c20fb4d3e6f84ec3b947a1943d92c576cb7b4b8aa74b40b3cbe6c974f1fbe87d0cb70b0aa21

data/lib/singularity-quick-spanner.rb

@@ -0,0 +1,12 @@
+if (defined? Compass)
+  require 'singularitygs'
+  Compass::Frameworks.register(
+    "singularity-quick-spanner",
+    :path => "#{File.dirname(__FILE__)}/.."
+  )
+end
+
+module SingularityQuickSpanner
+  VERSION = "0.1.1"
+  DATE = "2014-06-24"
+end

data/stylesheets/_singularity-quick-spanner.sass

@@ -0,0 +1,174 @@
+//////////////////////
+// Default settings //
+//////////////////////
+
+$sqs-thumb-span-pseudoclass: child !default !global
+$sqs-thumb-span-center-last-row: false !default !global
+$sqs-thumb-span-bottom-margins: true !default !global
+$sqs-thumb-span-cancel-last-row-margins: false !default !global
+$sqs-thumb-span-overhead-min: 1 !default !global
+$sqs-thumb-span-overhead-max: 20 !default !global
+$sqs-buffer: () !default !global
+
+
+
+////////////
+// Mixins //
+////////////
+
+// Removes existing Singularity grid and gutter definitions
+// and sets new ones.
+=reset-grid($grid: 2, $gutter: 0.1)
+  +sgs-reset(grids)
+  +sgs-reset(gutters)
+  +add-grid($grid)
+  +add-gutter($gutter)
+
+
+
+// Saves current grid/gutter definition into a buffer
+=save-grid
+  $sqs-buffer: (grids: sgs-get(grids), gutters: sgs-get(gutters)) !global
+
+
+
+// Restores grid/gutter definition from a buffer
+=restore-grid
+  $i-only-exist-to-have-a-funciton-executed: sgs-set(grids, map-get($sqs-buffer, grids))
+  $i-like-food-more-than-i-like-people:      sgs-set(gutters, map-get($sqs-buffer, gutters))
+
+
+// Should be applied to a class corresponding to each thumbnail (grid cell).
+// Spans thumbnails in a grid by applying float spans to the nth-child/nth-of-type pseudoclasses.
+//
+// This makes most sense with symmetric grids, but it will still do the job
+// if an asymmetric grid is provided.
+//
+// Arguments:
+//- `$cols`: The number of columns to use.
+//  Allowed values: a positive unitless integer. Default is the current grid definition.
+//
+//- `$guts`: Gutter size, relative to a single column size.
+//  Allowed values: a non-negative float. Default is the current gutter definition.
+//
+//- `$gutstyle`: Gutter style. Default is the current gutter definition.
+//  Allowed values: i don't know. :) This value is simply passed to Singularity. See the [corresponding docs page](https://github.com/Team-Sass/Singularity/wiki/Creating-Grids#gutter-styles).
+//
+//- `$pseudoclass`: The pseudoclass used to apply spans to is constructed with ":nth-" and this value.
+//  Allowed values: `child` (default) or `of-type`.
+//
+//- `$center-last-row`: The last row of thumbnails may contain less elements than any other row. To make it look better, it can be centered.
+//  Allowed values: `true` or `false` (default).
+//
+//- `$bottom-margins`: Applies bottom margins to thumbnails proportional to grid gutters. This results in even vertical and horizontal gutters.
+//  Allowed values: `true` (default) or `false`.
+//
+//- `$cancel-last-row-margins`: Negate bottom margins for thumbnails in the last row, so that the parent doesn't have what appears to be bottom padding.
+//  Allowed values: `true` or `false` (default).
+//
+// The `$center-last-row` and `$cancel-last-row-margins` apply styles to the first item of the last row using a combination of `nth-child` and `nth-last-child` pseudoselectors. This would normally work only if you know the exact number of items in the grid. For these features to work with an arbitrary number of items, an excessive amount of CSS has to be generated. Use the `$overhead-min` and `$overhead-max` arguments to set the range of quantities of items to be styled. The larger the range, the more CSS will be generaged. Hold tight and pray for gzip compression.
+//
+// - `$overhead-min`: The starting number of grid items for which an excessive number of CSS should be generated.
+//   Allowed values: a positive unitless integer. Default: 1.
+//
+// - `$overhead-max`: The last number of grid items for which an excessive number of CSS should be generated.
+//   Allowed values: a positive unitless integer. Default: 20.
+//
+// If you know the exact number of items in the grid, set both arguments to the same value and no excessive CSS will be created.
+
+=thumb-span($cols: find-grid(), $guts: find-gutter(), $gutstyle: find-gutter-style(), $pseudoclass: $sqs-thumb-span-pseudoclass, $center-last-row: $sqs-thumb-span-center-last-row, $bottom-margins: $sqs-thumb-span-bottom-margins, $cancel-last-row-margins: $sqs-thumb-span-cancel-last-row-margins, $overhead-min: $sqs-thumb-span-overhead-min, $overhead-max: $sqs-thumb-span-overhead-max)
+
+  +layout($cols, $guts, $gutter-style: $gutstyle)
+
+    // Detect an asymmetric grid, work around it
+    @if length($cols) > 1
+      $cols: length($cols)
+
+    // Apply the span
+    +float-span(1)
+    &:nth-#{$pseudoclass}(#{$cols}n+#{$cols})
+      +float-span(1, 'last')
+
+    // Applying bottom margins
+    @if $bottom-margins
+      margin-bottom: $guts / ( $cols + ($cols - 1) * $guts) * 100%
+
+      // Canceling last row margins
+      @if $cancel-last-row-margins
+
+        // Building a compound selector
+        $selector: ()
+        @for $i from 1 through $cols
+          $fragment: #{'&:nth-last-' + $pseudoclass + '(' + $i +')'}
+          $selector: append($selector, $fragment, comma)
+
+        #{$selector}
+          margin-bottom: 0
+
+    // Targeting the thumbnail from both beginning and end
+    @if $center-last-row or $cancel-last-row-margins
+
+      $selectors-center-last-row: ()
+      $selectors-cancel-margin: ()
+
+      // Looping through the numbers of thumbnails
+      @for $i from $overhead-min through $overhead-max
+
+        // Number of items in the last row
+        $remainder: $i % $cols
+
+        // Zero means the last row is full, no need to do anything
+        @if $remainder > 0
+
+          // Targeting an item from beginning and end at the same time
+          $fragment: #{"&:nth-" + $pseudoclass + "(" + ($i - $remainder + 1) + "):nth-last-" + $pseudoclass + "(" + $remainder + ")"}
+
+          // Centering the last row
+          @if $center-last-row
+            $margin: grid-span(1, 1) * ($cols - $remainder) / 2
+
+            $selector: if(map-has-key($selectors-center-last-row, $margin), map-get($selectors-center-last-row, $margin), ())
+            $selectors-center-last-row: map-merge($selectors-center-last-row, ($margin: append($selector, $fragment, comma)))
+
+
+          // Clearing the first item in the first row
+          // So that it doesn't cling to bottom margins
+          @if $cancel-last-row-margins
+            $selectors-cancel-margin: append($selectors-cancel-margin, $fragment, comma)
+
+
+      @if $center-last-row and length($selectors-center-last-row) > 0
+        @each $margin, $selector in $selectors-center-last-row
+          @if length($selector) > 0
+            #{$selector}
+              margin-left: $margin
+
+      @if $cancel-last-row-margins
+        @if length($selectors-cancel-margin) > 0
+          #{$selectors-cancel-margin}
+            clear: both
+
+
+//This mixin leverages Breakpoint Slicer to create a responsive thumbnail grid. Within every slice (media query), it will apply a thumb-span, increasing the number of columns for every subsequent slice.
+//
+//  Arguments:
+//
+//- `$start-cols`: Number of columns to start in the first slice.
+//   Allowed values: A positive unitless integer. Default: 1.
+//
+//- `$start-slice`: Slice number to start with.
+//   Allowed values: A positive unitless integer. Default: 1.
+//
+//It can accepts all arguments available for `thumb-grid` (except `$cols`, which is calculated dynmamically). Don't forget to define `$guts`!
+
+=rwd-thumb-span($start-cols: 1, $start-slice: 1, $guts: 0.1, $gutstyle: find-gutter-style(), $pseudoclass: $sqs-thumb-span-pseudoclass, $center-last-row: $sqs-thumb-span-center-last-row, $bottom-margins: $sqs-thumb-span-bottom-margins, $cancel-last-row-margins: $sqs-thumb-span-cancel-last-row-margins, $overhead-min: $sqs-thumb-span-overhead-min, $overhead-max: $sqs-thumb-span-overhead-max)
+
+  @if not function-exists(at)
+    @warn "Singularity Quick Spanner's `rwd-thumb-span` mixin requires Breakpoint Slicer: https://github.com/lolmaus/breakpoint-slicer"
+
+  @for $i from 1 through (total-slices() - $start-slice + 1)
+    $slice: $start-slice + $i - 1
+    $cols: $start-cols + $i - 1
+
+    +at($slice)
+      +thumb-span($cols, $guts, $gutstyle, $pseudoclass, $center-last-row, $bottom-margins, $cancel-last-row-margins, $overhead-min, $overhead-max)

metadata

@@ -0,0 +1,103 @@
+--- !ruby/object:Gem::Specification
+name: singularity-quick-spanner
+version: !ruby/object:Gem::Version
+  version: 0.1.1
+platform: ruby
+authors:
+- lolmaus (Andrey Mikhaylov)
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2014-06-24 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: sass
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 3.3.0
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 3.3.0
+- !ruby/object:Gem::Dependency
+  name: singularitygs
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 1.2.1
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 1.2.1
+- !ruby/object:Gem::Dependency
+  name: breakpoint
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 2.4.2
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 2.4.2
+- !ruby/object:Gem::Dependency
+  name: breakpoint-slicer
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 1.3.4
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 1.3.4
+description: A collection of handy shortcut mixins for the Singularity grid system
+email:
+- lolmaus@gmail.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- lib/singularity-quick-spanner.rb
+- stylesheets/_singularity-quick-spanner.sass
+homepage: https://github.com/lolmaus/singularity-quick-spanner
+licenses: []
+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.2'
+requirements: []
+rubyforge_project: 
+rubygems_version: 2.3.0
+signing_key: 
+specification_version: 4
+summary: 'Saves you some hassle for: working with multiple grid definitions on the
+  same page; spanning a symmetrical thumbnail grid; spanning a responsive symmetrical
+  thumbnail grid.'
+test_files: []