breakup 0.1.0
Sign up to get free protection for your applications and to get access to all the features.
- data/.gitignore +1 -0
- data/LICENSE.txt +22 -0
- data/README.md +29 -0
- data/breakup.gemspec +25 -0
- data/lib/breakup.rb +8 -0
- data/stylesheets/_breakup.scss +141 -0
- metadata +88 -0
data/.gitignore
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
*.gem
|
data/LICENSE.txt
ADDED
@@ -0,0 +1,22 @@
|
|
1
|
+
Copyright (c) 2013 Ben Scott
|
2
|
+
|
3
|
+
MIT License
|
4
|
+
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining
|
6
|
+
a copy of this software and associated documentation files (the
|
7
|
+
"Software"), to deal in the Software without restriction, including
|
8
|
+
without limitation the rights to use, copy, modify, merge, publish,
|
9
|
+
distribute, sublicense, and/or sell copies of the Software, and to
|
10
|
+
permit persons to whom the Software is furnished to do so, subject to
|
11
|
+
the following conditions:
|
12
|
+
|
13
|
+
The above copyright notice and this permission notice shall be
|
14
|
+
included in all copies or substantial portions of the Software.
|
15
|
+
|
16
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
17
|
+
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
18
|
+
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
19
|
+
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
|
20
|
+
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
|
21
|
+
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
|
22
|
+
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
data/README.md
ADDED
@@ -0,0 +1,29 @@
|
|
1
|
+
Breakup
|
2
|
+
=======
|
3
|
+
|
4
|
+
Breakup is a Sass component that allows you to create multiple CSS files from a
|
5
|
+
single Sass partial by wrapping your code within breakpoint blocks. It
|
6
|
+
allows you to abstract what your Sass partials folder looks like from what CSS
|
7
|
+
files you create. Because of this you can easily create per-breakpoint CSS
|
8
|
+
files (e.g. base, mobile, tablet and desktop) and fallback files where no
|
9
|
+
styles are wrapped (e.g. for oldIE which does not support media queries).
|
10
|
+
|
11
|
+
## Usage Examples
|
12
|
+
|
13
|
+
### Single Stylesheet and IE fallback
|
14
|
+
|
15
|
+
This example
|
16
|
+
|
17
|
+
## TODO
|
18
|
+
|
19
|
+
Usage examples and tests coming soon.
|
20
|
+
|
21
|
+
|
22
|
+
## Prior Art
|
23
|
+
|
24
|
+
The bulk of this project was conceived prior to learning about
|
25
|
+
[Jacket](https://github.com/Team-Sass/jacket) and
|
26
|
+
[Breakpoint](http://breakpoint-sass.com/). You could do something pretty
|
27
|
+
similar by combining the two of them, but I didn't feel like I needed the
|
28
|
+
extra overhead.
|
29
|
+
|
data/breakup.gemspec
ADDED
@@ -0,0 +1,25 @@
|
|
1
|
+
require './lib/breakup'
|
2
|
+
|
3
|
+
Gem::Specification.new do |gem|
|
4
|
+
# Gem Information
|
5
|
+
gem.version = Breakup::VERSION
|
6
|
+
gem.name = 'breakup'
|
7
|
+
gem.authors = ['Ben Scott']
|
8
|
+
gem.email = ['ben@reload.me.uk']
|
9
|
+
gem.description = 'Build multiple stylesheets based off globally defined breakpoints'
|
10
|
+
gem.summary = 'Breakup is a Sass component that allows you to create multiple
|
11
|
+
CSS files from a single Sass partial by wrapping your code within breakpoint
|
12
|
+
blocks. It allows you to abstract what your Sass partials folder looks like
|
13
|
+
from what CSS files you create. Because of this you can easily create per-
|
14
|
+
breakpoint CSS files (e.g. base, mobile, tablet and desktop) and fallback
|
15
|
+
files where no styles are wrapped (e.g. for oldIE which does not support media
|
16
|
+
queries).'
|
17
|
+
gem.homepage = 'http://github.com/bpscott/breakup'
|
18
|
+
|
19
|
+
# Gem Files
|
20
|
+
gem.files = `git ls-files`.split($/)
|
21
|
+
|
22
|
+
# Dependencies
|
23
|
+
gem.add_dependency 'sass', '>=3.2.0'
|
24
|
+
gem.add_dependency 'compass', '>= 0.12.2'
|
25
|
+
end
|
data/lib/breakup.rb
ADDED
@@ -0,0 +1,141 @@
|
|
1
|
+
//////////////////////////////////////////////////////////////////
|
2
|
+
// Breakup
|
3
|
+
//
|
4
|
+
// A tool for defining breakpoints and conditionally loading them.
|
5
|
+
//////////////////////////////////////////////////////////////////
|
6
|
+
|
7
|
+
/**
|
8
|
+
* Global Variables
|
9
|
+
*
|
10
|
+
* $breakup-breakpoints: List of many named breakpoints that can be called with
|
11
|
+
* breakup-breakpoint. Each breakpoint is a containing the breakpoint name,
|
12
|
+
* the media query it describes and if this breakpoint should be included
|
13
|
+
* when $breakup-naked is true (by default this is false). Example:
|
14
|
+
*
|
15
|
+
* $breakup-breakpoints: (
|
16
|
+
* 'palm' '(max-width: 480px)',
|
17
|
+
* 'lap' '(min-width: 481px) and (max-width: 1023px)',
|
18
|
+
* 'portable' '(max-width: 1023px)',
|
19
|
+
* 'desk' '(min-width: 1024px)' 'allow-naked'
|
20
|
+
* );
|
21
|
+
*
|
22
|
+
*
|
23
|
+
* $breakup-included-blocks: A list of blocks to render in your stylesheet
|
24
|
+
*
|
25
|
+
*
|
26
|
+
* $breakup-naked: Should breakpoint/tweakpoint blocks be wrapped in an @media
|
27
|
+
* declaration? You should set this to true within stylesheets for browsers
|
28
|
+
* which don't support @media, such as oldIE.
|
29
|
+
*/
|
30
|
+
$breakup-breakpoints: () !default;
|
31
|
+
$breakup-included-blocks: () !default;
|
32
|
+
$breakup-naked: false !default;
|
33
|
+
|
34
|
+
|
35
|
+
/**
|
36
|
+
* Search a list of lists ($haystack) for value ($needle) at a given position
|
37
|
+
* ($offset). Returns that item in the list, or false if not found.
|
38
|
+
*
|
39
|
+
* Example:
|
40
|
+
* list-key-search((
|
41
|
+
* ('key1' 'value1'),
|
42
|
+
* ('key2' 'value2')
|
43
|
+
* ), 'key1', 1) => (key1 value1)
|
44
|
+
*/
|
45
|
+
@function breakup-list-key-search($haystack, $needle, $offset: 1) {
|
46
|
+
@each $haystack-item in $haystack {
|
47
|
+
@if $needle == nth($haystack-item, $offset) {
|
48
|
+
@return $haystack-item;
|
49
|
+
}
|
50
|
+
}
|
51
|
+
|
52
|
+
@return false;
|
53
|
+
}
|
54
|
+
|
55
|
+
|
56
|
+
/**
|
57
|
+
* Wrapper around a @media block. if $breakup-naked is true then the
|
58
|
+
* content is output directly if the declaration has been marked as a fallback
|
59
|
+
* breakpoint.
|
60
|
+
*
|
61
|
+
* $declaration: A @media declaration to wrap the content block in.
|
62
|
+
* $allow-naked: Should this content should be rendered if the we are
|
63
|
+
* displaying naked content (i.e. not wrapped in a media
|
64
|
+
* query).
|
65
|
+
*/
|
66
|
+
@mixin breakup-media($declaration, $allow-naked: false) {
|
67
|
+
@if not $breakup-naked {
|
68
|
+
@media #{$declaration} {
|
69
|
+
@content;
|
70
|
+
}
|
71
|
+
}
|
72
|
+
@else {
|
73
|
+
// If we are outputting naked content, only items with $allow-naked
|
74
|
+
// shall be rendered
|
75
|
+
@if $allow-naked == true or $allow-naked == 'allow-naked' {
|
76
|
+
@content;
|
77
|
+
}
|
78
|
+
}
|
79
|
+
}
|
80
|
+
|
81
|
+
|
82
|
+
/**
|
83
|
+
* Include a block in the page if it is included in within
|
84
|
+
* $breakup-included-blocks
|
85
|
+
*
|
86
|
+
* $block-name: The block name to render
|
87
|
+
*/
|
88
|
+
@mixin breakup-block($block-name) {
|
89
|
+
@if index($breakup-included-blocks, $block-name) != false {
|
90
|
+
@content;
|
91
|
+
}
|
92
|
+
}
|
93
|
+
|
94
|
+
|
95
|
+
/**
|
96
|
+
* Look up a named breakpoint from $breakup-breakpoints, and wrap it in a block
|
97
|
+
* so that it only appears if it is in the current stylesheet's
|
98
|
+
* $breakup-included-blocks.
|
99
|
+
*
|
100
|
+
* $breakpoint-name: The breakpoint name to render
|
101
|
+
*/
|
102
|
+
@mixin breakup-breakpoint($breakpoint-name) {
|
103
|
+
$breakpoint: breakup-list-key-search($breakup-breakpoints, $breakpoint-name, 1);
|
104
|
+
|
105
|
+
@if $breakpoint {
|
106
|
+
// pad the breakpoints array so that the final value is optional
|
107
|
+
$breakpoint: append($breakpoint, false);
|
108
|
+
|
109
|
+
$declaration: nth($breakpoint, 2);
|
110
|
+
$allow-naked: nth($breakpoint, 3);
|
111
|
+
|
112
|
+
// For breakpoints, the block name is the same as the breakpoint name
|
113
|
+
@include breakup-block($breakpoint-name) {
|
114
|
+
@include breakup-media($declaration, $allow-naked) {
|
115
|
+
@content;
|
116
|
+
}
|
117
|
+
}
|
118
|
+
}
|
119
|
+
@else {
|
120
|
+
@warn "Breakpoint '#{$breakpoint-name}' does not exist";
|
121
|
+
}
|
122
|
+
}
|
123
|
+
|
124
|
+
|
125
|
+
/**
|
126
|
+
* Create an unnamed tweakpoint and wrap it in a block so that it only appears
|
127
|
+
* if it is in the current stylesheet's $breakup-included-blocks.
|
128
|
+
*
|
129
|
+
* $declaration: A media query that the content shall be wrapped in
|
130
|
+
* $block-name: The block name to display
|
131
|
+
* $allow-naked: Should this content should be rendered if the we are
|
132
|
+
* displaying naked content (i.e. not wrapped in a media
|
133
|
+
* query).
|
134
|
+
*/
|
135
|
+
@mixin breakup-tweakpoint($declaration, $block-name, $allow-naked: false) {
|
136
|
+
@include breakup-block($block-name) {
|
137
|
+
@include breakup-media($declaration, $allow-naked) {
|
138
|
+
@content;
|
139
|
+
}
|
140
|
+
}
|
141
|
+
}
|
metadata
ADDED
@@ -0,0 +1,88 @@
|
|
1
|
+
--- !ruby/object:Gem::Specification
|
2
|
+
name: breakup
|
3
|
+
version: !ruby/object:Gem::Version
|
4
|
+
version: 0.1.0
|
5
|
+
prerelease:
|
6
|
+
platform: ruby
|
7
|
+
authors:
|
8
|
+
- Ben Scott
|
9
|
+
autorequire:
|
10
|
+
bindir: bin
|
11
|
+
cert_chain: []
|
12
|
+
date: 2013-05-07 00:00:00.000000000 Z
|
13
|
+
dependencies:
|
14
|
+
- !ruby/object:Gem::Dependency
|
15
|
+
name: sass
|
16
|
+
requirement: !ruby/object:Gem::Requirement
|
17
|
+
none: false
|
18
|
+
requirements:
|
19
|
+
- - ! '>='
|
20
|
+
- !ruby/object:Gem::Version
|
21
|
+
version: 3.2.0
|
22
|
+
type: :runtime
|
23
|
+
prerelease: false
|
24
|
+
version_requirements: !ruby/object:Gem::Requirement
|
25
|
+
none: false
|
26
|
+
requirements:
|
27
|
+
- - ! '>='
|
28
|
+
- !ruby/object:Gem::Version
|
29
|
+
version: 3.2.0
|
30
|
+
- !ruby/object:Gem::Dependency
|
31
|
+
name: compass
|
32
|
+
requirement: !ruby/object:Gem::Requirement
|
33
|
+
none: false
|
34
|
+
requirements:
|
35
|
+
- - ! '>='
|
36
|
+
- !ruby/object:Gem::Version
|
37
|
+
version: 0.12.2
|
38
|
+
type: :runtime
|
39
|
+
prerelease: false
|
40
|
+
version_requirements: !ruby/object:Gem::Requirement
|
41
|
+
none: false
|
42
|
+
requirements:
|
43
|
+
- - ! '>='
|
44
|
+
- !ruby/object:Gem::Version
|
45
|
+
version: 0.12.2
|
46
|
+
description: Build multiple stylesheets based off globally defined breakpoints
|
47
|
+
email:
|
48
|
+
- ben@reload.me.uk
|
49
|
+
executables: []
|
50
|
+
extensions: []
|
51
|
+
extra_rdoc_files: []
|
52
|
+
files:
|
53
|
+
- .gitignore
|
54
|
+
- LICENSE.txt
|
55
|
+
- README.md
|
56
|
+
- breakup.gemspec
|
57
|
+
- lib/breakup.rb
|
58
|
+
- stylesheets/_breakup.scss
|
59
|
+
homepage: http://github.com/bpscott/breakup
|
60
|
+
licenses: []
|
61
|
+
post_install_message:
|
62
|
+
rdoc_options: []
|
63
|
+
require_paths:
|
64
|
+
- lib
|
65
|
+
required_ruby_version: !ruby/object:Gem::Requirement
|
66
|
+
none: false
|
67
|
+
requirements:
|
68
|
+
- - ! '>='
|
69
|
+
- !ruby/object:Gem::Version
|
70
|
+
version: '0'
|
71
|
+
required_rubygems_version: !ruby/object:Gem::Requirement
|
72
|
+
none: false
|
73
|
+
requirements:
|
74
|
+
- - ! '>='
|
75
|
+
- !ruby/object:Gem::Version
|
76
|
+
version: '0'
|
77
|
+
requirements: []
|
78
|
+
rubyforge_project:
|
79
|
+
rubygems_version: 1.8.23
|
80
|
+
signing_key:
|
81
|
+
specification_version: 3
|
82
|
+
summary: Breakup is a Sass component that allows you to create multiple CSS files
|
83
|
+
from a single Sass partial by wrapping your code within breakpoint blocks. It allows
|
84
|
+
you to abstract what your Sass partials folder looks like from what CSS files you
|
85
|
+
create. Because of this you can easily create per-breakpoint CSS files (e.g. base,
|
86
|
+
mobile, tablet and desktop) and fallback files where no styles are wrapped (e.g.
|
87
|
+
for oldIE which does not support media queries).
|
88
|
+
test_files: []
|