colorgy_style 0.0.0.1

data/assets/stylesheets/colorgy/main.scss

@@ -0,0 +1,63 @@
+// *************************************
+//
+//   Colorgy
+//   -> Main Manifest
+//
+// *************************************
+
+// -------------------------------------
+//   Reset
+// -------------------------------------
+
+@import "bootstrap/normalize";
+@import "bootstrap/print";
+
+// -------------------------------------
+//   Core
+// -------------------------------------
+
+// ----- Config ----- //
+
+@import "core/config";
+
+// ----- Helpers ----- //
+
+@import "core/helpers";
+
+// ----- Fonts ----- //
+
+@import "core/fonts";
+
+// ----- Grid ----- //
+
+@import "core/grid";
+
+// ----- Base ----- //
+
+@import "core/base";
+
+// -------------------------------------
+//   Layouts
+// -------------------------------------
+
+@import "layouts/**/*";
+
+// -------------------------------------
+//   Structures
+// -------------------------------------
+
+@import "structures/**/*";
+
+// -------------------------------------
+//   Components
+// -------------------------------------
+
+@import "components/**/*";
+
+// -------------------------------------
+//   Vendor
+// -------------------------------------
+
+// -------------------------------------
+//   Inbox
+// -------------------------------------

data/bin/console

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

@@ -0,0 +1,3 @@
+#!/usr/bin/env ruby
+
+system "bundle exec middleman server #{ARGV.join(' ')}"

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/colorgy_style.gemspec

@@ -0,0 +1,52 @@
+# coding: utf-8
+lib = File.expand_path('../lib', __FILE__)
+$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
+require 'colorgy_style/version'
+
+Gem::Specification.new do |spec|
+  spec.name          = "colorgy_style"
+  spec.version       = ColorgyStyle::VERSION
+  spec.authors       = ["Neson"]
+  spec.email         = ["neson@dex.tw"]
+
+  spec.summary       = %q{The front-end bundle and style guide for Colorgy.}
+  spec.description   = %q{The front-end bundle and style guide for Colorgy.}
+  spec.homepage      = "https://github.com/colorgy/Style"
+
+  # 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"
+  spec.add_development_dependency "rake"
+  spec.add_development_dependency "rspec"
+
+  # Use Middleman to construct living style guides
+  spec.add_development_dependency "middleman", ">= 3"
+  spec.add_development_dependency "middleman-kss", "~>0.3.1"
+  spec.add_development_dependency "middleman-livereload", "~> 3.1.0"
+  spec.add_development_dependency "middleman-deploy", "~> 1.0"
+
+  # SASS and Compass
+  spec.add_dependency "sass", ">= 3.4"
+  spec.add_dependency "sass-globbing"
+  spec.add_dependency "compass", "~> 1.0.0"
+
+  # Sprockets
+  spec.add_dependency "sprockets", "~> 2.0"
+
+  # Assets
+  spec.add_dependency "jquery-rails"
+  spec.add_dependency "bootstrap-sass", "~> 3.3.4.1"
+  spec.add_dependency "materialize-sass"
+  spec.add_dependency "turbolinks", "~> 2.5.3"
+end

data/config.rb

@@ -0,0 +1,63 @@
+##############################################################
+# Configurations for Middleman and KSS -                     #
+# asset builder, development server and living style guides. #
+##############################################################
+
+##
+# Middleman
+##
+
+set :source,     'styleguide'
+set :css_dir,    'stylesheets'
+set :js_dir,     'javascripts'
+set :images_dir, 'images'
+
+activate :directory_indexes
+activate :livereload, port: "35728"
+set :file_watcher_ignore, [/^bin(\/|$)/,
+                           /^\.bundle(\/|$)/,
+                           /^node_modules(\/|$)/,
+                           /^\.sass-cache(\/|$)/,
+                           /^\.cache(\/|$)/,
+                           /^\.git(\/|$)/,
+                           /^\.gitignore$/,
+                           /\.DS_Store/,
+                           /^\.rbenv-.*$/,
+                           /^Gemfile$/,
+                           /^Gemfile\.lock$/,
+                           /~$/,
+                           /(^|\/)\.?#/,
+                           /^tmp\//,
+                           /^build(\/|$)/]
+
+##
+# KSS
+##
+
+set :markdown_engine, :redcarpet
+activate :kss,
+         kss_dir: "../assets/stylesheets"
+
+##
+# Build-specific configuration
+##
+
+configure :build do
+  # Change the Compass output style to minify on build
+  activate :minify_css
+
+  # Minify Javascript on build
+  activate :minify_javascript
+
+  # Use relative URLs
+  activate :relative_assets
+end
+
+##
+# Automatic deploy configuration
+##
+
+activate :deploy do |deploy|
+  deploy.method = :git
+  deploy.build_before = true
+end

data/lib/colorgy_style.rb

@@ -0,0 +1,74 @@
+require "colorgy_style/version"
+
+module ColorgyStyle
+  # Give credit to bootstrap-sass
+  class << self
+    # Inspired by Kaminari
+    def load!
+      if rails?
+        register_rails_engine
+      elsif sprockets?
+        register_sprockets
+      end
+
+      configure_sass
+    end
+
+    # Paths
+
+    def gem_path
+      @gem_path ||= File.expand_path '..', File.dirname(__FILE__)
+    end
+
+    def assets_path
+      @assets_path ||= File.join gem_path, 'assets'
+    end
+
+    def stylesheets_path
+      File.join assets_path, 'stylesheets'
+    end
+
+    def fonts_path
+      File.join assets_path, 'fonts'
+    end
+
+    def javascripts_path
+      File.join assets_path, 'javascripts'
+    end
+
+    # Environment detection helpers
+
+    def sprockets?
+      defined?(::Sprockets)
+    end
+
+    def rails?
+      defined?(::Rails)
+    end
+
+    private
+
+    def configure_sass
+      require 'sass'
+
+      ::Sass.load_paths << stylesheets_path
+    end
+
+    def register_rails_engine
+      require 'colorgy_style/rails'
+    end
+
+    def register_sprockets
+      Sprockets.append_path(stylesheets_path)
+      Sprockets.append_path(fonts_path)
+      Sprockets.append_path(javascripts_path)
+    end
+  end
+end
+
+ColorgyStyle.load!
+
+require 'bootstrap-sass'
+require 'materialize-sass'
+require 'sass-globbing' unless defined?(Rails::VERSION::STRING) &&
+                               Rails::VERSION::STRING.to_f >= 3.1

data/lib/colorgy_style/rails.rb

@@ -0,0 +1,13 @@
+# register_rails_engine
+module ColorgyStyle
+  module Rails
+    class Engine < ::Rails::Engine
+      initializer 'colorgy_style.assets.precompile' do |app|
+        %w(stylesheets javascripts fonts images).each do |sub|
+          app.config.assets.paths << root.join('assets', sub).to_s
+        end
+        app.config.assets.precompile << %r(colorgy/.+\.(?:png|gif|jpg|eot|svg|ttf|woff)$)
+      end
+    end
+  end
+end

data/lib/colorgy_style/version.rb

@@ -0,0 +1,3 @@
+module ColorgyStyle
+  VERSION = "0.0.0.1"
+end

data/styleguide/index.html.haml

@@ -0,0 +1,7 @@
+---
+title: Colorgy Styleguide
+layout: default
+---
+
+%h1 Styleguide
+= styleblock 'button', section: '2.1'

data/styleguide/javascripts/body.js

@@ -0,0 +1,5 @@
+//= require colorgy
+//= require ./styleguide/kss
+//= require ./styleguide/prism
+
+$(document).on('ready page:load', Prism.highlightAll);

data/styleguide/javascripts/head.js

@@ -0,0 +1,2 @@
+//= require colorgy/modernizr
+//= require turbolinks

data/styleguide/javascripts/styleguide/kss.js

@@ -0,0 +1,40 @@
+(function() {
+  var KssStateGenerator;
+  KssStateGenerator = (function() {
+    function KssStateGenerator() {
+      var idx, idxs, pseudos, replaceRule, rule, stylesheet, _i, _len, _len2, _ref, _ref2;
+      pseudos = /(\:hover|\:disabled|\:active|\:visited)/g;
+      try {
+        _ref = document.styleSheets;
+        for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+          stylesheet = _ref[_i];
+          idxs = [];
+          _ref2 = stylesheet.cssRules;
+          for (idx = 0, _len2 = _ref2.length; idx < _len2; idx++) {
+            rule = _ref2[idx];
+            if ((rule.type === CSSRule.STYLE_RULE) && pseudos.test(rule.selectorText)) {
+              replaceRule = function(matched, stuff) {
+                return ".pseudo-class-" + matched.replace(':', '');
+              };
+              this.insertRule(rule.cssText.replace(pseudos, replaceRule));
+            }
+          }
+        }
+      } catch (_e) {}
+    }
+    KssStateGenerator.prototype.insertRule = function(rule) {
+      var headEl, styleEl;
+      headEl = document.getElementsByTagName('head')[0];
+      styleEl = document.createElement('style');
+      styleEl.type = 'text/css';
+      if (styleEl.styleSheet) {
+        styleEl.styleSheet.cssText = rule;
+      } else {
+        styleEl.appendChild(document.createTextNode(rule));
+      }
+      return headEl.appendChild(styleEl);
+    };
+    return KssStateGenerator;
+  })();
+  new KssStateGenerator;
+}).call(this);

data/styleguide/javascripts/styleguide/prism.js

@@ -0,0 +1,6 @@
+/**
+ * Prism: Lightweight, robust, elegant syntax highlighting
+ * MIT license http://www.opensource.org/licenses/mit-license.php/
+ * @author Lea Verou http://lea.verou.me
+ */(function(){var e=/\blang(?:uage)?-(?!\*)(\w+)\b/i,t=self.Prism={util:{type:function(e){return Object.prototype.toString.call(e).match(/\[object (\w+)\]/)[1]},clone:function(e){var n=t.util.type(e);switch(n){case"Object":var r={};for(var i in e)e.hasOwnProperty(i)&&(r[i]=t.util.clone(e[i]));return r;case"Array":return e.slice()}return e}},languages:{extend:function(e,n){var r=t.util.clone(t.languages[e]);for(var i in n)r[i]=n[i];return r},insertBefore:function(e,n,r,i){i=i||t.languages;var s=i[e],o={};for(var u in s)if(s.hasOwnProperty(u)){if(u==n)for(var a in r)r.hasOwnProperty(a)&&(o[a]=r[a]);o[u]=s[u]}return i[e]=o},DFS:function(e,n){for(var r in e){n.call(e,r,e[r]);t.util.type(e)==="Object"&&t.languages.DFS(e[r],n)}}},highlightAll:function(e,n){var r=document.querySelectorAll('code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code');for(var i=0,s;s=r[i++];)t.highlightElement(s,e===!0,n)},highlightElement:function(r,i,s){var o,u,a=r;while(a&&!e.test(a.className))a=a.parentNode;if(a){o=(a.className.match(e)||[,""])[1];u=t.languages[o]}if(!u)return;r.className=r.className.replace(e,"").replace(/\s+/g," ")+" language-"+o;a=r.parentNode;/pre/i.test(a.nodeName)&&(a.className=a.className.replace(e,"").replace(/\s+/g," ")+" language-"+o);var f=r.textContent;if(!f)return;f=f.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/\u00a0/g," ");var l={element:r,language:o,grammar:u,code:f};t.hooks.run("before-highlight",l);if(i&&self.Worker){var c=new Worker(t.filename);c.onmessage=function(e){l.highlightedCode=n.stringify(JSON.parse(e.data));l.element.innerHTML=l.highlightedCode;s&&s.call(l.element);t.hooks.run("after-highlight",l)};c.postMessage(JSON.stringify({language:l.language,code:l.code}))}else{l.highlightedCode=t.highlight(l.code,l.grammar);l.element.innerHTML=l.highlightedCode;s&&s.call(r);t.hooks.run("after-highlight",l)}},highlight:function(e,r){return n.stringify(t.tokenize(e,r))},tokenize:function(e,n){var r=t.Token,i=[e],s=n.rest;if(s){for(var o in s)n[o]=s[o];delete n.rest}e:for(var o in n){if(!n.hasOwnProperty(o)||!n[o])continue;var u=n[o],a=u.inside,f=!!u.lookbehind||0;u=u.pattern||u;for(var l=0;l<i.length;l++){var c=i[l];if(i.length>e.length)break e;if(c instanceof r)continue;u.lastIndex=0;var h=u.exec(c);if(h){f&&(f=h[1].length);var p=h.index-1+f,h=h[0].slice(f),d=h.length,v=p+d,m=c.slice(0,p+1),g=c.slice(v+1),y=[l,1];m&&y.push(m);var b=new r(o,a?t.tokenize(h,a):h);y.push(b);g&&y.push(g);Array.prototype.splice.apply(i,y)}}}return i},hooks:{all:{},add:function(e,n){var r=t.hooks.all;r[e]=r[e]||[];r[e].push(n)},run:function(e,n){var r=t.hooks.all[e];if(!r||!r.length)return;for(var i=0,s;s=r[i++];)s(n)}}},n=t.Token=function(e,t){this.type=e;this.content=t};n.stringify=function(e){if(typeof e=="string")return e;if(Object.prototype.toString.call(e)=="[object Array]")return e.map(n.stringify).join("");var r={type:e.type,content:n.stringify(e.content),tag:"span",classes:["token",e.type],attributes:{}};r.type=="comment"&&(r.attributes.spellcheck="true");t.hooks.run("wrap",r);var i="";for(var s in r.attributes)i+=s+'="'+(r.attributes[s]||"")+'"';return"<"+r.tag+' class="'+r.classes.join(" ")+'" '+i+">"+r.content+"</"+r.tag+">"};if(!self.document){self.addEventListener("message",function(e){var n=JSON.parse(e.data),r=n.language,i=n.code;self.postMessage(JSON.stringify(t.tokenize(i,t.languages[r])));self.close()},!1);return}var r=document.getElementsByTagName("script");r=r[r.length-1];if(r){t.filename=r.src;document.addEventListener&&!r.hasAttribute("data-manual")&&document.addEventListener("DOMContentLoaded",t.highlightAll)}})();;
+Prism.languages.markup={comment:/&lt;!--[\w\W]*?--(&gt;|&gt;)/g,prolog:/&lt;\?.+?\?&gt;/,doctype:/&lt;!DOCTYPE.+?&gt;/,cdata:/&lt;!\[CDATA\[[\w\W]+?]]&gt;/i,tag:{pattern:/&lt;\/?[\w:-]+\s*(?:\s+[\w:-]+(?:=(?:("|')(\\?[\w\W])*?\1|\w+))?\s*)*\/?&gt;/gi,inside:{tag:{pattern:/^&lt;\/?[\w:-]+/i,inside:{punctuation:/^&lt;\/?/,namespace:/^[\w-]+?:/}},"attr-value":{pattern:/=(?:('|")[\w\W]*?(\1)|[^\s>]+)/gi,inside:{punctuation:/=|&gt;|"/g}},punctuation:/\/?&gt;/g,"attr-name":{pattern:/[\w:-]+/g,inside:{namespace:/^[\w-]+?:/}}}},entity:/&amp;#?[\da-z]{1,8};/gi};Prism.hooks.add("wrap",function(e){e.type==="entity"&&(e.attributes.title=e.content.replace(/&amp;/,"&"))});;

data/styleguide/layouts/default.erb

@@ -0,0 +1,5 @@
+<% wrap_layout :layout do %>
+  <div class="container">
+    <%= yield %>
+  </div>
+<% end %>

data/styleguide/layouts/layout.erb

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title><%= data.page.title || "Styleguide" %></title>
+
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0 minimum-scale=1.0, user-scalable=no">
+
+    <%= stylesheet_link_tag :all %>
+    <%= javascript_include_tag :head %>
+  </head>
+  <body class="<%= page_classes %>">
+    <div class="wrapper <%= current_page.data.page_classes %>" id="wrapper">
+
+<%= yield %>
+
+    </div>
+    <%= javascript_include_tag :body %>
+  </body>
+</html>

data/styleguide/styleblocks/_button.html.erb

@@ -0,0 +1,23 @@
+<!-- Different types of button elements -->
+<a class="btn$modifier_class" href="#" role="button">Link</a>
+<button class="btn$modifier_class" type="submit">Button</button>
+<input class="btn$modifier_class" type="button" value="Input">
+<input class="btn$modifier_class" type="submit" value="Submit">
+
+<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
+<button type="button" class="btn btn-primary$modifier_class">Primary</button>
+
+<!-- Indicates a successful or positive action -->
+<button type="button" class="btn btn-success$modifier_class">Success</button>
+
+<!-- Contextual button for informational alert messages -->
+<button type="button" class="btn btn-info$modifier_class">Info</button>
+
+<!-- Indicates caution should be taken with this action -->
+<button type="button" class="btn btn-warning$modifier_class">Warning</button>
+
+<!-- Indicates a dangerous or potentially negative action -->
+<button type="button" class="btn btn-danger$modifier_class">Danger</button>
+
+<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
+<button type="button" class="btn btn-link$modifier_class">Link</button>

data/styleguide/stylesheets/all.css

@@ -0,0 +1,4 @@
+/*
+ *= require colorgy
+ *= require styleguide/styles
+ */

data/styleguide/stylesheets/styleguide/_prism.css

@@ -0,0 +1,107 @@
+/**
+ * prism.js default theme for JavaScript, CSS and HTML
+ * Based on dabblet (http://dabblet.com)
+ * @author Lea Verou
+ */
+
+code[class*="language-"],
+pre[class*="language-"] {
+	color: black;
+	text-shadow: 0 1px white;
+	font-family: Consolas, Monaco, 'Andale Mono', monospace;
+	direction: ltr;
+	text-align: left;
+	white-space: pre;
+	word-spacing: normal;
+
+	-moz-tab-size: 4;
+	-o-tab-size: 4;
+	tab-size: 4;
+
+	-webkit-hyphens: none;
+	-moz-hyphens: none;
+	-ms-hyphens: none;
+	hyphens: none;
+}
+
+@media print {
+	code[class*="language-"],
+	pre[class*="language-"] {
+		text-shadow: none;
+	}
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+	padding: 1em;
+	margin: .5em 0;
+	overflow: auto;
+}
+
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+	background: #f5f2f0;
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+	padding: .1em;
+	border-radius: .3em;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+	color: slategray;
+}
+
+.token.punctuation {
+	color: #999;
+}
+
+.namespace {
+	opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number {
+	color: #905;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string {
+	color: #690;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+	color: #a67f59;
+	background: hsla(0,0%,100%,.5);
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+	color: #07a;
+}
+
+
+.token.regex,
+.token.important {
+	color: #e90;
+}
+
+.token.important {
+	font-weight: bold;
+}
+
+.token.entity {
+	cursor: help;
+}