breakpoint-slicer 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.
- 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: []
|