on_the_rocks 0.1.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +7 -0
- data/.gitignore +22 -0
- data/Gemfile +4 -0
- data/LICENSE.txt +22 -0
- data/README.md +89 -0
- data/Rakefile +1 -0
- data/lib/assets/stylesheets/on_the_rocks/_grid.sass +11 -0
- data/lib/assets/stylesheets/on_the_rocks/_helpers.sass +3 -0
- data/lib/assets/stylesheets/on_the_rocks/_settings.sass +4 -0
- data/lib/assets/stylesheets/on_the_rocks/grid/_columns.sass +18 -0
- data/lib/assets/stylesheets/on_the_rocks/grid/_container.sass +14 -0
- data/lib/assets/stylesheets/on_the_rocks/grid/_media.sass +24 -0
- data/lib/assets/stylesheets/on_the_rocks/grid/_omega.sass +2 -0
- data/lib/assets/stylesheets/on_the_rocks/grid/_private.sass +6 -0
- data/lib/assets/stylesheets/on_the_rocks/grid/_row.sass +4 -0
- data/lib/assets/stylesheets/on_the_rocks/grid/_shift.sass +14 -0
- data/lib/assets/stylesheets/on_the_rocks/helpers/_breakpoint.sass +15 -0
- data/lib/assets/stylesheets/on_the_rocks/helpers/_private.sass +7 -0
- data/lib/assets/stylesheets/on_the_rocks.sass +5 -0
- data/lib/on_the_rocks/engine.rb +4 -0
- data/lib/on_the_rocks/version.rb +3 -0
- data/lib/on_the_rocks.rb +6 -0
- data/on_the_rocks.gemspec +28 -0
- data/test/dummy/README.rdoc +28 -0
- data/test/dummy/Rakefile +6 -0
- data/test/dummy/app/assets/images/.keep +0 -0
- data/test/dummy/app/assets/javascripts/application.js +13 -0
- data/test/dummy/app/assets/stylesheets/application.css +13 -0
- data/test/dummy/app/assets/stylesheets/home.css.sass +85 -0
- data/test/dummy/app/controllers/application_controller.rb +5 -0
- data/test/dummy/app/controllers/concerns/.keep +0 -0
- data/test/dummy/app/helpers/application_helper.rb +2 -0
- data/test/dummy/app/mailers/.keep +0 -0
- data/test/dummy/app/models/.keep +0 -0
- data/test/dummy/app/models/concerns/.keep +0 -0
- data/test/dummy/app/views/layouts/application.html.erb +14 -0
- data/test/dummy/app/views/pages/home.html.erb +133 -0
- data/test/dummy/bin/bundle +3 -0
- data/test/dummy/bin/rails +4 -0
- data/test/dummy/bin/rake +4 -0
- data/test/dummy/config/application.rb +28 -0
- data/test/dummy/config/boot.rb +5 -0
- data/test/dummy/config/environment.rb +5 -0
- data/test/dummy/config/environments/development.rb +27 -0
- data/test/dummy/config/environments/production.rb +80 -0
- data/test/dummy/config/environments/test.rb +36 -0
- data/test/dummy/config/initializers/backtrace_silencers.rb +7 -0
- data/test/dummy/config/initializers/filter_parameter_logging.rb +4 -0
- data/test/dummy/config/initializers/inflections.rb +16 -0
- data/test/dummy/config/initializers/mime_types.rb +5 -0
- data/test/dummy/config/initializers/secret_token.rb +12 -0
- data/test/dummy/config/initializers/session_store.rb +3 -0
- data/test/dummy/config/initializers/wrap_parameters.rb +9 -0
- data/test/dummy/config/locales/en.yml +23 -0
- data/test/dummy/config/routes.rb +58 -0
- data/test/dummy/config.ru +4 -0
- data/test/dummy/lib/assets/.keep +0 -0
- data/test/dummy/log/.keep +0 -0
- data/test/dummy/public/404.html +58 -0
- data/test/dummy/public/422.html +58 -0
- data/test/dummy/public/500.html +57 -0
- data/test/dummy/public/favicon.ico +0 -0
- metadata +229 -0
checksums.yaml
ADDED
@@ -0,0 +1,7 @@
|
|
1
|
+
---
|
2
|
+
SHA1:
|
3
|
+
metadata.gz: 2a8b1f38392ad87eda6df995368b38e7f2828d23
|
4
|
+
data.tar.gz: 3577a6e5cd6dd3cea6bedb4452f63a2069c2f5cc
|
5
|
+
SHA512:
|
6
|
+
metadata.gz: 458ee039fe5db8d4af29be32d5a0002cab44f8eb25b9d3cf5484263729fcc13c26b9ce17bace421a7c51858a387b5e9e887da9fea96907b8f1faa42ef0500ad2
|
7
|
+
data.tar.gz: 4c1248530de183d6941ce01c2e284e26818d78646d08da23161de57f8636ba35b804c7965b45751545cf8df7b647335f841bd1b909702a6287293de9572ae936
|
data/.gitignore
ADDED
@@ -0,0 +1,22 @@
|
|
1
|
+
*.gem
|
2
|
+
*.rbc
|
3
|
+
.bundle
|
4
|
+
.config
|
5
|
+
.yardoc
|
6
|
+
Gemfile.lock
|
7
|
+
InstalledFiles
|
8
|
+
_yardoc
|
9
|
+
coverage
|
10
|
+
doc/
|
11
|
+
lib/bundler/man
|
12
|
+
pkg
|
13
|
+
rdoc
|
14
|
+
spec/reports
|
15
|
+
test/tmp
|
16
|
+
test/version_tmp
|
17
|
+
test/dummy/db/*.sqlite3
|
18
|
+
test/dummy/db/*.sqlite3-journal
|
19
|
+
test/dummy/log/*.log
|
20
|
+
test/dummy/tmp/
|
21
|
+
test/dummy/.sass-cache
|
22
|
+
tmp
|
data/Gemfile
ADDED
data/LICENSE.txt
ADDED
@@ -0,0 +1,22 @@
|
|
1
|
+
Copyright (c) 2013 Jérôme Guyon
|
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,89 @@
|
|
1
|
+
# Bourbon On The Rocks
|
2
|
+
|
3
|
+
**on_the_rocks** is a rails plugin which includes a fluid grid system built on top of [bourbon](https://github.com/thoughtbot/bourbon).
|
4
|
+
It is based on an opinion: the gutter width (space between columns) of a grid should always be fixed and proportional to the font size. The fancy css3 `calc` function allows to do that quite easily. What **on_the_rocks** provides is sass mixins which use this function to place your elements on the grid, and declare fallbacks depending on the viewport size for browsers that don't support the function.
|
5
|
+
|
6
|
+
## Installing
|
7
|
+
|
8
|
+
In your Gemfile:
|
9
|
+
|
10
|
+
```ruby
|
11
|
+
gem 'on_the_rocks'
|
12
|
+
```
|
13
|
+
|
14
|
+
At the top of your stylesheet:
|
15
|
+
|
16
|
+
```scss
|
17
|
+
@import 'on_the_rocks';
|
18
|
+
```
|
19
|
+
|
20
|
+
## Usage
|
21
|
+
|
22
|
+
First, override the default settings if you need to:
|
23
|
+
|
24
|
+
```scss
|
25
|
+
$gutter: em(24);
|
26
|
+
$columns: 12;
|
27
|
+
$max-width: em(1080);
|
28
|
+
$fallback-width: em(1000);
|
29
|
+
```
|
30
|
+
|
31
|
+
Then define your breakpoints:
|
32
|
+
|
33
|
+
```scss
|
34
|
+
$small-pc: breakpoint($max-width: 1080px, $fallback-width: em(768))
|
35
|
+
$tablet: breakpoint($max-width: 768px, $fallback-width: em(480));
|
36
|
+
$mobile: breakpoint($max-width: 480px, $fallback-width: em(400), $columns: 6)
|
37
|
+
```
|
38
|
+
|
39
|
+
Keep in mind that the `$gutter` and the `$fallback-width`s must be expressed with the same unit. Here I used the `em` function of bourbon (which converts pixels to ems) but that's just my preference, use the unit you like to use.
|
40
|
+
|
41
|
+
Now's time to set your main container:
|
42
|
+
|
43
|
+
```scss
|
44
|
+
.container {
|
45
|
+
@include container;
|
46
|
+
}
|
47
|
+
```
|
48
|
+
|
49
|
+
And finally set up your grid:
|
50
|
+
|
51
|
+
```scss
|
52
|
+
.navbar {
|
53
|
+
@include columns(4);
|
54
|
+
@include media($mobile) {
|
55
|
+
@include columns(6);
|
56
|
+
@include omega;
|
57
|
+
}
|
58
|
+
}
|
59
|
+
|
60
|
+
.content {
|
61
|
+
@include columns(8);
|
62
|
+
@include omega;
|
63
|
+
@include media($mobile) {
|
64
|
+
@include columns(6);
|
65
|
+
@include omega
|
66
|
+
}
|
67
|
+
|
68
|
+
.left {
|
69
|
+
@include columns(4 of 8);
|
70
|
+
@include media($mobile) {
|
71
|
+
@include columns(3);
|
72
|
+
}
|
73
|
+
}
|
74
|
+
|
75
|
+
.right {
|
76
|
+
@include columns(4 of 8);
|
77
|
+
@include omega;
|
78
|
+
@include media($mobile) {
|
79
|
+
@include columns(3);
|
80
|
+
@include omega;
|
81
|
+
}
|
82
|
+
}
|
83
|
+
}
|
84
|
+
```
|
85
|
+
|
86
|
+
## Contributing
|
87
|
+
|
88
|
+
Please create an issue if you encounter a bug.
|
89
|
+
Any pull request is welcome ;)
|
data/Rakefile
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
require "bundler/gem_tasks"
|
@@ -0,0 +1,18 @@
|
|
1
|
+
= columns($span: $columns)
|
2
|
+
$n: nth($span, 1)
|
3
|
+
|
4
|
+
$parent-n: parent-columns($span)
|
5
|
+
$expression: "(100% + #{$gutter}) * #{$n / $parent-n} - #{$gutter}"
|
6
|
+
$fallback: ($fallback-width - $gutter) * $n / $columns - $gutter
|
7
|
+
+calc(width, $expression, $fallback)
|
8
|
+
|
9
|
+
@each $breakpoint in $breakpoints
|
10
|
+
+media($breakpoint)
|
11
|
+
$parent-n: parent-columns($span)
|
12
|
+
$expression: "(100% + #{$gutter}) * #{$n / $parent-n} - #{$gutter}"
|
13
|
+
$fallback: ($fallback-width - $gutter) * $n / $columns - $gutter
|
14
|
+
+calc(width, $expression, $fallback)
|
15
|
+
|
16
|
+
display: block
|
17
|
+
margin-right: $gutter
|
18
|
+
float: left
|
@@ -0,0 +1,14 @@
|
|
1
|
+
= container
|
2
|
+
+clearfix
|
3
|
+
+calc(max-width, $max-width)
|
4
|
+
|
5
|
+
+calc(width, 100%, $fallback-width)
|
6
|
+
@each $breakpoint in $breakpoints
|
7
|
+
+media($breakpoint)
|
8
|
+
+calc(width, 100%, $fallback-width)
|
9
|
+
|
10
|
+
display: block
|
11
|
+
margin:
|
12
|
+
left: auto
|
13
|
+
right: auto
|
14
|
+
padding: 0 $gutter
|
@@ -0,0 +1,24 @@
|
|
1
|
+
= media($breakpoint)
|
2
|
+
$base-columns: $columns
|
3
|
+
$base-fallback-width: $fallback-width
|
4
|
+
|
5
|
+
@if index($breakpoint, columns)
|
6
|
+
$i: index($breakpoint, columns) + 1
|
7
|
+
$columns: nth($breakpoint, $i)
|
8
|
+
@if index($breakpoint, fallback-width)
|
9
|
+
$i: index($breakpoint, fallback-width) + 1
|
10
|
+
$fallback-width: nth($breakpoint, $i)
|
11
|
+
|
12
|
+
$query: "screen"
|
13
|
+
@if index($breakpoint, max-width)
|
14
|
+
$i: index($breakpoint, max-width) + 1
|
15
|
+
$query: $query + " and (max-width: #{nth($breakpoint, $i)})"
|
16
|
+
@if index($breakpoint, min-width)
|
17
|
+
$i: index($breakpoint, min-width) + 1
|
18
|
+
$query: $query + " and (min-width: #{nth($breakpoint, $i)})"
|
19
|
+
|
20
|
+
@media #{$query}
|
21
|
+
@content
|
22
|
+
|
23
|
+
$columns: $base-columns
|
24
|
+
$fallback-width: $base-fallback-width
|
@@ -0,0 +1,14 @@
|
|
1
|
+
= shift($span)
|
2
|
+
$n: nth($span, 1)
|
3
|
+
|
4
|
+
$parent-n: parent-columns($span)
|
5
|
+
$expression: "(100% + #{$gutter}) * #{$n / $parent-n}"
|
6
|
+
$fallback: ($fallback-width - $gutter) * $n / $columns
|
7
|
+
+calc(margin-left, $expression, $fallback)
|
8
|
+
|
9
|
+
@each $breakpoint in $breakpoints
|
10
|
+
+media($breakpoint)
|
11
|
+
$parent-n: parent-columns($span)
|
12
|
+
$expression: "(100% + #{$gutter}) * #{$n / $parent-n}"
|
13
|
+
$fallback: ($fallback-width - $gutter) * $n / $columns
|
14
|
+
+calc(margin-left, $expression, $fallback)
|
@@ -0,0 +1,15 @@
|
|
1
|
+
$breakpoints: () !default
|
2
|
+
|
3
|
+
@function breakpoint($max-width: false, $min-width: false, $columns: false, $fallback-width: false)
|
4
|
+
$breakpoint: ()
|
5
|
+
@if $columns
|
6
|
+
$breakpoint: join($breakpoint, columns $columns)
|
7
|
+
@if $fallback-width
|
8
|
+
$breakpoint: join($breakpoint, fallback-width $fallback-width)
|
9
|
+
@if $max-width
|
10
|
+
$breakpoint: join($breakpoint, max-width $max-width)
|
11
|
+
@if $min-width
|
12
|
+
$breakpoint: join($breakpoint, min-width $min-width)
|
13
|
+
|
14
|
+
$breakpoints: append($breakpoints, $breakpoint)
|
15
|
+
@return $breakpoint
|
data/lib/on_the_rocks.rb
ADDED
@@ -0,0 +1,28 @@
|
|
1
|
+
# coding: utf-8
|
2
|
+
lib = File.expand_path('../lib', __FILE__)
|
3
|
+
$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
|
4
|
+
require 'on_the_rocks/version'
|
5
|
+
|
6
|
+
Gem::Specification.new do |spec|
|
7
|
+
spec.name = "on_the_rocks"
|
8
|
+
spec.version = OnTheRocks::VERSION
|
9
|
+
spec.authors = ["J. Fleming"]
|
10
|
+
spec.email = ["jflemingprod@gmail.com"]
|
11
|
+
spec.description = %q{A shot at a responsive fluid grid system with fixed gutter width using the fancy css3 calc function.}
|
12
|
+
spec.summary = %q{Yet another responsive grid system.}
|
13
|
+
spec.homepage = "https://github.com/jflemingprod/on_the_rocks"
|
14
|
+
spec.license = "MIT"
|
15
|
+
|
16
|
+
spec.files = `git ls-files`.split($/)
|
17
|
+
spec.executables = spec.files.grep(%r{^bin/}) { |f| File.basename(f) }
|
18
|
+
spec.test_files = spec.files.grep(%r{^(test|spec|features)/})
|
19
|
+
spec.require_paths = ["lib"]
|
20
|
+
|
21
|
+
spec.add_dependency "rails", "~> 4.0"
|
22
|
+
spec.add_dependency "sass-rails", "~> 4.0"
|
23
|
+
spec.add_dependency "bourbon", "~> 3.0"
|
24
|
+
|
25
|
+
spec.add_development_dependency "bundler", "~> 1.3"
|
26
|
+
spec.add_development_dependency "rake"
|
27
|
+
spec.add_development_dependency "high_voltage"
|
28
|
+
end
|
@@ -0,0 +1,28 @@
|
|
1
|
+
== README
|
2
|
+
|
3
|
+
This README would normally document whatever steps are necessary to get the
|
4
|
+
application up and running.
|
5
|
+
|
6
|
+
Things you may want to cover:
|
7
|
+
|
8
|
+
* Ruby version
|
9
|
+
|
10
|
+
* System dependencies
|
11
|
+
|
12
|
+
* Configuration
|
13
|
+
|
14
|
+
* Database creation
|
15
|
+
|
16
|
+
* Database initialization
|
17
|
+
|
18
|
+
* How to run the test suite
|
19
|
+
|
20
|
+
* Services (job queues, cache servers, search engines, etc.)
|
21
|
+
|
22
|
+
* Deployment instructions
|
23
|
+
|
24
|
+
* ...
|
25
|
+
|
26
|
+
|
27
|
+
Please feel free to use a different markup language if you do not plan to run
|
28
|
+
<tt>rake doc:app</tt>.
|
data/test/dummy/Rakefile
ADDED
File without changes
|
@@ -0,0 +1,13 @@
|
|
1
|
+
// This is a manifest file that'll be compiled into application.js, which will include all the files
|
2
|
+
// listed below.
|
3
|
+
//
|
4
|
+
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
|
5
|
+
// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
|
6
|
+
//
|
7
|
+
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
|
8
|
+
// compiled file.
|
9
|
+
//
|
10
|
+
// Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
|
11
|
+
// about supported directives.
|
12
|
+
//
|
13
|
+
//= require_tree .
|
@@ -0,0 +1,13 @@
|
|
1
|
+
/*
|
2
|
+
* This is a manifest file that'll be compiled into application.css, which will include all the files
|
3
|
+
* listed below.
|
4
|
+
*
|
5
|
+
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
|
6
|
+
* or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
|
7
|
+
*
|
8
|
+
* You're free to add application-wide styles to this file and they'll appear at the top of the
|
9
|
+
* compiled file, but it's generally better to create a new file per style scope.
|
10
|
+
*
|
11
|
+
*= require_self
|
12
|
+
*= require_tree .
|
13
|
+
*/
|
@@ -0,0 +1,85 @@
|
|
1
|
+
body
|
2
|
+
margin: 0
|
3
|
+
padding: 0
|
4
|
+
|
5
|
+
h2, p
|
6
|
+
text-align: center
|
7
|
+
|
8
|
+
p
|
9
|
+
// height: 6em
|
10
|
+
overflow: hidden
|
11
|
+
|
12
|
+
.base
|
13
|
+
background-color: #CCF
|
14
|
+
.element
|
15
|
+
background-color: #AAF
|
16
|
+
.nested
|
17
|
+
background-color: #88F
|
18
|
+
|
19
|
+
.base, .element, .nested
|
20
|
+
margin-bottom: 1.5em
|
21
|
+
|
22
|
+
|
23
|
+
@import on_the_rocks
|
24
|
+
|
25
|
+
$fallback-width: em(1080)
|
26
|
+
|
27
|
+
$small: breakpoint($max-width: em(1080), $fallback-width: em(760))
|
28
|
+
$tablet: breakpoint($max-width: em(760), $fallback-width: em(480))
|
29
|
+
$mobile: breakpoint($max-width: em(480), $fallback-width: em(400))
|
30
|
+
|
31
|
+
.basic
|
32
|
+
+container
|
33
|
+
.left
|
34
|
+
+columns(4)
|
35
|
+
.right
|
36
|
+
+columns(8)
|
37
|
+
+omega
|
38
|
+
|
39
|
+
.multiple
|
40
|
+
+container
|
41
|
+
.row
|
42
|
+
+row
|
43
|
+
.top-left
|
44
|
+
+columns(3)
|
45
|
+
.top-right
|
46
|
+
+columns(9)
|
47
|
+
+omega
|
48
|
+
.bottom-left
|
49
|
+
+columns(6)
|
50
|
+
.bottom-right
|
51
|
+
+columns(6)
|
52
|
+
+omega
|
53
|
+
|
54
|
+
.nested-cols
|
55
|
+
+container
|
56
|
+
.left
|
57
|
+
+columns(4)
|
58
|
+
.right
|
59
|
+
+columns(8)
|
60
|
+
+omega
|
61
|
+
.right-left
|
62
|
+
+columns(4 of 8)
|
63
|
+
.right-right
|
64
|
+
+columns(4 of 8)
|
65
|
+
+omega
|
66
|
+
|
67
|
+
.shifted-cols
|
68
|
+
+container
|
69
|
+
.shifted
|
70
|
+
+columns(6)
|
71
|
+
+shift(3)
|
72
|
+
|
73
|
+
.media
|
74
|
+
+container
|
75
|
+
.left
|
76
|
+
+columns(6)
|
77
|
+
+media($mobile)
|
78
|
+
+columns(12)
|
79
|
+
+omega
|
80
|
+
.right
|
81
|
+
+columns(6)
|
82
|
+
+omega
|
83
|
+
+media($mobile)
|
84
|
+
+columns(12)
|
85
|
+
+omega
|