pixarea-compass-themes 0.1.1 → 0.2.0

data/README.markdown

@@ -17,7 +17,24 @@ 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.
 
+Install as a gem
+----------------
 
+    gem install pixarea-compass-themes
 
+Generate a theme
+----------------
+This project is a Compass plugin.
+So you have to install Compass first, then you can create your new project with:
 
+    compass create MY_THEME -r pixarea-compass-themes -u pixarea-compass-themes --syntax sass
 
+Where MY_THEME is the name of your project.
+
+Note: Don't use "--syntax sass" if you prefer the scss syntax.
+
+To remove Compass line comments
+-------------------------------
+Add this to the file config.rb:
+
+    line_comments = false

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

@@ -1,7 +1,7 @@
 module Pixarea
   module Compass
     module Themes
-      VERSION = "0.1.1"
+      VERSION = "0.2.0"
     end
   end
 end

data/sass/pixarea/lib/_formatting.sass

@@ -6,7 +6,7 @@
   
   +blueprint-typography 
   
-  #header h1
+  #{$_header} h1
     font-size: 2.0em
     margin-bottom: 1em
   h1

data/sass/pixarea/themes/minipane/_shapes.sass

@@ -1,6 +1,6 @@
 =minipane-shapes
-  #menu a,
-  #body_content_left,
-  #body_content_right
+  #{$_menu_1} a,
+  #{$_body}_content_left,
+  #{$_body}_content_right
     +pie
     +border-radius

data/sass/pixarea/themes/minipane/_structure.sass

@@ -8,39 +8,39 @@
   // Or you can set $blueprint-grid-width to a fixed value and unset $blueprint-container-size -- it will be calculated for you.
   $blueprint-grid-width: ($blueprint-container-size + $blueprint-grid-margin) / $blueprint-grid-columns - $blueprint-grid-margin
   
-  #body_content_title
+  #{$_body}_content_title
     +visually-hide
 
-  .inner
+  #{$_inner}
     +box  
 
-  #page_container
+  #{$_page_container}
     +container-alt
   
-  #header
+  #{$_header}
     padding-top: 20px
     margin-bottom: 5px
 
-  #footer
+  #{$_footer}
     margin-top: 10px
     padding-left: 20px
 
-  #body_content
+  #{$_body}_content
     +clearfix
     position: relative
 
-  #body_content_left
+  #{$_body}_content_left
     +column(16)
-    .no_body_content_right &
+    #{$_no_body_content_2} &
       +column(22)
   @import compass/layout/stretching
-  #body_content_right
+  #{$_body}_content_right
     +column(8)
     +last
     +stretch-y
     right: 0
     
-  #menu 
+  #{$_menu_1} 
     +menu-inline-blocks(4)
   
   /* FORMS ------------------------------*/

data/sass/pixarea/themes/minipane/tones/_burma.sass

@@ -11,15 +11,15 @@
     height: 100%
   body
     +linear-gradient-pie(#333 0%, #999 100%)             
-  #header
+  #{$_header}
     h1
       background: $darkblue
-  #body_content_left
+  #{$_body}_content_left
     background: $lightsable
-  #menu li
+  #{$_menu_1} li
     background: $lightsable
     +linear-gradient-pie($palegreen 0%, $deepgreen 100%)
-  #body_content_right .inner
+  #{$_body}_content_right #{$_inner}
     $framb: #A83438
     background: $framb
     border: 1px solid $framb - #222222

data/sass/pixarea/themes/minipane/tones/_dark.sass

@@ -20,11 +20,11 @@
     +link-colors($lighter, $lighter + 30, $lighter, $lighter, $lighter)
     +hover-link
     
-  #header 
+  #{$_header} 
     h1
       color: $neutral
 
-  #menu li
+  #{$_menu_1} li
     a
       +link-colors(inherit, inherit)
       text-decoration: none
@@ -34,13 +34,13 @@
       background: $bg + 30
       color: $light
         
-  #footer
+  #{$_footer}
     color: ($bg / 2) + ($neutral / 2.5)
     
-  #body_content_left
+  #{$_body}_content_left
     background: $dark + 30
   
-  #body_content_right 
+  #{$_body}_content_right 
     background: $dark + 10
     color: $neutral - 50
     //border: 2px solid $dark - 10

data/sass/pixarea/themes/shapy/_shadows.sass

@@ -4,13 +4,13 @@ $shadow-color: black !default
 
   $default-box-shadow-color: $shadow-color
   $default-box-shadow-blur: 15px
-  #body_content_left,
-  #menu a,
-  #header h1,
-  #header h1 a     
+  #{$_body}_content_left,
+  #{$_menu_1} a,
+  #{$_header} h1,
+  #{$_header} h1 a     
     +single-box-shadow
-  #header h1 a     
+  #{$_header} h1 a     
     +text-shadow(0,0,4px,transparentize($shadow-color, 0.7))
     //filter: Shadow(Color=$shadow-color, Direction=135, Strength=5)
-  #body_content_right .inner
+  #{$_body}_content_right #{$_inner}
     +box-shadow(transparentize(black, 0.6), -6px, 6px, 14px, 0)

data/sass/pixarea/themes/shapy/_shapes.sass

@@ -9,10 +9,10 @@
 =shapy-shapes-
   $default-border-radius: 10px
   +shapy-shapes-form
-  #header h1,
-  #header h1 a,
-  #menu a,
-  #body_content_left
+  #{$_header} h1,
+  #{$_header} h1 a,
+  #{$_menu_1} a,
+  #{$_body}_content_left
     +pie
     +border-radius
 
@@ -24,9 +24,9 @@
     +border-radius-pie(50px $b)
     a
       +border-radius-pie(50px $b)
-  #body_content_right .inner
+  #{$_body}_content_right #{$_inner}
     +border-radius-pie($b $b*4 $b*4 $b)
-  #body_content_left
+  #{$_body}_content_left
     +border-radius-pie($b)      
-  #menu a
+  #{$_menu_1} a
     +border-radius-pie($b $b 0 0)

data/sass/pixarea/themes/shapy/_structure.sass

@@ -1,33 +1,33 @@
 =shapy-structure
-  #body_content_title
+  #{$_body}_content_title
     +visually-hide
     
-  .inner
+  #{$_inner}
     +box  
       
-  #page
-    #header
+  #{$_page}
+    #{$_header}
       +container-alt
       padding-top: 20px      
-    #body
+    #{$_body}
       +container-alt
-      #body_content_left
+      #{$_body}_content_left
         +column(17)
-        .inner
+        #{$_inner}
           padding-right: 100px
-      .no_body_content_right #body_content_left
+      #{$_no_body_content_2} #{$_body}_content_left
         +column(22)
-      #body_content_right
+      #{$_body}_content_right
         +column(8)
         +last
         +pull(1.5)
         +prepend-top(40px)
     
-  #menu
+  #{$_menu_1}
     +menu-inline-blocks(4)
     padding-left: 10px   
 
-  #header
+  #{$_header}
     h1
       padding: 20px 10px
       a
@@ -37,7 +37,7 @@
         position: relative
         margin-left: -40px
 
-  #footer
+  #{$_footer}
     +container-alt
     padding-top:  10px
     padding-left: 40px

data/sass/pixarea/themes/shapy/_tones.sass

@@ -55,5 +55,5 @@
   @if $tones == rusty
     +shapy-tones-rusty
 
-  #menu a
+  #{$_menu_1} a
     +unstyled-link

data/sass/pixarea/themes/shapy/tones/_burma.sass

@@ -11,16 +11,16 @@
     height: 100%
   body
     +linear-gradient-pie(#333 0%, #999 100%)             
-  #header
+  #{$_header}
     h1
       background: $darkblue
       a
         +linear-gradient-pie($palegreen 0%, $deepgreen 100%)
-  #body_content_left
+  #{$_body}_content_left
     background: $lightsable
-  #menu a
+  #{$_menu_1} a
     background: $lightsable - 30
-  #body_content_right .inner
+  #{$_body}_content_right #{$_inner}
     $framb:     #A83438
     $bg-sub:    $framb 
     background: $bg-sub

data/sass/pixarea/themes/shapy/tones/_circus.sass

@@ -10,20 +10,20 @@
     height: 100%
   body     
     +linear-gradient-pie(#222 0%, #777 100%)      
-  #header
+  #{$_header}
     h1
       $mix: mix($yellow, $white, 50) 
       +linear-gradient-pie($mix 0%, $yellow 100%)      
       a
         +linear-gradient-pie($green +#222 0%, $green -#222 100%)      
-  #body_content_left
+  #{$_body}_content_left
     $mix: mix($brown, $white, 50)       
     +linear-gradient-pie($mix 50px, $white 300px)      
-  #menu li
+  #{$_menu_1} li
     $mix: mix($brown, $white, 80)       
     +linear-gradient-pie($mix 70%, $mix - #222 100%)      
     color: $white !important
-  #body_content_right .box
+  #{$_body}_content_right .box
     background: $red
     border: 5px solid mix($red,$brown - #333 ,50)
 

data/sass/pixarea/themes/shapy/tones/_dark.sass

@@ -20,7 +20,7 @@
     +link-colors($lighter, $lighter + 30, $lighter, $lighter, $lighter)
     +hover-link
 
-  #header 
+  #{$_header} 
     h1
       color: $neutral
       +linear-gradient-pie($bg + 25, $bg + 10)
@@ -33,13 +33,13 @@
         +linear-gradient-pie($bg + 65, $bg + 40)
         color: $light
         
-  #footer
+  #{$_footer}
     color: ($bg / 2) + ($neutral / 2.5)
     
-  #body_content_left
+  #{$_body}_content_left
     background: $dark + 30
   
-  #body_content_right 
+  #{$_body}_content_right 
     background: $dark + 20
     border: 2px solid $dark - 10
     

data/sass/pixarea/themes/shapy/tones/_firen.sass

@@ -10,16 +10,16 @@
     height: 100%
   body     
     +linear-gradient-pie($deepbrick 0%, $egg 100%)
-  #header
+  #{$_header}
     h1
       $mix1: mix($egg, $brick, 50)
       +linear-gradient-pie($mix1 30%, $brick 95%)
       a
         background: $blue
-  #body_content_left
+  #{$_body}_content_left
     +linear-gradient-pie($egg 0%, $deepegg 100%)
-  #menu li
+  #{$_menu_1} li
     background: $egg
     &:hover
-  #body_content_right .box
+  #{$_body}_content_right .box
     background: $egg 

data/sass/pixarea/themes/shapy/tones/_rusty.sass

@@ -14,17 +14,17 @@
     height: 100%
   body     
     +linear-gradient-pie($brown, $brownish-orange)
-  #header
+  #{$_header}
     h1
       +linear-gradient-pie(saturate(lighten($young-green, 20),100) 0%,saturate(darken($green,10),30) 100%)
       a
         +linear-gradient(color-stops(lighten($orange, 30), lighten($orange, 20), $orange, $red))
         color: darken($brownish-orange, 5)
-  #body_content_left
+  #{$_body}_content_left
     +linear-gradient-pie($mix1 0%, white 100%)
-  #menu li
+  #{$_menu_1} li
     +linear-gradient-pie($mix1 0%, darken($mix1,20) 100%)
     &:hover
       +linear-gradient-pie($mix1 0%, $mix1 100%)
-  #body_content_right .box
+  #{$_body}_content_right .box
     background: mix($young-green, $brownish-orange, 30)

data/templates/project/_base.sass

@@ -0,0 +1,13 @@
+
+$_page_container:    "#page_container"
+$_header:            "#header"
+$_page:              "#page"
+$_footer:            "#footer"
+$_menu_1:            "#menu"
+$_body:              "#body"
+$_body_content:      "#body_content"
+$_body_content_1:    "#body_content_left"
+$_body_content_2:    "#body_content_right"
+$_no_body_content_2: ".no_body_content_right"
+$_page_title:        "#body_content_title"
+$_inner:             ".inner"

data/templates/project/theme.sass

@@ -1,5 +1,30 @@
-
+@import base
 @import pixarea/themes
 
-+theme-minipane(dark)
-//+theme-shapy(burma)
++theme-minipane(burma)
+
+
+// LIST OF AVAILABLE PRECONFIGURED THEMES:
+
+// +theme-minipane(dark)
+// +theme-minipane(burma)
+// +theme-shapy(burma)
+// +theme-shapy(circus)
+// +theme-shapy(dark)
+// +theme-shapy(firen)
+// +theme-shapy(rusty)
+
+
+// NOTES:
+
+// All themes are supra-modular, so you can use all or only parts of any theme.
+// Add your own themes, create your own color-palettes, shadows, ...
+// Learn here how a theme is structured, so you can use only parts of it, and 
+// build your own themes in minutes:
+// https://github.com/danielres/pixarea-compass-themes/blob/master/sass/pixarea/themes/_minipane.sass
+
+// The themes use configurable, reusable elements, called "modules":
+// https://github.com/danielres/pixarea-compass-themes/tree/master/sass/pixarea/modules
+
+// Modules and themes use preconfigured values and mixins, which you can find in the "lib" folder:
+// https://github.com/danielres/pixarea-compass-themes/tree/master/sass/pixarea/lib

metadata

@@ -2,7 +2,7 @@
 name: pixarea-compass-themes
 version: !ruby/object:Gem::Version 
   prerelease: 
-  version: 0.1.1
+  version: 0.2.0
 platform: ruby
 authors: 
 - Daniel Reszka
@@ -10,7 +10,7 @@ autorequire:
 bindir: bin
 cert_chain: []
 
-date: 2011-04-04 00:00:00 +02:00
+date: 2011-04-05 00:00:00 +02:00
 default_executable: 
 dependencies: 
 - !ruby/object:Gem::Dependency 
@@ -37,7 +37,6 @@ files:
 - .gitignore
 - .livereload
 - Gemfile
-- README
 - README.markdown
 - Rakefile
 - lib/pixarea-compass-themes.rb
@@ -78,10 +77,10 @@ files:
 - sass/pixarea/themes/shapy/tones/_dark.sass
 - sass/pixarea/themes/shapy/tones/_firen.sass
 - sass/pixarea/themes/shapy/tones/_rusty.sass
+- templates/project/_base.sass
 - templates/project/manifest.rb
 - templates/project/stylesheets/PIE.htc
 - templates/project/theme.sass
-- views/layouts/application.html.erb
 has_rdoc: true
 homepage: https://github.com/danielres/pixarea-compass-themes
 licenses: []

data/README

@@ -1,23 +0,0 @@
-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/views/layouts/application.html.erb

@@ -1,21 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <%= render :partial => "/shared/head", :locals => {:theme => true} %>
-  <body>
-    <%= render :partial => "/shared/site_bar" %>
-    <div id='page_container'>
-      <div id='page'>
-        <%= render :partial => "/shared/ie6check" if request.env['HTTP_USER_AGENT'] =~ /MSIE/ -%>
-        <div id='header'>
-          <%= render :partial => "/shared/header" %>
-        </div>
-        <div id='body' class='clearfix'>
-          <%= yield %>
-        </div>
-        <div id='footer'>
-          <%= render :partial => "/shared/footer" %>
-        </div>
-      </div>
-    </div>
-  </body>
-</html>