breakup 0.1.0

data/.gitignore

@@ -0,0 +1 @@
+*.gem

data/LICENSE.txt

@@ -0,0 +1,22 @@
+Copyright (c) 2013 Ben Scott
+
+MIT License
+
+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,29 @@
+Breakup
+=======
+
+Breakup is a Sass component that allows you to create multiple CSS files from a
+single Sass partial by wrapping your code within breakpoint blocks. It
+allows you to abstract what your Sass partials folder looks like from what CSS
+files you create. Because of this you can easily create per-breakpoint CSS
+files (e.g. base, mobile, tablet and desktop) and fallback files where no
+styles are wrapped (e.g. for oldIE which does not support media queries).
+
+## Usage Examples
+
+### Single Stylesheet and IE fallback
+
+This example
+
+## TODO
+
+Usage examples and tests coming soon.
+
+
+## Prior Art
+
+The bulk of this project was conceived prior to learning about
+[Jacket](https://github.com/Team-Sass/jacket) and
+[Breakpoint](http://breakpoint-sass.com/). You could do something pretty
+similar by combining the two of them, but I didn't feel like I needed the
+extra overhead.
+

data/breakup.gemspec

@@ -0,0 +1,25 @@
+require './lib/breakup'
+
+Gem::Specification.new do |gem|
+  # Gem Information
+  gem.version = Breakup::VERSION
+  gem.name = 'breakup'
+  gem.authors = ['Ben Scott']
+  gem.email = ['ben@reload.me.uk']
+  gem.description = 'Build multiple stylesheets based off globally defined breakpoints'
+  gem.summary = 'Breakup is a Sass component that allows you to create multiple
+  CSS files from a single Sass partial by wrapping your code within breakpoint
+  blocks. It allows you to abstract what your Sass partials folder looks like
+  from what CSS files you create. Because of this you can easily create per-
+  breakpoint CSS files (e.g. base, mobile, tablet and desktop) and fallback
+  files where no styles are wrapped (e.g. for oldIE which does not support media
+  queries).'
+  gem.homepage = 'http://github.com/bpscott/breakup'
+
+  # Gem Files
+  gem.files = `git ls-files`.split($/)
+
+  # Dependencies
+  gem.add_dependency 'sass',    '>=3.2.0'
+  gem.add_dependency 'compass', '>= 0.12.2'
+end

data/lib/breakup.rb

@@ -0,0 +1,8 @@
+require 'compass'
+extension_path = File.expand_path(File.join(File.dirname(__FILE__), ".."))
+Compass::Frameworks.register('breakup', :path => extension_path)
+
+module Breakup
+  VERSION = "0.1.0"
+end
+

data/stylesheets/_breakup.scss

@@ -0,0 +1,141 @@
+//////////////////////////////////////////////////////////////////
+// Breakup
+//
+// A tool for defining breakpoints and conditionally loading them.
+//////////////////////////////////////////////////////////////////
+
+/**
+ * Global Variables
+ *
+ * $breakup-breakpoints: List of many named breakpoints that can be called with
+ *     breakup-breakpoint. Each breakpoint is a containing the breakpoint name,
+ *     the media query it describes and if this breakpoint should be included
+ *     when $breakup-naked is true (by default this is false). Example:
+ *
+ *     $breakup-breakpoints: (
+ *       'palm' '(max-width: 480px)',
+ *       'lap' '(min-width: 481px) and (max-width: 1023px)',
+ *       'portable' '(max-width: 1023px)',
+ *       'desk' '(min-width: 1024px)' 'allow-naked'
+ *     );
+ *
+ *
+ * $breakup-included-blocks: A list of blocks to render in your stylesheet
+ *
+ *
+ * $breakup-naked: Should breakpoint/tweakpoint blocks be wrapped in an @media
+ *     declaration? You should set this to true within stylesheets for browsers
+ *     which don't support @media, such as oldIE.
+ */
+$breakup-breakpoints: () !default;
+$breakup-included-blocks: () !default;
+$breakup-naked: false !default;
+
+
+/**
+ * Search a list of lists ($haystack) for value ($needle) at a given position
+ * ($offset). Returns that item in the list, or false if not found.
+ *
+ * Example:
+ *  list-key-search((
+ *    ('key1' 'value1'),
+ *    ('key2' 'value2')
+ *  ), 'key1', 1) => (key1 value1)
+ */
+@function breakup-list-key-search($haystack, $needle, $offset: 1) {
+    @each $haystack-item in $haystack {
+        @if $needle == nth($haystack-item, $offset) {
+            @return $haystack-item;
+        }
+    }
+
+    @return false;
+}
+
+
+/**
+ * Wrapper around a @media block. if $breakup-naked is true then the
+ * content is output directly if the declaration has been marked as a fallback
+ * breakpoint.
+ *
+ * $declaration:    A @media declaration to wrap the content block in.
+ * $allow-naked:    Should this content should be rendered if the we are
+ *                    displaying naked content (i.e. not wrapped in a media
+ *                    query).
+ */
+@mixin breakup-media($declaration, $allow-naked: false) {
+    @if not $breakup-naked {
+        @media #{$declaration} {
+            @content;
+        }
+    }
+    @else {
+        // If we are outputting naked content, only items with $allow-naked
+        // shall be rendered
+        @if $allow-naked == true or $allow-naked == 'allow-naked' {
+            @content;
+        }
+    }
+}
+
+
+/**
+ * Include a block in the page if it is included in within
+ * $breakup-included-blocks
+ *
+ * $block-name:     The block name to render
+ */
+@mixin breakup-block($block-name) {
+    @if index($breakup-included-blocks, $block-name) != false {
+        @content;
+    }
+}
+
+
+/**
+ * Look up a named breakpoint from $breakup-breakpoints, and wrap it in a block
+ * so that it only appears if it is in the current stylesheet's
+ * $breakup-included-blocks.
+ *
+ * $breakpoint-name:     The breakpoint name to render
+ */
+@mixin breakup-breakpoint($breakpoint-name) {
+    $breakpoint: breakup-list-key-search($breakup-breakpoints, $breakpoint-name, 1);
+
+    @if $breakpoint {
+        // pad the breakpoints array so that the final value is optional
+        $breakpoint: append($breakpoint, false);
+
+        $declaration: nth($breakpoint, 2);
+        $allow-naked: nth($breakpoint, 3);
+
+        // For breakpoints, the block name is the same as the breakpoint name
+        @include breakup-block($breakpoint-name) {
+            @include breakup-media($declaration, $allow-naked) {
+                @content;
+            }
+        }
+    }
+    @else {
+        @warn "Breakpoint '#{$breakpoint-name}' does not exist";
+    }
+}
+
+
+/**
+ * Create an unnamed tweakpoint and wrap it in a block so that it only appears
+ * if it is in the current stylesheet's $breakup-included-blocks.
+ *
+ * $declaration:    A media query that the content shall be wrapped in
+ * $block-name:     The block name to display
+ * $allow-naked:    Should this content should be rendered if the we are
+ *                    displaying naked content (i.e. not wrapped in a media
+ *                    query).
+ */
+@mixin breakup-tweakpoint($declaration, $block-name, $allow-naked: false) {
+    @include breakup-block($block-name) {
+        @include breakup-media($declaration, $allow-naked) {
+            @content;
+        }
+    }
+}

metadata

@@ -0,0 +1,88 @@
+--- !ruby/object:Gem::Specification
+name: breakup
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+  prerelease: 
+platform: ruby
+authors:
+- Ben Scott
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2013-05-07 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: sass
+  requirement: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: 3.2.0
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: 3.2.0
+- !ruby/object:Gem::Dependency
+  name: compass
+  requirement: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: 0.12.2
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: 0.12.2
+description: Build multiple stylesheets based off globally defined breakpoints
+email:
+- ben@reload.me.uk
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- .gitignore
+- LICENSE.txt
+- README.md
+- breakup.gemspec
+- lib/breakup.rb
+- stylesheets/_breakup.scss
+homepage: http://github.com/bpscott/breakup
+licenses: []
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  none: false
+  requirements:
+  - - ! '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  none: false
+  requirements:
+  - - ! '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: 
+rubygems_version: 1.8.23
+signing_key: 
+specification_version: 3
+summary: Breakup is a Sass component that allows you to create multiple CSS files
+  from a single Sass partial by wrapping your code within breakpoint blocks. It allows
+  you to abstract what your Sass partials folder looks like from what CSS files you
+  create. Because of this you can easily create per-breakpoint CSS files (e.g. base,
+  mobile, tablet and desktop) and fallback files where no styles are wrapped (e.g.
+  for oldIE which does not support media queries).
+test_files: []