grids 1.1.0 → 1.1.1
Sign up to get free protection for your applications and to get access to all the features.
- data/README.md +91 -0
- data/app/assets/javascripts/grids/scalable.js.coffee +46 -0
- data/lib/grids/grid.scss.erb +23 -1
- data/lib/grids/version.rb +1 -1
- data/lib/grids.rb +11 -0
- metadata +3 -2
data/README.md
CHANGED
@@ -0,0 +1,91 @@
|
|
1
|
+
Grids — это набор [sass](http://sass-lang.com/)-функций для построения и использования собственных модульных сеток.
|
2
|
+
Grids позволяет отказаться от абсолютных единиц измерения, используя, при этом, обычные css-конструкции.
|
3
|
+
Библиотека дает возможность использовать более одной сетки на странице, что полезно, в частности, при адаптивной
|
4
|
+
верстке.
|
5
|
+
|
6
|
+
Модель модульной сетки, о которой ведется речь:
|
7
|
+
|
8
|
+
![GRID](https://ucarecdn.com/7e9368ba-6ce4-4400-b34e-2e867f81fb88/)
|
9
|
+
|
10
|
+
|
11
|
+
|
12
|
+
Установка
|
13
|
+
---------
|
14
|
+
|
15
|
+
Grids написан на ruby и требует наличие [bundler](http://gembundler.com/) в проекте. Добавьте grids в ваш Gemfile:
|
16
|
+
|
17
|
+
group :assets do
|
18
|
+
gem 'sass' # or 'sass-rails'
|
19
|
+
gem 'grids', '~> 1.1'
|
20
|
+
end
|
21
|
+
|
22
|
+
Если вы используете `sass --watch`, то добавьте параметр `-rgrids`.
|
23
|
+
|
24
|
+
Использование
|
25
|
+
-------------
|
26
|
+
|
27
|
+
Создайте файл *gridname*.scss или *gridname*.css.scss для rails (например, display.css.scss).
|
28
|
+
*gridname* должен быть правильным css-идентификатором. Заполните его подобным содержимым:
|
29
|
+
|
30
|
+
$atom-x: 42px; // <css unit> — ширина ячейки сетки
|
31
|
+
$atom-y: 21px; // <css unit> — высота ячейки сетки
|
32
|
+
$module-width: 1; // <integer> — ширина модуля в ячейках сетки
|
33
|
+
$modules-x-count: 12; // <integer> — ширина страницы в модулях
|
34
|
+
|
35
|
+
// Опционально
|
36
|
+
$gutter-x: 42px; // <css unit> — ширина отступа между модулями, $atom-x по-умолчанию
|
37
|
+
$gutter-y: 21px; // <css unit> — высота отступа между модулями, $atom-y по-умолчанию
|
38
|
+
$module-height: 1; // <integer> — высота модуля в ячейках сетки, не используется, если не указано
|
39
|
+
$modules-y-count: 12; // <integer> — ширина страницы в модулях, не используется, если не указано
|
40
|
+
|
41
|
+
Добавьте в вашем sass-коде:
|
42
|
+
|
43
|
+
@import "gridname.grid" // .grid вместо .scss
|
44
|
+
|
45
|
+
После этого появится возможность использовать следующие sass-функции:
|
46
|
+
|
47
|
+
- gridname-x(n) — ширина *n* блоков
|
48
|
+
- gridname-y(n) — высота *n* блоков
|
49
|
+
- gridname-gutter-x(n) — ширина *n* отступов
|
50
|
+
- gridname-gutter-y(n) — высота *n* отступов
|
51
|
+
- gridname-modules-x(n) — ширина *n* модулей
|
52
|
+
- gridname-modules-y(n) — высота *n* модулей (если указано $module-height)
|
53
|
+
- gridname-modules-gap-x(n) — ширина *n* модулей плюс ширина одного отступа
|
54
|
+
- gridname-modules-gap-y(n) — высота *n* модулей плюс высота одного отступа (если указано $module-height)
|
55
|
+
- gridname-full-page-width() — ширина страницы
|
56
|
+
- gridname-full-page-height() — высота страницы (если указаны $module-height и $modules-y-count)
|
57
|
+
|
58
|
+
Пример
|
59
|
+
------
|
60
|
+
|
61
|
+
@include 'grids/display.grid';
|
62
|
+
@include 'grids/mobile.grid';
|
63
|
+
|
64
|
+
.page-content {
|
65
|
+
width: display-full-page-width();
|
66
|
+
margin-right: display-gutter-x(-1);
|
67
|
+
|
68
|
+
.section {
|
69
|
+
float: left;
|
70
|
+
width: display-modules-x(2);
|
71
|
+
margin: 0 display-gutter-x(1) display-gutter-y(1) 0;
|
72
|
+
}
|
73
|
+
}
|
74
|
+
|
75
|
+
@media only screen and (max-width : 320px) {
|
76
|
+
.page-content {
|
77
|
+
width: mobile-full-page-width();
|
78
|
+
margin-right: 0;
|
79
|
+
|
80
|
+
.section {
|
81
|
+
float: none;;
|
82
|
+
width: 100%
|
83
|
+
margin: 0 0 mobile-gutter-y(1) 0;
|
84
|
+
}
|
85
|
+
}
|
86
|
+
}
|
87
|
+
|
88
|
+
Лицензия
|
89
|
+
--------
|
90
|
+
|
91
|
+
Grids выпущен под [MIT-лицензией](http://opensource.org/licenses/MIT).
|
@@ -0,0 +1,46 @@
|
|
1
|
+
window.grids = new Object unless window.grids?
|
2
|
+
|
3
|
+
class grids.Scalable
|
4
|
+
constructor: (@sampleFontSize, @sampleAtomWidth, @sampleAtomHeight, @modulesXCount, @modulesYCount) ->
|
5
|
+
@ratio = (@modulesYCount * @sampleAtomHeight) / (@modulesXCount * @sampleAtomWidth)
|
6
|
+
@heightToFontSize = (@modulesYCount * @sampleAtomHeight) / @sampleFontSize
|
7
|
+
$(window).resize @newFontSize
|
8
|
+
@newFontSize()
|
9
|
+
|
10
|
+
newFontSize: =>
|
11
|
+
min = Math.min($(window).innerHeight(), $(window).innerWidth() * @ratio)
|
12
|
+
fontSize = min / @heightToFontSize
|
13
|
+
$('body').css(fontSize: "#{fontSize}px")
|
14
|
+
|
15
|
+
|
16
|
+
# new grids.ToWidthFitter(16 / 1024)
|
17
|
+
class grids.ToWidthFitter
|
18
|
+
constructor: (@sampleFontToSampleWidth) ->
|
19
|
+
$(window).resize @newFontSize
|
20
|
+
@newFontSize()
|
21
|
+
|
22
|
+
newFontSize: =>
|
23
|
+
|
24
|
+
console.log($(window).innerHeight() * @sampleFontToSampleWidth)
|
25
|
+
$('html').css(fontSize: "#{$(window).innerWidth() * @sampleFontToSampleWidth}px")
|
26
|
+
|
27
|
+
# new grids.ToHeightFitter(16 / 768)
|
28
|
+
class grids.ToHeightFitter
|
29
|
+
constructor: (@sampleFontToSampleHeight) ->
|
30
|
+
$(window).resize @newFontSize
|
31
|
+
@newFontSize()
|
32
|
+
|
33
|
+
newFontSize: =>
|
34
|
+
$('html').css(fontSize: "#{$(window).innerHeight() * @sampleFontToSampleHeight}px")
|
35
|
+
|
36
|
+
|
37
|
+
# new grids.ToWindowFitter(16 / 768, 1024 / 768)
|
38
|
+
class grids.ToWindowFitter
|
39
|
+
constructor: (@sampleFontToSampleHeight, @sampleWidthToSampleHeight) ->
|
40
|
+
$(window).resize @newFontSize
|
41
|
+
@newFontSize()
|
42
|
+
|
43
|
+
newFontSize: =>
|
44
|
+
min = Math.min($(window).innerHeight(), $(window).innerWidth() / @sampleWidthToSampleHeight)
|
45
|
+
fontSize = min * @sampleFontToSampleHeight
|
46
|
+
$('html').css(fontSize: "#{fontSize}px")
|
data/lib/grids/grid.scss.erb
CHANGED
@@ -1,4 +1,4 @@
|
|
1
|
-
<%= context%>
|
1
|
+
<%= context %>
|
2
2
|
|
3
3
|
$<%= name %>-atom-x: <%= atom_x %>;
|
4
4
|
$<%= name %>-atom-y: <%= atom_y %>;
|
@@ -56,3 +56,25 @@ $<%= name %>-modules-x-count: <%= modules_x_count %>;
|
|
56
56
|
@return <%= name %>-modules-y($<%= name %>-modules-y-count)
|
57
57
|
}
|
58
58
|
<% end %>
|
59
|
+
|
60
|
+
|
61
|
+
|
62
|
+
// @function x($name, $t: 1) { @return $#{$name}-atom-x * $t; }
|
63
|
+
|
64
|
+
// @function y($name, $t: 1) { @return $#{$name}-atom-y * $t; }
|
65
|
+
|
66
|
+
// @function gutter-x($name, $t: 1) { @return $#{$name}-gutter-x * $t; }
|
67
|
+
|
68
|
+
// @function gutter-y($name, $t: 1) { @return $#{$name}-gutter-y * $t; }
|
69
|
+
|
70
|
+
// @function modules-x($name, $m) { @return x($name, $#{$name}-module-width * $m) + gutter-x($name, $m - 1); }
|
71
|
+
|
72
|
+
// @function modules-y($name, $m) { @return y($name, #{$name}-module-height * $m) + gutter-y($name, $m - 1); }
|
73
|
+
|
74
|
+
// @function modules-gap-x($name, $m) { @return modules-x($name, $m) + gutter-x($name, 1); }
|
75
|
+
|
76
|
+
// @function modules-gap-y($name, $m) { @return modules-y($name, $m) + gutter-y($name, 1); }
|
77
|
+
|
78
|
+
// @function full-page-width($name) { @return modules-x($name, $#{$name}-modules-x-count); }
|
79
|
+
|
80
|
+
// @function full-page-height($name) { @return modules-y($name, $#{$name}-modules-y-count); }
|
data/lib/grids/version.rb
CHANGED
data/lib/grids.rb
CHANGED
@@ -3,5 +3,16 @@ require 'grids/importer'
|
|
3
3
|
require "grids/version"
|
4
4
|
|
5
5
|
module Grids
|
6
|
+
def self.load_paths
|
7
|
+
[
|
8
|
+
File.expand_path('../../app/assets/javascripts/', __FILE__),
|
9
|
+
]
|
10
|
+
end
|
11
|
+
|
12
|
+
if defined? Rails
|
13
|
+
class Engine < ::Rails::Engine
|
14
|
+
end
|
15
|
+
end
|
16
|
+
|
6
17
|
Sass.load_paths << Importer.new('.')
|
7
18
|
end
|
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: grids
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 1.1.
|
4
|
+
version: 1.1.1
|
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-02-
|
12
|
+
date: 2013-02-18 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: sass
|
@@ -39,6 +39,7 @@ files:
|
|
39
39
|
- LICENSE
|
40
40
|
- README.md
|
41
41
|
- Rakefile
|
42
|
+
- app/assets/javascripts/grids/scalable.js.coffee
|
42
43
|
- grids.gemspec
|
43
44
|
- lib/grids.rb
|
44
45
|
- lib/grids/grid.scss.erb
|