dlegr250_material_design 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 6af852b75686863498ffbb7ffc138156cd05d67a
+  data.tar.gz: 790aeb973b5c6677ebf80347000c379a47e01895
+SHA512:
+  metadata.gz: 04cac0c39ab283e9d16f5d45641eb33d2129b0ab8aa86621afca28133d3d9ab7e25c52112817d996d2020115b2a0e4dc12c36097fa6bcbe476a25d141aec89bb
+  data.tar.gz: 44a68e755a9449c2a405cd22d0857eac6aa4be2de0992962decb008cc3ddff36a54131f84210bc7f3ea070147c0e6791904ff943a66b726eaa44a74f8b82b0c7

data/.gitignore

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

data/.rspec

@@ -0,0 +1,2 @@
+--format documentation
+--color

data/.travis.yml

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

data/Gemfile

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

data/README.md

@@ -0,0 +1,66 @@
+# BIG WARNING: as of 2016-02-11 15:00
+
+This is Alpha code that will change rapidly throughout 2016 as I work on it.  Do not use this in a production system until it has reached a stable 1.0.0 version (sometime later in 2016).
+
+# Dlegr250MaterialDesign
+
+This is a custom implementation of the [Google Material Design Spec](http://www.google.com/design/spec/material-design/introduction.html).
+
+It is built from the ground-up trying to use best practices but is still a work-in-progress.  I extracted this code to a gem so I could use it in several projects simultaneously without updating code in each of them.
+
+It is only engineered to support the latest browser versions that auto-update. Basically that means Internet Explorer 10+ and Edge, because all other major browsers already auto-update and usually follow the specs set forth for `CSS`.
+
+## Installation
+
+Add this line to your application's `Gemfile`:
+
+```ruby
+gem 'dlegr250_material_design'
+```
+
+And then execute:
+
+    $ bundle
+
+Or install it yourself as:
+
+    $ gem install dlegr250_material_design
+
+## Usage
+
+Add this line to your application's `app/assets/javascripts/application.js`:
+
+```js
+//= require dlegr250_material_design
+```
+
+Add this line to your application's `app/assets/stylesheets/application.scss`:
+
+```css
+@import "dlegr250_material_design";
+```
+
+Note that this assumes you renamed the default `application.css` to `application.SCSS` to utilize SASS/SCSS.
+
+Using the `.scss` extension lets you control the order in which files are loaded/imported, which is a very good thing. This lets you use variables later on that were defined once in a previous file.
+
+If you aren't using `.scss` extensions on all your stylesheets, you're doing it wrong ;)p
+
+## Todo
+
+* Finalize components that will be implemented
+* Cleanup all stylesheets and remove unused styles
+* Cleanup all JS/Coffee and use a global `App` object instead of `window`
+* Implement simple way to config application-specific default values for styles
+* Test in major browser versions and mobile devices
+* Update JS/CoffeeScript to use ES6 when that becomes mainstream, and IF the Rails Core is going to adopt ES6 as a standard; this gem is more about building Rails applications than using a specific JavaScript implementation
+
+## Development
+
+After checking out the repo, run `bin/setup` to install dependencies. Then, run `rake spec` to run the tests. 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/dlegr250/dlegr250_material_design.

data/Rakefile

@@ -0,0 +1,6 @@
+require "bundler/gem_tasks"
+require "rspec/core/rake_task"
+
+RSpec::Core::RakeTask.new(:spec)
+
+task :default => :spec

data/app/controllers/styleguide_controller.rb

@@ -0,0 +1,5 @@
+class StyleguideController < ApplicationController
+  def index
+    # NOOP - page to demo interface
+  end
+end

data/app/views/styleguide/_buttons.html.erb

@@ -0,0 +1,79 @@
+<div class="card full-width" id="buttons">
+  <header>
+    <div class="card-title">Buttons</div>
+  </header>
+  <div class="card-content">
+    All buttons use the base <code>.button</code> class.
+    It can be applied to any HTML element.
+    They can have various colors applied to them.
+
+    <hr class="spacer" />
+
+    <div class="card full-width" id="buttons-raised">
+      <header>
+        <div class="card-title">Raised</div>
+        <div class="card-subtitle">
+          <code>.button .button-raised-{COLOR} [.button-dense .button-large]</code>
+        </div>
+      </header>
+      <div class="card-content">
+        <div class="button button-raised-blue button-dense">Dense</div>
+        <div class="button button-raised-blue">Normal</div>
+        <div class="button button-raised-red button-large">Large</div>
+      </div>
+    </div>
+
+    <hr class="spacer" />
+
+    <div class="card full-width" id="buttons-flat">
+      <header>
+        <div class="card-title">Flat</div>
+        <div class="card-subtitle">
+          <code>.button .button-flat-{COLOR} [.button-dense .button-large]</code>
+        </div>
+      </header>
+      <div class="card-content">
+        <div class="button button-flat-blue button-dense">Dense</div>
+        <div class="button button-flat-blue">Normal</div>
+        <div class="button button-flat-red button-large">Large</div>
+      </div>
+    </div>
+
+    <hr class="spacer" />
+
+    <div class="card full-width" id="buttons-outline">
+      <header>
+        <div class="card-title">Outline</div>
+        <div class="card-subtitle">
+          <code>.button .button-outline-{COLOR} [.button-dense .button-large]</code>
+        </div>
+      </header>
+      <div class="card-content">
+        <div class="button button-outline-blue button-dense">Dense</div>
+        <div class="button button-outline-blue">Normal</div>
+        <div class="button button-outline-red button-large">Large</div>
+      </div>
+    </div>
+
+    <hr class="spacer" />
+
+    <div class="card full-width" id="buttons-icon">
+      <header>
+        <div class="card-title">Icon</div>
+        <div class="card-subtitle">
+          Does not support size classes yet.
+          Using without any color classes leaves a simple icon without a colored background
+          but the same dimensions and hover as colored icons.
+        </div>
+        <div class="card-subtitle">
+          <code>.button .button-icon [.button-icon-{COLOR}]</code>
+        </div>
+      </header>
+      <div class="card-content">
+        <div class="button button-icon"><i class="zmdi zmdi-settings"></i></div>
+        <div class="button button-icon button-icon-blue"><i class="zmdi zmdi-settings"></i></div>
+        <div class="button button-icon button-icon-red"><i class="zmdi zmdi-settings"></i></div>
+      </div>
+    </div>
+  </div>
+</div>

data/app/views/styleguide/_menus.html.erb

@@ -0,0 +1,189 @@
+<div class="card full-width" id="menus">
+  <header>
+    <div class="card-title">Menus</div>
+  </header>
+  <div class="card-content">
+    Menus consist of a <code>.menu-container</code> wrapper that includes
+    a trigger via <code>role="menu-trigger" data-menu-id="menu-id"</code> and an actual
+    <code>.menu#menu-id</code>.
+
+    <p>
+      They will also adjust their padding on various device sizes. Try resizing this
+      window and clicking a menu.
+    </p>
+
+    <hr class="spacer" />
+
+    <div class="card full-width" id="menus-position">
+      <header>
+        <div class="card-title">Position</div>
+        <div class="card-subtitle">
+          Use the <code>data-position="{TOP|BOTTOM}-{LEFT|RIGHT}"</code> class to specify
+          the start point of the menu.
+          If the menu would overflow the visible window, it's position will be
+          changed dynamically to fit inside the visible window.
+        </div>
+      </header>
+      <div class="card-content">
+        <span class="menu-container">
+          <div class="button button-raised-grey" role="menu-trigger" data-menu-id="menu-1">
+            Bottom-left
+          </div>
+          <div class="menu menu-width-4" id="menu-1" data-position="bottom-left">
+            <div class="menu-item">
+              <div class="menu-item-primary">Menu Item 1</div>
+            </div>
+            <div class="menu-item">
+              <div class="menu-item-primary">Menu Item 2</div>
+            </div>
+            <div class="menu-item">
+              <div class="menu-item-primary">Menu Item 3</div>
+            </div>
+          </div>
+        </span>
+
+        <span class="menu-container">
+          <div class="button button-raised-grey" role="menu-trigger" data-menu-id="menu-2">
+            Bottom-right
+          </div>
+          <div class="menu menu-width-4" id="menu-2" data-position="bottom-right">
+            <div class="menu-item">
+              <div class="menu-item-primary">Menu Item 1</div>
+            </div>
+            <div class="menu-item">
+              <div class="menu-item-primary">Menu Item 2</div>
+            </div>
+            <div class="menu-item">
+              <div class="menu-item-primary">Menu Item 3</div>
+            </div>
+          </div>
+        </span>
+      </div>
+    </div>
+
+    <hr class="spacer" />
+
+    <div class="card full-width" id="menus-widths">
+      <header>
+        <div class="card-title">Widths</div>
+        <div class="card-subtitle">
+          Menus use a multiple width: <code>.menu-width-[1,2,3,4,5,6,7]</code>.
+        </div>
+      </header>
+      <div class="card-content">
+        <span class="menu-container">
+          <div class="button button-icon" role="menu-trigger" data-menu-id="menu-4">
+            <i class="zmdi zmdi-settings"></i>
+          </div>
+          <div class="menu menu-width-1" id="menu-4" data-position="bottom-left">
+            <div class="menu-item">
+              <div class="menu-item-primary">Item</div>
+            </div>
+            <div class="menu-item">
+              <div class="menu-item-primary">Item</div>
+            </div>
+            <div class="menu-item">
+              <div class="menu-item-primary">Item</div>
+            </div>
+          </div>
+        </span>
+        <span class="menu-container">
+          <div class="button button-icon" role="menu-trigger" data-menu-id="menu-5">
+            <i class="zmdi zmdi-settings"></i>
+          </div>
+          <div class="menu menu-width-2" id="menu-5" data-position="bottom-left">
+            <div class="menu-item">
+              <div class="menu-item-primary">Item</div>
+            </div>
+            <div class="menu-item">
+              <div class="menu-item-primary">Item</div>
+            </div>
+            <div class="menu-item">
+              <div class="menu-item-primary">Item</div>
+            </div>
+          </div>
+        </span>
+        <span class="menu-container">
+          <div class="button button-icon" role="menu-trigger" data-menu-id="menu-6">
+            <i class="zmdi zmdi-settings"></i>
+          </div>
+          <div class="menu menu-width-3" id="menu-6" data-position="bottom-left">
+            <div class="menu-item">
+              <div class="menu-item-primary">Item</div>
+            </div>
+            <div class="menu-item">
+              <div class="menu-item-primary">Item</div>
+            </div>
+            <div class="menu-item">
+              <div class="menu-item-primary">Item</div>
+            </div>
+          </div>
+        </span>
+        <span class="menu-container">
+          <div class="button button-icon" role="menu-trigger" data-menu-id="menu-7">
+            <i class="zmdi zmdi-settings"></i>
+          </div>
+          <div class="menu menu-width-4" id="menu-7" data-position="bottom-left">
+            <div class="menu-item">
+              <div class="menu-item-primary">Item</div>
+            </div>
+            <div class="menu-item">
+              <div class="menu-item-primary">Item</div>
+            </div>
+            <div class="menu-item">
+              <div class="menu-item-primary">Item</div>
+            </div>
+          </div>
+        </span>
+        <span class="menu-container">
+          <div class="button button-icon" role="menu-trigger" data-menu-id="menu-8">
+            <i class="zmdi zmdi-settings"></i>
+          </div>
+          <div class="menu menu-width-5" id="menu-8" data-position="bottom-left">
+            <div class="menu-item">
+              <div class="menu-item-primary">Item</div>
+            </div>
+            <div class="menu-item">
+              <div class="menu-item-primary">Item</div>
+            </div>
+            <div class="menu-item">
+              <div class="menu-item-primary">Item</div>
+            </div>
+          </div>
+        </span>
+        <span class="menu-container">
+          <div class="button button-icon" role="menu-trigger" data-menu-id="menu-9">
+            <i class="zmdi zmdi-settings"></i>
+          </div>
+          <div class="menu menu-width-6" id="menu-9" data-position="bottom-left">
+            <div class="menu-item">
+              <div class="menu-item-primary">Item</div>
+            </div>
+            <div class="menu-item">
+              <div class="menu-item-primary">Item</div>
+            </div>
+            <div class="menu-item">
+              <div class="menu-item-primary">Item</div>
+            </div>
+          </div>
+        </span>
+        <span class="menu-container">
+          <div class="button button-icon" role="menu-trigger" data-menu-id="menu-10">
+            <i class="zmdi zmdi-settings"></i>
+          </div>
+          <div class="menu menu-width-7" id="menu-10" data-position="bottom-left">
+            <div class="menu-item">
+              <div class="menu-item-primary">Item</div>
+            </div>
+            <div class="menu-item">
+              <div class="menu-item-primary">Item</div>
+            </div>
+            <div class="menu-item">
+              <div class="menu-item-primary">Item</div>
+            </div>
+          </div>
+        </span>
+      </div>
+    </div>
+  </div>
+</div>

data/app/views/styleguide/_navigation.html.erb

@@ -0,0 +1,28 @@
+<%= content_for(:left_sidebar) do %>
+  <div class="list list-hoverable" id="navigation">
+    <%= link_to "#buttons", class: "list-item" do %>
+      <div class="list-item-primary">Buttons</div>
+    <% end %>
+      <%= link_to "#buttons-raised", class: "list-item list-item-nested" do %>
+        <div class="list-item-primary">Raised</div>
+      <% end %>
+      <%= link_to "#buttons-flat", class: "list-item list-item-nested" do %>
+        <div class="list-item-primary">Flat</div>
+      <% end %>
+      <%= link_to "#buttons-outline", class: "list-item list-item-nested" do %>
+        <div class="list-item-primary">Outline</div>
+      <% end %>
+      <%= link_to "#buttons-icon", class: "list-item list-item-nested" do %>
+        <div class="list-item-primary">Icon</div>
+      <% end %>
+    <%= link_to "#menus", class: "list-item" do %>
+      <div class="list-item-primary">Menus</div>
+    <% end %>
+      <%= link_to "#menus-position", class: "list-item list-item-nested" do %>
+        <div class="list-item-primary">Position</div>
+      <% end %>
+      <%= link_to "#menus-widths", class: "list-item list-item-nested" do %>
+        <div class="list-item-primary">Widths</div>
+      <% end %>
+  </div>
+<% end %>

data/app/views/styleguide/index.html.erb

@@ -0,0 +1,9 @@
+<%= content_for(:title) { "Styleguide" } %>
+
+<%= render "styleguide/navigation" %>
+
+<div class="constrained constrained-large">
+  <%= render "styleguide/buttons" %>
+  <hr class="spacer" />
+  <%= render "styleguide/menus" %>
+</div>

data/bin/console

@@ -0,0 +1,14 @@
+#!/usr/bin/env ruby
+
+require "bundler/setup"
+require "dlegr250_material_design"
+
+# 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