Permalink
Browse files

added regions

  • Loading branch information...
1 parent 1b5c2aa commit 62999b6c1fe87d2dc778babc7e1a58864786ffdb @kristianmandrup committed Aug 28, 2012
View
@@ -1,14 +1,17 @@
-# Flex layout for Rails
+# Flexible CSS layout models for Rails using Polyfills
-Polyfills for various HTML 5 "flex-layout" models.
+Polyfills for various HTML 5 "more flexible" layout models.
-* flexie.js (Flex box layout)
+* Flexie.js (Flex box layout)
+* Regions.js (CSS Regions)
* CSS Template Layout
Flexie.js is a polyfill for the [CSS3 Flexbox](http://www.w3.org/TR/css3-flexbox/) module from W3C.
CSS Template Layout is an implementation of [CSS Template Layout Module](http://www.w3.org/TR/css3-layout/) from W3C. Currently 2 different implementions are packaged in this gem.
+[Regions.js](https://github.com/ricardrobin/Regions.js) is the first implementation for the CSS3-Regions in the real world.
+
These polyfills are all packaged for use with the Rails asset pipeline.
This lets you use and experiment with the new HTML5 CSS layout model in order to simplify and improve your HTML grids and layout :)
@@ -22,6 +25,18 @@ This lets you use and experiment with the new HTML5 CSS layout model in order to
//= require flexie
```
+### Regions.js
+
+If you find [this](http://labs.adobe.com/technologies/cssregions/) interesting, just try this script!
+
+Regions.js requires [jQuery](http://jquery.com/) and [Lettering.js](https://github.com/davatron5000/Lettering.js) in order to work.
+
+```text
+//= require jquery
+//= require lettering.jquery
+//= require regions.jquery.min
+```
+
### Template layout 2011-2012 Pablo Escalada
```text
@@ -67,6 +82,32 @@ DEFAULTS = {
}
```
+## Regions.js usage
+
+```javascript
+$(function(){ // When DOM is Loaded
+ $("#article-flow").regions(".article-region");
+});
+```
+
+You can also pass a jQuery Object or a list of jQuery Objects / jQuery Selectorstring to the function :
+
+```javascript
+$("#content-source-element").regions($(".content-target-elements"));
+
+// or
+
+$("#content-source-element").regions(["#article-region-1", "#article-region-2", "#article-region-3"]);
+
+// or
+
+$("#content-source-element").regions([$("#article-region-1"), $("#article-region-2"), $("#article-region-3")]);
+
+// even mixed
+
+$("#content-source-element").regions([$("#article-region-1"), "#article-region-2", $("#article-region-3")]);
+```
+
## Template layout usage
Alexis Deveria version, see repo [css-template-layout](https://code.google.com/p/css-template-layout/) and these [demos](http://a.deveria.com/csstpl/) :)
View
@@ -1 +1 @@
-0.1.0
+0.1.1
@@ -1,7 +0,0 @@
-require File.expand_path(File.dirname(__FILE__) + '/spec_helper')
-
-describe "FlexieRails" do
- it "fails" do
- fail "hey buddy, you should probably rename this file and start specing for real"
- end
-end
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
@@ -0,0 +1,120 @@
+<!DOCTYPE html>
+<html class="no-js">
+<head>
+ <meta charset="UTF-8">
+ <title>Regions.js Test Suite</title>
+
+ <script src="http://code.jquery.com/jquery-latest.js"></script>
+ <script src="https://raw.github.com/Modernizr/Modernizr/master/modernizr.js"></script>
+ <script src="https://raw.github.com/SlexAxton/yepnope.js/master/yepnope.1.5.3-min.js"></script>
+ <link rel="stylesheet" href="http://code.jquery.com/qunit/git/qunit.css" type="text/css" media="screen" />
+ <script type="text/javascript" src="http://code.jquery.com/qunit/git/qunit.js"></script>
+ <script src="https://raw.github.com/davatron5000/Lettering.js/master/jquery.lettering.js"></script>
+
+ <script src="../feature-detects/cssregions.js"></script>
+ <script>
+ yepnope({
+ test: Modernizr.cssregions,
+ load: ["js/setup.js", "js/detection.js"],
+ nope: ["../regions.jquery.js", "js/layout.js"]
+ });
+ </script>
+</head>
+<body>
+ <h1 id="qunit-header">Regions.js Test Suite</h1>
+ <h2 id="qunit-banner"></h2>
+ <div id="qunit-testrunner-toolbar"></div>
+ <h2 id="qunit-userAgent"></h2>
+
+ <ol id="qunit-tests"></ol>
+ <div id="mod-output"></div>
+
+ <div id="playground">
+ <style type="text/css">
+ #article {
+ -webkit-flow: "article-flow";
+ flow: "article-flow";
+ }
+ .article-region {
+ content: from(article-flow);
+ background: #C5DFF0;
+ }
+ #article-region-1 {
+ display: inline-block;
+ width: 100px;
+ height: 100px;
+ }
+ #article-region-2 {
+ display: inline-block;
+ width: 80%;
+ height: 100px;
+ }
+ #article-region-3 {
+ display: inline-block;
+ margin-top: 20px;
+ width: 100%;
+ }
+
+ #alternative-article {
+ -webkit-flow: 'foo';
+ flow: 'foo'
+ }
+
+ .alternative-region {
+ content: from(foo);
+
+ background: #C5DFF0;
+ float: left;
+ width: 30%;
+ height: 200px;
+ margin: 10px;
+ }
+ </style>
+ <h1>A press article</h1>
+ <div id="article">
+ <p>1Lorem <a href="#">ipsum</a> dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+ <p>2Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+ <p>3Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+ </div>
+ <div class="article-region" id="article-region-1"></div>
+ <div class="article-region" id="article-region-2"></div>
+ <div class="article-region" id="article-region-3"></div>
+ </div>
+ <h1>Alternative Query Method</h1>
+
+ <div id="alternative-article">
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed leo enim, interdum vel iaculis vitae, pellentesque
+ sit amet neque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
+ Aliquam eget velit eu sapien commodo cursus non et orci. Maecenas ut tellus vel risus fermentum convallis in ut
+ erat. Maecenas luctus est et dolor posuere non posuere justo congue. Vestibulum a nulla nulla, at porttitor massa.
+ Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut vehicula consequat
+ risus, sit amet dapibus nunc volutpat quis. Donec vel ante vitae velit auctor sodales non eget augue. Nam at justo
+ metus. Sed consectetur dui vitae erat aliquet tincidunt. Quisque suscipit, mauris porttitor pharetra cursus, ipsum
+ nisl tempor velit, in porta orci risus ac dui. Nam non urna nunc, vel ultrices eros. Suspendisse egestas venenatis
+ erat et imperdiet.
+ <img id="oversized" src="img/lorem-ipsum-logo.jpeg"/>
+ </p>
+
+
+ <p>
+ Aenean varius euismod libero, et hendrerit arcu suscipit ut. Curabitur odio leo, tristique a varius at, venenatis
+ vel arcu. Cras quis adipiscing leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras placerat ante id
+ felis molestie varius scelerisque elit luctus. Mauris sit amet mauris elementum magna mollis hendrerit ac vitae
+ ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam
+ vehicula aliquet erat ac euismod.
+ </p>
+
+ <p>
+ Cras non diam sit amet justo elementum convallis sed non elit. Fusce tempor est et ligula sodales pretium.
+ Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas laoreet sem eu
+ libero aliquet auctor. Praesent justo augue, luctus sed placerat vel, faucibus at mauris. Mauris fringilla, eros
+ nec elementum tempor, ligula ante blandit urna, ut ultrices diam massa a nisi. Suspendisse at libero lorem. Morbi
+ ac enim eget urna venenatis iaculis.
+ </p>
+ </div>
+ <div class="alternative-region"></div>
+ <div class="alternative-region"></div>
+ <div class="alternative-region"></div>
+ <div class="alternative-region"></div>
+</body>
+</html>
@@ -0,0 +1,9 @@
+module("Feature detection");
+
+test("modernizr cssregions detection", function() {
+ notEqual(Modernizr.cssregions, undefined);
+});
+
+test("the browser isn't compatible with the css regions", function() {
+ equal(Modernizr.cssregions, false);
+});
View
@@ -0,0 +1,43 @@
+$(function(){
+ module("Layout");
+
+ $("#article").regions(["#article-region-1", "#article-region-2", "#article-region-3"]);
+
+ test("hide flow source", function() {
+ equal($('#article').css("display"), "none");
+ });
+
+ test("regions have content", function() {
+ notEqual($('.article-region').text(), "");
+ });
+
+ test("regions have different content", function() {
+ notEqual($('#article-region-1').text(), $('#article-region-2').text());
+ });
+
+ test("text in the first region is matching", function() {
+ var expected = /1Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod */;
+ ok(
+ expected.test($('#article-region-1').text()),
+ "is 1Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod"
+ );
+ });
+
+
+ // alternative method: use only a target jquery selector:
+ $("#alternative-article").regions('.alternative-region');
+
+ test("alternative method with jquery selector", function(){
+ var expected = /Lorem ipsum dolor sit amet, consectetur adipiscing elit. */;
+ ok(
+ expected.test($('.alternative-region:first').text()),
+ 'is Lorem ipsum dolor sit amet, consectetur adipisicing elit. …'
+ )
+ });
+
+
+ // handling oversized elements
+ test("oversized object visible", function(){
+ equal($('.alternative-region img#oversized').length, 1);
+ });
+});
View
No changes.
@@ -0,0 +1,6 @@
+// test if the CSS regions support is enabled
+// http://dev.w3.org/csswg/css3-regions/
+
+Modernizr.addTest( "cssregions",function(){
+ return Modernizr.testAllProps("flow");
+});
@@ -0,0 +1,66 @@
+/*global jQuery */
+/*!
+* Lettering.JS 0.6.1
+*
+* Copyright 2010, Dave Rupert http://daverupert.com
+* Released under the WTFPL license
+* http://sam.zoy.org/wtfpl/
+*
+* Thanks to Paul Irish - http://paulirish.com - for the feedback.
+*
+* Date: Mon Sep 20 17:14:00 2010 -0600
+*/
+(function($){
+ function injector(t, splitter, klass, after) {
+ var a = t.text().split(splitter), inject = '';
+ if (a.length) {
+ $(a).each(function(i, item) {
+ inject += '<span class="'+klass+(i+1)+'">'+item+'</span>'+after;
+ });
+ t.empty().append(inject);
+ }
+ }
+
+ var methods = {
+ init : function() {
+
+ return this.each(function() {
+ injector($(this), '', 'char', '');
+ });
+
+ },
+
+ words : function() {
+
+ return this.each(function() {
+ injector($(this), ' ', 'word', ' ');
+ });
+
+ },
+
+ lines : function() {
+
+ return this.each(function() {
+ var r = "eefec303079ad17405c889e092e105b0";
+ // Because it's hard to split a <br/> tag consistently across browsers,
+ // (*ahem* IE *ahem*), we replaces all <br/> instances with an md5 hash
+ // (of the word "split"). If you're trying to use this plugin on that
+ // md5 hash string, it will fail because you're being ridiculous.
+ injector($(this).children("br").replaceWith(r).end(), r, 'line', '');
+ });
+
+ }
+ };
+
+ $.fn.lettering = function( method ) {
+ // Method calling logic
+ if ( method && methods[method] ) {
+ return methods[ method ].apply( this, [].slice.call( arguments, 1 ));
+ } else if ( method === 'letters' || ! method ) {
+ return methods.init.apply( this, [].slice.call( arguments, 0 ) ); // always pass an array
+ }
+ $.error( 'Method ' + method + ' does not exist on jQuery.lettering' );
+ return this;
+ };
+
+})(jQuery);
@@ -0,0 +1,13 @@
+/*global jQuery */
+/*!
+* Lettering.JS 0.6.1
+*
+* Copyright 2010, Dave Rupert http://daverupert.com
+* Released under the WTFPL license
+* http://sam.zoy.org/wtfpl/
+*
+* Thanks to Paul Irish - http://paulirish.com - for the feedback.
+*
+* Date: Mon Sep 20 17:14:00 2010 -0600
+*/
+(function($){function injector(t,splitter,klass,after){var a=t.text().split(splitter),inject='';if(a.length){$(a).each(function(i,item){inject+='<span class="'+klass+(i+1)+'">'+item+'</span>'+after});t.empty().append(inject)}}var methods={init:function(){return this.each(function(){injector($(this),'','char','')})},words:function(){return this.each(function(){injector($(this),' ','word',' ')})},lines:function(){return this.each(function(){var r="eefec303079ad17405c889e092e105b0";injector($(this).children("br").replaceWith(r).end(),r,'line','')})}};$.fn.lettering=function(method){if(method&&methods[method]){return methods[method].apply(this,[].slice.call(arguments,1))}else if(method==='letters'||!method){return methods.init.apply(this,[].slice.call(arguments,0))}$.error('Method '+method+' does not exist on jQuery.lettering');return this}})(jQuery);
Oops, something went wrong.

0 comments on commit 62999b6

Please sign in to comment.