afgor-ui 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 5a3273a217f7882dd79d68142db972f5eb2b530b
+  data.tar.gz: 2918930e9546128484ca8cdeeb3378861a3ac9c7
+SHA512:
+  metadata.gz: dec684f2c04020a85ebb4f6259ae69526ce146082436b1cd49b5ede52ed6d5b82d0f585526295f30d66f6afb41378cc30c6a30fdc7b6825162ab5a459882a6f0
+  data.tar.gz: 96ee12479156fd7ef4aaf05e6506b72e7d7895eb2dc4824762c1fc10225b45ba6b4f88b5e67d1d6ea780497937a0b4e2cd049adc617df8d4e9c2db84b46e589f

data/.gitattributes

@@ -0,0 +1,17 @@
+# Auto detect text files and perform LF normalization
+* text=auto
+
+# Custom for Visual Studio
+*.cs     diff=csharp
+
+# Standard to msysgit
+*.doc	 diff=astextplain
+*.DOC	 diff=astextplain
+*.docx diff=astextplain
+*.DOCX diff=astextplain
+*.dot  diff=astextplain
+*.DOT  diff=astextplain
+*.pdf  diff=astextplain
+*.PDF	 diff=astextplain
+*.rtf	 diff=astextplain
+*.RTF	 diff=astextplain

data/.gitignore

@@ -0,0 +1,9 @@
+/.bundle/
+/.yardoc
+/Gemfile.lock
+/_yardoc/
+/coverage/
+/doc/
+/pkg/
+/spec/reports/
+/tmp/

data/.travis.yml

@@ -0,0 +1,4 @@
+language: ruby
+rvm:
+  - 2.1.6
+before_install: gem install bundler -v 1.10.5

data/Gemfile

@@ -0,0 +1,4 @@
+source 'https://rubygems.org'
+
+# Specify your gem's dependencies in afgor-ui.gemspec
+gemspec

data/LICENSE.txt

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2015 Markus
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

data/README.md

@@ -0,0 +1,74 @@
+# afgor-ui
+
+A simple framework by afgor.com, created for designing web apps and simple websites. Has some nice effects and is fully flat.
+
+So how to use it in your project
+
+## Installation
+
+Add this line to your application's Gemfile:
+
+```ruby
+gem 'afgor-ui'
+```
+
+And then execute:
+
+    $ bundle
+
+Or install it yourself as:
+
+    $ gem install afgor-ui
+
+## Usage
+
+To include **afgor-ui** in your project you need to add some simple lines in your `index.html`
+
+Firstly add the main `css` file of **afgor-ui**
+
+``` css
+  @import 'afgor-ui.css'
+```
+
+Then you need to add a *js* file to make those lovely effects work, this could be done by adding the line below
+
+to your `application.js` files
+
+``` html
+  //= require afgor-ui
+```
+
+and you also need some additional libraries to include manualy
+
+``` html
+<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
+<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
+<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/jquery.gsap.min.js"></script>
+````
+
+in the end of your document.
+
+And now the main thing is done!
+
+If you want to use **afgor-ui-grid** you should include the next css file
+
+``` css
+@import 'afgor-ui-grid.css'
+```
+
+So this is it! Just use. More about elements you can find at GitHub Wiki Page.
+
+## Development
+
+After checking out the repo, run `bin/setup` to install dependencies. You can also run `bin/console` for an interactive prompt that will allow you to experiment.
+
+To install this gem onto your local machine, run `bundle exec rake install`. To release a new version, update the version number in `version.rb`, and then run `bundle exec rake release`, which will create a git tag for the version, push git commits and tags, and push the `.gem` file to [rubygems.org](https://rubygems.org).
+
+## Contributing
+
+Bug reports and pull requests are welcome on GitHub at https://github.com/[USERNAME]/evenfly-framework.
+
+
+## License
+
+The gem is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).

data/Rakefile

@@ -0,0 +1 @@
+require "bundler/gem_tasks"

data/afgor-ui.gemspec

@@ -0,0 +1,32 @@
+# coding: utf-8
+lib = File.expand_path('../lib', __FILE__)
+$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
+require 'afgor/ui/version'
+
+Gem::Specification.new do |spec|
+  spec.name          = "afgor-ui"
+  spec.version       = Afgor::Ui::VERSION
+  spec.authors       = ["Markus Benovsky"]
+  spec.email         = ["markus@afgor.com"]
+
+  spec.summary       = %q{A simple framework by afgor.com}
+  spec.description   = %q{Created for designing web apps and simple websites. Has some nice effects and is fully flat.}
+  spec.homepage      = "https://github.com/MarkusBansky/afgor-framework/tree/ruby-package"
+  spec.license       = "MIT"
+
+  # Prevent pushing this gem to RubyGems.org by setting 'allowed_push_host', or
+  # delete this section to allow pushing this gem to any host.
+  # if spec.respond_to?(:metadata)
+  #   spec.metadata['allowed_push_host'] = "TODO: Set to 'http://mygemserver.com'"
+  # else
+  #   raise "RubyGems 2.0 or newer is required to protect against public gem pushes."
+  # end
+
+  spec.files         = `git ls-files -z`.split("\x0").reject { |f| f.match(%r{^(test|spec|features)/}) }
+  spec.bindir        = "exe"
+  spec.executables   = spec.files.grep(%r{^exe/}) { |f| File.basename(f) }
+  spec.require_paths = ["lib"]
+
+  spec.add_development_dependency "bundler", "~> 1.10"
+  spec.add_development_dependency "rake", "~> 10.0"
+end

data/bin/console

@@ -0,0 +1,14 @@
+#!/usr/bin/env ruby
+
+require "bundler/setup"
+require "afgor/ui"
+
+# You can add fixtures and/or initialization code here to make experimenting
+# with your gem easier. You can also use a different console, if you like.
+
+# (If you use this, don't forget to add pry to your Gemfile!)
+# require "pry"
+# Pry.start
+
+require "irb"
+IRB.start

data/bin/setup

@@ -0,0 +1,7 @@
+#!/bin/bash
+set -euo pipefail
+IFS=$'\n\t'
+
+bundle install
+
+# Do any other automated setup that you need to do here

data/lib/afgor/ui.rb

@@ -0,0 +1,7 @@
+require "afgor/ui/version"
+
+module Afgor
+  module Ui
+    class Engine < ::Rails::Engine; end
+  end
+end

data/lib/afgor/ui/version.rb

@@ -0,0 +1,5 @@
+module Afgor
+  module Ui
+    VERSION = "0.1.0"
+  end
+end

data/vendor/assets/javascripts/afgor-ui.js

@@ -0,0 +1,44 @@
+var vscaleX = 1.05;
+var vscaleY = 1.05;
+$(document)
+    .ready(function() {
+      var buttons_nodes = document.querySelectorAll('.btn');
+      buttons = Array.prototype.slice.call(buttons_nodes, 0);
+      buttons.forEach(function(button) {
+        button.addEventListener('click', function() {
+          var duration = 0.3, delay = 0.08;
+          TweenMax.to(button, duration,
+                      {scaleY : vscaleY, ease : Expo.easeOut});
+          TweenMax.to(button, duration, {
+            scaleX : vscaleX,
+            scaleY : 1,
+            ease : Back.easeOut,
+            easeParams : [ 3 ],
+            delay : delay
+          });
+          TweenMax.to(button, duration * 1.25, {
+            scaleX : 1,
+            scaleY : 1,
+            ease : Back.easeOut,
+            easeParams : [ 6 ],
+            delay : delay * 3
+          });
+        });
+      });
+
+      $(".input")
+          .focus(function() {
+            $(this).parent(".field-container").addClass("is-focused");
+          });
+
+      $(".input")
+          .blur(function() {
+            $(this).parent(".field-container").removeClass("is-focused");
+          });
+
+      $('.field-container')
+          .on('keyup', '.text-area', function() {
+            $(this).height(0);
+            $(this).height(this.scrollHeight);
+          });
+    });

data/vendor/assets/stylesheets/afgor-ui-grid.css

@@ -0,0 +1,132 @@
+@media screen and (max-width: 42em) {
+  .container {
+    width: 98%;
+    margin: auto;
+  }
+}
+@media screen and (min-width: 42em) and (max-width: 64em) {
+  .container {
+    width: 84%;
+    margin: auto;
+  }
+}
+@media screen and (min-width: 64em) {
+  .container {
+    width: 68%;
+    margin: auto;
+  }
+}
+
+.row {
+  margin-top: 0.5rem;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+.col {
+  flex: 1 1 8%;
+  margin: 0 0 0.5rem 0;
+  padding: 0.5em 10px;
+  box-sizing: border-box;
+}
+
+/* nested grids */
+.row .row, .row.nested {
+  flex: 1 1 auto;
+  margin-top: -0.5em;
+}
+
+/* full width grids */
+.row.wide-fit {
+  margin-left: -10px;
+  margin-right: -10px;
+}
+
+/* center grids */
+.row.center {
+  justify-content: center;
+}
+
+.center .col {
+  flex-grow: 0;
+  flex-shrink: 0;
+}
+
+/* columns widths */
+
+.col-span-1 {
+  flex-basis: 8.3333%;
+}
+
+.col-span-2 {
+  flex-basis: 16.6666%;
+}
+
+.col-span-3 {
+  flex-basis: 25%;
+}
+
+.col-span-4 {
+  flex-basis: 33.3333%;
+}
+
+.col-span-5 {
+  flex-basis: 41.6666%;
+}
+
+.col-span-6 {
+  flex-basis: 50%;
+}
+
+.col-span-7 {
+  flex-basis: 58.3333%;
+}
+
+.col-span-8 {
+  flex-basis: 66.6666%;
+}
+
+.col-span-9 {
+  flex-basis: 75%;
+}
+
+.col-span-10 {
+  flex-basis: 83.3333%;
+}
+
+.col-span-11 {
+  flex-basis: 91.6666%;
+}
+
+.col-span-12 {
+  flex-basis: 100%;
+}
+
+.padding-top-1 { padding-top: 28px; }
+.padding-top-2 { padding-top: 56px; }
+.padding-top-3 { padding-top: 84px; }
+.padding-top-4 { padding-top: 112px; }
+.padding-top-5 { padding-top: 140px; }
+.padding-top-6 { padding-top: 168px; }
+
+.padding-bottom-1 { padding-bottom: 28px; }
+.padding-bottom-2 { padding-bottom: 56px; }
+.padding-bottom-3 { padding-bottom: 84px; }
+.padding-bottom-4 { padding-bottom: 112px; }
+.padding-bottom-5 { padding-bottom: 140px; }
+.padding-bottom-6 { padding-bottom: 168px; }
+
+.offset-top-1 { margin-top: 28px; }
+.offset-top-2 { margin-top: 56px; }
+.offset-top-3 { margin-top: 84px; }
+.offset-top-4 { margin-top: 112px; }
+.offset-top-5 { margin-top: 140px; }
+.offset-top-6 { margin-top: 168px; }
+
+.offset-bottom-1 { margin-bottom: 28px; }
+.offset-bottom-2 { margin-bottom: 56px; }
+.offset-bottom-3 { margin-bottom: 84px; }
+.offset-bottom-4 { margin-bottom: 112px; }
+.offset-bottom-5 { margin-bottom: 140px; }
+.offset-bottom-6 { margin-bottom: 168px; }

data/vendor/assets/stylesheets/afgor-ui.css

@@ -0,0 +1,380 @@
+
+@import url(http://fonts.googleapis.com/css?family=Roboto:400,300,500,300italic,400italic,500italic,700,700italic&subset=latin,cyrillic);
+
+* {
+  font-family: 'Roboto', sans-serif;
+  font-weight: 400;
+  color: #0b4c6a;
+}
+
+h1, h2, h3, h4, h5, h6 { font-weight: 500; }
+b { font-weight: 600; }
+p { font-weight: 500;font-size: 14px; }
+
+p.center, h1.center, h2.center, h3.center, h4.center, h5.center, h6.center {
+  margin: auto;
+  text-align: center;
+}
+
+hr { border: 0;
+    height: 0;
+    margin: 15px;
+    border-top: 1px solid rgba(0, 0, 0, 0.1);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.3); }
+
+/* Styling button and colors */
+.btn {
+  min-width: 100px;
+  min-height: 40px;
+  background: #5bc0eb;
+  color: #fff;
+  padding: 4px 0;
+  margin: 5px;
+  border-radius: 3px;
+  border: none;
+  text-decoration:none;
+  text-transform: uppercase;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+.btn:hover { cursor: pointer; }
+.btn:focus { outline:none; }
+.btn:active, .btn:target {
+  background-color: #5bc0eb;
+  border-color: #5bc0eb;
+  outline: none;
+  text-decoration:none;
+}
+.primary, .primary:active, .primary:target, p.primary, h1.primary, h2.primary, h3.primary, h4.primary, h5.primary, h6.primary { background-color: #5bc0eb; }
+.success, .success:active, .success:target, p.success, h1.success, h2.success, h3.success, h4.success, h5.success, h6.success { background-color: #9bc53d; }
+.error, .error:active, .error:target, p.error, h1.error, h2.error, h3.error, h4.error, h5.error, h6.error { background-color: #ff3939; }
+.info, .info:active, .info:target, p.info, h1.info, h2.info, h3.info, h4.info, h5.info, h6.info { background-color: #f5dd32; }
+.warning, .warning:active, .warning:target, p.warning, h1.warning, h2.warning, h3.warning, h4.warning, h5.warning, h6.warning { background-color: #f78334; }
+
+
+/* Styling input field containers */
+label { display: block; font-weight: 600; }
+.field-container {
+  margin: 10px 0;
+  margin-bottom: 20px;
+  clear: both;
+}
+.field-container:after {
+  content: "";
+  display: block;
+  width: 100%;
+  height: 4px;
+  margin-top: -1px;
+  border-width: 0 2px 2px 2px;
+  border-style: solid;
+  border-color: #bab6b6;
+}
+.field-container.is-focused:after, .field-container.field-primary.is-focused:after { border-color: #5bc0eb; }
+.field-container.field-success.is-focused:after { border-color: #9bc53d; }
+.field-container.field-info.is-focused:after { border-color: #f5dd32; }
+.field-container.field-warning.is-focused:after { border-color: #f78334; }
+.field-container.field-error.is-focused:after { border-color: #ff3939; }
+
+
+/* Styling the main input field */
+input[type='text'], input[type='password'], input[type='email'] {
+  width: 100%;
+  margin: 0;
+  padding: 0 6px;
+  border: none;
+  outline: none;
+  background: transparent;
+  font-size: 16px;
+  font-weight: 300;
+  color: #404040;
+}
+
+
+/* Styling main input */
+input[type='radio'],
+input[type='checkbox'] {
+  display: none;
+  cursor: pointer;
+}
+input[type='radio']:focus, input[type='radio']:active,
+input[type='checkbox']:focus,
+input[type='checkbox']:active {
+  outline: none;
+}
+input[type='radio'] + label,
+input[type='checkbox'] + label {
+  cursor: pointer;
+  display: inline-block;
+  position: relative;
+  padding-left: 25px;
+  margin-right: 10px;
+  color: #0b4c6a;
+}
+input[type='radio'] + label:before, input[type='radio'] + label:after,
+input[type='checkbox'] + label:before,
+input[type='checkbox'] + label:after {
+  content: '';
+  font-family: helvetica;
+  display: inline-block;
+  width: 18px;
+  height: 18px;
+  left: 0;
+  bottom: 0;
+  text-align: center;
+  position: absolute;
+}
+input[type='radio'] + label:before,
+input[type='checkbox'] + label:before {
+  background-color: #fafafa;
+  -moz-transition: all 0.3s ease-in-out;
+  -o-transition: all 0.3s ease-in-out;
+  -webkit-transition: all 0.3s ease-in-out;
+  transition: all 0.3s ease-in-out;
+}
+input[type='radio'] + label:after,
+input[type='checkbox'] + label:after {
+  color: #fff;
+}
+input[type='radio']:checked + label:before,
+input[type='checkbox']:checked + label:before {
+  -moz-box-shadow: inset 0 0 0 10px #5bc0eb;
+  -webkit-box-shadow: inset 0 0 0 10px #5bc0eb;
+  box-shadow: inset 0 0 0 10px #5bc0eb;
+}
+input[type='radio']:checked.success + label:before,
+input[type='checkbox']:checked.success + label:before {
+  -moz-box-shadow: inset 0 0 0 10px #9bc53d;
+  -webkit-box-shadow: inset 0 0 0 10px #9bc53d;
+  box-shadow: inset 0 0 0 10px #9bc53d;
+}
+input[type='radio']:checked.info + label:before,
+input[type='checkbox']:checked.info + label:before {
+  -moz-box-shadow: inset 0 0 0 10px #f5dd32;
+  -webkit-box-shadow: inset 0 0 0 10px #f5dd32;
+  box-shadow: inset 0 0 0 10px #f5dd32;
+}
+input[type='radio']:checked.warning + label:before,
+input[type='checkbox']:checked.warning + label:before {
+  -moz-box-shadow: inset 0 0 0 10px #f78334;
+  -webkit-box-shadow: inset 0 0 0 10px #f78334;
+  box-shadow: inset 0 0 0 10px #f78334;
+}
+input[type='radio']:checked.error + label:before,
+input[type='checkbox']:checked.error + label:before {
+  -moz-box-shadow: inset 0 0 0 10px #ff3939;
+  -webkit-box-shadow: inset 0 0 0 10px #ff3939;
+  box-shadow: inset 0 0 0 10px #ff3939;
+}
+
+
+/*Radio Specific styles*/
+input[type='radio'] + label:before {
+  -moz-border-radius: 50%;
+  -webkit-border-radius: 50%;
+  border-radius: 50%;
+}
+input[type='radio'] + label:hover:after, input[type='radio']:checked + label:after {
+  content: '\2022';
+  position: absolute;
+  top: 3px;
+  font-size: 22px;
+  line-height: 15px;
+}
+input[type='radio'] + label:hover:after {
+  color: #c7c7c7;
+}
+input[type='radio']:checked + label:after, input[type='radio']:checked + label:hover:after {
+  color: #fff;
+}
+
+
+/*Checkbox Specific styles*/
+input[type='checkbox'] + label:before {
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  border-radius: 3px;
+}
+input[type='checkbox'] + label:hover:after, input[type='checkbox']:checked + label:after {
+  content: "\2713";
+  line-height: 18px;
+  font-size: 14px;
+}
+input[type='checkbox'] + label:hover:after {
+  color: #c7c7c7;
+}
+input[type='checkbox']:checked + label:after, input[type='checkbox']:checked + label:hover:after {
+  color: #fff;
+}
+
+
+/*Toggle Specific styles*/
+input[type='checkbox'].toggle {
+  display: inline-block;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  width: 55px;
+  height: 28px;
+  background-color: #fafafa;
+  position: relative;
+  -moz-border-radius: 30px;
+  -webkit-border-radius: 30px;
+  border-radius: 30px;
+  @inlcude box-shadow(none);
+  -moz-transition: all 0.2s ease-in-out;
+  -o-transition: all 0.2s ease-in-out;
+  -webkit-transition: all 0.2s ease-in-out;
+  transition: all 0.2s ease-in-out;
+}
+input[type='checkbox'].toggle:hover:after {
+  background-color: #c7c7c7;
+}
+input[type='checkbox'].toggle:after {
+  content: '';
+  display: inline-block;
+  position: absolute;
+  width: 24px;
+  height: 24px;
+  background-color: #adadad;
+  top: 2px;
+  left: 2px;
+  -moz-border-radius: 50%;
+  -webkit-border-radius: 50%;
+  border-radius: 50%;
+  -moz-transition: all 0.2s ease-in-out;
+  -o-transition: all 0.2s ease-in-out;
+  -webkit-transition: all 0.2s ease-in-out;
+  transition: all 0.2s ease-in-out;
+}
+input[type='checkbox']:checked.toggle {
+  -moz-box-shadow: inset 0 0 0 15px #5bc0eb;
+  -webkit-box-shadow: inset 0 0 0 15px #5bc0eb;
+  box-shadow: inset 0 0 0 15px #5bc0eb;
+}
+input[type='checkbox']:checked.success.toggle {
+  -moz-box-shadow: inset 0 0 0 15px #9bc53d;
+  -webkit-box-shadow: inset 0 0 0 15px #9bc53d;
+  box-shadow: inset 0 0 0 15px #9bc53d;
+}
+input[type='checkbox']:checked.info.toggle {
+  -moz-box-shadow: inset 0 0 0 15px #f5dd32;
+  -webkit-box-shadow: inset 0 0 0 15px #f5dd32;
+  box-shadow: inset 0 0 0 15px #f5dd32;
+}
+input[type='checkbox']:checked.warning.toggle {
+  -moz-box-shadow: inset 0 0 0 15px #f78334;
+  -webkit-box-shadow: inset 0 0 0 15px #f78334;
+  box-shadow: inset 0 0 0 15px #f78334;
+}
+input[type='checkbox']:checked.error.toggle {
+  -moz-box-shadow: inset 0 0 0 15px #ff3939;
+  -webkit-box-shadow: inset 0 0 0 15px #ff3939;
+  box-shadow: inset 0 0 0 15px #ff3939;
+}
+input[type='checkbox']:checked.toggle:after {
+  left: 29px;
+  background-color: #fff;
+}
+
+
+/* Styling the main textarea filed */
+textarea {
+  min-height: 38px;
+  height: 38px;
+  margin: 2px 0 3px;
+  overflow-y: hidden;
+  resize: none;
+  font-size: 16px;
+  font-weight: 300;
+  -webkit-transition: height .1s;
+  -moz-transition: height .1s;
+  transition: height .1s;
+}
+::-webkit-input-placeholder { color: #bab6b6; }
+:-moz-placeholder { color: #bab6b6; }
+:-ms-placeholder { color: #bab6b6; }
+
+
+/* Styling image content group */
+.group:after {
+  content: "";
+  display: table;
+  clear: both;
+}
+strong {
+  font-weight: normal;
+  color: #2f2f2f;
+}
+.item-content {
+  position: relative;
+  width: 95%;
+  max-width: 50rem;
+  margin: 20px auto;
+  padding: 20px;
+  border: 2px solid #f1f1f1;
+  background-color: #f7f7f7;
+  border-radius: 5px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-transform: translateZ(0);
+          transform: translateZ(0);
+}
+.item-img {
+  position: relative;
+  float: left;
+  display: block;
+  width: 30%;
+  -webkit-transform-origin: 50% 50%;
+      -ms-transform-origin: 50% 50%;
+          transform-origin: 50% 50%;
+  -webkit-transform-style: preserve-3d;
+          transform-style: preserve-3d;
+  -webkit-animation: floating 5s -1s infinite;
+          animation: floating 5s -1s infinite;
+}
+.item-img img {
+  display: block;
+  width: 100%;
+  height: auto;
+  -webkit-transform-origin: 50% 100%;
+      -ms-transform-origin: 50% 100%;
+          transform-origin: 50% 100%;
+  -webkit-transform: translateZ(-5rem);
+          transform: translateZ(-5rem);
+}
+@-webkit-keyframes floating {
+  0%, 100% {
+    -webkit-transform: translateY(-5%);
+            transform: translateY(-5%);
+  }
+  50% {
+    -webkit-transform: translateY(0);
+            transform: translateY(0);
+  }
+}
+
+@keyframes floating {
+  0%, 100% {
+    -webkit-transform: translateY(-5%);
+            transform: translateY(-5%);
+  }
+  50% {
+    -webkit-transform: translateY(0);
+            transform: translateY(0);
+  }
+}
+.item-caption {
+  display: block;
+  position: relative;
+  float: left;
+  width: 65%;
+  margin-left: 5%;
+}

metadata

@@ -0,0 +1,88 @@
+--- !ruby/object:Gem::Specification
+name: afgor-ui
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+platform: ruby
+authors:
+- Markus Benovsky
+autorequire: 
+bindir: exe
+cert_chain: []
+date: 2015-08-14 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: bundler
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.10'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.10'
+- !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'
+description: Created for designing web apps and simple websites. Has some nice effects
+  and is fully flat.
+email:
+- markus@afgor.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- ".gitattributes"
+- ".gitignore"
+- ".travis.yml"
+- Gemfile
+- LICENSE.txt
+- README.md
+- Rakefile
+- afgor-ui.gemspec
+- bin/console
+- bin/setup
+- lib/afgor/ui.rb
+- lib/afgor/ui/version.rb
+- vendor/assets/javascripts/afgor-ui.js
+- vendor/assets/stylesheets/afgor-ui-grid.css
+- vendor/assets/stylesheets/afgor-ui.css
+homepage: https://github.com/MarkusBansky/afgor-framework/tree/ruby-package
+licenses:
+- MIT
+metadata: {}
+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.2.3
+signing_key: 
+specification_version: 4
+summary: A simple framework by afgor.com
+test_files: []