compass-ui 0.0.3

data/.gitignore

@@ -0,0 +1,10 @@
+.bundle
+.sass-cache/
+*.swp
+*~
+.DS_Store
+bin/*
+*.gem
+demos/stylesheets/
+demos/.sass-cache
+

data/CHANGELOG.md

@@ -0,0 +1,22 @@
+# Compass-UI Changelog
+
+### 0.0.3 - extracted from the compass-bearing project
+
+## 0.0.2 - part of the compass-bearing project
+
+- Switch to using image-url and relative theme url, instead of hard-coded images url
+- Made _compass-bearing the default for pulling in a jquery base theme
+- Minor style tweaks to absolution and dot-luv 
+- Breaking border width, style, and color out into their own vars 
+- Adding Dot Luv theme as proof of concept
+- Adding Smoothness theme
+- Updated base jQuery UI theme
+- Added demos for testing and, well, demoing
+- Added jquery-ui-base-theme mixin
+- Changed jQuery UI theme variable naming scheme (from $jquery- variables to $ui-)
+- Moved dependencies from Gemfile to gemspec
+
+## 0.0.1 - previously part of the compass-bearing project
+
+- Initial release
+- Unstable and no longer supported, please see subsequent versions or pull from the Github repository. 

data/Gemfile

@@ -0,0 +1,3 @@
+# A sample Gemfile
+source "http://rubygems.org"
+gemspec

data/Gemfile.lock

@@ -0,0 +1,22 @@
+PATH
+  remote: .
+  specs:
+    compass-ui (0.0.1)
+      compass (>= 0.11.1)
+
+GEM
+  remote: http://rubygems.org/
+  specs:
+    chunky_png (1.2.1)
+    compass (0.11.5)
+      chunky_png (~> 1.2)
+      fssm (>= 0.2.7)
+      sass (~> 3.1)
+    fssm (0.2.7)
+    sass (3.1.7)
+
+PLATFORMS
+  ruby
+
+DEPENDENCIES
+  compass-ui!

data/LICENSE.md

@@ -0,0 +1,30 @@
+Copyright (c) 2011 Patrick A. Ward
+
+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.
+No attribution is required by products that make use of this 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.
+
+Except as contained in this notice, the name(s) of the above copyright
+holders shall not be used in advertising or otherwise to promote the sale,
+use or other dealings in this Software without prior written authorization.
+
+Contributors to this project agree to grant all rights to the copyright
+holder of the primary product. Attribution is maintained in the source
+control history of the product.
+

data/README.md

@@ -0,0 +1,81 @@
+# Compass-UI
+
+Compass-UI is a jQuery UI theme builder for the [compass][compass] CSS framework. 
+
+I recently worked on two projects that required use of the [jQuery UI][jqueryui]. However, designing a new theme from Themeroller or taking apart the generated CSS by hand proved to be tedious at best. The default themes did not fit our needs. So, I thought it might be useful to build a tool that could make generating jQuery UI themes easier. Compass-UI is an attempt to build that tool. 
+
+**This is a work-in-progress**.
+
+## Installation and Usage
+
+`(sudo) gem install compass-ui`
+
+or, in your Gemfile: `gem compass-ui`
+
+Then add `require 'compass-ui'` to your Compass config file. 
+
+To use one of the existing themes import it:
+
+```sass
+@import "compass-ui/theme/absolution";
+```
+
+Then, include the theme when needed:
+
+```sass
+@include absolution-theme;
+```
+
+## Existing Themes
+
+* jQuery UI - Base Theme (import with `@import "compass-ui/theme/jquery-ui-base"`).
+
+* Absolution Theme (import with `@import "compass-ui/theme/absolution"`). 
+
+    I've ported [Michaël Vanderheeren's][mvan] wonderful [Absolution Theme](https://github.com/michaelvanderheeren/Absolution) over to Compass/Sass as a proof-of-concept. However, please follow him if you'd like to keep up with his improvements on that theme. 
+
+* Smoothness Theme - the jQuery UI plain gem in just a few lines. 
+
+* Dot Luv Theme - the gaudy Dot Luv theme as a proof-of-concept, by just changing default variables and adding background images. 
+
+## Creating a New Theme 
+
+To create a new jQuery UI theme, simply create a new Sass file and import compass-ui:
+
+```sass
+@import "compass-ui";
+```
+
+Then, in your own project, override any of the variables found in the jquery-ui-base file with your own variables. 
+
+**Please see the proof-of-concept Absolution Theme for a detailed example.** Even though the Absolution Theme has additional CSS, in many cases, I think just overriding variables found in the jquery-ui-base would be sufficient to create a brand-new theme. See the Smoothness and Dot Luv themes in the demos for examples of overriding  a few variables to create a new theme.  
+
+After you've imported it into your project, you'll need to @include the default theme's mixin. 
+
+Place this after your variable overrides. 
+
+```sass
+@include jquery-ui-base-theme;
+```
+
+See the demos for a more detailed example. 
+
+## Attribution
+Absolution Theme, Copyright 2010, [Michael Vanderheeren][mvan]
+
+jQuery UI CSS Framework, Copyright 2010, [jQuery UI][jqueryui]<br>
+[Dual licensed][jqueryui-license] under the MIT or GPL Version 2 licenses.<br>
+[http://docs.jquery.com/UI/Theming/API](http://docs.jquery.com/UI/Theming/API)<br>
+
+## License
+
+Copyright (c) 2011 Patrick A. Ward<br>
+All Rights Reserved.<br>
+Released under a [slightly modified MIT License][license]. 
+
+[license]: http://github.com/patrickward/compass-ui/tree/master/LICENSE.md
+[compass]: http://compass-style.org
+[jqueryui]: http://jqueryui.com
+[jqueryui-license]: http://jquery.org/license
+[mvan]: http://www.michaelvanderheeren.be/
+

data/compass-ui.gemspec

@@ -0,0 +1,23 @@
+# -*- encoding: utf-8 -*-
+$:.push File.expand_path("../lib", __FILE__)
+require 'compass-ui/version'
+
+Gem::Specification.new do |s|
+  # Metadata
+  s.name          = 'compass-ui'
+  s.version       = CompassUI::VERSION
+  s.authors       = ['Patrick Ward']
+  s.email         = ['oss@patrickward.com']
+
+  s.summary       = "jQuery UI theme builder for the Compass CSS Authoring Framework"
+  s.description   = "Compass-UI is a jQuery UI theme builder for the Compass CSS Authoring Framework."
+  s.homepage      = 'https://github.com/patrickward/compass-ui'
+
+  s.files         = `git ls-files`.split("\n")
+  s.test_files    = `git ls-files -- {test,spec,features}/*`.split("\n")
+  s.executables   = `git ls-files -- bin/*`.split("\n").map{ |f| File.basename(f) }
+  s.require_paths = ["lib"]
+
+  s.add_dependency 'compass', [">= 0.11.1"]
+
+end

data/demos/config.rb

@@ -0,0 +1,26 @@
+# Require any additional compass plugins here.
+require 'compass-ui'
+
+# Set this to the root of your project when deployed:
+http_path = "/"
+css_dir = "stylesheets"
+sass_dir = "sass"
+images_dir = "images"
+# http_images_path = "images"
+javascripts_dir = "javascripts"
+
+# You can select your preferred output style here (can be overridden via the command line):
+# output_style = :expanded or :nested or :compact or :compressed
+
+# To enable relative paths to assets via compass helper functions. Uncomment:
+# relative_assets = true
+
+# To disable debugging comments that display the original location of your selectors. Uncomment:
+# line_comments = false
+
+
+# If you prefer the indented syntax, you might want to regenerate this
+# project again passing --syntax sass, or you can uncomment this:
+# preferred_syntax = :sass
+# and then run:
+# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass

data/demos/index.html

@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
+    <meta http-equiv="Cache-Control" content="no-cache" />
+    <title>Compass-UI</title>
+    <link type="text/css" href="stylesheets/default.css" rel="stylesheet" />	
+    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
+    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.15/jquery-ui.min.js"></script>
+    <script type="text/javascript" src="js/demo.js"></script>
+  </head>
+  <body class="ui-form">
+    <div id="container">
+      <div id="header">
+        <h1>Compass-UI Theme Tests</h1>
+      </div>
+      <div id="content">
+        <p>
+          Compass-UI is a jQuery UI theme builder for the Compass CSS authoring framework. 
+        </p>
+        <p>
+          This page is used to demonstrate and test the themes that have been built with it so far.
+        </p>
+
+        <p><strong>This is a work-in-progress. So, use it at your own risk.</strong></p>
+
+        <div id="demo-autocomplete">Loading...</div>
+        <div id="demo-buttons">Loading...</div>
+        <div id="demo-sliders">Loading...</div>
+        <div id="demo-highlights">Loading...</div>
+        <div id="demo-accordion">Loading...</div>
+        <div id="demo-tabs">Loading...</div>
+        <div id="demo-dialog">Loading...</div>
+        <div id="demo-datepicker">Loading...</div>
+        <div id="demo-progressbar">Loading...</div>
+        <div id="demo-icons">Loading...</div>
+        <div id="demo-overlay">Loading...</div>
+        <div id="demo-combinations">Loading...</div>
+        <div id="demo-form">Loading...</div>
+      </div>
+      <div id="sidebar">
+        <h2 id="showing">
+          Currently Showing: <br>
+          <span>jQuery-UI Base Theme</span>
+        </h2>
+
+        <div id="toggle-css">
+          <strong>Choose a theme to test:</strong> 
+          <a href="#" rel="stylesheets/default.css">jQuery Base Theme</a>
+          <a href="#" rel="stylesheets/absolution.css">Absolution Theme</a>
+          <a href="#" rel="stylesheets/smoothness.css">Smoothness Theme</a>
+          <a href="#" rel="stylesheets/dot-luv.css">Dot Luv Theme</a>
+          <a href="#" rel="stylesheets/color-test.css">Color Test</a>
+        </div>
+
+        <p>
+          <strong>Resources:</strong>
+          <a href="https://github.com/patrickward/compass-ui">Github Project</a>
+        </p>
+
+      </div>
+    </div>
+  </body>
+</html>
+

data/demos/js/demo.js

@@ -0,0 +1,189 @@
+$(function(){
+
+  // Load each section and it's associated demo code
+  $('div[id^="demo-"]').each(function() {
+    $(this).load('sections/' + $(this).attr('id').substr(5) + '.html', function() {
+      loadDemo($(this).attr('id'));
+    });
+  });
+
+  function loadDemo(argument) {
+
+    switch(argument) {
+
+      // ---------------------------
+      // Countries 
+      // ---------------------------
+      case 'demo-autocomplete':
+        var countryList = ["Afghanistan", "Albania", "Algeria", "Andorra", "Angola", "Antarctica", "Antigua and Barbuda", "Argentina", "Armenia", "Australia", "Austria", "Azerbaijan", "Bahamas", "Bahrain", "Bangladesh", "Barbados", "Belarus", "Belgium", "Belize", "Benin", "Bermuda", "Bhutan", "Bolivia", "Bosnia and Herzegovina", "Botswana", "Brazil", "Brunei", "Bulgaria", "Burkina Faso", "Burma", "Burundi", "Cambodia", "Cameroon", "Canada", "Cape Verde", "Central African Republic", "Chad", "Chile", "China", "Colombia", "Comoros", "Congo, Democratic Republic", "Congo, Republic of the", "Costa Rica", "Cote d'Ivoire", "Croatia", "Cuba", "Cyprus", "Czech Republic", "Denmark", "Djibouti", "Dominica", "Dominican Republic", "East Timor", "Ecuador", "Egypt", "El Salvador", "Equatorial Guinea", "Eritrea", "Estonia", "Ethiopia", "Fiji", "Finland", "France", "Gabon", "Gambia", "Georgia", "Germany", "Ghana", "Greece", "Greenland", "Grenada", "Guatemala", "Guinea", "Guinea-Bissau", "Guyana", "Haiti", "Honduras", "Hong Kong", "Hungary", "Iceland", "India", "Indonesia", "Iran", "Iraq", "Ireland", "Israel", "Italy", "Jamaica", "Japan", "Jordan", "Kazakhstan", "Kenya", "Kiribati", "Korea, North", "Korea, South", "Kuwait", "Kyrgyzstan", "Laos", "Latvia", "Lebanon", "Lesotho", "Liberia", "Libya", "Liechtenstein", "Lithuania", "Luxembourg", "Macedonia", "Madagascar", "Malawi", "Malaysia", "Maldives", "Mali", "Malta", "Marshall Islands", "Mauritania", "Mauritius", "Mexico", "Micronesia", "Moldova", "Mongolia", "Morocco", "Monaco", "Mozambique", "Namibia", "Nauru", "Nepal", "Netherlands", "New Zealand", "Nicaragua", "Niger", "Nigeria", "Norway", "Oman", "Pakistan", "Panama", "Papua New Guinea", "Paraguay", "Peru", "Philippines", "Poland", "Portugal", "Qatar", "Romania", "Russia", "Rwanda", "Samoa", "San Marino", " Sao Tome", "Saudi Arabia", "Senegal", "Serbia and Montenegro", "Seychelles", "Sierra Leone", "Singapore", "Slovakia", "Slovenia", "Solomon Islands", "Somalia", "South Africa", "Spain", "Sri Lanka", "Sudan", "Suriname", "Swaziland", "Sweden", "Switzerland", "Syria", "Taiwan", "Tajikistan", "Tanzania", "Thailand", "Togo", "Tonga", "Trinidad and Tobago", "Tunisia", "Turkey", "Turkmenistan", "Uganda", "Ukraine", "United Arab Emirates", "United Kingdom", "United States", "Uruguay", "Uzbekistan", "Vanuatu", "Venezuela", "Vietnam", "Yemen", "Zambia", "Zimbabwe"];
+
+        $("#countries").autocomplete({
+          source: countryList
+        });
+        // code
+        break;
+
+      // ---------------------------
+      // Accordion 
+      // ---------------------------
+      case 'demo-accordion':
+        $(".accordion").accordion({ header: "h3" });
+        break;
+      
+      // ---------------------------
+      // Sliders 
+      // ---------------------------
+      case 'demo-sliders':
+        // Horizontal Slider
+        $('#horizSlider').slider({
+          range: true,
+          values: [17, 67]
+        }).width(500);
+
+        // Vertical Slider				
+        $("#eq > span").each(function() {
+          var value = parseInt($(this).text());
+          $(this).empty().slider({
+            value: value,
+            range: "min",
+            animate: true,
+            orientation: "vertical"
+          });
+        });
+        break;
+
+      // ---------------------------
+      // Tabs 
+      // ---------------------------
+      case 'demo-tabs':
+        $('#tabs').tabs();
+        break;
+
+      // ---------------------------
+      // Dialog 
+      // ---------------------------
+      case 'demo-dialog':
+        // Dialog			
+        $('#dialog').dialog({
+          autoOpen: false,
+          width: 600,
+          buttons: {
+            "Ok": function() { 
+              $(this).dialog("close"); 
+            }, 
+          "Cancel": function() { 
+            $(this).dialog("close"); 
+          } 
+          },
+          modal: true
+        });
+
+        $('#dialog_link').button().click(function(){
+          $('#dialog').dialog('open');
+          return false;
+        });
+        break; 
+
+      // ---------------------------
+      // Datepicker 
+      // ---------------------------
+      case 'demo-datepicker':
+        $('#datepicker').datepicker({
+          showButtonPanel: true
+        }).children().show();
+
+        $('#datepicker2').datepicker({
+          numberOfMonths: 3,
+          showButtonPanel: true
+        }).children().show();
+        break;
+
+      // ---------------------------
+      //  Icons
+      // ---------------------------
+      case 'demo-icons':
+        //hover states on the static widgets
+        $('#dialog_link, ul#icons li').hover(
+            function() { $(this).addClass('ui-state-hover'); }, 
+            function() { $(this).removeClass('ui-state-hover'); }
+            );
+        break;
+        
+      // ---------------------------
+      //  Buttons
+      // ---------------------------
+      case 'demo-buttons': 
+        // Button
+        $("#divButton, #linkButton, #submitButton, #inputButton").button();
+
+        // Icon Buttons
+        $("#leftIconButton").button({
+          icons: {
+                   primary: 'ui-icon-wrench'
+                 }
+        });
+
+        $("#bothIconButton").button({
+          icons: {
+                   primary: 'ui-icon-wrench',
+          secondary: 'ui-icon-triangle-1-s'
+                 }
+        });					
+
+        // Button Set
+        $("#radio1").buttonset();
+
+        $("#buttonInModal").button({
+          icons: {primary: 'ui-icon-wrench'}
+        });
+
+
+        break;
+
+      // ---------------------------
+      //  Progressbar
+      // ---------------------------
+      case 'demo-progressbar': 
+        // Progressbar
+        $("#progressbar").progressbar({
+          value: 37
+        }).width(500);
+        $("#animateProgress").click(function(event) {
+          var randNum = Math.random() * 90;
+          $("#progressbar div").animate( { width: randNum+"%" } );
+          event.preventDefault();
+        });
+        break;
+        
+      // ---------------------------
+      //  Combinations
+      // ---------------------------
+      case 'demo-combinations': 
+        // Combinations
+        $('#tabs2').tabs();
+        $("#accordion2").accordion({ header: "h4" });
+        // Nested button tests
+        $("#nestedButtonTest_1, #nestedButtonTest_2, #buttonInModal").button().click(function(e) {
+          e.preventDefault();
+        });
+        break;
+      default:
+        // code
+    }
+
+  }
+
+  // Switch styles 
+  $('#toggle-css a').click(function() {
+    var name = $(this).html();
+    $('link[rel=stylesheet]').attr({href: $(this).attr('rel') + '?' + Date.now() });
+    $('h2#showing span')
+      .fadeOut('slow', function() {
+        $(this)
+          .html(name)
+          .fadeIn('slow');
+      });
+  });
+
+});
+