initial commit

CHANGELOG.markdown

@@ -0,0 +1,4 @@
+# Changelog
+
+## 0.1 - May 22, 2012
+* extract breakpoint from ssurvival kit to this gem

README.markdown

@@ -0,0 +1,153 @@
+# Breakpoint #
+
+**Really simple media queries in Sass**
+
+
+## Setup
+
+```sass
+// create $breakpoint variables like so
+// assume $breakpoint-default-feature if only a number
+$breakpoint1: 500px
+$breakpoint2: 30em
+// set min-width/max-width if both values are numbers
+$breakpoint3: 500px 700px
+// if one value is a string, assume a feature/value pair
+$breakpoint4: min-width 700px
+$breakpoint5: max-width 700px
+// for multidimensional lists, assume each item is a feature value pair
+$breakpoint6: max-width 700px, orientation portrait
+// handle one-sided features (ie. monochrome)
+$breakpoint7: max-width 700px, orientation portrait, monochrome
+$breakpoint8: monochrome
+```
+
+
+## Using Breakpoint
+
+Call the mixin and pass one of your breakpoint variables. You can also call it with a la carte arguments.
+
+```sass
+.foo
+ +breakpoint($breakpoint1)
+ content: 'foo'
+.bar
+ +breakpoint($breakpoint2)
+ content: 'bar'
+.baz
+ +breakpoint($breakpoint3)
+ content: 'baz'
+.omg
+ +breakpoint($breakpoint4)
+ content: 'omg'
+.wtf
+ +breakpoint($breakpoint5)
+ content: 'wtf'
+.bbq
+ +breakpoint($breakpoint6)
+ content: 'bbq'
+.zztop
+ +breakpoint($breakpoint7)
+ content: 'zztop'
+.elp
+ +breakpoint($breakpoint1, print)
+ content: 'elp'
+.csny
+ +breakpoint($breakpoint8)
+ content: 'csny'
+.rhcp
+ +breakpoint(30em 40em)
+ content: 'rhcp'
+```
+
+Example generated CSS
+
+```css
+@media screen and (min-width: 500px) {
+ .foo {
+ content: "foo";
+ }
+}
+
+@media screen and (min-width: 30em) {
+ .bar {
+ content: "bar";
+ }
+}
+
+@media screen and (min-width: 500px) and (max-width: 700px) {
+ .baz {
+ content: "baz";
+ }
+}
+
+@media screen and (min-width: 700px) {
+ .omg {
+ content: "omg";
+ }
+}
+
+@media screen and (max-width: 700px) {
+ .wtf {
+ content: "wtf";
+ }
+}
+
+@media screen and (max-width: 700px) and (orientation: portrait) {
+ .bbq {
+ content: "bbq";
+ }
+}
+
+@media screen and (max-width: 700px) and (orientation: portrait) and (monochrome) {
+ .zztop {
+ content: "zztop";
+ }
+}
+
+@media print and (min-width: 500px) {
+ .elp {
+ content: "elp";
+ }
+}
+
+@media screen and (monochrome) {
+ .csny {
+ content: "csny";
+ }
+}
+
+@media screen and (min-width: 30em) and (max-width: 40em) {
+ .rhcp {
+ content: "rhcp";
+ }
+}
+```
+
+### Installation
+
+ 0. [Install Sass and Compass](http:https://compass-style.org/install/), if you haven't already.
+ 1. **Terminal**: `gem install breakpoint`
+ 2. Add `require 'breakpoint'` in Compass's config.rb file
+
+
+
+
+## Requirements
+
+- [Sass](http:https://sass-lang.com/)
+- [Compass](http:https://compass-style.org/)
+
+
+
+
+## License
+
+Licensed under MIT/GPL.
+
+GPL license:
+http:https://www.gnu.org/licenses/gpl.html
+
+MIT license:
+http:https://www.opensource.org/licenses/mit-license.php
+

breakpoint.gemspec

@@ -0,0 +1,26 @@
+require './lib/breakpoint'
+
+Gem::Specification.new do |s|
+ # Release Specific Information
+ s.version = SurvivalKit::VERSION
+ s.date = SurvivalKit::DATE
+
+ # Gem Details
+ s.name = "breakpoint"
+ s.description = %q{Really simple media queries in Sass}
+ s.summary = %q{An easy to use system for writing and managing media queries.}
+ s.authors = ["Mason Wendell"]
+ s.email = ["[email protected]"]
+ s.homepage = "http:https://thecodingdesigner.com"
+
+ # Gem Files
+ s.files = ["README.markdown"]
+ s.files += ["CHANGELOG.markdown"]
+ s.files += Dir.glob("lib/**/*.*")
+ s.files += Dir.glob("stylesheets/**/*.*")
+
+ # Gem Bookkeeping
+ s.required_rubygems_version = ">= 1.3.6"
+ s.rubygems_version = %q{1.3.6}
+ s.add_dependency("compass", [">= 0.12.1"])
+end

lib/breakpoint.rb

@@ -0,0 +1,9 @@
+require 'compass'
+Compass::Frameworks.register("breakpoint", :path => "#{File.dirname(__FILE__)}/..")
+
+module Breakpoint
+
+ VERSION = "0.1"
+ DATE = "2012-05-22"
+
+end

stylesheets/_breakpoint.sass

@@ -0,0 +1,68 @@
+// experimental - depends on Sass 3.2 or higher
+ define your own breakpoints
+ styles nested in the mixin will pass thru in @content
+ resist the urge to settle on common device sizes
+ http:https://marcdrummond.com/responsive-web-design/2011/12/29/default-breakpoints-are-dead
+
+
+////////////////////////////
+// SURVIVAL KIT - BREAKPOINT
+// breakpoint($breakpoint, $media: 'screen')
+//
+// // create $breakpoint variables like so
+// // assume $breakpoint-default-feature if only a number
+// $breakpoint1: 500px
+// $breakpoint2: 30em
+// // set min-width/max-width if both values are numbers
+// $breakpoint3: 500px 700px
+// // if one value is a string, assume a feature/value pair
+// $breakpoint4: min-width 700px
+// $breakpoint5: max-width 700px
+// // for multidimensional lists, assume each item is a feature/value pair
+// $breakpoint6: max-width 700px, orientation portrait
+// // handle one-sided features (ie. monochrome)
+// $breakpoint7: max-width 700px, orientation portrait, monochrome
+// $breakpoint8: monochrome
+////////////////////////////
+
+$breakpoint-default-feature: min-width !default
+
+@function breakpoint-concatenate($query-string, $new-value, $feature: $breakpoint-default-feature)
+ $new-string: ''
+ @if $feature != false
+ $new-string: #{$query-string}unquote("and (#{$feature}: #{$new-value}) ")
+ @else
+ $new-string: #{$query-string}unquote("and (#{$new-value}) ")
+ @return $new-string
+
+=breakpoint($breakpoint, $media: 'screen')
+ // initialize string
+ $query-string: '#{$media} '
+ @if type-of($breakpoint) == number
+ // assume max-width if only a number
+ $query-string: breakpoint-concatenate($query-string, $breakpoint)
+ @if type-of($breakpoint) == string
+ // handle one-sided features (ie. monochrome)
+ $query-string: breakpoint-concatenate($query-string, $breakpoint, false)
+ @else if type-of($breakpoint) == list
+ @if (type-of(nth($breakpoint, 1)) == number) and (type-of(nth($breakpoint, 2)) == number)
+ // set min/max if both values are numbers
+ // @if $modular-scale-loaded == true
+ // $breakpoint: sort-list($breakpoint)
+ $query-string: breakpoint-concatenate($query-string, nth($breakpoint, 1), 'min-width')
+ $query-string: breakpoint-concatenate($query-string, nth($breakpoint, 2), 'max-width')
+ @else if (type-of(nth($breakpoint, 1)) == string)
+ // if one value is a string, assume a feature/value pair
+ $query-string: breakpoint-concatenate($query-string, nth($breakpoint, 2), nth($breakpoint, 1))
+ @else if (type-of(nth($breakpoint, 1)) == list)
+ // for multidimensional lists, assume each item is a feature value pair
+ @each $item in $breakpoint
+ @if type-of($item) == list
+ // $query-string: #{$query-string}unquote("and (#{nth($item, 1)}: #{nth($item, 2)}) ")
+ $query-string: breakpoint-concatenate($query-string, nth($item, 2), nth($item, 1))
+ @else
+ // handle one-sided features (ie. monochrome)
+ $query-string: breakpoint-concatenate($query-string, $item, false)
+ // write out the media query
+ @media #{$query-string}
+ @content

test/.gitignore

@@ -0,0 +1,25 @@
+## MAC OS
+.DS_Store
+
+## TEXTMATE
+*.tmproj
+tmtags
+
+## EMACS
+*~
+\#*
+.\#*
+
+## VIM
+*.swp
+
+## PROJECT::GENERAL
+.sass-cache
+coverage
+rdoc
+pkg
+
+## PROJECT::SPECIFIC
+*.gem
+.rvmrc
+.bundle

test/Gemfile

@@ -0,0 +1,27 @@
+source :rubygems
+
+gem 'serve', '1.5.1'
+
+# Use edge instead:
+# gem 'serve', :git => 'git:https://github.com/jlong/serve.git'
+
+# Use Compass and Sass
+gem 'compass'
+
+# Markdown and Textile
+# gem 'rdiscount' # Markdown
+# gem 'RedCloth' # Textile
+gem 'maruku'
+
+# Other templating languages
+# gem 'erubis'
+gem 'haml'
+# gem 'slim'
+# gem 'radius'
+# gem 'less'
+
+# Coffee Script
+# gem 'coffee-script'
+
+# Use mongrel for the Web server
+# gem 'mongrel'

test/Gemfile.lock

@@ -0,0 +1,40 @@
+GEM
+ remote: http:https://rubygems.org/
+ specs:
+ activesupport (3.2.3)
+ i18n (~> 0.6)
+ multi_json (~> 1.0)
+ chunky_png (1.2.5)
+ compass (0.13.alpha.0)
+ chunky_png (~> 1.2)
+ fssm (>= 0.2.7)
+ sass (~> 3.2.0.alpha.93)
+ fssm (0.2.9)
+ haml (3.1.6)
+ i18n (0.6.0)
+ maruku (0.6.0)
+ syntax (>= 1.0.0)
+ multi_json (1.3.5)
+ rack (1.4.1)
+ rack-test (0.6.1)
+ rack (>= 1.0)
+ sass (3.2.0.alpha.237)
+ serve (1.5.1)
+ activesupport (~> 3.0)
+ i18n
+ rack (~> 1.2)
+ rack-test (~> 0.5)
+ tilt (~> 1.3)
+ tzinfo
+ syntax (1.0.0)
+ tilt (1.3.3)
+ tzinfo (0.3.33)
+
+PLATFORMS
+ ruby
+
+DEPENDENCIES
+ compass
+ haml
+ maruku
+ serve (= 1.5.1)

test/config.rb

@@ -0,0 +1,30 @@
+#
+# Compass Configuration
+#
+
+# HTTP paths
+# http_path = '/'
+# http_stylesheets_path = '/stylesheets'
+# http_images_path = '/images'
+# http_javascripts_path = '/js'
+
+# File system locations
+sass_dir = 'sass'
+add_import_path '../stylesheets'
+css_dir = 'public/css'
+images_dir = 'public/images'
+javascripts_dir = 'public/js'
+
+# Set to true for easier debugging
+line_comments = false
+preferred_syntax = :sass
+
+# CSS output style - :nested, :expanded, :compact, or :compressed
+output_style = :expanded
+
+# Determine whether Compass asset helper functions generate relative
+# or absolute paths
+relative_assets = true
+
+# Learn more:
+# http:https://compass-style.org/docs/tutorials/configuration-reference/