breakpoint-slicer 0.1 → 1.0

checksums.yaml

@@ -1,7 +1,15 @@
 ---
-SHA1:
-  metadata.gz: 3d0bc9155f29e98a703c1fe58a74cf6bfce98006
-  data.tar.gz: 799ddefb59a46becf3283007bf50e6b653e2779e
-SHA512:
-  metadata.gz: db6c4c6467742193ded257ba01a543cdb62366bbe2333c2d2c10a2375cd7a642fcaf41b3de7f0cd11befdc4fa27462c37f4424acf8cde71059e40451c8de673b
-  data.tar.gz: 7c560cb06402939b578ee4612a70a68a4c6d1aa7edd5eaca220ac2c5fef0a2440caaf6a4ba6f3803bd81b720b93f3b2c06e8980b9fe28813e12bba96d2c96710
+!binary "U0hBMQ==":
+  metadata.gz: !binary |-
+    ZDUwYjJlZjYxMzA4N2IzMjFlZGI0NDUxZWQ3OGY3MWY5YTk2NjUwZA==
+  data.tar.gz: !binary |-
+    ZjM5ZGUzM2I5ODA5Yzk5OTA5OTIxMTgzNDM4OWU5MzY1MWJmMzFlMQ==
+!binary "U0hBNTEy":
+  metadata.gz: !binary |-
+    MGEzOTI2NmMwZWEwMjZmZDczOWUzOWZiNjg0MGRhMjI0MjhmZGM1MTEyNGVk
+    NjJhOTQ1NmY4N2E5MjQ0NDdiOWQxNjczYWYwMzBmNTNhYjliMjFlMzNjZjU3
+    MjliMzJkODkyODMxODg0N2E0OGM0ZjRiM2U5ZTU1ZGE2OGRkMDM=
+  data.tar.gz: !binary |-
+    Y2ViZDNlM2Q5ZTgwNGMxZWRiMDVmMjRlOWZiZTgyNzkxYzdlNTE0MjYzYWJj
+    MjlkNmYzMDA1Mzc3ZWQ3MzMyYTc4NWRkZWZiODBlOGQ1NDU3YWI2NjlkYzU1
+    YzI5ZGE4YTA0YjRkZWUwZjBhNTcxYTE3ZWJlODNjYWU4MDBhMzk=

data/lib/breakpoint-slicer.rb

@@ -4,6 +4,6 @@ require 'breakpoint'
 Compass::Frameworks.register("breakpoint-slicer", :path => "#{File.dirname(__FILE__)}/..")
 
 module BreakpointSlicer
-  VERSION = "0.1"
+  VERSION = "1.0"
   DATE = "2013-04-09"
 end

data/stylesheets/_breakpoint-slicer.sass

@@ -1,7 +1,6 @@
 // The dependency
 @import breakpoint
 
-
 // Default values
 @import breakpoint-slicer/variables
 

data/stylesheets/breakpoint-slicer/_mixins.sass

@@ -4,95 +4,70 @@
 ////////////////////////////////////////////////
 
 // Wraps the content block provided with a media query
-// with min-width and max-width equal to the edges of a slice
+// with min-width equal to the left edge of the left slice
+// and max-width equal to the right edge of the right slice
 //
-// at($slice)
-// - $slice : <slice number> A number of a slice. Should be a positive integer.
-=at($slice)
-
-  // Retrieving the left edge of the slice
-  $context:   left-bp-of-slice($slice)
-
-  // Retrieving the right edge of the slice
-  // unless the slice is the last one
-  @if $slice < total-slices()
-    $right:   right-bp-of-slice($slice)
-    $context: append($context, $right)
+// between($slice-left, $slice-right, $no-query: false)
+// - $slice-left  : <slice number> A number of the left slice. Should be a positive integer.
+// - $slice-right : <slice number> A number of the left slice. Should be a positive integer.
+// - $no-query    : [<.class>]     A class to provide the no-query fallback (see Breakpoint docs).
+=between($slice-left, $slice-right, $no-query: false)
 
-  // Setting the breakpoint
-  +breakpoint($context)
+  // If the slices provided are the first and the last one,
+  // the breakpoint becomes meaningless
+  @if ($slice-left == 1) and ($slice-right == total-slices())
+    //Thus, don't wrap the code block with a media query
     @content
 
+  @else
 
-// Wraps the content block provided with a media query
-// with min-width equal to the right edge of a slice
-//
-// from($slice)
-// - $slice : <slice number> A number of a slice. Should be a positive integer.
-=from($slice)
-
-  // If the slice is the first one, the breakpoint becomes meaningless
-  @if $slice == 1
-    // Thus, don't wrap the code block with a media query
-    @content
+    // Retrieving the left edge of the left slice
+    $context:   left-bp-of-slice($slice-left)
 
-  @else
-    // Retrieving the left edge of the slice
-    $context:   left-bp-of-slice($slice)
+    // Retrieving the right edge of the slice
+    // unless the slice is the last one
+    @if $slice-right < total-slices()
+      $right:   right-bp-of-slice($slice-right)
+      $context: append($context, $right)
 
     // Setting the breakpoint
-    +breakpoint($context)
+    +breakpoint($context, $no-query)
       @content
 
 
 // Wraps the content block provided with a media query
-// with max-width equal to the right edge of a slice
+// with min-width and max-width equal to the edges of a slice
 //
-// to($slice)
+// at($slice, $no-query: false)
 // - $slice : <slice number> A number of a slice. Should be a positive integer.
-=to($slice)
+// - $no-query    : [<.class>]     A class to provide the no-query fallback (see Breakpoint docs).
+=at($slice, $no-query: false)
 
-  // If the slice is the last one, the breakpoint becomes meaningless
-  @if $slice == total-slices()
-    // Thus, don't wrap the code block with a media query
+  +between($slice, $slice, $no-query)
     @content
 
-  @else
-    // Retrieving the right edge of the slice
-    $right:   right-bp-of-slice($slice)
-    $context: max-width $right
-
-    // Setting the breakpoint
-    +breakpoint($context)
-      @content
-
 
 // Wraps the content block provided with a media query
-// with min-width equal to the left edge of the left slice
-// and max-width equal to the right edge of the right slice
+// with min-width equal to the right edge of a slice
 //
-// between($slice-left, $slice-right)
-// - $slice-left  : <slice number> A number of the left slice. Should be a positive integer.
-// - $slice-right : <slice number> A number of the left slice. Should be a positive integer.
-=between($slice-left, $slice-right)
+// from($slice, $no-query: false)
+// - $slice : <slice number> A number of a slice. Should be a positive integer.
+// - $no-query    : [<.class>]     A class to provide the no-query fallback (see Breakpoint docs).
+=from($slice, $no-query: false)
 
-  // If the slices provided are the first and the last one,
-  // the breakpoint becomes meaningless
-  @if ($slice-left == 1) and ($slice-right == total-slices())
-    //Thus, don't wrap the code block with a media query
+  +between(1, $slice, $no-query)
     @content
 
-  @else
 
-    // Retrieving the left edge of the left slice
-    $context:   left-bp-of-slice($slice-left)
+// Wraps the content block provided with a media query
+// with max-width equal to the right edge of a slice
+//
+// to($slice, $no-query: false)
+// - $slice : <slice number> A number of a slice. Should be a positive integer.
+// - $no-query    : [<.class>]     A class to provide the no-query fallback (see Breakpoint docs).
+=to($slice, $no-query: false)
+
+  +between($slice, total-slices(), $no-query)
+    @content
 
-    // Retrieving the right edge of the slice
-    // unless the slice is the last one
-    @if $slice-right < total-slices()
-      $right:   right-bp-of-slice($slice-right)
-      $context: append($context, $right)
 
-    // Setting the breakpoint
-    +breakpoint($context)
-      @content

data/stylesheets/breakpoint-slicer/_variables.sass

@@ -1 +1,2 @@
+// The defaults
 $slicer-breakpoints: 0 400px 600px 800px 1010px !default

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: breakpoint-slicer
 version: !ruby/object:Gem::Version
-  version: '0.1'
+  version: '1.0'
 platform: ruby
 authors:
 - Andrey 'lolmaus' Mikhaylov
@@ -14,42 +14,42 @@ dependencies:
   name: sass
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - '>='
+    - - ! '>='
       - !ruby/object:Gem::Version
         version: 3.2.1
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - '>='
+    - - ! '>='
       - !ruby/object:Gem::Version
         version: 3.2.1
 - !ruby/object:Gem::Dependency
   name: compass
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - '>='
+    - - ! '>='
       - !ruby/object:Gem::Version
         version: 0.12.2
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - '>='
+    - - ! '>='
       - !ruby/object:Gem::Version
         version: 0.12.2
 - !ruby/object:Gem::Dependency
   name: breakpoint
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - '>='
+    - - ! '>='
       - !ruby/object:Gem::Version
         version: 2.0.1
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - '>='
+    - - ! '>='
       - !ruby/object:Gem::Version
         version: 2.0.1
 description: A very quick and efficient syntax for Breakpoint
@@ -61,12 +61,9 @@ extra_rdoc_files: []
 files:
 - lib/breakpoint-slicer.rb
 - stylesheets/breakpoint-slicer/_helper-functions.sass
-- stylesheets/breakpoint-slicer/_variables.sass
 - stylesheets/breakpoint-slicer/_mixins.sass
+- stylesheets/breakpoint-slicer/_variables.sass
 - stylesheets/_breakpoint-slicer.sass
-- demo/config.rb
-- demo/test.html
-- demo/sass/screen.sass
 homepage: https://github.com/lolmaus/breakpoint-slicer
 licenses: []
 metadata: {}
@@ -76,17 +73,17 @@ 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: singularitygs
-rubygems_version: 2.0.0.rc.2
+rubygems_version: 2.0.3
 signing_key: 
 specification_version: 4
 summary: Along with Respond To, Breakpoint Slicer is an alternative syntax for Breakpoint.

data/demo/config.rb

@@ -1,5 +0,0 @@
-require 'breakpoint'
-require 'singularitygs'
-
-css_dir = "css"
-sass_dir = "sass"

data/demo/sass/screen.sass

@@ -1,127 +0,0 @@
-@import breakpoint
-@import ../../stylesheets/breakpoint-slicer
-
-/////////////////////////////////////////
-// Showing the info
-/////////////////////////////////////////
-
-// Showing the breakpoints
-#info-1:after
-  content: "$slicer-breakpoints: #{$slicer-breakpoints}"
-
-// Showing the number of slices
-#info-2:after
-  @for $i from 1 through total-slices()
-    +at($i)
-      content: "This window currently fits #{$i} slices."
-
-
-/////////////////////////////////////////
-// Testing +at
-/////////////////////////////////////////
-
-#at
-  +at(3)
-    background-color: black
-    color: white
-
-
-/////////////////////////////////////////
-// Testing +from
-/////////////////////////////////////////
-
-#from
-  +from(3)
-    background-color: black
-    color: white
-
-
-
-/////////////////////////////////////////
-// Testing +to
-/////////////////////////////////////////
-
-#to
-  +to(3)
-    background-color: black
-    color: white
-
-
-/////////////////////////////////////////
-// Testing +between
-/////////////////////////////////////////
-
-#between
-  +between(2,4)
-    background-color: black
-    color: white
-
-
-
-/////////////////////////////////////////
-// Breakpoint Slicer with Singularity
-/////////////////////////////////////////
-
-// Importing Singularity
-@import compass
-@import singularitygs
-
-// Configuring Singularity with Breakpoint Slicer
-$grids: 1
-@for $i from 2 through total-slices()
-  $grids: add-grid($i at bp($i))
-
-$gutters: 0.2
-
-
-// Enabling the grid background
-#singularity
-  +background-grid
-  +pie-clearfix
-
-
-// Spanning the column
-#singularity .column
-
-  // Showing the text.
-  span:after
-    content: "This column is not spanned."
-
-  // Cycling through slices
-  @for $i from 2 through total-slices()
-
-    // Setting a media query per slice
-    +at($i)
-
-      // Setting the position to be the last-but-one column
-      $position: $i - 1
-
-      // Spanning
-      +grid-span(1, $position)
-
-      // Showing the text.
-      span:after
-        content: "+at(#{$i})\A  +grid-span(1, #{$position})"
-
-
-
-/////////////////////////////////////////
-// Styling
-/////////////////////////////////////////
-*
-  +box-sizing(border-box)
-
-p
-  margin-bottom: 1em
-
-h2
-  margin-top: 2em
-
-.demo
-  p, .column
-    font-family: monospace
-    border: 1px solid black
-    background-color: lightgrey
-    padding: 1em
-
-

data/demo/test.html

@@ -1,40 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <title>Breakpoint Slicer test</title>
-  <link rel=stylesheet href=css/screen.css>
-</head>
-<body>
-
-<h1>Breakpoint Slicer demo</h1>
-
-<p>Please play with browser window width.</p>
-<p id=info-1></p>
-<p id=info-2></p>
-
-
-<h2>Testing mixins</h2>
-
-<p>The default color of each paragraph is light grey.
-   Breakpoint Slicer is used to change the color to black at certain window widths.</p>
-
-<section class=demo>
-  <p id=at>+at(3)<br>&nbsp;&nbsp;background-color: black</p>
-  <p id=from>+from(3)<br>&nbsp;&nbsp;background-color: black</p>
-  <p id=to>+to(3)<br>&nbsp;&nbsp;background-color: black</p>
-  <p id=between>+between(2, 4)<br>&nbsp;&nbsp;background-color: black</p>
-</section>
-
-<h2>Testing Breakpoint Slicer with Singularity</h2>
-
-<p>Breakpoint Slicer is used to set Singularity's breakpoints and to span the column.</p>
-
-<section class=demo>
-  <div id=singularity>
-    <div class=column><pre><span></span></pre></div>
-  </div>
-</section>
-
-
-</body>
-</html>