roots-rails 0.0.1.alpha

data/.gitignore

@@ -0,0 +1,5 @@
+*.gem
+.bundle
+Gemfile.lock
+pkg/*
+.DS_Store

data/Gemfile

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

data/lib/generators/roots/framework_generator.rb

@@ -0,0 +1,28 @@
+
+module Roots
+  module Generators
+    class FrameworkGenerator < Rails::Generators::Base
+      desc "Places roots in your asset pipeline so you can edit it"
+      source_root File.expand_path('../../templates', __FILE__)
+
+      def generate
+        say_notice = false
+
+        if yes? "This will replace your application.css file - is this ok / have you backed it up? [y/n]", "\e[31m"
+
+          if File.exist? "app/assets/stylesheets/application.css"
+            remove_file "app/assets/stylesheets/application.css"
+            copy_file "layouts/application.sass", "app/assets/stylesheets/application.sass"
+            say_notice = true
+          end
+          
+          directory "sass", "app/assets/stylesheets"
+        end
+        
+        say "\nComplete! Make sure to visit application.sass to configure.\n\n", "\e[32m" if say_notice
+
+      end
+
+    end
+  end
+end

data/lib/generators/roots/install_generator.rb

@@ -0,0 +1,36 @@
+
+module Roots
+  module Generators
+    class InstallGenerator < Rails::Generators::Base
+      desc "Loads sass framework, replaces layout, removes public/index.html"
+      source_root File.expand_path('../../templates', __FILE__)
+
+      def replace_layout
+        remove_file "app/views/layouts/application.html.erb"
+        copy_file "layouts/layout.html.haml", "app/views/layouts/application.html.haml"
+        copy_file "layouts/config.html.haml", "app/views/layouts/_config.html.haml"
+      end
+
+      def replace_application_css
+        remove_file "app/assets/stylesheets/application.css"
+        copy_file "layouts/application.sass", "app/assets/stylesheets/application.sass"
+      end
+
+      def install_dependencies
+        copy_file "scripts/selectivizr.js", "vendor/assets/javascripts/selectivizr.js"
+        copy_file "scripts/pie.htc", "vendor/assets/javascripts/pie.htc"
+        remove_file "public/favicon.ico"
+        copy_file "favicon.ico", "public/favicon.ico"
+        directory "images", "public/roots"
+        copy_file "noise.png", "app/assets/images/noise.png"
+      end
+
+      def remove_defaults
+        remove_file "app/assets/rails.png"
+        remove_file "public/index.html"
+        say "\nComplete! Make sure to visit these two files to configure things: \n  - app/views/layouts/config.html.haml\n  - app/assets/stylesheets/application.sass\n\n", "\e[32m"
+      end
+
+    end
+  end
+end

data/lib/generators/templates/layouts/application.sass

@@ -0,0 +1,23 @@
+// This is roots' version of the application file. You will have to
+// manually load each stylsheet that you want to use here (this is a
+// best practice anyway, gives you control over what's included and in
+// what order). Just use an @import directive like is done below.
+
+@import "roots"
+
+// Uncomment only one of these - first one removes all default browser styles
+// and the second is a port of normalize.css (http://necolas.github.com/normalize.css/)
+
+// +global-reset
+// +normalize
+
+// If you uncomment this line, it will load roots styles on to default elements, much
+// like a traditional css framework. If you don't want to replace everything, it can
+// be broken down into many sub-mixins, which can be found in the file _roots.sass.
+// It is *strongly recommended* to at very least use +base.
+
+// +framework
+
+// ------------------------------
+// @import your stylsheets here
+// ------------------------------

data/lib/generators/templates/layouts/config.html.haml

@@ -0,0 +1,57 @@
+%meta{ :charset => 'utf8' }
+%meta{ 'http-equiv' => 'X-UA-Compatible', :content => 'IE=edge, chrome=1' }
+
+-# -----------------------------------------------------
+-#  CONFIGURATION: This is important stuff, do it first!
+-# -----------------------------------------------------
+
+- title = "Your page title here"
+- author = "Your name or company name"
+- description = "Short description of your site"
+- url = "http://example.com"
+- preview_image = "/roots/preview.png" # 75x75 square. if you really can't, pass false
+
+- favicons = true # see section below for size details
+- facebook_tags = true
+- mobile_site = false
+- ie_app = true
+
+-# -----------------------------------------------------
+
+%title= title
+%meta{ :name => 'description', :content => "#{description}" }
+%meta{ :name => 'author', :content => "#{author}"  }
+
+- if favicons
+  -# 16x16, .ico
+  %link{ :rel => "shortcut icon", :href => "/favicon.ico" }
+  -# 57x57, .png
+  %link{ :rel => "apple-touch-icon", :href => "/roots/apple-touch-icon.png" }
+  -# 72x72, .png
+  %link{ :rel => "apple-touch-icon", :sizes => "72x72", :href => "/roots/apple-touch-icon-72x72.png" }
+  -# 114x114, .png
+  %link{ :rel => "apple-touch-icon", :sizes => "114x114", :href => "/roots/apple-touch-icon-114x114.png" }
+
+- if facebook_tags
+  %meta{ property: 'og:title', content: "#{title}"}
+  %meta{ property: 'og:description', content: "#{description}"}
+  %meta{ property: 'og:image', content: "#{preview_image}"}
+  %meta{ property: 'og:url', content: "#{url}" }
+  -# more than just a website? Docs @ http://developers.facebook.com/docs/opengraph/objects/builtin/
+  %meta{ property: 'og:type', content: 'website' }
+
+- if mobile_site
+  %meta{ :name => 'viewport', :content => 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' }
+
+- if ie_app
+  -# You can get more detailed with this if you want. Docs @ http://msdn.microsoft.com/en-us/library/gg131029.aspx
+  %meta{ name: "application-name", content: "#{title}" }
+  %meta{ name: "msapplication-starturl", content: "#{url}" }
+  -# by all means, change this color
+  %meta{ name: "msapplication-navbutton-color", content: "#E88F4E" }
+
+-# ---------------------------------------------------------------------------
+-#  Any other stuff you need in the head goes here! (fonts, stylesheets, etc.)
+-# ---------------------------------------------------------------------------
+-# NOTE: Script loads are blocking. It's recommended to load javascript at the bottom
+-# of the page unless it's something like a webfont.

data/lib/generators/templates/layouts/layout.html.haml

@@ -0,0 +1,26 @@
+!!! 5
+%head
+  = render 'layouts/config'
+  = stylesheet_link_tag 'application'
+
+  -# JS resources - not yet ready
+  -# resources = %w[ modal tooltip tabs alerts selection slider scrollspy imgfade spinner ]
+
+-# ------------------------------------------------------------------------------------------
+
+%body
+  = yield
+
+-# ------------------------------------------------------------------------------------------
+
+-# project resources - not yet ready
+-# resources.each do |r|
+  -# %script{ src: "script/#{r}.js" }
+
+-# help IE out with advanced selectors (http://selectivizr.com/)
+/[if (gte IE6)&(lte IE8)]
+  =javascript_include_tag 'selectivizr.js'
+
+=javascript_include_tag 'application'
+      
+    

data/lib/generators/templates/sass/modules/_animation.sass

@@ -0,0 +1,454 @@
+// ------------------------------
+// Preset animations
+// ------------------------------
+
+// Ported directly from Eric Meyer's compass-animation module, which was adapted from Dan Eden's animate.css
+// https://github.com/ericam/compass-animation
+// http://daneden.me/animate/
+
+// Includes: flash, bounce, shake, tada, swing, wobble, pulse, hinge,
+// rollIn/Out, bounceIn/Out(Up/Down/Left/Right), fadeIn/Out(Up/Down/Left/Right), and
+// rotateIn/Out(Up/Down/Left/Right)
+
+// Excludes the "big" animations because they are atrocious and should never be used.
+// Will include more custom-written ones in the future
+
++keyframes(flash)
+  0%
+    opacity: 1
+  25%
+    opacity: 0
+  50%
+    opacity: 1
+  75%
+    opacity: 0
+  100%
+    opacity: 1
+
++keyframes(bounce)
+  0%
+    +translateY(0)
+  20%
+    +translateY(0)
+  40%
+    +translateY(-30px)
+  50%
+    +translateY(0)
+  60%
+    +translateY(-15px)
+  80%
+    +translateY(0)
+  100%
+    +translateY(0)
+
++keyframes(shake)
+  0%
+    +translateX(0)
+  10%
+    +translateX(-10px)
+  20%
+    +translateX(10px)
+  30%
+    +translateX(-10px)
+  40%
+    +translateX(10px)
+  50%
+    +translateX(-10px)
+  60%
+    +translateX(10px)
+  70%
+    +translateX(-10px)
+  80%
+    +translateX(10px)
+  90%
+    +translateX(-10px)
+  100%
+    +translateX(0)
+
++keyframes(tada)
+  0%
+    +scale(1)
+  10%
+    +transform(scale(0.9) rotate(-3deg))
+  20%
+    +transform(scale(0.9) rotate(-3deg))
+  30%
+    +transform(scale(1.1) rotate(3deg))
+  40%
+    +transform(scale(1.1) rotate(-3deg))
+  50%
+    +transform(scale(1.1) rotate(3deg))
+  60%
+    +transform(scale(1.1) rotate(-3deg))
+  70%
+    +transform(scale(1.1) rotate(3deg))
+  80%
+    +transform(scale(1.1) rotate(-3deg))
+  90%
+    +transform(scale(1.1) rotate(3deg))
+  100%
+    +transform(scale(1) rotate(0))
+
++keyframes(swing)
+  20%, 40%, 60%, 80%, 100%
+    +transform-origin(top center)
+  20%
+    +rotate(15deg)
+  40%
+    +rotate(-10deg)
+  60%
+    +rotate(5deg)
+  80%
+    +rotate(-5deg)
+  100%
+    +rotate(0deg)
+
++keyframes(wobble)
+  0%
+    +translateX(0%)
+  15%
+    +transform(translateX(-25%) rotate(-5deg))
+  30%
+    +transform(translateX(20%) rotate(3deg))
+  45%
+    +transform(translateX(-15%) rotate(-3deg))
+  60%
+    +transform(translateX(10%) rotate(2deg))
+  75%
+    +transform(translateX(-5%) rotate(-1deg))
+  100%
+    +transform(translateX(0%))
+
++keyframes(pulse)
+  0%
+    +scale(1)
+  50%
+    +scale(1.1)
+  100%
+    +scale(1)
+
++keyframes(hinge)
+  0%
+    +rotate(0)
+    +transform-origin(top left)
+    +animation-timing-function(ease-in-out)
+  20%, 60%
+    +rotate(80deg)
+    +transform-origin(top left)
+    +animation-timing-function(ease-in-out)
+  40%
+    +rotate(60deg)
+    +transform-origin(top left)
+    +animation-timing-function(ease-in-out)
+  80%
+    +transform(rotate(60deg) translateY(0))
+    +opacity(1)
+    +transform-origin(top left)
+    +animation-timing-function(ease-in-out)
+  100%
+    +translateY(700px)
+    +opacity(0)
+
++keyframes(rollIn)
+  0%
+    +opacity(0)
+    +transform(translateX(-100%) rotate(-120deg))
+  100%
+    +opacity(1)
+    +transform(translateX(0px) rotate(0deg))
+
++keyframes(rollOut)
+  0%
+    +opacity(1)
+    +transform(translateX(0px) rotate(0deg))
+  100%
+    +opacity(0)
+    +transform(translateX(-100%) rotate(-120deg))
+
++keyframes(bounceIn)
+  0%
+    opacity: 0
+    +scale(0.3)
+  50%
+    opacity: 1
+    +scale(1.05)
+  70%
+    +scale(0.9)
+  100%
+    +scale(1)
+
++keyframes(bounceInDown)
+  0%
+    opacity: 0
+    +translateY(-2000px)
+  60%
+    opacity: 1
+    +translateY(30px)
+  80%
+    +translateY(-10px)
+  100%
+    +translateY(0)
+
++keyframes(bounceInUp)
+  0%
+    opacity: 0
+    +translateY(2000px)
+  60%
+    opacity: 1
+    +translateY(-30px)
+  80%
+    +translateY(10px)
+  100%
+    +translateY(0)
+
++keyframes(bounceInRight)
+  0%
+    opacity: 0
+    +translateX(2000px)
+  60%
+    opacity: 1
+    +translateX(-30px)
+  80%
+    +translateX(10px)
+  100%
+    +translateX(0)
+
++keyframes(bounceInLeft)
+  0%
+    opacity: 0
+    +translateX(-2000px)
+  60%
+    opacity: 1
+    +translateX(30px)
+  80%
+    +translateX(-10px)
+  100%
+    +translateX(0)
+
++keyframes(bounceOut)
+  0%
+    +scale(1)
+  25%
+    +scale(0.95)
+  50%
+    opacity: 1
+    +scale(1.1)
+  100%
+    opacity: 0
+    +scale(0.3)
+
++keyframes(bounceOutUp)
+  0%
+    +translateY(0)
+  20%
+    opacity: 1
+    +translateY(20px)
+  100%
+    opacity: 0
+    +translateY(-2000px)
+
++keyframes(bounceOutDown)
+  0%
+    +translateY(0)
+  20%
+    opacity: 1
+    +translateY(-20px)
+  100%
+    opacity: 0
+    +translateY(2000px)
+
++keyframes(bounceOutLeft)
+  0%
+    +translateX(0)
+  20%
+    opacity: 1
+    +translateX(20px)
+  100%
+    opacity: 0
+    +translateX(-2000px)
+
++keyframes(bounceOutRight)
+  0%
+    +translateX(0)
+  20%
+    opacity: 1
+    +translateX(-20px)
+  100%
+    opacity: 0
+    +translateX(2000px)
+
++keyframes(fadeIn)
+  0%
+    opacity: 0
+  100%
+    opacity: 1
+
++keyframes(fadeInUp)
+  0%
+    +translateY(20px)
+    opacity: 0
+  100%
+    +translateY(0)
+    opacity: 1
+
++keyframes(fadeInDown)
+  0%
+    +translateY(-20px)
+    opacity: 0
+  100%
+    +translateY(0)
+    opacity: 1
+
++keyframes(fadeInRight)
+  0%
+    +translateX(20px)
+    opacity: 0
+  100%
+    +translateX(0)
+    opacity: 1
+
++keyframes(fadeInLeft)
+  0%
+    +translateX(-20px)
+    opacity: 0
+  100%
+    +translateX(0)
+    opacity: 1
+
++keyframes(fadeOut)
+  0%
+    opacity: 1
+  100%
+    opacity: 0
+
++keyframes(fadeOutUp)
+  0%
+    +translateY(0)
+    opacity: 1
+  100%
+    +translateY(-20px)
+    opacity: 0
+
++keyframes(fadeOutDown)
+  0%
+    +translateY(0)
+    opacity: 1
+  100%
+    +translateY(20px)
+    opacity: 0
+
++keyframes(fadeOutRight)
+  0%
+    +translateX(0)
+    opacity: 1
+  100%
+    +translateX(20px)
+    opacity: 0
+
++keyframes(fadeOutLeft)
+  0%
+    +translateX(0)
+    opacity: 1
+  100%
+    +translateX(-20px)
+    opacity: 0
+
++keyframes(rotateIn)
+  0%
+    +transform-origin(center center)
+    +rotate(-200deg)
+    opacity: 0
+  100%
+    +transform-origin(center center)
+    +rotate(0)
+    opacity: 1
+
++keyframes(rotateInDownLeft)
+  0%
+    +transform-origin(left bottom)
+    +rotate(-90deg)
+    opacity: 0
+  100%
+    +transform-origin(left bottom)
+    +rotate(0)
+    opacity: 1
+
++keyframes(rotateInUpLeft)
+  0%
+    +transform-origin(left bottom)
+    +rotate(90deg)
+    opacity: 0
+  100%
+    +transform-origin(left bottom)
+    +rotate(0)
+    opacity: 1
+
++keyframes(rotateInUpRight)
+  0%
+    +transform-origin(right bottom)
+    +rotate(-90deg)
+    opacity: 0
+  100%
+    +transform-origin(right bottom)
+    +rotate(0)
+    opacity: 1
+
++keyframes(rotateInDownRight)
+  0%
+    +transform-origin(right bottom)
+    +rotate(90deg)
+    opacity: 0
+  100%
+    +transform-origin(right bottom)
+    +rotate(0)
+    opacity: 1
+
++keyframes(rotateOut)
+  0%
+    +transform-origin(center center)
+    +rotate(0)
+    opacity: 1
+  100%
+    +transform-origin(center center)
+    +rotate(200deg)
+    opacity: 0
+
++keyframes(rotateOutDownLeft)
+  0%
+    +transform-origin(left bottom)
+    +rotate(0)
+    opacity: 1
+  100%
+    +transform-origin(left bottom)
+    +rotate(90deg)
+    opacity: 0
+
++keyframes(rotateOutUpLeft)
+  0%
+    +transform-origin(left bottom)
+    +rotate(0)
+    opacity: 1
+  100%
+    +transform-origin(left bottom)
+    +rotate(-90deg)
+    opacity: 0
+
++keyframes(rotateOutDownRight)
+  0%
+    +transform-origin(right bottom)
+    +rotate(0)
+    opacity: 1
+  100%
+    +transform-origin(right bottom)
+    +rotate(-90deg)
+    opacity: 0
+
++keyframes(rotateOutUpRight)
+  0%
+    +transform-origin(right bottom)
+    +rotate(0)
+    opacity: 1
+  100%
+    +transform-origin(right bottom)
+    +rotate(90deg)
+    opacity: 0