particle 1.0

data/stylesheets/particle/layout/slider/_tiny.scss

@@ -0,0 +1,186 @@
+/* Source: http://baijs.nl/tinycarousel/ */
+
+$default-tinySlider-path: "images" !default;
+
+@mixin tinySlider($path: $default-tinySlider-path) {
+	.tinySlider {
+		overflow: hidden;
+		margin-bottom: 20px;
+		.viewport {
+			float: left; 
+			height: 125px; 
+			overflow: hidden; 
+			position: relative;
+		}
+		.buttons { 
+			background: url("#{$path}/tinySliderArrows.png") no-repeat scroll 0 0 transparent;
+			display: block;
+			margin: 45px 10px 0 0; 
+			background-position: 0 -38px;
+			float: left; 
+			width: 39px;
+			height: 37px;
+			overflow: hidden;
+			position: relative;
+			text-indent: -999em;
+		}
+		.next {
+			background-position: 0 0;
+			margin: 45px 0 0 10px;
+		}
+		.disable { 
+			visibility: hidden; 
+		}
+		.overview { 
+			list-style: none;
+			position: absolute; 
+			padding: 0; 
+			margin: 0; 
+			left: 0; 
+			top: 0; 
+			li { 
+				list-style: none;
+				float: left; 
+				margin: 0 20px 0 0; 
+				padding: 1px; 
+				height: 121px; 
+				border: 1px solid #DCDCDC; 
+				width: 236px;
+				position: relative;
+				span {
+					font-size: 22px;
+					position: absolute;
+					top: 40%;
+					right: 0;
+					padding: 8px 13px;
+				}
+			}
+		}
+	}
+}
+
+@mixin tinyStandard {
+	.tinySlider-standard { 
+		height: 125px;
+		margin-left: auto;
+		margin-right: auto;
+		width: 880px;
+		.viewport {
+			width: 780px;
+		}
+		.overview {
+			span {
+				color: #000000;
+				background: #FFFFFF;
+				background: rgba(255, 255, 255, 0.7);
+				.ie7 & {
+					margin-top: 40px;
+				}
+			}
+		}
+	}
+	@include tinySlider;
+}
+
+@mixin tinyExtended {
+	.tinySlider-extended { 
+		height: 145px;
+		.viewport {
+			width: 240px;
+		}
+		.next { 
+			margin: 30px 0 0 10px;
+		}
+		.disable { 
+			visibility: hidden;
+		}
+		.overview { 
+			list-style: none;
+			padding: 0;
+			margin: 0;
+			position: absolute;
+			left: 0;
+			top: 0;
+			position: relative;
+			li { 
+				float: left; 
+				margin: 0 20px 0 0; 
+				padding: 1px; 
+				height: 121px; 
+				border: 1px solid #DCDCDC; 
+				width: 236px;
+			}
+		}
+		.pager { 
+			overflow:hidden; 
+			list-style: none; 
+			clear: both; 
+			margin: 0 0 0 45px; 
+			li { 
+				float: left; 
+			}
+		}
+		.pagenum { 
+			background-color: #FFFFFF; 
+			text-decoration: none; 
+			text-align: center; 
+			padding: 5px; 
+			color: #555555; 
+			font-size: 14px; 
+			font-weight: bold; 
+			display: block; 
+		}
+		.active { 
+			color: #FFFFFF; 
+			background-color:  #555555; 
+		}
+	}
+	@include tinySlider;
+}
+
+@mixin tinyApps {
+
+	@include tinySlider;
+
+	.tinySlider-apps {
+		height: 130px;
+		margin-left: auto;
+		margin-right: auto;
+		width: 880px;
+
+		.viewport {
+			width: 780px;
+			height: 130px !important;
+		}
+
+		.overview {
+
+			li {
+				@include border-radius(4px);
+				@include box-shadow(#222222 0 1px 2px);
+				width: 125px;
+				height: 125px;
+				padding: 0 !important;
+				margin: 0 15px 20px !important;
+				border: none !important;
+			}
+
+			a, img {
+				@include border-radius(4px);
+			}
+
+			span {
+				@include border-bottom-radius(4px);
+				@include background(linear-gradient(top, $default-box-bg-color, darken($default-box-bg-color, 20)));
+				@include filter-gradient($default-box-bg-color, darken($default-box-bg-color, 20));
+				background-color: mix($default-box-bg-color, darken($default-box-bg-color, 20));
+				width: 125px;
+				font-size: 16px !important;
+				padding: 8px 0 !important;
+			}
+
+		}
+
+	}
+
+}

data/stylesheets/particle/typography/_legible-color-text.scss

@@ -0,0 +1,6 @@
+$default-legible-background-color: black !default;
+
+@mixin legible-color-text($background-color: $default-legible-background-color){
+	@if lightness($background-color) > 50% {color: black;}
+	@if lightness($background-color) <= 50% {color: white;}
+}

data/stylesheets/particle/typography/_render-fix.scss

@@ -0,0 +1,19 @@
+// These defaults make the arguments optional for this mixin
+// If you like, set different defaults in your project
+
+$default-font-smoothing: antialiased !default;
+$default-max-device-width: 480px !default;
+
+// Provides a single webkit attribute.
+// Includes default argument for smoothing
+@mixin render-fix($smoothing: $default-font-smoothing) {
+  -webkit-font-smoothing: $smoothing;
+}
+
+@mixin mobile-render-fix() {
+  @media only screen and (max-device-width:480px) {
+    body {
+      -webkit-text-stroke: 0 black;
+    }
+  }
+}

data/stylesheets/particle/typography/_text-replacement.scss

@@ -0,0 +1,32 @@
+// Hides html text and replaces it with an image.
+// If you use this on an inline element, you will need to change the display to block or inline-block.
+// Also, if the size of the image differs significantly from the font size, you'll need to set the width and/or height.
+//
+// Parameters:
+//
+// * `img` -- the relative path from the project image directory to the image.
+// * `x` -- the x position of the background image.
+// * `y` -- the y position of the background image.
+@mixin kellum-replace-text($img, $x: 50%, $y: 50%) {
+	@include kellum-hide-text;
+	background: {
+		image: image-url($img);
+		repeat: no-repeat;
+		position: $x $y;
+	};
+}
+
+// Like the `replace-text` mixin, but also sets the width
+// and height of the element according the dimensions of the image.
+@mixin kellum-replace-text-with-dimentions($img, $x: 50%, $y: 50%) {
+	@include replace-text($img, $x, $y);
+	width: image-width($img);
+	height: image-height($img);
+}
+
+// Hides text in an element so you can see the background.
+@mixin kellum-hide-text {
+	text-indent: 100%;
+	white-space: nowrap;
+	overflow: hidden;
+}

data/templates/project/manifest.rb

@@ -0,0 +1,12 @@
+# Make sure you list all the project template files here in the manifest.
+stylesheet 'style.scss', :media => 'screen, projection'
+
+description "A Stylesheet Using Particle"
+
+help %Q{
+Installs a stylesheet that you can use or refer to as an example.
+}
+
+welcome_message %Q{
+Please refer to the Particle Documentation to see how it all works.
+}

data/templates/project/style.scss

@@ -0,0 +1,10 @@
+/*
+ * Example Particle Stylsheet
+ */
+
+@import "compass/css3"
+		"particle/css3";
+
+body {
+	@include gradient-bg(#FFFFFF, #999999);
+}

metadata

@@ -0,0 +1,85 @@
+--- !ruby/object:Gem::Specification
+name: particle
+version: !ruby/object:Gem::Version
+  version: '1.0'
+  prerelease: 
+platform: ruby
+authors:
+- Stephen Way
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2012-10-15 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: compass
+  requirement: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: 0.12.2
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: 0.12.2
+description: a collection of mixins
+email: stephen@swy.me
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- README.md
+- lib/particle.rb
+- stylesheets/_particle.scss
+- stylesheets/particle/_css3.scss
+- stylesheets/particle/_layout.scss
+- stylesheets/particle/_typography.scss
+- stylesheets/particle/css3/_blend-modes.scss
+- stylesheets/particle/css3/_drop-shadow.scss
+- stylesheets/particle/css3/_gradient.scss
+- stylesheets/particle/css3/_noise.scss
+- stylesheets/particle/css3/_rotate.scss
+- stylesheets/particle/layout/_apprise.scss
+- stylesheets/particle/layout/_images.scss
+- stylesheets/particle/layout/_jquery-ui.scss
+- stylesheets/particle/layout/_slider.scss
+- stylesheets/particle/layout/_ui.scss
+- stylesheets/particle/layout/slider/_anything.scss
+- stylesheets/particle/layout/slider/_jcarousel.scss
+- stylesheets/particle/layout/slider/_nivo.scss
+- stylesheets/particle/layout/slider/_tiny.scss
+- stylesheets/particle/typography/_legible-color-text.scss
+- stylesheets/particle/typography/_render-fix.scss
+- stylesheets/particle/typography/_text-replacement.scss
+- templates/project/manifest.rb
+- templates/project/style.scss
+homepage: http://swy.me/
+licenses: []
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  none: false
+  requirements:
+  - - ! '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  none: false
+  requirements:
+  - - ! '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: 
+rubygems_version: 1.8.24
+signing_key: 
+specification_version: 3
+summary: a css library for compass
+test_files: []