breakup 0.1.0 → 0.2.0
Sign up to get free protection for your applications and to get access to all the features.
- data/README.md +0 -6
- data/breakup.gemspec +5 -2
- data/lib/breakup.rb +2 -5
- data/lib/breakup/version.rb +3 -0
- data/stylesheets/_breakup.scss +19 -9
- metadata +4 -2
data/README.md
CHANGED
@@ -8,11 +8,6 @@ files you create. Because of this you can easily create per-breakpoint CSS
|
|
8
8
|
files (e.g. base, mobile, tablet and desktop) and fallback files where no
|
9
9
|
styles are wrapped (e.g. for oldIE which does not support media queries).
|
10
10
|
|
11
|
-
## Usage Examples
|
12
|
-
|
13
|
-
### Single Stylesheet and IE fallback
|
14
|
-
|
15
|
-
This example
|
16
11
|
|
17
12
|
## TODO
|
18
13
|
|
@@ -26,4 +21,3 @@ The bulk of this project was conceived prior to learning about
|
|
26
21
|
[Breakpoint](http://breakpoint-sass.com/). You could do something pretty
|
27
22
|
similar by combining the two of them, but I didn't feel like I needed the
|
28
23
|
extra overhead.
|
29
|
-
|
data/breakup.gemspec
CHANGED
@@ -1,9 +1,12 @@
|
|
1
|
-
|
1
|
+
# -*- encoding: utf-8 -*-
|
2
|
+
lib = File.expand_path('../lib', __FILE__)
|
3
|
+
$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
|
4
|
+
require 'breakup/version'
|
2
5
|
|
3
6
|
Gem::Specification.new do |gem|
|
4
7
|
# Gem Information
|
5
|
-
gem.version = Breakup::VERSION
|
6
8
|
gem.name = 'breakup'
|
9
|
+
gem.version = Breakup::VERSION
|
7
10
|
gem.authors = ['Ben Scott']
|
8
11
|
gem.email = ['ben@reload.me.uk']
|
9
12
|
gem.description = 'Build multiple stylesheets based off globally defined breakpoints'
|
data/lib/breakup.rb
CHANGED
data/stylesheets/_breakup.scss
CHANGED
@@ -8,15 +8,14 @@
|
|
8
8
|
* Global Variables
|
9
9
|
*
|
10
10
|
* $breakup-breakpoints: List of many named breakpoints that can be called with
|
11
|
-
* breakup-breakpoint. Each breakpoint is a containing the breakpoint
|
12
|
-
* the media query it describes
|
13
|
-
* when $breakup-naked is true (by default this is false). Example:
|
11
|
+
* breakup-breakpoint. Each breakpoint is a list containing the breakpoint
|
12
|
+
* name and the media query it describes. Example:
|
14
13
|
*
|
15
14
|
* $breakup-breakpoints: (
|
16
15
|
* 'palm' '(max-width: 480px)',
|
17
16
|
* 'lap' '(min-width: 481px) and (max-width: 1023px)',
|
18
17
|
* 'portable' '(max-width: 1023px)',
|
19
|
-
* 'desk' '(min-width: 1024px)'
|
18
|
+
* 'desk' '(min-width: 1024px)'
|
20
19
|
* );
|
21
20
|
*
|
22
21
|
*
|
@@ -26,11 +25,17 @@
|
|
26
25
|
* $breakup-naked: Should breakpoint/tweakpoint blocks be wrapped in an @media
|
27
26
|
* declaration? You should set this to true within stylesheets for browsers
|
28
27
|
* which don't support @media, such as oldIE.
|
28
|
+
*
|
29
|
+
*
|
30
|
+
* $breakup-allow-naked: List of named breakpoints and if they should be output
|
31
|
+
* when $breakup-naked is true (by default this is false). This is separate
|
32
|
+
* to $breakup-breakpoints because you may want to configure what
|
33
|
+
* breakpoints are unwrapped on a per stylesheet basis.
|
29
34
|
*/
|
30
35
|
$breakup-breakpoints: () !default;
|
31
36
|
$breakup-included-blocks: () !default;
|
32
37
|
$breakup-naked: false !default;
|
33
|
-
|
38
|
+
$breakup-breakpoints-allow-naked: () !default;
|
34
39
|
|
35
40
|
/**
|
36
41
|
* Search a list of lists ($haystack) for value ($needle) at a given position
|
@@ -103,11 +108,16 @@ $breakup-naked: false !default;
|
|
103
108
|
$breakpoint: breakup-list-key-search($breakup-breakpoints, $breakpoint-name, 1);
|
104
109
|
|
105
110
|
@if $breakpoint {
|
106
|
-
// pad the breakpoints array so that the final value is optional
|
107
|
-
$breakpoint: append($breakpoint, false);
|
108
|
-
|
109
111
|
$declaration: nth($breakpoint, 2);
|
110
|
-
|
112
|
+
|
113
|
+
// Handle Sass treating a list containing a single item as a single item
|
114
|
+
$allow-naked-list: $breakup-breakpoints-allow-naked;
|
115
|
+
@if length($allow-naked-list) == 1 {
|
116
|
+
$allow-naked-list: $breakup-breakpoints-allow-naked, null;
|
117
|
+
}
|
118
|
+
|
119
|
+
$allow-naked: index($allow-naked-list, $breakpoint-name) != false;
|
120
|
+
|
111
121
|
|
112
122
|
// For breakpoints, the block name is the same as the breakpoint name
|
113
123
|
@include breakup-block($breakpoint-name) {
|
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: breakup
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.
|
4
|
+
version: 0.2.0
|
5
5
|
prerelease:
|
6
6
|
platform: ruby
|
7
7
|
authors:
|
@@ -9,7 +9,7 @@ authors:
|
|
9
9
|
autorequire:
|
10
10
|
bindir: bin
|
11
11
|
cert_chain: []
|
12
|
-
date: 2013-05-
|
12
|
+
date: 2013-05-08 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: sass
|
@@ -55,6 +55,7 @@ files:
|
|
55
55
|
- README.md
|
56
56
|
- breakup.gemspec
|
57
57
|
- lib/breakup.rb
|
58
|
+
- lib/breakup/version.rb
|
58
59
|
- stylesheets/_breakup.scss
|
59
60
|
homepage: http://github.com/bpscott/breakup
|
60
61
|
licenses: []
|
@@ -86,3 +87,4 @@ summary: Breakup is a Sass component that allows you to create multiple CSS file
|
|
86
87
|
mobile, tablet and desktop) and fallback files where no styles are wrapped (e.g.
|
87
88
|
for oldIE which does not support media queries).
|
88
89
|
test_files: []
|
90
|
+
has_rdoc:
|