breakpoint-slicer 0.1
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +7 -0
- data/demo/config.rb +5 -0
- data/demo/sass/screen.sass +127 -0
- data/demo/test.html +40 -0
- data/lib/breakpoint-slicer.rb +9 -0
- data/stylesheets/_breakpoint-slicer.sass +12 -0
- data/stylesheets/breakpoint-slicer/_helper-functions.sass +59 -0
- data/stylesheets/breakpoint-slicer/_mixins.sass +98 -0
- data/stylesheets/breakpoint-slicer/_variables.sass +1 -0
- metadata +96 -0
checksums.yaml
ADDED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
---
|
|
2
|
+
SHA1:
|
|
3
|
+
metadata.gz: 3d0bc9155f29e98a703c1fe58a74cf6bfce98006
|
|
4
|
+
data.tar.gz: 799ddefb59a46becf3283007bf50e6b653e2779e
|
|
5
|
+
SHA512:
|
|
6
|
+
metadata.gz: db6c4c6467742193ded257ba01a543cdb62366bbe2333c2d2c10a2375cd7a642fcaf41b3de7f0cd11befdc4fa27462c37f4424acf8cde71059e40451c8de673b
|
|
7
|
+
data.tar.gz: 7c560cb06402939b578ee4612a70a68a4c6d1aa7edd5eaca220ac2c5fef0a2440caaf6a4ba6f3803bd81b720b93f3b2c06e8980b9fe28813e12bba96d2c96710
|
data/demo/config.rb
ADDED
|
@@ -0,0 +1,127 @@
|
|
|
1
|
+
@import breakpoint
|
|
2
|
+
@import ../../stylesheets/breakpoint-slicer
|
|
3
|
+
|
|
4
|
+
/////////////////////////////////////////
|
|
5
|
+
// Showing the info
|
|
6
|
+
/////////////////////////////////////////
|
|
7
|
+
|
|
8
|
+
// Showing the breakpoints
|
|
9
|
+
#info-1:after
|
|
10
|
+
content: "$slicer-breakpoints: #{$slicer-breakpoints}"
|
|
11
|
+
|
|
12
|
+
// Showing the number of slices
|
|
13
|
+
#info-2:after
|
|
14
|
+
@for $i from 1 through total-slices()
|
|
15
|
+
+at($i)
|
|
16
|
+
content: "This window currently fits #{$i} slices."
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
/////////////////////////////////////////
|
|
20
|
+
// Testing +at
|
|
21
|
+
/////////////////////////////////////////
|
|
22
|
+
|
|
23
|
+
#at
|
|
24
|
+
+at(3)
|
|
25
|
+
background-color: black
|
|
26
|
+
color: white
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
/////////////////////////////////////////
|
|
30
|
+
// Testing +from
|
|
31
|
+
/////////////////////////////////////////
|
|
32
|
+
|
|
33
|
+
#from
|
|
34
|
+
+from(3)
|
|
35
|
+
background-color: black
|
|
36
|
+
color: white
|
|
37
|
+
|
|
38
|
+
|
|
39
|
+
|
|
40
|
+
/////////////////////////////////////////
|
|
41
|
+
// Testing +to
|
|
42
|
+
/////////////////////////////////////////
|
|
43
|
+
|
|
44
|
+
#to
|
|
45
|
+
+to(3)
|
|
46
|
+
background-color: black
|
|
47
|
+
color: white
|
|
48
|
+
|
|
49
|
+
|
|
50
|
+
/////////////////////////////////////////
|
|
51
|
+
// Testing +between
|
|
52
|
+
/////////////////////////////////////////
|
|
53
|
+
|
|
54
|
+
#between
|
|
55
|
+
+between(2,4)
|
|
56
|
+
background-color: black
|
|
57
|
+
color: white
|
|
58
|
+
|
|
59
|
+
|
|
60
|
+
|
|
61
|
+
/////////////////////////////////////////
|
|
62
|
+
// Breakpoint Slicer with Singularity
|
|
63
|
+
/////////////////////////////////////////
|
|
64
|
+
|
|
65
|
+
// Importing Singularity
|
|
66
|
+
@import compass
|
|
67
|
+
@import singularitygs
|
|
68
|
+
|
|
69
|
+
// Configuring Singularity with Breakpoint Slicer
|
|
70
|
+
$grids: 1
|
|
71
|
+
@for $i from 2 through total-slices()
|
|
72
|
+
$grids: add-grid($i at bp($i))
|
|
73
|
+
|
|
74
|
+
$gutters: 0.2
|
|
75
|
+
|
|
76
|
+
|
|
77
|
+
// Enabling the grid background
|
|
78
|
+
#singularity
|
|
79
|
+
+background-grid
|
|
80
|
+
+pie-clearfix
|
|
81
|
+
|
|
82
|
+
|
|
83
|
+
// Spanning the column
|
|
84
|
+
#singularity .column
|
|
85
|
+
|
|
86
|
+
// Showing the text.
|
|
87
|
+
span:after
|
|
88
|
+
content: "This column is not spanned."
|
|
89
|
+
|
|
90
|
+
// Cycling through slices
|
|
91
|
+
@for $i from 2 through total-slices()
|
|
92
|
+
|
|
93
|
+
// Setting a media query per slice
|
|
94
|
+
+at($i)
|
|
95
|
+
|
|
96
|
+
// Setting the position to be the last-but-one column
|
|
97
|
+
$position: $i - 1
|
|
98
|
+
|
|
99
|
+
// Spanning
|
|
100
|
+
+grid-span(1, $position)
|
|
101
|
+
|
|
102
|
+
// Showing the text.
|
|
103
|
+
span:after
|
|
104
|
+
content: "+at(#{$i})\A +grid-span(1, #{$position})"
|
|
105
|
+
|
|
106
|
+
|
|
107
|
+
|
|
108
|
+
/////////////////////////////////////////
|
|
109
|
+
// Styling
|
|
110
|
+
/////////////////////////////////////////
|
|
111
|
+
*
|
|
112
|
+
+box-sizing(border-box)
|
|
113
|
+
|
|
114
|
+
p
|
|
115
|
+
margin-bottom: 1em
|
|
116
|
+
|
|
117
|
+
h2
|
|
118
|
+
margin-top: 2em
|
|
119
|
+
|
|
120
|
+
.demo
|
|
121
|
+
p, .column
|
|
122
|
+
font-family: monospace
|
|
123
|
+
border: 1px solid black
|
|
124
|
+
background-color: lightgrey
|
|
125
|
+
padding: 1em
|
|
126
|
+
|
|
127
|
+
|
data/demo/test.html
ADDED
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<title>Breakpoint Slicer test</title>
|
|
5
|
+
<link rel=stylesheet href=css/screen.css>
|
|
6
|
+
</head>
|
|
7
|
+
<body>
|
|
8
|
+
|
|
9
|
+
<h1>Breakpoint Slicer demo</h1>
|
|
10
|
+
|
|
11
|
+
<p>Please play with browser window width.</p>
|
|
12
|
+
<p id=info-1></p>
|
|
13
|
+
<p id=info-2></p>
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
<h2>Testing mixins</h2>
|
|
17
|
+
|
|
18
|
+
<p>The default color of each paragraph is light grey.
|
|
19
|
+
Breakpoint Slicer is used to change the color to black at certain window widths.</p>
|
|
20
|
+
|
|
21
|
+
<section class=demo>
|
|
22
|
+
<p id=at>+at(3)<br> background-color: black</p>
|
|
23
|
+
<p id=from>+from(3)<br> background-color: black</p>
|
|
24
|
+
<p id=to>+to(3)<br> background-color: black</p>
|
|
25
|
+
<p id=between>+between(2, 4)<br> background-color: black</p>
|
|
26
|
+
</section>
|
|
27
|
+
|
|
28
|
+
<h2>Testing Breakpoint Slicer with Singularity</h2>
|
|
29
|
+
|
|
30
|
+
<p>Breakpoint Slicer is used to set Singularity's breakpoints and to span the column.</p>
|
|
31
|
+
|
|
32
|
+
<section class=demo>
|
|
33
|
+
<div id=singularity>
|
|
34
|
+
<div class=column><pre><span></span></pre></div>
|
|
35
|
+
</div>
|
|
36
|
+
</section>
|
|
37
|
+
|
|
38
|
+
|
|
39
|
+
</body>
|
|
40
|
+
</html>
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
// total-slices()
|
|
2
|
+
//
|
|
3
|
+
// Accepts no arguments.
|
|
4
|
+
//
|
|
5
|
+
// Returns total number of slices
|
|
6
|
+
// (which is equal to total number of breakpoints).
|
|
7
|
+
@function total-slices()
|
|
8
|
+
@return length($slicer-breakpoints)
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
// left-bp-of-slice($slice)
|
|
12
|
+
// - $slice : <slice number> A number of a slice. Should be positive integer.
|
|
13
|
+
//
|
|
14
|
+
// Returns the left breakpoint of an Nth slice, e. g. `600px`.
|
|
15
|
+
@function left-bp-of-slice($slice)
|
|
16
|
+
$min: 1
|
|
17
|
+
$max: total-slices()
|
|
18
|
+
|
|
19
|
+
// Making sure that the slice provided is valid
|
|
20
|
+
@if ($slice < $min) or ($slice > $max)
|
|
21
|
+
|
|
22
|
+
@warn "Wrong Slice number provided: #{$slice}. Should be between #{min} and #{$max}."
|
|
23
|
+
|
|
24
|
+
@else
|
|
25
|
+
|
|
26
|
+
// Returning the left edge of the slice
|
|
27
|
+
$left: nth($slicer-breakpoints, $slice)
|
|
28
|
+
|
|
29
|
+
// Special treatment of the first slice...
|
|
30
|
+
@if $slice == 1
|
|
31
|
+
// ...to prevent a meaningless `min-width: 0` meida query
|
|
32
|
+
$left: max-width // This is Breakpoint's syntax
|
|
33
|
+
|
|
34
|
+
@return $left
|
|
35
|
+
|
|
36
|
+
|
|
37
|
+
// left-bp-of-slice($slice)
|
|
38
|
+
// - $slice : <slice number> A number of a slice. Should be positive integer.
|
|
39
|
+
//
|
|
40
|
+
// Returns the right breakpoint of an Nth slice, e. g. `800px`.
|
|
41
|
+
@function right-bp-of-slice($slice)
|
|
42
|
+
$min: 1
|
|
43
|
+
$max: total-slices() - 1
|
|
44
|
+
|
|
45
|
+
// Making sure that the slice provided is valid
|
|
46
|
+
@if $max == total-slices()
|
|
47
|
+
@warn "Slice number provided: #{$slice}. It's the last slice, it has no right edge."
|
|
48
|
+
@else if ($slice < $min) or ($slice > $max)
|
|
49
|
+
@warn "Wrong column number provided: #{$slice}. Should be between #{min} and #{$max}."
|
|
50
|
+
@else
|
|
51
|
+
// Returning the right edge of the slice
|
|
52
|
+
@return nth($slicer-breakpoints, $slice + 1)
|
|
53
|
+
|
|
54
|
+
|
|
55
|
+
// bp($slice)
|
|
56
|
+
//
|
|
57
|
+
// A shortcut for nth($slicer-breakpoints, $slice)
|
|
58
|
+
@function bp($slice)
|
|
59
|
+
@return nth($slicer-breakpoints, $slice)
|
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
////////////////////////////////////////////////
|
|
2
|
+
// If you don't understand what's going on here,
|
|
3
|
+
// please read the README first.
|
|
4
|
+
////////////////////////////////////////////////
|
|
5
|
+
|
|
6
|
+
// Wraps the content block provided with a media query
|
|
7
|
+
// with min-width and max-width equal to the edges of a slice
|
|
8
|
+
//
|
|
9
|
+
// at($slice)
|
|
10
|
+
// - $slice : <slice number> A number of a slice. Should be a positive integer.
|
|
11
|
+
=at($slice)
|
|
12
|
+
|
|
13
|
+
// Retrieving the left edge of the slice
|
|
14
|
+
$context: left-bp-of-slice($slice)
|
|
15
|
+
|
|
16
|
+
// Retrieving the right edge of the slice
|
|
17
|
+
// unless the slice is the last one
|
|
18
|
+
@if $slice < total-slices()
|
|
19
|
+
$right: right-bp-of-slice($slice)
|
|
20
|
+
$context: append($context, $right)
|
|
21
|
+
|
|
22
|
+
// Setting the breakpoint
|
|
23
|
+
+breakpoint($context)
|
|
24
|
+
@content
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
// Wraps the content block provided with a media query
|
|
28
|
+
// with min-width equal to the right edge of a slice
|
|
29
|
+
//
|
|
30
|
+
// from($slice)
|
|
31
|
+
// - $slice : <slice number> A number of a slice. Should be a positive integer.
|
|
32
|
+
=from($slice)
|
|
33
|
+
|
|
34
|
+
// If the slice is the first one, the breakpoint becomes meaningless
|
|
35
|
+
@if $slice == 1
|
|
36
|
+
// Thus, don't wrap the code block with a media query
|
|
37
|
+
@content
|
|
38
|
+
|
|
39
|
+
@else
|
|
40
|
+
// Retrieving the left edge of the slice
|
|
41
|
+
$context: left-bp-of-slice($slice)
|
|
42
|
+
|
|
43
|
+
// Setting the breakpoint
|
|
44
|
+
+breakpoint($context)
|
|
45
|
+
@content
|
|
46
|
+
|
|
47
|
+
|
|
48
|
+
// Wraps the content block provided with a media query
|
|
49
|
+
// with max-width equal to the right edge of a slice
|
|
50
|
+
//
|
|
51
|
+
// to($slice)
|
|
52
|
+
// - $slice : <slice number> A number of a slice. Should be a positive integer.
|
|
53
|
+
=to($slice)
|
|
54
|
+
|
|
55
|
+
// If the slice is the last one, the breakpoint becomes meaningless
|
|
56
|
+
@if $slice == total-slices()
|
|
57
|
+
// Thus, don't wrap the code block with a media query
|
|
58
|
+
@content
|
|
59
|
+
|
|
60
|
+
@else
|
|
61
|
+
// Retrieving the right edge of the slice
|
|
62
|
+
$right: right-bp-of-slice($slice)
|
|
63
|
+
$context: max-width $right
|
|
64
|
+
|
|
65
|
+
// Setting the breakpoint
|
|
66
|
+
+breakpoint($context)
|
|
67
|
+
@content
|
|
68
|
+
|
|
69
|
+
|
|
70
|
+
// Wraps the content block provided with a media query
|
|
71
|
+
// with min-width equal to the left edge of the left slice
|
|
72
|
+
// and max-width equal to the right edge of the right slice
|
|
73
|
+
//
|
|
74
|
+
// between($slice-left, $slice-right)
|
|
75
|
+
// - $slice-left : <slice number> A number of the left slice. Should be a positive integer.
|
|
76
|
+
// - $slice-right : <slice number> A number of the left slice. Should be a positive integer.
|
|
77
|
+
=between($slice-left, $slice-right)
|
|
78
|
+
|
|
79
|
+
// If the slices provided are the first and the last one,
|
|
80
|
+
// the breakpoint becomes meaningless
|
|
81
|
+
@if ($slice-left == 1) and ($slice-right == total-slices())
|
|
82
|
+
//Thus, don't wrap the code block with a media query
|
|
83
|
+
@content
|
|
84
|
+
|
|
85
|
+
@else
|
|
86
|
+
|
|
87
|
+
// Retrieving the left edge of the left slice
|
|
88
|
+
$context: left-bp-of-slice($slice-left)
|
|
89
|
+
|
|
90
|
+
// Retrieving the right edge of the slice
|
|
91
|
+
// unless the slice is the last one
|
|
92
|
+
@if $slice-right < total-slices()
|
|
93
|
+
$right: right-bp-of-slice($slice-right)
|
|
94
|
+
$context: append($context, $right)
|
|
95
|
+
|
|
96
|
+
// Setting the breakpoint
|
|
97
|
+
+breakpoint($context)
|
|
98
|
+
@content
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
$slicer-breakpoints: 0 400px 600px 800px 1010px !default
|
metadata
ADDED
|
@@ -0,0 +1,96 @@
|
|
|
1
|
+
--- !ruby/object:Gem::Specification
|
|
2
|
+
name: breakpoint-slicer
|
|
3
|
+
version: !ruby/object:Gem::Version
|
|
4
|
+
version: '0.1'
|
|
5
|
+
platform: ruby
|
|
6
|
+
authors:
|
|
7
|
+
- Andrey 'lolmaus' Mikhaylov
|
|
8
|
+
autorequire:
|
|
9
|
+
bindir: bin
|
|
10
|
+
cert_chain: []
|
|
11
|
+
date: 2013-04-09 00:00:00.000000000 Z
|
|
12
|
+
dependencies:
|
|
13
|
+
- !ruby/object:Gem::Dependency
|
|
14
|
+
name: sass
|
|
15
|
+
requirement: !ruby/object:Gem::Requirement
|
|
16
|
+
requirements:
|
|
17
|
+
- - '>='
|
|
18
|
+
- !ruby/object:Gem::Version
|
|
19
|
+
version: 3.2.1
|
|
20
|
+
type: :runtime
|
|
21
|
+
prerelease: false
|
|
22
|
+
version_requirements: !ruby/object:Gem::Requirement
|
|
23
|
+
requirements:
|
|
24
|
+
- - '>='
|
|
25
|
+
- !ruby/object:Gem::Version
|
|
26
|
+
version: 3.2.1
|
|
27
|
+
- !ruby/object:Gem::Dependency
|
|
28
|
+
name: compass
|
|
29
|
+
requirement: !ruby/object:Gem::Requirement
|
|
30
|
+
requirements:
|
|
31
|
+
- - '>='
|
|
32
|
+
- !ruby/object:Gem::Version
|
|
33
|
+
version: 0.12.2
|
|
34
|
+
type: :runtime
|
|
35
|
+
prerelease: false
|
|
36
|
+
version_requirements: !ruby/object:Gem::Requirement
|
|
37
|
+
requirements:
|
|
38
|
+
- - '>='
|
|
39
|
+
- !ruby/object:Gem::Version
|
|
40
|
+
version: 0.12.2
|
|
41
|
+
- !ruby/object:Gem::Dependency
|
|
42
|
+
name: breakpoint
|
|
43
|
+
requirement: !ruby/object:Gem::Requirement
|
|
44
|
+
requirements:
|
|
45
|
+
- - '>='
|
|
46
|
+
- !ruby/object:Gem::Version
|
|
47
|
+
version: 2.0.1
|
|
48
|
+
type: :runtime
|
|
49
|
+
prerelease: false
|
|
50
|
+
version_requirements: !ruby/object:Gem::Requirement
|
|
51
|
+
requirements:
|
|
52
|
+
- - '>='
|
|
53
|
+
- !ruby/object:Gem::Version
|
|
54
|
+
version: 2.0.1
|
|
55
|
+
description: A very quick and efficient syntax for Breakpoint
|
|
56
|
+
email:
|
|
57
|
+
- lolmaus@gmail.com
|
|
58
|
+
executables: []
|
|
59
|
+
extensions: []
|
|
60
|
+
extra_rdoc_files: []
|
|
61
|
+
files:
|
|
62
|
+
- lib/breakpoint-slicer.rb
|
|
63
|
+
- stylesheets/breakpoint-slicer/_helper-functions.sass
|
|
64
|
+
- stylesheets/breakpoint-slicer/_variables.sass
|
|
65
|
+
- stylesheets/breakpoint-slicer/_mixins.sass
|
|
66
|
+
- stylesheets/_breakpoint-slicer.sass
|
|
67
|
+
- demo/config.rb
|
|
68
|
+
- demo/test.html
|
|
69
|
+
- demo/sass/screen.sass
|
|
70
|
+
homepage: https://github.com/lolmaus/breakpoint-slicer
|
|
71
|
+
licenses: []
|
|
72
|
+
metadata: {}
|
|
73
|
+
post_install_message:
|
|
74
|
+
rdoc_options: []
|
|
75
|
+
require_paths:
|
|
76
|
+
- lib
|
|
77
|
+
required_ruby_version: !ruby/object:Gem::Requirement
|
|
78
|
+
requirements:
|
|
79
|
+
- - '>='
|
|
80
|
+
- !ruby/object:Gem::Version
|
|
81
|
+
version: '0'
|
|
82
|
+
required_rubygems_version: !ruby/object:Gem::Requirement
|
|
83
|
+
requirements:
|
|
84
|
+
- - '>='
|
|
85
|
+
- !ruby/object:Gem::Version
|
|
86
|
+
version: '1.2'
|
|
87
|
+
requirements: []
|
|
88
|
+
rubyforge_project: singularitygs
|
|
89
|
+
rubygems_version: 2.0.0.rc.2
|
|
90
|
+
signing_key:
|
|
91
|
+
specification_version: 4
|
|
92
|
+
summary: Along with Respond To, Breakpoint Slicer is an alternative syntax for Breakpoint.
|
|
93
|
+
It offers a powerful yet very simple way to slice your media queries. Just list
|
|
94
|
+
your breakpoints and Breakpoint Slicer will magically turn them into slices. You
|
|
95
|
+
can address the with their sequence numbers.
|
|
96
|
+
test_files: []
|