grids 1.1.0 → 1.1.1

data/README.md

@@ -0,0 +1,91 @@
+Grids — это набор [sass](http://sass-lang.com/)-функций для построения и использования собственных модульных сеток.
+Grids позволяет отказаться от абсолютных единиц измерения, используя, при этом, обычные css-конструкции.
+Библиотека дает возможность использовать более одной сетки на странице, что полезно, в частности, при адаптивной
+верстке.
+
+Модель модульной сетки, о которой ведется речь:
+
+![GRID](https://ucarecdn.com/7e9368ba-6ce4-4400-b34e-2e867f81fb88/)
+
+
+
+Установка
+---------
+
+Grids написан на ruby и требует наличие [bundler](http://gembundler.com/) в проекте. Добавьте grids в ваш Gemfile:
+
+    group :assets do
+      gem 'sass' # or 'sass-rails'
+      gem 'grids', '~> 1.1'
+    end
+    
+Если вы используете `sass --watch`, то добавьте параметр `-rgrids`.
+
+Использование
+-------------
+
+Создайте файл *gridname*.scss или *gridname*.css.scss для rails (например, display.css.scss).
+*gridname* должен быть правильным css-идентификатором. Заполните его подобным содержимым:
+
+    $atom-x: 42px; // <css unit> — ширина ячейки сетки
+    $atom-y: 21px; // <css unit> — высота ячейки сетки
+    $module-width: 1; // <integer> — ширина модуля в ячейках сетки
+    $modules-x-count: 12; // <integer> — ширина страницы в модулях
+    
+    // Опционально
+    $gutter-x: 42px; // <css unit> — ширина отступа между модулями, $atom-x по-умолчанию
+    $gutter-y: 21px; // <css unit> — высота отступа между модулями, $atom-y по-умолчанию
+    $module-height: 1; // <integer> — высота модуля в ячейках сетки, не используется, если не указано
+    $modules-y-count: 12; // <integer> — ширина страницы в модулях, не используется, если не указано
+    
+Добавьте в вашем sass-коде:
+
+    @import "gridname.grid" // .grid вместо .scss
+    
+После этого появится возможность использовать следующие sass-функции:
+
+- gridname-x(n) — ширина *n* блоков
+- gridname-y(n) — высота *n* блоков
+- gridname-gutter-x(n) — ширина *n* отступов
+- gridname-gutter-y(n) — высота *n* отступов
+- gridname-modules-x(n) — ширина *n* модулей
+- gridname-modules-y(n) — высота *n* модулей (если указано $module-height)
+- gridname-modules-gap-x(n) — ширина *n* модулей плюс ширина одного отступа
+- gridname-modules-gap-y(n) — высота *n* модулей плюс высота одного отступа (если указано $module-height)
+- gridname-full-page-width() — ширина страницы
+- gridname-full-page-height() — высота страницы (если указаны $module-height и $modules-y-count)
+
+Пример
+------
+
+    @include 'grids/display.grid';
+    @include 'grids/mobile.grid';
+    
+    .page-content {
+      width: display-full-page-width();
+      margin-right: display-gutter-x(-1);
+      
+      .section {
+        float: left;
+        width: display-modules-x(2);
+        margin: 0 display-gutter-x(1) display-gutter-y(1) 0;
+      }
+    }
+
+    @media only screen and (max-width : 320px) {
+      .page-content {
+        width: mobile-full-page-width();
+        margin-right: 0;
+        
+        .section {
+          float: none;;
+          width: 100%
+          margin: 0 0 mobile-gutter-y(1) 0;
+        }
+      }
+    }
+
+Лицензия
+--------
+
+Grids выпущен под [MIT-лицензией](http://opensource.org/licenses/MIT).

data/app/assets/javascripts/grids/scalable.js.coffee

@@ -0,0 +1,46 @@
+window.grids = new Object unless window.grids?
+
+class grids.Scalable
+  constructor: (@sampleFontSize, @sampleAtomWidth, @sampleAtomHeight, @modulesXCount, @modulesYCount) ->
+    @ratio = (@modulesYCount * @sampleAtomHeight) / (@modulesXCount * @sampleAtomWidth)
+    @heightToFontSize = (@modulesYCount * @sampleAtomHeight) / @sampleFontSize
+    $(window).resize @newFontSize
+    @newFontSize()
+
+  newFontSize: =>
+    min = Math.min($(window).innerHeight(), $(window).innerWidth() * @ratio)
+    fontSize = min / @heightToFontSize
+    $('body').css(fontSize: "#{fontSize}px")
+
+
+# new grids.ToWidthFitter(16 / 1024)
+class grids.ToWidthFitter
+  constructor: (@sampleFontToSampleWidth) ->
+    $(window).resize @newFontSize
+    @newFontSize()
+
+  newFontSize: =>
+
+    console.log($(window).innerHeight() * @sampleFontToSampleWidth)
+    $('html').css(fontSize: "#{$(window).innerWidth() * @sampleFontToSampleWidth}px")
+
+# new grids.ToHeightFitter(16 / 768)
+class grids.ToHeightFitter
+  constructor: (@sampleFontToSampleHeight) ->
+    $(window).resize @newFontSize
+    @newFontSize()
+
+  newFontSize: =>
+    $('html').css(fontSize: "#{$(window).innerHeight() * @sampleFontToSampleHeight}px")
+
+
+# new grids.ToWindowFitter(16 / 768, 1024 / 768)
+class grids.ToWindowFitter
+  constructor: (@sampleFontToSampleHeight, @sampleWidthToSampleHeight) ->
+      $(window).resize @newFontSize
+      @newFontSize()
+
+  newFontSize: =>
+    min = Math.min($(window).innerHeight(), $(window).innerWidth() / @sampleWidthToSampleHeight)
+    fontSize = min * @sampleFontToSampleHeight
+    $('html').css(fontSize: "#{fontSize}px")

data/lib/grids/grid.scss.erb

@@ -1,4 +1,4 @@
-<%= context%>
+<%= context %>
 
 $<%= name %>-atom-x: <%= atom_x %>;
 $<%= name %>-atom-y: <%= atom_y %>;
@@ -56,3 +56,25 @@ $<%= name %>-modules-x-count: <%= modules_x_count %>;
     @return <%= name %>-modules-y($<%= name %>-modules-y-count)
   }
 <% end %>
+
+
+
+// @function x($name, $t: 1) { @return $#{$name}-atom-x * $t; }
+
+// @function y($name, $t: 1) { @return $#{$name}-atom-y * $t; }
+
+// @function gutter-x($name, $t: 1) { @return $#{$name}-gutter-x * $t; }
+
+// @function gutter-y($name, $t: 1) { @return $#{$name}-gutter-y * $t; }
+
+// @function modules-x($name, $m) { @return x($name, $#{$name}-module-width * $m) + gutter-x($name, $m - 1); }
+
+// @function modules-y($name, $m) { @return y($name, #{$name}-module-height * $m) + gutter-y($name, $m - 1); }
+
+// @function modules-gap-x($name, $m) { @return modules-x($name, $m) + gutter-x($name, 1); }
+
+// @function modules-gap-y($name, $m) { @return modules-y($name, $m) + gutter-y($name, 1); }
+
+// @function full-page-width($name) { @return modules-x($name, $#{$name}-modules-x-count); }
+
+// @function full-page-height($name) { @return modules-y($name, $#{$name}-modules-y-count); }

data/lib/grids/version.rb

@@ -1,3 +1,3 @@
 module Grids
-  VERSION = "1.1.0"
+  VERSION = "1.1.1"
 end

data/lib/grids.rb

@@ -3,5 +3,16 @@ require 'grids/importer'
 require "grids/version"
 
 module Grids
+  def self.load_paths
+    [
+      File.expand_path('../../app/assets/javascripts/', __FILE__),
+    ]
+  end
+
+  if defined? Rails
+    class Engine < ::Rails::Engine
+    end
+  end
+
   Sass.load_paths << Importer.new('.')
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: grids
 version: !ruby/object:Gem::Version
-  version: 1.1.0
+  version: 1.1.1
   prerelease: 
 platform: ruby
 authors:
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2013-02-15 00:00:00.000000000 Z
+date: 2013-02-18 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sass
@@ -39,6 +39,7 @@ files:
 - LICENSE
 - README.md
 - Rakefile
+- app/assets/javascripts/grids/scalable.js.coffee
 - grids.gemspec
 - lib/grids.rb
 - lib/grids/grid.scss.erb