pixarea-compass-themes 0.1.0

data/.gitignore

@@ -0,0 +1,6 @@
+.sass-cache/
+*.gem
+.bundle
+Gemfile.lock
+pkg/*
+

data/.livereload

@@ -0,0 +1,21 @@
+# Lines starting with pound sign (#) are ignored.
+
+# additional extensions to monitor
+#config.exts << 'haml'
+
+# exclude files with NAMES matching this mask
+#config.exclusions << '~*'
+# exclude files with PATHS matching this mask (if the mask contains a slash)
+#config.exclusions << '/excluded_dir/*'
+# exclude files with PATHS matching this REGEXP
+#config.exclusions << /somedir.*(ab){2,4}.(css|js)$/
+
+# reload the whole page when .js changes
+#config.apply_js_live = false
+# reload the whole page when .css changes
+#config.apply_css_live = false
+# reload the whole page when images (png, jpg, gif) change
+#config.apply_images_live = false
+
+# wait 100ms for more changes before reloading a page
+config.grace_period = 0.8

data/Gemfile

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

data/README

@@ -0,0 +1,23 @@
+Pixarea theme system
+by Daniel Reszka (blog.pixarea.com)
+-----------------------------------
+
+This is a personal CSS framework I'm building for my future projects, based on SASS and Compass.
+
+My intention with this framework, is to be able to design websites directly in the browser, thus skipping Photoshop.
+
+So, this theme system:
+* Aims for extreme modularity thanks to the mixins, so everything can be re-used across projects. 
+* Takes advantage of CSS3 features: box-shadows, gradients, rounded-corners, to design websites in the browser.
+* Uses javascript (PIE.js from css3pie.com) so most of these CSS3 effects will work immediately in IE.
+
+It's very experimental for now, you can use it freely, but you have to know:
+It is not complete, it is not well-documented, it is not well-tested, and it may not be ready to use for your projects.
+Remember that everything here can be modified, broken, refactored at any time.
+
+But if you like the approach, feel free to clone, play with it and share ideas.
+
+
+
+
+

data/README.markdown

@@ -0,0 +1,23 @@
+Pixarea theme system - by Daniel Reszka (blog.pixarea.com)
+==========================================================
+
+This is a personal CSS framework I'm building for my future projects, based on SASS and Compass.
+
+My intention with this framework, is to be able to design websites directly in the browser, thus skipping Photoshop.
+
+So, this theme system:
+
+* Aims for extreme modularity thanks to the mixins, so everything can be re-used across projects. 
+* Takes advantage of CSS3 features: box-shadows, gradients, rounded-corners, to design websites in the browser.
+* Uses javascript (PIE.js from css3pie.com) so most of these CSS3 effects will work immediately in IE.
+
+It's very experimental for now, you can use it freely, but you have to know:
+It is not complete, it is not well-documented, it is not well-tested, and it may not be ready to use for your projects.
+Remember that everything here can be modified, broken, refactored at any time.
+
+But if you like the approach, feel free to clone, play with it and share ideas.
+
+
+
+
+

data/Rakefile

@@ -0,0 +1,2 @@
+require 'bundler'
+Bundler::GemHelper.install_tasks

data/lib/pixarea-compass-themes.rb

@@ -0,0 +1,10 @@
+require 'compass'
+
+options = Hash.new
+options[:stylesheets_directory] = File.expand_path(File.join(File.dirname(__FILE__), '..',  'sass'))
+options[:templates_directory] = File.expand_path(File.join(File.dirname(__FILE__), '..', 'templates'))
+
+Compass::Frameworks.register('pixarea-compass-themes', options)
+
+
+

data/lib/pixarea-compass-themes/version.rb

@@ -0,0 +1,7 @@
+module Pixarea
+  module Compass
+    module Themes
+      VERSION = "0.1.0"
+    end
+  end
+end

data/pixarea-compass-themes.gemspec

@@ -0,0 +1,25 @@
+# -*- encoding: utf-8 -*-
+$:.push File.expand_path("../lib", __FILE__)
+require "pixarea-compass-themes/version"
+
+Gem::Specification.new do |s|
+  s.name        = "pixarea-compass-themes"
+  s.version     = Pixarea::Compass::Themes::VERSION
+  s.platform    = Gem::Platform::RUBY
+  s.authors     = ["Daniel Reszka"]
+  s.email       = ["draens@hotmail.com"]
+  s.homepage    = "https://github.com/danielres/pixarea-compass-themes"
+  s.summary     = %q{A supra-modular CSS theming system based on COMPASS}
+  s.description = %q{A supra-modular CSS theming system based on COMPASS}
+
+  s.rubyforge_project = "pixarea-compass-themes"
+
+  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.has_rdoc = false
+  s.add_dependency("compass", [">= 0.11.beta.3"])
+
+end

data/sass/_lib.sass

@@ -0,0 +1,8 @@
+@import lib/font-stacks
+@import lib/formatting
+@import lib/palettes
+@import lib/pie
+@import lib/structure
+@import lib/tones
+@import lib/typo
+

data/sass/_modules.sass

@@ -0,0 +1,4 @@
+@import modules/menus
+@import modules/forms
+
+

data/sass/_themes.sass

@@ -0,0 +1,2 @@
+@import themes/shapy
+@import themes/minipane

data/sass/home.sass

@@ -0,0 +1 @@
+// @import /stylesheets/refinery/home.css

data/sass/lib/_font-stacks.scss

@@ -0,0 +1,63 @@
+//
+//  Serif and sans-serif font stacks from:
+//
+//  A Revised Font Stack
+//  http://www.awayback.com/revised-font-stack
+//
+//
+//  Monospace font stack from: 
+//  
+//  8 Definitive Web Font Stacks
+//  http://articles.sitepoint.com/article/eight-definitive-font-stacks
+//
+//
+//  Cursive font stack from:
+//  
+//  Build better CSS font stacks - Cursive  font stack featuring Bradley Hand ITC
+//  http://www.codestyle.org/css/font-family/BuildBetterCSSFontStacks.shtml
+//
+
+// Serif font-stacks
+
+$garamond-font-stack: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif !default;
+$lucida-bright-font-stack: "Lucida Bright", Georgia, serif !default;
+$palatino-font-stack: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif !default;
+$big-caslon-font-stack: "Big Caslon", "Book Antiqua", "Palatino Linotype", Georgia, serif !default;
+$didot-font-stack: Didot, "Didot LT STD", "Hoefler Text", Garamond, "Times New Roman", serif !default;
+$baskerville-font-stack: Baskerville, "Baskerville old face", "Hoefler Text", Garamond, "Times New Roman", serif !default;
+$hoefler-text-font-stack: "Hoefler Text", "Baskerville old face", Garamond, "Times New Roman", serif !default;
+$bodoni-mt-font-stack: "Bodoni MT", Didot, "Didot LT STD", "Hoefler Text", Garamond, "Times New Roman", serif !default;
+$goudy-old-style-font-stack: "Goudy Old Style", Garamond, "Big Caslon", "Times New Roman", serif !default;
+$constantia-font-stack: Constantia, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif !default;
+$cambria-font-stack: Cambria, Georgia, serif !default;
+$book-antiqua-font-stack: "Book Antiqua", Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif !default;
+
+// Sans-Serif font-stacks
+
+$optima-font-stack: Optima, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif !default;
+$futura-font-stack: Futura, "Trebuchet MS", Arial, sans-serif !default;
+$gill-sans-font-stack: "Gill Sans", "Gill Sans MT", Calibri, sans-serif !default;
+$trebuchet-font-stack: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif !default;
+$helvetica-font-stack: "Helvetica Neue", Arial, Helvetica, sans-serif !default;
+$verdana-font-stack: Verdana, Geneva, sans-serif !default;
+$lucida-grande-font-stack: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif !default;
+$geneva-font-stack: Geneva, Tahoma, Verdana, sans-serif !default;
+$segoe-font-stack: Segoe, "Segoe UI", "Helvetica Neue", Arial, sans-serif !default;
+$candara-font-stack: Candara, Calibri, Segoe, "Segoe UI", Optima, Arial, sans-serif !default;
+$calibri-font-stack: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif !default;
+$franklin-gothic-font-stack: "Franklin Gothic Medium", Arial, sans-serif !default;
+$tahoma-font-stack: Tahoma, Geneva, Verdana, sans-serif !default;
+
+//
+// Monospace font-stacks
+//
+// Consolas is not included in this stack because it is much smaller than the other fonts listed in the stack.
+//
+
+$monospace-font-stack: "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace !default;
+
+// 
+// Cursive font-stacks
+//
+
+$cursive-font-stack: "Bradley Hand ITC", "Apple Chancery", "URW Chancery L", cursive !default;

data/sass/lib/_formatting.sass

@@ -0,0 +1,23 @@
+
+=formatting-base
+
+  $blueprint-font-family  : $verdana-font-stack
+  $blueprint-font-size    : 14px
+  
+  +blueprint-typography 
+  
+  #header h1
+    font-size: 2.0em
+    margin-bottom: 1em
+  h1
+    font-size: 1.8em
+    margin-bottom: 1em
+  h2
+    font-size: 1.6em
+  h3
+    font-size: 1.4em
+  h4
+    font-size: 1.2em
+
+  body
+    line-height: 1.8

data/sass/lib/_palettes.sass

@@ -0,0 +1,38 @@
+// palette1: A rusty machine on fresh grass 
+$rusty-red:         #C20500
+$rusty-brown:       #382116
+$rusty-orange:      #F55E18
+$rusty-green:       #32CA3A
+$rusty-young-green: #58F518
+// mixes:
+$rusty-brownish-orange: desaturate(mix($rusty-orange, $rusty-brown, 50), 10)
+
+// palette2: Mountains of Burma
+$burma-darkblue:    #354242
+$burma-clearblue:   #ACEBAE
+$burma-sable:       #FFFF9D            
+$burma-palegreen:   #C9DE55
+$burma-deepgreen:   #7D9100
+// mixes:
+$burma-lightsable: lighten($burma-sable, 10)
+
+// palette3: Firenze
+$firen-blue:        #468966
+$firen-egg:         #FFF0A5
+$firen-deepegg:     #FFB03B
+$firen-brick:       #B64926
+$firen-deepbrick:   #8E2800
+
+// palette4: Victorian Circus
+$circ-brown:        #805E31
+$circ-red:          #AC2F35
+$circ-yellow:       #DECB48
+$circ-green:        #9DB174
+$circ-white:        #FFFDED
+
+// palette5: Raspberry
+$rasp-red: #BF0426
+$rasp-bordeaux: #731022
+$rasp-pink: #BF0436
+$rasp-beige: #A68B3C
+$rasp-white: #EDEDDD

data/sass/lib/_pie.sass

@@ -0,0 +1,12 @@
+=pie
+  behavior: url(/htc/PIE.htc)
+  
+=linear-gradient-pie($c1, $c2)
+  +linear-gradient(color-stops($c1, $c2), top)
+  -pie-background: linear-gradient($c1, $c2)
+  +pie
+
+=border-radius-pie($radius: $default-border-radius, $vertical-radius: false)
+  +border-radius($radius, $vertical-radius)
+  +pie
+    

data/sass/lib/_structure.sass

@@ -0,0 +1,12 @@
+=box($padding: 20px, $margin-bottom: 20px)
+  padding: $padding
+  margin-bottom: $margin-bottom
+
+=container-alt
+  +container
+  overflow: visible
+  +pie-clearfix
+  
+=visually-hide
+  visibility: hidden
+  position: absolute  

data/sass/lib/_tones.sass

@@ -0,0 +1,5 @@
+=linear-gradient-pie($c1, $c2)
+  +linear-gradient(color-stops($c1, $c2), top)
+  -pie-background: linear-gradient($c1, $c2)
+  +pie
+

data/sass/lib/_typo.sass

@@ -0,0 +1,10 @@
+=font-face-for($font, $variant: '')
+  +font-face("#{$font}", font-files("#{$font}/#{$font}-webfont.woff",woff, "#{$font}/#{$font}-webfont.ttf",truetype), "#{$font}/#{$font}-webfont.eot")
+
+=font-smoothing-chrome($enabled: true)
+  @if $enabled == true
+    text-shadow: transparent 0 0 1px
+
+
+$font1: cabndwebbold
+$font2: comfortaa_regular

data/sass/modules/_forms.sass

@@ -0,0 +1 @@
+@import modules/forms/basic

data/sass/modules/_menus.sass

@@ -0,0 +1 @@
+@import modules/menus/inline-blocks

data/sass/modules/forms/_basic.sass

@@ -0,0 +1,27 @@
+=form-basic($label-span:4, $label-align:left, $input-span:8, $textarea-span:12, $submit-span: 5)
+  label
+    width: span($label-span)
+    margin-right: $blueprint-grid-margin
+    float: left
+    text-align: $label-align
+
+  input[type=text]
+    width: ( $blueprint_grid_width * $input-span + $blueprint_grid_margin * ($input-span - 1) ) - 10px
+    padding: 5px
+    border-width: 0 
+
+  input[type=submit]
+    width: span($submit-span)
+    padding: 5px 0
+    border-width: 0
+      
+  textarea
+    width: ( $blueprint_grid_width * $textarea-span + $blueprint_grid_margin * ($textarea-span - 1) ) - 10px
+    padding: 5px
+    border-width: 0 
+    
+  .field
+    margin: 12px 0px
+
+  .actions
+    margin-left: $blueprint-grid-outer-width * $label-span

data/sass/modules/menus/_inline-blocks.sass

@@ -0,0 +1,15 @@
+=menu-inline-blocks($item-span:4)
+  ul
+    +inline-block-list
+    li
+      margin-bottom: 10px
+      +column($item-span)
+      a
+        padding: 5px
+        display: block
+        text-align: center
+      &.selected > a 
+        font-weight: bold
+      &.last
+        +last
+

data/sass/theme.sass

@@ -0,0 +1,5 @@
+
+@import themes
+
++theme-minipane(dark)
+//+theme-shapy(burma)

data/sass/themes/_minipane.sass

@@ -0,0 +1,32 @@
+// @import /stylesheets/refinery/application.css
+
+@import compass
+@import blueprint
+@import blueprint/reset/utilities
+
+@import compass/css3/pie
+$pie-behavior: stylesheet-url("../theme/stylesheets/PIE.htc") 
+
+@import lib
+@import modules
+
+@import themes/minipane/formatting
+@import themes/minipane/structure
+@import themes/minipane/tones
+@import themes/minipane/shapes
+@import themes/minipane/shadows
+
+=theme-minipane($tones: burma)
+  /* RESET ---------------------------------------------------------------------*/
+  +blueprint-global-reset
+  /* STRUCTURE -----------------------------------------------------------------*/
+  +minipane-structure
+  /* FORMATTING-----------------------------------------------------------------*/
+  +minipane-formatting
+  /* TONES ---------------------------------------------------------------------*/
+  +minipane-tones($tones)
+  /* SHAPES --------------------------------------------------------------------*/
+  +minipane-shapes
+  /* SHADOWS -------------------------------------------------------------------*/
+  +minipane-shadows
+

data/sass/themes/_shapy.sass

@@ -0,0 +1,32 @@
+// @import /stylesheets/refinery/application.css
+
+@import compass
+@import blueprint
+@import blueprint/reset/utilities
+
+@import compass/css3/pie
+$pie-behavior: stylesheet-url("../theme/stylesheets/PIE.htc") 
+
+@import lib
+@import modules
+
+@import themes/shapy/formatting
+@import themes/shapy/structure
+@import themes/shapy/tones
+@import themes/shapy/shapes
+@import themes/shapy/shadows
+
+=theme-shapy($tones: rusty)
+  /* RESET ---------------------------------------------------------------------*/
+  +blueprint-global-reset
+  /* STRUCTURE -----------------------------------------------------------------*/
+  +shapy-structure
+  /* FORMATTING-----------------------------------------------------------------*/
+  +shapy-formatting
+  /* TONES ---------------------------------------------------------------------*/
+  +shapy-tones($tones)
+  /* SHAPES --------------------------------------------------------------------*/
+  +shapy-shapes
+  /* SHADOWS -------------------------------------------------------------------*/
+  +shapy-shadows
+