edgrid_rb 0.0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: d4540d0d0a88733557f3bd6ee49499174f02d54f
+  data.tar.gz: 4fe53eeb15c7ac4216727fbd56c7e7afa20df927
+SHA512:
+  metadata.gz: 542422c0a617090b28e69b13af25736a75e74b43e74a8d6ececc9a3ff1e42a03b91da55629fad173c9d8799cb23d9f798b82bcd6fc96b7f2c140925d411c3d11
+  data.tar.gz: 4f75f4b17a9efab14e02c90d8a10a60c7e5a4e5c9544cd38fe2e10b8a5ab9443a50d5902079c64e77e542924103a96651dd93ecc863543e039920d0d5db248fc

data/lib/edgrid_rb/my_edgrid_helper.rb

@@ -0,0 +1,15 @@
+module MyEdgridHelper
+	["hd","web","tablet","movil"].each do |device|
+		1.upto(20) do |val|
+			new_val = val * 5
+			define_method("#{device}_#{new_val}") do |args = {}, &block|
+				args[:class] = args.has_key?(:class) ? "#{args[:class]} caja #{device}-#{new_val}" : "caja #{device}-#{new_val}"
+				attrs = args.map {|k,v| "#{k}='#{v}' " }.join(" ")
+				html= "<div #{attrs}>"
+				html+= capture(&block)
+				html+= "</div>"
+				html.html_safe
+			end
+		end
+	end
+end

data/lib/edgrid_rb/version.rb

@@ -0,0 +1,3 @@
+module EdgridRb
+  VERSION = "0.0.1.0"
+end

data/lib/edgrid_rb.rb

@@ -0,0 +1,14 @@
+require "edgrid_rb/version"
+require "edgrid_rb/my_edgrid_helper"
+require 'rails'
+require 'active_support/core_ext/numeric/time'
+require 'active_support/dependencies'
+module EdgridRb
+  class Engine < ::Rails::Engine
+  	initializer "my_gem.include_view_helpers" do |app|
+      ActiveSupport.on_load :action_view do
+        include MyEdgridHelper
+      end
+    end
+  end
+end

data/vendor/assets/css/componentes/_base.scss

@@ -0,0 +1,20 @@
+// RWD Bases
+*,
+*:before,
+*:after {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box; 
+}
+
+body {
+	font-family: sans-serif;
+	margin: 0;
+	padding: 0;
+}
+
+// Imágenes responsive
+	img {
+		max-width: 100%;
+		height: auto;
+	}

data/vendor/assets/css/componentes/_cuadricula.scss

@@ -0,0 +1,13 @@
+// Modo cuadricula, se usa cuando se quiere hacer una rejilla
+.grupo.cuadricula {
+	font-size: 0;
+}
+
+.grupo.cuadricula > .caja {
+	float: none;
+	display: inline-block;
+	font-size: 1rem;
+}
+
+// Mixin para crear cuadriculas
+// Buscarlo en el archivo _mixins.scss

data/vendor/assets/css/componentes/_desarrollo.scss

@@ -0,0 +1,103 @@
+/* 	ESTILOS PARA DESARROLLO
+	========================
+	Añada la clase "desarrollo"
+   	a body para tener ayudas al trabajar con ED GRID 
+*/
+body.desarrollo {
+	padding : 0 !important;
+	margin  : 0 !important;
+
+	&:before {
+		// Estilos para el mensaje en el top del body
+			background    : steelblue; /*Azul Escuela Digital*/	
+			color         : #fff;
+		// Estilos de fuente
+			font-size     : 18px;
+			font-weight   : bold;
+			line-height   : 36px;
+			text-align    : center;
+		// Layout y caja	
+			display       : block;
+			height        : 36px;
+			margin-bottom : 30px;
+	}
+
+	.grupo {
+		// El padding deja espacio para imprimir la clase
+			padding-top   : 22px;
+		// Se separan los grupos para ver mejor el layout
+			margin-bottom : 10px;
+		// Identificar al grupo
+			outline: 1px solid tomato;
+
+		.caja{
+			// Color de fondo que identifica el modo desarrollo
+				// background     : #eee;
+			// Para dar position absolute a las clases que se imprimen
+				position       : relative;
+			// Espacio inferior para imprimir las clases
+				padding-bottom : 22px;
+			// Colorear los pares de otro color para diferenciar las cajas
+				&:nth-child(even){
+					background: rgba(steelblue,.2);
+				}
+		}
+
+		.grupo {
+			// Grupos dentro de grupos
+				margin-bottom  : 0;
+		}
+	}
+}
+
+.desarrollo .grupo .caja:after,
+.desarrollo .grupo:before{
+	// Imprimir las clases
+		content     : attr(class);
+	
+	// Diseño
+		font-style  : italic;
+		font-size   : 12px;
+		font-weight : normal;
+	
+	// Layout
+		padding     : 0 5px;
+		z-index     : 1;
+		bottom      : 0;
+		right       : 0;
+		position    : absolute;
+		display     : table;
+		width       : 100%;
+		height      : 22px;
+		line-height : 22px;
+}
+
+.desarrollo .grupo:before{
+	background    : rgba(tomato,.3);
+	color         : tomato;
+	top           : 0;
+	left          : 0;
+	width         : 100%;
+}
+
+.desarrollo .caja:after {
+	background: rgba(steelblue,.2);
+	color: steelblue;
+}
+
+.desarrollo .caja.total:after{
+	background: rgba(darken(steelblue,30%),.3);
+}
+
+// Mensajes de desarrollo
+	body.desarrollo:before {
+	content: "ED-GRID: Tamaño base";
+}
+// Loop para imprimir el mensaje de desarrollo basado en los breakpoints
+	@each $size, $screen-size in $breakpoints {
+		@include desde($size){
+		body.desarrollo:before{
+			content: "ED-GRID: Tamaño #{$size}, a partir de #{$screen-size}";
+			}
+		}
+	}

data/vendor/assets/css/componentes/_mixins.scss

@@ -0,0 +1,47 @@
+//Mixins para media queries
+// El parámetro es el nombre del breakpoint
+@mixin hasta($size){
+	@media screen and (max-width: map-get($breakpoints,$size) - 1){
+		@content;
+	}
+}
+
+@mixin desde($size){
+	@media screen and (min-width: map-get($breakpoints,$size)){
+		@content;
+	}
+}
+
+@mixin desde-hasta($desde,$hasta){
+	@media screen and (min-width: map-get($breakpoints,$desde)) and (max-width: map-get($breakpoints,$hasta) - 1){
+		@content;
+	}
+}
+
+// Mixins para cuadriculas
+// Se aplica contendor de la cuadricula. 
+// Los parámetros son el selector de cada item y el número de columnas
+
+	@mixin cuadricula($items,$columnas){
+		font-size  : 0;
+		margin     : 0;
+		padding    : 0;
+		list-style : none; // por si el contenedor es un ul
+
+		#{$items}, .#{$items}{
+			display        : inline-block;		
+			font-size      : 1rem;		
+			width          : (100% / $columnas);
+			margin         : 0 0 $caja--separacion;
+			padding-left   : ($caja--separacion / 2);
+			padding-right  : ($caja--separacion / 2);		
+			vertical-align : top;
+		}
+	}
+
+// Mixin para controlar el padding
+// El parámetro es por cuanto se va a multiplicar el padding base.
+	@mixin padding($numero){
+		padding-left: ($caja--separacion / 2) * $numero;
+		padding-right: ($caja--separacion / 2) * $numero;
+	}

data/vendor/assets/css/componentes/_nucleo.scss

@@ -0,0 +1,106 @@
+/*
+	GRUPOS Y CAJAS
+	==============
+	Los grupos son contenedores para las cajas.
+	Las cajas crean las divisiones en el grupo (columnas)
+*/
+.grupo {
+	position   : relative;
+	max-width  : $grupo--max-width;
+	width      : 100%;
+	margin     : 0 auto;
+
+	&.total {
+		max-width : 100% !important;
+	}
+
+	&:before, &:after {
+		content : "";
+		display : table;
+		width   : 100%;
+		clear   : both;
+	}
+
+	.caja {
+		float         : left;
+		margin        : 0;
+		padding-left  : ($caja--separacion / 2);
+		padding-right : ($caja--separacion / 2);
+		width         : 100%;
+		
+		&:last-child{
+			float: right;
+		}
+	}
+
+	.caja.total {
+		float   : none;
+		display : table;
+
+		&:before, &:after {
+			content : "";
+			display : table;
+			width   : 100%;
+			clear   : both;
+		}
+	}
+}
+
+// Modo tabla (alturas iguales para cada caja) **experimental, no es RWD**
+.grupo.tabla {
+	display : table;
+
+	& > .caja {
+		float   : none;
+		display : table-cell;
+	}
+
+	&.middle > .caja{
+		vertical-align: middle;
+	}
+
+	&.top > .caja {
+		vertical-align: top;
+	}
+
+	&.bottom > .caja {
+		vertical-align: bottom;
+	}
+}
+
+//Tamaño base en porcentajes
+@for $i from 1 through 20 {
+	.grupo .base-#{$i*5}{
+		width: unquote($i*5 + "%");
+	}
+}
+
+// Tamaño base en fracciones
+@each $fraccion-nombre, $fraccion in $fracciones{
+	@for $i from 1 through $fraccion{
+		.grupo .base-#{$i}-#{$fraccion}{
+			width: (100% / $fraccion) * $i; 
+		}
+	}
+}
+
+// Breakpoints
+@each $size, $screen-size in $breakpoints{
+	/*#{$size}: A partir de #{$screen-size}*/
+	@media all and (min-width: $screen-size){
+		/*Tamaños en porcentajes*/
+		@for $i from 1 through 20 {
+			.grupo .caja.#{$size}-#{$i*5}{
+				width: unquote($i*5 + "%");
+			}
+		}
+		/*Tamaño en fracciones*/
+		@each $fraccion-nombre, $fraccion in $fracciones{
+			@for $i from 1 through $fraccion{
+				.grupo .caja.#{$size}-#{$i}-#{$fraccion}{
+					width: (100% / $fraccion) * $i; 
+				}
+			}
+		}
+	}
+}

data/vendor/assets/css/componentes/_utilidades.scss

@@ -0,0 +1,47 @@
+/*
+	ESTILOS DE LAYOUT
+	==================
+*/
+.centrar-caja{
+	display: block;
+	clear: both;
+	float: none !important;
+	margin: 0 auto !important;
+}
+
+.centrar-texto {
+	text-align: center;
+}
+
+.derecha-texto {
+	text-align: right;
+}
+
+.left, .izquierda {
+	float: left;
+}
+
+.right, .derecha {
+	float: right;
+}
+
+/* 	NO PADDING
+	===========
+	class="no-padding" al grupo, le da padding cero a todas sus cajas.
+	class="no-padding" a la caja le da padding cero solo a ella
+*/
+.no-padding.grupo > .caja,
+.grupo > .no-padding {
+	padding: 0 !important;
+}
+
+/* Controlar el padding*/
+.padding {
+	padding-left: ($caja--separacion / 2);
+	padding-right: ($caja--separacion / 2);
+}
+
+.doble-padding {
+	padding-left: $caja--separacion;
+	padding-right: $caja--separacion;
+}

data/vendor/assets/css/componentes/_visibilidad.scss

@@ -0,0 +1,31 @@
+// Visibilidad
+// solo-$size ya no se usa porque se puede conseguir
+// combinando clases desde y hasta
+
+// Visibilidad desde $size
+@each $size, $screen-size in $breakpoints{
+	@media screen and (max-width: $screen-size - 1){
+		.desde-#{$size}{
+			display: none;
+		}
+	}
+	@media screen and (min-width: $screen-size){
+		.desde-#{$size}{
+			display: block;
+		}
+	}
+}
+
+// Visibilidad hasta $size
+@each $size, $screen-size in $breakpoints{
+	@media screen and (max-width: $screen-size - 1){
+		.hasta-#{$size}{
+			display: block;
+		}
+	}
+	@media screen and (min-width: $screen-size){
+		.hasta-#{$size}{
+			display: none;
+		}
+	}
+}

data/vendor/assets/css/ed-grid.scss

@@ -0,0 +1,33 @@
+// VARIABLES DE ED GRID
+
+	// Ancho máximo de cada grupo
+		$grupo--max-width : 1100px;
+		
+	// Separación entre cajas
+		$caja--separacion : 30px;
+
+	// Tamaños. Puede editar los nombres y las
+	// medidas, añadir más o quitar.
+		$breakpoints: (
+			movil  : 480px,
+			tablet : 768px,
+			web    : 1025px,
+			hd     : 1400px
+			);
+
+	// Fracciones para los anchos de las cajas.
+	// También puede editarlos si desea
+		$fracciones: (
+			tercios : 3,
+			sextos  : 6,
+			octavos : 8
+			);
+
+// Componentes ED GRID
+	@import "componentes/base";        // Estilos básicos para RWD
+	@import "componentes/nucleo";      // Núcleo de ED GRID, grupos y cajas
+	@import "componentes/mixins";      // Mixins ED GRID
+	@import "componentes/cuadricula";  // Realizar cuadriculas
+	@import "componentes/desarrollo";  // Modo desarrollo
+	@import "componentes/visibilidad"; // Controlar la visibilidad
+	@import "componentes/utilidades";  // Utilidades adicionales

metadata

@@ -0,0 +1,119 @@
+--- !ruby/object:Gem::Specification
+name: edgrid_rb
+version: !ruby/object:Gem::Version
+  version: 0.0.1.0
+platform: ruby
+authors:
+- zetanova
+autorequire: 
+bindir: exe
+cert_chain: []
+date: 2015-04-01 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: bundler
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.8'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.8'
+- !ruby/object:Gem::Dependency
+  name: rake
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '10.0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '10.0'
+- !ruby/object:Gem::Dependency
+  name: rspec
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: railties
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 3.2.6
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '5'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 3.2.6
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '5'
+description: Allows you to include https://github.com/escueladigital/ed-grid in your
+  application alongside some view helper methods
+email:
+- carlosmontalvo@zetanova.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- lib/edgrid_rb.rb
+- lib/edgrid_rb/my_edgrid_helper.rb
+- lib/edgrid_rb/version.rb
+- vendor/assets/css/componentes/_base.scss
+- vendor/assets/css/componentes/_cuadricula.scss
+- vendor/assets/css/componentes/_desarrollo.scss
+- vendor/assets/css/componentes/_mixins.scss
+- vendor/assets/css/componentes/_nucleo.scss
+- vendor/assets/css/componentes/_utilidades.scss
+- vendor/assets/css/componentes/_visibilidad.scss
+- vendor/assets/css/ed-grid.scss
+homepage: https://github.com/zephiro/edgrid_rb
+licenses:
+- MIT
+metadata:
+  allowed_push_host: https://rubygems.org
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: 
+rubygems_version: 2.4.5
+signing_key: 
+specification_version: 4
+summary: Ruby wrapper for EdGrid
+test_files: []