responsive-sass 0.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- data/.gitignore +5 -0
- data/Gemfile +4 -0
- data/README.mkdn +66 -0
- data/Rakefile +1 -0
- data/lib/responsive-sass/version.rb +5 -0
- data/lib/responsive-sass.rb +4 -0
- data/responsive-sass.gemspec +30 -0
- data/stylesheets/_responsive-sass.scss +54 -0
- metadata +101 -0
data/.gitignore
ADDED
data/Gemfile
ADDED
data/README.mkdn
ADDED
@@ -0,0 +1,66 @@
|
|
1
|
+
Responsive Sass - Compass plugin
|
2
|
+
====================
|
3
|
+
|
4
|
+
Responsive Sass mixins currently supports background image resizing, killing mobile zoom and work in all modern browsers with pure CSS. Additional support
|
5
|
+
for Internet Explorer and older browsers is made possible with a small amount
|
6
|
+
of JavaScript using [Respond](http://github.com/scottjehl/Respond).
|
7
|
+
|
8
|
+
|
9
|
+
Installation
|
10
|
+
============
|
11
|
+
|
12
|
+
From the command line:
|
13
|
+
|
14
|
+
gem install responsive-sass
|
15
|
+
|
16
|
+
Add to a project:
|
17
|
+
|
18
|
+
// rails: your.scss
|
19
|
+
@import 'responsive-sass'
|
20
|
+
|
21
|
+
// command line
|
22
|
+
compass install responsive-sass
|
23
|
+
|
24
|
+
Or create a new project:
|
25
|
+
|
26
|
+
compass -r responsive-sass -f responsive-sass project_directory
|
27
|
+
|
28
|
+
Mixins:
|
29
|
+
======
|
30
|
+
|
31
|
+
Note: Setting your elements height is not required.
|
32
|
+
|
33
|
+
* min-width-960
|
34
|
+
|
35
|
+
@include min-width-960($width, $height);
|
36
|
+
|
37
|
+
* tablet-portrait
|
38
|
+
|
39
|
+
@include tablet-portrait($width, $height);
|
40
|
+
|
41
|
+
* tablet-landscape
|
42
|
+
|
43
|
+
@include tablet-landscape($width, $height);
|
44
|
+
|
45
|
+
* mobile-landscape
|
46
|
+
|
47
|
+
@include mobile-landscape($width, $height);
|
48
|
+
|
49
|
+
* mobile-portrait
|
50
|
+
|
51
|
+
@include mobile-portrait($width, $height);
|
52
|
+
|
53
|
+
* high-res
|
54
|
+
|
55
|
+
@include high-res($width, $height);
|
56
|
+
|
57
|
+
* kill-mobile-zoom
|
58
|
+
|
59
|
+
@include kill-mobile-zoom;
|
60
|
+
|
61
|
+
License:
|
62
|
+
=======
|
63
|
+
Copyright (c) 2011 Nick Treadway
|
64
|
+
All Rights Reserved.
|
65
|
+
|
66
|
+
Licensed under the [MIT license] (http://www.opensource.org/licenses/mit-license.php)
|
data/Rakefile
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
require "bundler/gem_tasks"
|
@@ -0,0 +1,30 @@
|
|
1
|
+
# -*- encoding: utf-8 -*-
|
2
|
+
$:.push File.expand_path("../lib", __FILE__)
|
3
|
+
require "responsive-sass/version"
|
4
|
+
|
5
|
+
Gem::Specification.new do |s|
|
6
|
+
s.name = "responsive-sass"
|
7
|
+
s.version = Responsive::Sass::VERSION
|
8
|
+
s.authors = ["Nick Treadway"]
|
9
|
+
s.email = ["rnt@yeti-media.com"]
|
10
|
+
s.homepage = "http://github.com/ntreadway/responsive-sass"
|
11
|
+
s.summary = %q{Responsive Sass}
|
12
|
+
s.description = %q{Responsive Sass design using media queries for Compass.}
|
13
|
+
|
14
|
+
s.rubyforge_project = "responsive-sass"
|
15
|
+
|
16
|
+
s.files = `git ls-files`.split("\n")
|
17
|
+
s.files += %w(README.mkdn)
|
18
|
+
s.files += Dir.glob("stylesheets/**/*.*")
|
19
|
+
s.test_files = `git ls-files -- {test,spec,features}/*`.split("\n")
|
20
|
+
s.executables = `git ls-files -- bin/*`.split("\n").map{ |f| File.basename(f) }
|
21
|
+
s.require_paths = ["lib"]
|
22
|
+
|
23
|
+
|
24
|
+
s.rubygems_version = %q{1.3.6}
|
25
|
+
s.add_development_dependency("rake")
|
26
|
+
s.add_dependency("compass", [">= 0.11"])
|
27
|
+
# specify any dependencies here; for example:
|
28
|
+
# s.add_development_dependency "rspec"
|
29
|
+
# s.add_runtime_dependency "rest-client"
|
30
|
+
end
|
@@ -0,0 +1,54 @@
|
|
1
|
+
@mixin reponsive-core($width, $height: auto) {
|
2
|
+
width: $width;
|
3
|
+
height: $height;
|
4
|
+
-webkit-background-size: $width auto;
|
5
|
+
-moz-background-size: $width auto;
|
6
|
+
background-size: $width auto !important;
|
7
|
+
|
8
|
+
|
9
|
+
}
|
10
|
+
|
11
|
+
@mixin min-width-960($width, $height){
|
12
|
+
@media only screen and (min-width: 960px) {
|
13
|
+
@include reponsive-core($width, $height);
|
14
|
+
}
|
15
|
+
}
|
16
|
+
|
17
|
+
@mixin tablet-portrait($width, $height) {
|
18
|
+
@media only screen and (min-width: 768px) and (max-width: 959px) {
|
19
|
+
@include reponsive-core($width, $height);
|
20
|
+
}
|
21
|
+
}
|
22
|
+
|
23
|
+
@mixin tablet-landscape($width, $height){
|
24
|
+
@media only screen and (min-width: 1024px) {
|
25
|
+
@include reponsive-core($width, $height);
|
26
|
+
}
|
27
|
+
}
|
28
|
+
|
29
|
+
@mixin mobile-landscape($width, $height) {
|
30
|
+
@media only screen and (min-width: 480px) {
|
31
|
+
@include reponsive-core($width, $height);
|
32
|
+
}
|
33
|
+
}
|
34
|
+
|
35
|
+
@mixin mobile-portrait($width, $height) {
|
36
|
+
@media only screen and (max-width: 479px) {
|
37
|
+
@include reponsive-core($width, $height);
|
38
|
+
}
|
39
|
+
}
|
40
|
+
|
41
|
+
@mixin high-res($width, $height){
|
42
|
+
/* iPhone 4 and other high pixel ratio devices ----------- */
|
43
|
+
@media
|
44
|
+
only screen and (-webkit-min-device-pixel-ratio: 2),
|
45
|
+
only screen and (-o-min-device-pixel-ratio: 3/2),
|
46
|
+
only screen and (min-device-pixel-ratio: 2) {
|
47
|
+
@include reponsive-core($width, $height);
|
48
|
+
}
|
49
|
+
}
|
50
|
+
|
51
|
+
@mixin kill-mobile-zoom {
|
52
|
+
-webkit-text-size-adjust: 100%;
|
53
|
+
-ms-text-size-adjust: none;
|
54
|
+
}
|
metadata
ADDED
@@ -0,0 +1,101 @@
|
|
1
|
+
--- !ruby/object:Gem::Specification
|
2
|
+
name: responsive-sass
|
3
|
+
version: !ruby/object:Gem::Version
|
4
|
+
hash: 29
|
5
|
+
prerelease:
|
6
|
+
segments:
|
7
|
+
- 0
|
8
|
+
- 0
|
9
|
+
- 1
|
10
|
+
version: 0.0.1
|
11
|
+
platform: ruby
|
12
|
+
authors:
|
13
|
+
- Nick Treadway
|
14
|
+
autorequire:
|
15
|
+
bindir: bin
|
16
|
+
cert_chain: []
|
17
|
+
|
18
|
+
date: 2011-08-27 00:00:00 Z
|
19
|
+
dependencies:
|
20
|
+
- !ruby/object:Gem::Dependency
|
21
|
+
type: :development
|
22
|
+
prerelease: false
|
23
|
+
requirement: &id001 !ruby/object:Gem::Requirement
|
24
|
+
none: false
|
25
|
+
requirements:
|
26
|
+
- - ">="
|
27
|
+
- !ruby/object:Gem::Version
|
28
|
+
hash: 3
|
29
|
+
segments:
|
30
|
+
- 0
|
31
|
+
version: "0"
|
32
|
+
version_requirements: *id001
|
33
|
+
name: rake
|
34
|
+
- !ruby/object:Gem::Dependency
|
35
|
+
type: :runtime
|
36
|
+
prerelease: false
|
37
|
+
requirement: &id002 !ruby/object:Gem::Requirement
|
38
|
+
none: false
|
39
|
+
requirements:
|
40
|
+
- - ">="
|
41
|
+
- !ruby/object:Gem::Version
|
42
|
+
hash: 29
|
43
|
+
segments:
|
44
|
+
- 0
|
45
|
+
- 11
|
46
|
+
version: "0.11"
|
47
|
+
version_requirements: *id002
|
48
|
+
name: compass
|
49
|
+
description: Responsive Sass design using media queries for Compass.
|
50
|
+
email:
|
51
|
+
- rnt@yeti-media.com
|
52
|
+
executables: []
|
53
|
+
|
54
|
+
extensions: []
|
55
|
+
|
56
|
+
extra_rdoc_files: []
|
57
|
+
|
58
|
+
files:
|
59
|
+
- .gitignore
|
60
|
+
- Gemfile
|
61
|
+
- README.mkdn
|
62
|
+
- Rakefile
|
63
|
+
- lib/responsive-sass.rb
|
64
|
+
- lib/responsive-sass/version.rb
|
65
|
+
- responsive-sass.gemspec
|
66
|
+
- stylesheets/_responsive-sass.scss
|
67
|
+
homepage: http://github.com/ntreadway/responsive-sass
|
68
|
+
licenses: []
|
69
|
+
|
70
|
+
post_install_message:
|
71
|
+
rdoc_options: []
|
72
|
+
|
73
|
+
require_paths:
|
74
|
+
- lib
|
75
|
+
required_ruby_version: !ruby/object:Gem::Requirement
|
76
|
+
none: false
|
77
|
+
requirements:
|
78
|
+
- - ">="
|
79
|
+
- !ruby/object:Gem::Version
|
80
|
+
hash: 3
|
81
|
+
segments:
|
82
|
+
- 0
|
83
|
+
version: "0"
|
84
|
+
required_rubygems_version: !ruby/object:Gem::Requirement
|
85
|
+
none: false
|
86
|
+
requirements:
|
87
|
+
- - ">="
|
88
|
+
- !ruby/object:Gem::Version
|
89
|
+
hash: 3
|
90
|
+
segments:
|
91
|
+
- 0
|
92
|
+
version: "0"
|
93
|
+
requirements: []
|
94
|
+
|
95
|
+
rubyforge_project: responsive-sass
|
96
|
+
rubygems_version: 1.8.8
|
97
|
+
signing_key:
|
98
|
+
specification_version: 3
|
99
|
+
summary: Responsive Sass
|
100
|
+
test_files: []
|
101
|
+
|