gintonic-rails 0.2.1 → 0.2.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: f602f1ee9669364dab567ae5c8bde928c14f3f61
-  data.tar.gz: 3bfba518aaf4fa14f5dfd4333b05d17448f665b2
+  metadata.gz: cc211759b232d9e3d22263eacd60a97653e45823
+  data.tar.gz: 7a610f9813aa920ec1a9f9777360af22c62b650c
 SHA512:
-  metadata.gz: 5ecd7d3fd7849a1ee7b8958d165f7c72bd2a9a37c9de2d96b2a0d11d8a119d7d7b841232409171224a7acf550f91a3d109b34634d7fce0d00464c49dc59d65e3
-  data.tar.gz: 35b49c39eae2e121863565c2737e0731a390ae6d9d9d5000079f98004e44381eb73fe8624177cc6484b7163b8fb068b280187865f89b9354b3aac0ade82638ed
+  metadata.gz: e321acd268632891f9e336e7c08c0ca61e38b5cef842252d59b793b032204ae4a2756a49f1bd8a6644b60b68baaaa15af672e8428da819087d6301d08ee4e478
+  data.tar.gz: 74d84b1a60812d253d95557a94d4c0dd9906080b529eec0a08a8343616e000dd47e109e09b1a21b646d3cb2384ee80a230bd6d6d011e97af20ff24ff9b629acc

data/.gitignore

@@ -15,3 +15,6 @@ spec/reports
 test/tmp
 test/version_tmp
 tmp
+test/dummy/log/development.log
+test/dummy/log/test.log
+test/dummy/db/*.sqlite3

data/README.md

@@ -12,62 +12,30 @@ And then execute:
 
     $ bundle install
 
-You are ready to import gintonic at the beginnign of application.scss (all is written with scss syntax):
+You are ready to import gintonic at the beginnign of application.css.scss (all is written with scss syntax):
 
-    @import "gintonic";
+```
+@import "gintonic";
+```
 
 ## Usage
 
-**Reset:**  
-The importation includes by default normalize.css v3.0.2 http://git.io/normalize.  
-You can also import in any other file:  
+### Reset:
 
-    @include normalize;
+The importation includes by default a modern reset (Dom Limpio)[https://github.com/carloscabo/dom-limpio/].
 
-**CSS3 mixins:**  
-There is a global funtion to add vendor prefixes  
-Example:  
+```
+@import "dom-limpio/variables";
+@import "dom-limpio/layout";
+@import "dom-limpio/type";
+@import "dom-limpio/forms";
+```
 
-    element {
-      @include prefixer(border-radius, $values, moz o webkit w3c);
-    }
 
-Default prefixes:  
- - border-radius
- - box-shadow
- - transform
- - transition
- - transition
- - transition-delay
- - transition-duration
 
-Example:
 
-    element {
-      @include box-shadow(inset 0 0 3px black, 1px 1px 0 white);
-    }
 
-**Structure mixins:**  
-Cross browser block styles with support >IE8, FF, Chrome, Opera  
- - clearfix
- - inline-block
 
-**Tipography mixins:**
- - font-face: FontFace declaration mixin
- - hover-link: Disable link underline and activate it on hover
- - hide-text: Hide text and show a image instead
-
-Examples:  
-
-    @include font-face("family-name", "file-name");
-    @include font-face("family-name", "variation-file-name", bold);
-
-    element {
-        @include hover-link();
-    }
-    element {
-        @include hide-text(image-url('bg.png') no-repeat 0 0, 20px, 20px);
-    }
 
 ## Contributing
 
@@ -76,3 +44,4 @@ Examples:
 3. Commit your changes (`git commit -am 'Add some feature'`)
 4. Push to the branch (`git push origin my-new-feature`)
 5. Create new Pull Request
+

data/Rakefile

@@ -1 +1,19 @@
-require "bundler/gem_tasks"
+begin
+  require 'bundler/setup'
+rescue LoadError
+  puts 'You must `gem install bundler` and `bundle install` to run rake tasks'
+end
+
+Bundler::GemHelper.install_tasks
+
+require 'rake/testtask'
+
+Rake::TestTask.new(:test) do |t|
+  t.libs << 'lib'
+  t.libs << 'test'
+  t.pattern = 'test/**/*_test.rb'
+  t.verbose = false
+end
+
+
+task default: :test

data/app/assets/stylesheets/_gintonic.scss

@@ -1,5 +1,11 @@
-@import 'normalize/normalize';
-
 @import "bourbon";
 
-@import "mixins/utils";
+@import "dom-limpio/layout";
+@import "dom-limpio/type";
+@import "dom-limpio/forms";
+
+@import "gintonic/base/vars";
+@import "gintonic/base/utils";
+
+@import "gintonic/modules/buttons";
+@import "gintonic/modules/responsive_helpers";

data/app/assets/stylesheets/gintonic/base/_utils.scss

@@ -0,0 +1,5 @@
+@mixin media($breakpoint) {
+  @media only screen and (max-width: $breakpoint) {
+    @content;
+  }
+}

data/app/assets/stylesheets/gintonic/base/_vars.scss

@@ -0,0 +1,4 @@
+// Media Queries Breakpoints
+$g-mq-mobile: 767px;
+$g-mq-tablet: 1023px;
+$g-mq-small-desktop: 1200px;

data/app/assets/stylesheets/gintonic/modules/_responsive_helpers.scss

@@ -0,0 +1,46 @@
+//
+// Responsive helpers
+//
+
+.hide-on-desktop,
+.responsive-only, // Both tablet + mobile
+.tablet-only,
+.mobile-only {
+  display: none !important;
+}
+.desktop-only,
+.hide-on-responsive, // Both tablet + mobile
+.hide-on-tablet,
+.hide-on-mobile {
+  // Default visible
+}
+
+//
+// Tablet
+//
+@media only screen and (max-device-width: $g-mq-tablet) {
+  .responsive-only,
+  .tablet-only {
+    display: block !important;
+  }
+  .desktop-only,
+  .hide-on-responsive,
+  .hide-on-tablet {
+    display: none !important;
+  }
+}
+
+//
+// Mobile
+//
+@media only screen and (max-device-width: $g-mq-mobile) {
+  .responsive-only,
+  .mobile-only {
+    display: block !important;
+  }
+  .desktop-only,
+  .hide-on-responsive,
+  .hide-on-mobile {
+    display: none !important;
+  }
+}

data/gintonic-rails.gemspec

@@ -19,4 +19,7 @@ Gem::Specification.new do |gem|
 
   gem.add_runtime_dependency("sass", "~> 3.4")
   gem.add_dependency("bourbon", ">= 4.2")
+
+  gem.add_development_dependency "rails", ">= 4.1.5"
+  gem.add_development_dependency "sqlite3"
 end

data/lib/generators/gintonic/js/js_generator.rb

@@ -4,6 +4,7 @@ class Gintonic::JsGenerator < Rails::Generators::Base
   def create_structure
     create_file "app/assets/javascripts/libs/.keep", ""
     create_file "app/assets/javascripts/modules/.keep", ""
+    create_file "app/assets/javascripts/blocks/.keep", ""
   end
 
   def copy_ready_js

data/lib/generators/gintonic/styles/styles_generator.rb

@@ -2,12 +2,14 @@ class Gintonic::StylesGenerator < Rails::Generators::Base
   source_root File.expand_path('../templates', __FILE__)
 
   def create_structure
-    create_file "app/assets/stylesheets/base/_layout.scss", ""
-    create_file "app/assets/stylesheets/base/_typography.scss", ""
-    create_file "app/assets/stylesheets/base/_variables.scss", ""
+    create_file "app/assets/stylesheets/base/_3_layout.scss", ""
+    create_file "app/assets/stylesheets/base/_2_typography.scss", ""
+    create_file "app/assets/stylesheets/base/_1_variables.scss", ""
     create_file "app/assets/stylesheets/libs/.keep", ""
     create_file "app/assets/stylesheets/pages/.keep", ""
     create_file "app/assets/stylesheets/partials/.keep", ""
+    create_file "app/assets/stylesheets/elements/.keep", ""
+    create_file "app/assets/stylesheets/blocks/.keep", ""
   end
 
   def copy_application_css

data/lib/gintonic-rails.rb

@@ -1,4 +1,5 @@
-require "gintonic-rails/version"
+require 'gintonic-rails/version'
+require 'bourbon'
 
 unless defined?(Sass)
   require 'sass'

data/lib/gintonic-rails/engine.rb

@@ -1,5 +1,3 @@
-require 'bourbon'
-
 module Gintonic
   class Engine < Rails::Engine
     isolate_namespace Gintonic

data/lib/gintonic-rails/version.rb

@@ -1,3 +1,3 @@
 module Gintonic
-  VERSION = "0.2.1"
+  VERSION = "0.2.2"
 end

data/test/dummy/README.rdoc

@@ -0,0 +1,28 @@
+== README
+
+This README would normally document whatever steps are necessary to get the
+application up and running.
+
+Things you may want to cover:
+
+* Ruby version
+
+* System dependencies
+
+* Configuration
+
+* Database creation
+
+* Database initialization
+
+* How to run the test suite
+
+* Services (job queues, cache servers, search engines, etc.)
+
+* Deployment instructions
+
+* ...
+
+
+Please feel free to use a different markup language if you do not plan to run
+<tt>rake doc:app</tt>.

data/test/dummy/Rakefile

@@ -0,0 +1,6 @@
+# Add your own tasks in files placed in lib/tasks ending in .rake,
+# for example lib/tasks/capistrano.rake, and they will automatically be available to Rake.
+
+require File.expand_path('../config/application', __FILE__)
+
+Rails.application.load_tasks

data/test/dummy/app/assets/javascripts/application.js

@@ -0,0 +1,13 @@
+// This is a manifest file that'll be compiled into application.js, which will include all the files
+// listed below.
+//
+// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
+// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
+//
+// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
+// compiled file.
+//
+// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
+// about supported directives.
+//
+//= require_tree .

data/test/dummy/app/assets/stylesheets/application.scss

@@ -0,0 +1 @@
+@import 'gintonic';

data/test/dummy/app/controllers/application_controller.rb

@@ -0,0 +1,5 @@
+class ApplicationController < ActionController::Base
+  # Prevent CSRF attacks by raising an exception.
+  # For APIs, you may want to use :null_session instead.
+  protect_from_forgery with: :exception
+end

data/test/dummy/app/controllers/demo_controller.rb

@@ -0,0 +1,5 @@
+class DemoController < ApplicationController
+  def show
+    render template: "demo/#{params[:page]}"
+  end
+end

data/test/dummy/app/helpers/application_helper.rb

@@ -0,0 +1,2 @@
+module ApplicationHelper
+end

data/test/dummy/app/views/demo/home.html.erb

@@ -0,0 +1 @@
+<%= link_to 'Reset', demo_path('reset') %>

data/test/dummy/app/views/demo/index.html.erb

@@ -0,0 +1 @@
+<h1>Demo</h1>

data/test/dummy/app/views/demo/reset.html.erb

@@ -0,0 +1,164 @@
+<div id="tests-elements">
+
+  <h1>h1. Lorem ipsum dolor sit amet, <b>b. consectetur <i>i. adipisicing</i></b> elit. Qui dolorum <i>i. blanditiis</i> quae amet tempore fuga quam cumque voluptatem fugiat necessitatibus.</h1>
+
+  <h2>h2. Lorem ipsum dolor sit amet, <b>b. consectetur <i>i. adipisicing</i></b> elit. Unde quod, <i>i. tenetur</i> obcaecati qui quae id suscipit facere esse nulla nobis.</h2>
+
+  <h3>h3. Lorem ipsum dolor sit amet, <b>consectetur<i> adipisicing</i></b> elit. Tempora, ut <i>fugiat illum</i> explicabo in cupiditate repellat. Repudiandae itaque, quis enim.</h3>
+
+  <h4>h4. Lorem ipsum dolor sit amet, <b>consectetur<i> adipisicing</i></b> elit. Voluptatem, maxime? <i>Repellat voluptas</i> sapiente magnam labore eius nam itaque! Cumque, sint.</h4>
+
+  <h5>h5. Lorem ipsum dolor sit amet, <b>consectetur<i> adipisicing</i></b> elit. Sint <i>recusandae placeat</i>, dolores aliquam nisi dicta temporibus unde eum consequatur! Provident!</h5>
+
+  <h6>h6. Lorem ipsum dolor sit amet, <b>consectetur<i> adipisicing</i></b> elit. Similique magnam facere voluptatibus cupiditate sequi vitae esse voluptate! Laborum, similique, magnam.</h6>
+
+  <p>p. Lorem ipsum dolor sit amet, <span>span. consectetur <span>span.adipisicing</span> elit</span>. <b>b. Fugiat facere similique</b> maiores itaque dignissimos rem <i>asperiores</i> esse! Nihil ea iure totam eum itaque qui, animi minima doloribus esse nam nostrum numquam laudantium id voluptatum, similique nulla aut eaque ut nobis vel quas, iusto eius veritatis? A voluptas necessitatibus est quibusdam <span>quam <b>obcaecati fugit</b> asperiores earum saepe anim<i>corporis cupiditate alias</i>e alias, accusantium ut ratione temporibus vel? Velit in itaque nostrum!</span> Nobis dolorem obcaecati <sup>23</sup> iure <sub>2356</sub> dolorum expedita aliquam reprehenderit illo inventore id <i>temporibus eum</i> debitis rem cum, ipsum odit quam iste libero non dolore error. Sint ipsum quo et, illo delectus.</p>
+
+  <span>span. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem, commodi quas adipisci sint vero cupiditate, repellendus atque totam voluptatibus dolore vitae. <span>span. Omnis <b>aspernatur velit</b>, assumenda sequi <i>veritatis delectus</i> suscipit error alias tempora molestiae dolorem accusamus aliquam, nemo consequuntur</span> ex ducimus <b>accusantium officia</b> nulla natus rerum? <i>Praesentium cupiditate</i> nemo eaque laborum inventore, nihil exercitationem aspernatur, accusamus unde ea ad necessitatibus, iste!</span>
+
+  <strong>strong. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, esse.</strong>
+  <b>b. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim, sapiente.</b>
+  <em>em. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed, officia.</em>
+  <i>i. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi, optio.</i>
+  <addess>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam, in.</addess>
+
+  <hr><!-- ////////////////////////////////  -->
+
+  <ul>
+    <li><b>ul.li.</b> Lorem ipsum dolor</li>
+    <li><p><b>li.p.</b>sit amet, consectetur</p></li>
+    <li><span><b>li.span</b>adipisicing elit</span>
+      <ul>
+        <li><span>Quam dolor reiciendis vero</span></li>
+        <li>doloremque mollitia dolores
+          <ul>
+            <li><b>ipsam nisi, veritatis</b></li>
+            <li><i>deleniti unde vitae optio</i></li>
+            <li>fugiat cumque!</li>
+            <li><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores vel <span>nisi <b><i>praesentium</i> sint</b> necessitatibus dignissimos</span> cupiditate iste facilis doloribus exercitationem odio fuga aperiam fugiat officiis non, repellendus ratione suscipit ut ducimus corrupti recusandae modi vero vitae! Distinctio, nulla ab recusandae?</p></li>
+            <li>iure iste reprehenderit
+              <ul>
+                <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem aperiam praesentium non quasi molestiae adipisci sapiente, rem rerum eos. Dolorum.</li>
+              </ul>
+            </li>
+            <li>doloremque, recusandae</li>
+          </ul>
+        </li>
+      </ul>
+    </li>
+    <li>in nobis aspernatur</li>
+    <li>quasi! Ea sunt, doloribus animi!</li>
+  </ul>
+
+  <ol>
+    <li><b>ul.li.</b> Lorem ipsum dolor</li>
+    <li><p><b>li.p.</b>sit amet, consectetur</p></li>
+    <li><span><b>li.span</b>adipisicing elit</span>
+      <ul>
+        <li><span>Quam dolor reiciendis vero</span></li>
+        <li>doloremque mollitia dolores
+          <ul>
+            <li><b>ipsam nisi, veritatis</b></li>
+            <li><i>deleniti unde vitae optio</i></li>
+            <li>fugiat cumque!</li>
+            <li><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores vel <span>nisi <b><i>praesentium</i> sint</b> necessitatibus dignissimos</span> cupiditate iste facilis doloribus exercitationem odio fuga aperiam fugiat officiis non, repellendus ratione suscipit ut ducimus corrupti recusandae modi vero vitae! Distinctio, nulla ab recusandae?</p></li>
+            <li>iure iste reprehenderit
+              <ul>
+                <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem aperiam praesentium non quasi molestiae adipisci sapiente, rem rerum eos. Dolorum.</li>
+              </ul>
+            </li>
+            <li>doloremque, recusandae</li>
+          </ul>
+        </li>
+      </ul>
+    </li>
+    <li>in nobis aspernatur</li>
+    <li>quasi! Ea sunt, doloribus animi!</li>
+  </ol>
+
+  <dl>
+    <dt><p>dl.dt.dd. <b>ipsum dolor <i>sit amet</i></b>, consectetur adipisicing elit. Iure deserunt odio ut. Facilis quam libero.</p></dt>
+    <dd><span>Lorem ipsum <b>dolor sit amet</b>, <i>consectetur adipisicing</i> elit. Odio, error.</span> animi soluta tempore quibusdam numquam </dd>
+    <dt>Amet consectetur at</dt>
+    <dd>Item que contiene una definición.</dd>
+  </dl>
+
+  <hr><!-- ////////////////////////////////  -->
+  <pre>
+    pre. Lorem <span>ipsum dolor sit amet,</span> consectetur adipisicing elit. Amet consectetur at, <strong>quisquam aut <i>minus quo quam</i> quod dolor</strong> inventore eos iusto odit aliquam a similique ex? Reprehenderit soluta, modi velit.
+  </pre>
+  <code>
+    code. Lorem <span>ipsum dolor sit amet,</span> consectetur adipisicing elit. Amet consectetur at, <strong>quisquam aut <i>minus quo quam</i> quod dolor</strong> inventore eos iusto odit aliquam a similique ex? Reprehenderit soluta, modi velit.
+  </code>
+  <kbd>
+    kbd. Lorem <span>ipsum dolor sit amet,</span> consectetur adipisicing elit. Amet consectetur at, <strong>quisquam aut <i>minus quo quam</i> quod dolor</strong> inventore eos iusto odit aliquam a similique ex? Reprehenderit soluta, modi velit.
+  </kbd>
+  <samp>
+    samp. Lorem <span>ipsum dolor sit amet,</span> consectetur adipisicing elit. Amet consectetur at, <strong>quisquam aut <i>minus quo quam</i> quod dolor</strong> inventore eos iusto odit aliquam a similique ex? Reprehenderit soluta, modi velit.
+  </samp>
+  <blockquote>
+    blockquote. Lorem <span>ipsum dolor sit amet,</span> consectetur adipisicing elit. Amet consectetur at, <strong>quisquam aut <i>minus quo quam</i> quod dolor</strong> inventore eos iusto odit aliquam a similique ex? Reprehenderit soluta, modi velit.
+  </blockquote>
+  <q>
+    q. Lorem <span>ipsum dolor sit amet,</span> consectetur adipisicing elit. Amet consectetur at, <strong>quisquam aut <i>minus quo quam</i> quod dolor</strong> inventore eos iusto odit aliquam a similique ex? Reprehenderit soluta, modi velit.
+  </q>
+  <cite>
+    cite. Lorem <span>ipsum dolor sit amet,</span> consectetur adipisicing elit. Amet consectetur at, <strong>quisquam aut <i>minus quo quam</i> quod dolor</strong> inventore eos iusto odit aliquam a similique ex? Reprehenderit soluta, modi velit.
+  </cite>
+
+  <hr><!-- ////////////////////////////////  -->
+
+  <form action="">
+    <fieldset>
+      <legend> legend. Reprehenderit soluta, modi velit. </legend>
+      <div class="row">
+        <label for="">label. Blanditiis cum itaque enim</label>
+      </div>
+      <div class="row">
+        <input type="text" value="consectetur adipisicing elit. Amet consectetur at">
+      </div>
+      <div class="row">
+        <textarea name="name" rows="8" cols="40">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis cum itaque enim, illo, magnam rem ratione asperiores autem commodi quisquam.</textarea>
+      </div>
+      <div class="row">
+        <select name="" id="">
+          <optgroup label="Group 1">
+            <option value="">Lorem ipsum</option>
+            <option value="">Dolor sit amet</option>
+            <option value="">Consectetur</option>
+            <option value="">Adipisicing elit</option>
+          </optgroup>
+          <optgroup label="Group 2">
+            <option value="">Lorem ipsum</option>
+            <option value="">Dolor sit amet</option>
+            <option value="">Consectetur</option>
+            <option value="">Adipisicing elit</option>
+          </optgroup>
+        </select>
+
+        <select name="" id="">
+          <option value="">Lorem ipsum</option>
+          <option value="">Dolor sit amet</option>
+          <option value="">Consectetur</option>
+          <option value="">Adipisicing elit</option>
+        </select>
+      </div>
+
+      <div class="row">
+        <label><input type="checkbox" name="" id=""> checkbox. Ipsum dolor sit amet</label>
+      </div>
+      <div class="row">
+        <fieldset>
+          <label><input type="radio" name="radio" id="radio"> radio. Ipsum dolor sit amet</label>
+          <label><input type="radio" name="radio" id="radio"> radio. Ipsum dolor sit amet</label>
+          <label><input type="radio" name="radio" id="radio"> radio. Ipsum dolor sit amet</label>
+        </fieldset>
+      </div>
+      <div class="row">
+        <input type="button" value="button. Lorem ipsum dolor sit amet, consectetur">
+        <input type="submit" value="submit. Lorem ipsum dolor sit amet, consectetur">
+        <input type="reset" value="reset. Lorem ipsum dolor sit amet, consectetur">
+      </div>
+    </fieldset>
+  </form>
+</div>