hpoydar-compass-aristo-plugin 0.2.6

data/.gitignore

@@ -0,0 +1,5 @@
+*.css
+pkg/
+*.html$
+.sass-cache
+.DS_Store

data/README.md

@@ -0,0 +1,46 @@
+# Aristo Compass Plugin
+
+A [Compass](http://compass-style.org/) plugin that provides a CSS3 port of the [Aristo](http://github.com/280north/aristo) UI elements.
+
+## Install
+
+You'll need to be familiar with the [Compass](http://compass-style.org/) CSS authoring framework and have it installed.  Then install the plugin as a gem:
+
+    sudo gem install hpoydar-compass-aristo-plugin
+    
+To add the plugin to an existing Compass project:
+
+    cd <compass_project_name>
+    compass -f aristo -p project .
+
+And add the following line to the top of the `config.rb` file created by Compass:
+
+    require 'aristo'
+
+## Usage
+
+Within your application's Sass files, import the Aristo mixins:
+
+    @import aristo
+
+Then modify the generated `aristo.sass` file to suit your needs. See [http://hpoydar.com/aristo](http://hpoydar.com/aristo) for examples and syntax.
+
+## TODO
+
+* Skin the combobox
+* Add segmented controls
+* Add windows
+* Documentation
+* Attempt to have it look as good on FF3.5 as it does in Webkit/Chrome
+* Take a look in IE and document what works
+
+## About Aristo
+
+Aristo is an open source UI distributed as part of the Cappuccino Open Source Framework [http://cappuccino.org)](http://cappuccino.org)
+and specifically designed for the cross platform challenges applications face today. It is a collaborative 
+effort by 280 North, Inc. and Sofa and released under the Creative Commons Attribution Share-Alike License.
+You can view this license here: [http://creativecommons.org/licenses/by-sa/3.0/us/](http://creativecommons.org/licenses/by-sa/3.0/us/)
+
+You can find out more about Aristo by visiting [http://cappuccino.org/aristo](http://cappuccino.org/aristo)
+
+Thanks to Alex MacCaw, who took the first crack at CSS-ifing Aristo: [http://github.com/maccman/aristo](http://github.com/maccman/aristo)

data/Rakefile

@@ -0,0 +1,47 @@
+require 'rubygems'
+require 'rake'
+
+begin
+  require 'jeweler'
+  Jeweler::Tasks.new do |gem|
+    gem.name = "compass-aristo-plugin"
+    gem.summary = %Q{A Compass plugin that provides a CSS3 port of the Aristo UI elements}
+    gem.description = %Q{A Compass plugin that provides a CSS3 port of the Aristo UI elements}
+    gem.email = "hpoydar@gmail.com"
+    gem.homepage = "http://github.com/hpoydar/compass-aristo-plugin"
+    gem.authors = ["hpoydar"]
+    gem.add_development_dependency "chriseppstein-compass"
+    # gem is a Gem::Specification... see http://www.rubygems.org/read/chapter/20 for additional settings
+  end
+rescue LoadError
+  puts "Jeweler (or a dependency) not available. Install it with: sudo gem install jeweler"
+end
+
+task :default => :examples
+
+desc "Compile examples into HTML and CSS"
+task :examples do
+  require 'haml'
+  require 'sass'
+  require 'pathname'
+  require 'compass'
+  require 'compass/exec'
+  FileList['examples/*'].each do |example|
+    next unless File.directory?(example)
+    puts "\nCompiling #{example}"
+    puts "=" * "Compiling #{example}".length
+    # compile any haml templates to html
+    FileList["#{example}/**/*.haml"].each do |haml_file|
+      basename = haml_file[0..-6]
+      engine = Haml::Engine.new(open(haml_file).read, :filename => haml_file)
+      puts "     haml #{File.basename(basename)}"
+      output = open(basename,'w')
+      output.write(engine.render)
+      output.close
+    end
+    Dir.chdir example do
+      system 'compass -f aristo -p project . --force'
+    end
+  end
+  puts ""
+end

data/VERSION

@@ -0,0 +1 @@
+0.2.6

data/compass-aristo-plugin.gemspec

@@ -0,0 +1,96 @@
+# Generated by jeweler
+# DO NOT EDIT THIS FILE
+# Instead, edit Jeweler::Tasks in Rakefile, and run `rake gemspec`
+# -*- encoding: utf-8 -*-
+
+Gem::Specification.new do |s|
+  s.name = %q{compass-aristo-plugin}
+  s.version = "0.2.6"
+
+  s.required_rubygems_version = Gem::Requirement.new(">= 0") if s.respond_to? :required_rubygems_version=
+  s.authors = ["hpoydar"]
+  s.date = %q{2009-08-23}
+  s.description = %q{A Compass plugin that provides a CSS3 port of the Aristo UI elements}
+  s.email = %q{hpoydar@gmail.com}
+  s.extra_rdoc_files = [
+    "README.md"
+  ]
+  s.files = [
+    ".gitignore",
+     "Aristo-24.png",
+     "README.md",
+     "Rakefile",
+     "VERSION",
+     "compass-aristo-plugin.gemspec",
+     "config.rb",
+     "examples/aristo/.gitignore",
+     "examples/aristo/config.rb",
+     "examples/aristo/images/.gitignore",
+     "examples/aristo/index.html",
+     "examples/aristo/index.html.haml",
+     "examples/aristo/src/.gitignore",
+     "examples/aristo/src/screen.sass",
+     "examples/aristo/stylesheets/.gitignore",
+     "lib/aristo.rb",
+     "lib/aristo/compass_plugin.rb",
+     "lib/aristo/sass_extensions.rb",
+     "sass/aristo/_all.sass",
+     "sass/aristo/_buttons.sass",
+     "sass/aristo/_controls.sass",
+     "sass/aristo/_menus.sass",
+     "sass/aristo/_scrollbars.sass",
+     "sass/aristo/_text.sass",
+     "sass/aristo/_windows.sass",
+     "templates/project/aristo-button-bezel-blue-o.png",
+     "templates/project/aristo-button-bezel-blue-x.png",
+     "templates/project/aristo-button-bezel-o.png",
+     "templates/project/aristo-button-bezel-x.png",
+     "templates/project/aristo-checkbox-o.png",
+     "templates/project/aristo-checkbox-x.png",
+     "templates/project/aristo-menu-bg.png",
+     "templates/project/aristo-menu-inverse-bg.png",
+     "templates/project/aristo-radio-o.png",
+     "templates/project/aristo-radio-x.png",
+     "templates/project/aristo-scroller-down-arrow-o.png",
+     "templates/project/aristo-scroller-down-arrow-track.png",
+     "templates/project/aristo-scroller-down-arrow-x.png",
+     "templates/project/aristo-scroller-horizontal-knob.png",
+     "templates/project/aristo-scroller-horizontal-track.png",
+     "templates/project/aristo-scroller-left-arrow-track.png",
+     "templates/project/aristo-scroller-left-arrow.png",
+     "templates/project/aristo-scroller-right-arrow-track.png",
+     "templates/project/aristo-scroller-right-arrow.png",
+     "templates/project/aristo-scroller-up-arrow-track.png",
+     "templates/project/aristo-scroller-up-arrow.png",
+     "templates/project/aristo-scroller-vertical-knob.png",
+     "templates/project/aristo-scroller-vertical-track.png",
+     "templates/project/aristo-select.png",
+     "templates/project/aristo-slider-horizontal-track.png",
+     "templates/project/aristo-slider-knob-o.png",
+     "templates/project/aristo-slider-knob-x.png",
+     "templates/project/aristo.sass",
+     "templates/project/manifest.rb"
+  ]
+  s.has_rdoc = true
+  s.homepage = %q{http://github.com/hpoydar/compass-aristo-plugin}
+  s.rdoc_options = ["--charset=UTF-8"]
+  s.require_paths = ["lib"]
+  s.rubygems_version = %q{1.3.1}
+  s.summary = %q{A Compass plugin that provides a CSS3 port of the Aristo UI elements}
+  s.test_files = [
+    "examples/aristo/config.rb"
+  ]
+
+  if s.respond_to? :specification_version then
+    current_version = Gem::Specification::CURRENT_SPECIFICATION_VERSION
+    s.specification_version = 2
+
+    if Gem::Version.new(Gem::RubyGemsVersion) >= Gem::Version.new('1.2.0') then
+      s.add_development_dependency(%q<chriseppstein-compass>, [">= 0"])
+    else
+      s.add_dependency(%q<chriseppstein-compass>, [">= 0"])
+    end
+  else
+    s.add_dependency(%q<chriseppstein-compass>, [">= 0"])
+  end
+end

data/config.rb

@@ -0,0 +1,10 @@
+# Require any additional compass plugins here.
+project_type = :stand_alone
+# Set this to the root of your project when deployed:
+http_path = "/"
+css_dir = "stylesheets"
+sass_dir = "src"
+images_dir = "images"
+output_style = :compact
+# To enable relative paths to assets via compass helper functions. Uncomment:
+# relative_assets = true

data/examples/aristo/.gitignore

@@ -0,0 +1 @@
+*.html$

data/examples/aristo/config.rb

@@ -0,0 +1,9 @@
+# Require any additional compass plugins here.
+require 'aristo'
+
+project_type = :stand_alone
+css_dir = "stylesheets"
+sass_dir = "src"
+images_dir = "images"
+output_style = :compact
+relative_assets = true

data/examples/aristo/images/.gitignore

@@ -0,0 +1,2 @@
+*.png
+*.gif

data/examples/aristo/index.html

@@ -0,0 +1,299 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html lang='en'>
+  <head>
+    <meta content='text/html; charset=utf-8' http-equiv='Content-Type' />
+    <title>
+      Aristo
+    </title>
+    <link href='stylesheets/screen.css' media='screen, projection' rel='stylesheet' type='text/css' />
+  </head>
+  <body>
+    <div class='container' id='header'>
+      <h1>
+        Aristo
+      </h1>
+      <h2>
+        Something believed to be the best of it's kind:
+        <i>
+          the trout is the aristocrat of freshwater fish
+        </i>
+      </h2>
+      <p class='compass'>
+        Examples of the CSS3
+        <a href='http://github.com/hpoydar/compass-aristo-plugin'>Aristo plugin</a>
+        for the
+        <a href='http://compass-style.org'>Compass</a>
+        CSS authoring framework in action. Looks best in Webkit browsers (Safari, Chrome).
+      </p>
+    </div>
+    <div class='section container'>
+      <h2>
+        Buttons
+      </h2>
+      <div class='column span-8'>
+        <p>
+          <button class='aristo-default'>
+            More
+          </button>
+          <button class='aristo-default' disabled='disabled'>
+            More
+          </button>
+        </p>
+        <p class='compass'>
+          <code>
+            button.aristo-default
+          </code>
+          or
+          <code>
+            +aristo-default-button
+          </code>
+        </p>
+      </div>
+      <div class='column span-8 last'>
+        <p>
+          <button class='aristo-blue'>
+            More
+          </button>
+          <button class='aristo-blue' disabled='disabled'>
+            More
+          </button>
+        </p>
+        <p class='compass'>
+          <code>
+            button.aristo-blue
+          </code>
+          or
+          <code>
+            +aristo-blue-button
+          </code>
+        </p>
+      </div>
+    </div>
+    <div class='section container'>
+      <h2>
+        Controls
+      </h2>
+      <div class='column span-8'>
+        <p>
+          <input class='aristo' id='checkbox_a' type='checkbox' />
+          <label class='aristo-checkbox' for='checkbox_a'>
+            Checkbox A
+          </label>
+          <br />
+          <input class='aristo' id='checkbox_b' type='checkbox' />
+          <label class='aristo-checkbox' for='checkbox_b'>
+            Checkbox B
+          </label>
+        </p>
+        <p class='compass'>
+          <code>
+            label.aristo-checkbox
+          </code>
+          and
+          <code>
+            input[type=checkbox].aristo
+          </code>
+          or
+          <code>
+            +aristo-checkbox
+          </code>
+        </p>
+      </div>
+      <div class='column span-8'>
+        <p>
+          <input checked='checked' class='aristo' id='radio_a' name='radio' type='radio' value='a' />
+          <label class='aristo-radio' for='radio_a'>
+            Radio A
+          </label>
+          <br />
+          <input class='aristo' id='radio_b' name='radio' type='radio' value='b' />
+          <label class='aristo-radio' for='radio_b'>
+            Radio B
+          </label>
+          <br />
+          <input class='aristo' id='radio_c' name='radio' type='radio' value='c' />
+          <label class='aristo-radio' for='radio_c'>
+            Radio C
+          </label>
+        </p>
+        <p class='compass'>
+          <code>
+            label.aristo-radio
+          </code>
+          and
+          <code>
+            input[type=radio].aristo
+          </code>
+          or
+          <code>
+            +aristo-radio
+          </code>
+        </p>
+      </div>
+      <div class='column span-8 last'>
+        <p>
+          <input type='range' />
+        </p>
+        <p class='compass'>
+          <code>
+            +aristo-slider
+          </code>
+        </p>
+      </div>
+      <div class='column span-8'>
+        <p>
+          <select>
+            <option>
+              Target A
+            </option>
+            <option>
+              Target B
+            </option>
+            <option>
+              Target C
+            </option>
+          </select>
+        </p>
+      </div>
+    </div>
+    <div class='section container'>
+      <h2>
+        Menus
+      </h2>
+      <div class='column span-8'>
+        <ul class='aristo-menu'>
+          <li>
+            <a>
+              New
+            </a>
+          </li>
+          <li>
+            <a>
+              Open
+            </a>
+          </li>
+          <li>
+            <a>
+              Save
+            </a>
+          </li>
+          <li>
+            <a>
+              Project
+            </a>
+          </li>
+          <li>
+            <a>
+              Build
+            </a>
+          </li>
+        </ul>
+        <p class='compass'>
+          <code>
+            ul.aristo-menu
+          </code>
+          or
+          <code>
+            +aristo-menu
+          </code>
+        </p>
+      </div>
+      <div class='column span-8'>
+        <ul class='aristo-menu-inverse'>
+          <li>
+            <a>
+              New
+            </a>
+          </li>
+          <li>
+            <a>
+              Open
+            </a>
+          </li>
+          <li>
+            <a>
+              Save
+            </a>
+          </li>
+          <li>
+            <a>
+              Project
+            </a>
+          </li>
+          <li>
+            <a>
+              Build
+            </a>
+          </li>
+        </ul>
+        <p class='compass'>
+          <code>
+            ul.aristo-menu-inverse
+          </code>
+          or
+          <code>
+            +aristo-menu-inverse
+          </code>
+        </p>
+      </div>
+    </div>
+    <div class='section container'>
+      <h2>
+        Scrollbars
+      </h2>
+      <div class='span-8' style='overflow: scroll; height: 300px;'>
+        <p class='span-16'>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ut tincidunt augue. Nunc placerat, libero eu lobortis mollis, mi lectus tristique metus, vel tincidunt nibh est sed odio. Donec euismod ultricies est, nec porta ipsum dictum sit amet. Suspendisse lacus purus, ullamcorper eget rutrum ut, laoreet vitae velit. Nam in leo eu nisi congue sagittis sed sed nisi. Sed ultricies luctus justo. Pellentesque orci arcu, vulputate vel dapibus non, posuere a orci. Suspendisse quis massa magna. Suspendisse potenti. Fusce placerat tempor purus id euismod. Praesent et turpis nisl, in pellentesque nisl. Nam vulputate justo tristique turpis tincidunt id dictum orci aliquet.
+        </p>
+        <p class='span-16'>
+          Phasellus laoreet justo non libero lacinia fermentum commodo felis ornare. Quisque in est quis turpis venenatis gravida. Nullam eu enim quis mauris ultricies sollicitudin. Nunc convallis ante et massa condimentum nec interdum nibh ornare. Morbi fringilla sapien vel lacus ultricies id malesuada purus dignissim. Donec ut ornare nulla. Phasellus ipsum urna, venenatis at lacinia pulvinar, faucibus non metus. Proin adipiscing porttitor mollis. Nam risus dui, hendrerit sed elementum vitae, eleifend nec sem. Nunc vehicula, ligula eget sagittis dictum, tellus leo eleifend lorem, eget semper neque lorem in erat. Nunc non risus non velit mattis ultricies. Nunc volutpat feugiat justo id sollicitudin. Praesent in odio neque, id tempor diam.
+        </p>
+        <p class='span-16'>
+          Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas egestas tempus ornare. Ut adipiscing feugiat tincidunt. Sed adipiscing imperdiet nisl, vitae mollis ante venenatis ut. Donec mollis, nulla vel malesuada vehicula, risus sem faucibus arcu, sed varius velit justo et risus. Mauris iaculis commodo erat, eget suscipit mi tempus in. Nullam venenatis sapien nec est mollis lacinia. Aenean placerat suscipit lectus, a luctus libero eleifend vel. Cras turpis mi, porta eget pharetra id, pharetra eget felis. Ut ac eros justo. Duis quis velit consequat eros placerat malesuada. In luctus lacus ut felis euismod porttitor. Aliquam tristique augue quis nunc imperdiet cursus. Aliquam erat volutpat. Donec leo est, placerat vel tristique at, imperdiet ut massa. Maecenas vel tortor a mi sodales eleifend eleifend eget nibh. Cras sagittis vehicula velit, et ultricies ante vehicula sit amet. Fusce massa risus, tempor eget elementum pharetra, sodales eu felis. Nam ut tellus neque, vitae dapibus purus.
+        </p>
+      </div>
+      <p class='compass span-8'>
+        <code>
+          +aristo-scrollbars
+        </code>
+      </p>
+    </div>
+    <div class='section container text'>
+      <h2>
+        Text
+      </h2>
+      <p>
+        <span class='regular'>
+          ARIAL Regular 12/22
+        </span>
+      </p>
+      <p>
+        <span class='bold'>
+          ARIAL Bold 14/24
+        </span>
+      </p>
+      <p class='compass span-8'>
+        <code>
+          +regular-aristo-font
+        </code>
+        or
+        <code>
+          +bold-aristo-font
+        </code>
+      </p>
+    </div>
+    <div class='section container'>
+      <h2>
+        Windows
+      </h2>
+      <p>
+        <i>
+          TODO
+        </i>
+      </p>
+    </div>
+    <div class='container' id='footer'>
+      This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/us/">Creative Commons Attribution-Share Alike 3.0 United States License</a><br /><a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/us/"><img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by-sa/3.0/us/88x31.png" /></a>
+    </div>
+  </body>
+</html>