Skip to content
Browse files

Upgraded project to use the latest versions of Serve and Compass

  • Loading branch information...
1 parent c55ab96 commit 8e558c009ac4ac244db103e4ec7f500bbb2def06 @jlong jlong committed Jul 26, 2011
View
28 Gemfile
@@ -0,0 +1,28 @@
+source :rubygems
+
+gem 'serve', '1.5.1'
+
+# Use edge instead:
+# gem 'serve', :git => 'git://github.com/jlong/serve.git'
+
+# Use Compass and Sass
+gem 'compass', '0.11.5'
+
+# Markdown and Textile
+# gem 'rdiscount' # Markdown
+# gem 'RedCloth' # Textile
+
+# Haml
+gem 'haml'
+
+# Other templating languages
+# gem 'erubis'
+# gem 'slim'
+# gem 'radius'
+# gem 'less'
+
+# Coffee Script
+# gem 'coffee-script'
+
+# Use mongrel for the Web server
+# gem 'mongrel'
View
33 Gemfile.lock
@@ -0,0 +1,33 @@
+GEM
+ remote: http://rubygems.org/
+ specs:
+ activesupport (3.0.9)
+ chunky_png (1.2.0)
+ compass (0.11.5)
+ chunky_png (~> 1.2)
+ fssm (>= 0.2.7)
+ sass (~> 3.1)
+ fssm (0.2.7)
+ haml (3.1.2)
+ i18n (0.6.0)
+ rack (1.3.2)
+ rack-test (0.6.0)
+ rack (>= 1.0)
+ sass (3.1.5)
+ serve (1.5.1)
+ activesupport (~> 3.0)
+ i18n
+ rack (~> 1.2)
+ rack-test (~> 0.5)
+ tilt (~> 1.3)
+ tzinfo
+ tilt (1.3.2)
+ tzinfo (0.3.29)
+
+PLATFORMS
+ ruby
+
+DEPENDENCIES
+ compass (= 0.11.5)
+ haml
+ serve (= 1.5.1)
View
45 README
@@ -1,45 +0,0 @@
-== What is this?
-
-This is a simple HTML prototype of Radiant written in HAML that is designed
-to be viewed with serve.
-
-What is serve? Serve is a rapid prototyping framework for Rails
-applications. It is designed to compliment Rails development and enforce a
-strict separation of concerns between designer and developer. Using Serve
-with Rails allows the designer to happily work in his own space creating an
-HTML prototype of the application, while the developer works on the Rails
-application and copies over HTML from the prototype as needed. This allows
-the designer to focus on presentation and flow while the developer can focus
-on the implementation.
-
-We are presently experimenting with using serve in this capacity to speed
-the development and implementation of new features in Radiant.
-
-
-= How do I install and run serve?
-
-Serve is distributed as a gem to make it easy to get up and running. To
-install:
-
- % sudo gem install serve
-
-To get up and running, open up a terminal, cd to this directory and execute:
-
- % serve
-
-This will startup serve on port 4000. You can now view the prototype in your
-Web browser at this URL:
-
- http://localhost:4000
-
-Click around. You will find that serve enables us to prototype most of the
-functionality of Radiant without writing a single line of back end code!
-
-
-= Can I contribute?
-
-Sure! We welcome contributions to the prototype. If you have an idea for a
-new feature this is the perfect place to get the action rolling. Once you
-have it prototyped using serve, create a ticket on the dev site and attach
-your patch. Then give us a holler on the dev mailing list and we can debate
-the merits of your idea there.
View
92 README.md
@@ -0,0 +1,92 @@
+What is this?
+=============
+
+This is a simple HTML prototype of Radiant written in HAML that is designed
+to be viewed with serve.
+
+What is Serve? Serve is an open-source rapid prototyping framework for Web
+applications. It makes it easy to prototype functionality without writing a
+single line of backend code.
+
+
+Can I contribute?
+-----------------
+
+Sure! We welcome contributions to the prototype. If you have an idea for a
+new feature this is the perfect place to get the action rolling. Once you
+have it prototyped using serve, create a ticket on the dev site and attach
+your patch. Then give us a holler on the dev mailing list and we can debate
+the merits of your idea there.
+
+
+How do I install and run Serve?
+-------------------------------
+
+Serve is distributed as a Ruby gem to make it easy to get up and running. You
+must have Ruby installed in order to download and use Serve. The Ruby download
+page provides instructions for getting Ruby setup on different platforms:
+
+<http://www.ruby-lang.org/en/downloads/>
+
+After you have Ruby installed, open up the command prompt and type:
+
+ gem install serve
+
+(OSX and Unix users may need to prefix the command with `sudo`.)
+
+After Serve is installed, you can start it up in a given directory like this:
+
+ serve
+
+This will start Serve on port 4000. You can now view the prototype in your
+Web browser at this URL:
+
+<http://localhost:4000>
+
+
+Compass and Sass
+----------------
+
+This prototype uses Compass and Sass to generate CSS. Both are distributed as
+Ruby gems and can be easily installed from the command prompt. Since the
+Compass gem depends on Sass, you can install them both with one command:
+
+ gem install compass
+
+Learn more about Sass:
+
+<http://sass-lang.org>
+
+Learn more about Compass:
+
+<http://compass-style.org>
+
+
+Rack and Passenger
+------------------
+
+Astute users may notice that this project is also a simple Rack application.
+This means that it is easy to deploy it on Passenger or in any other
+Rack-friendly environment. Rack it up with the `rackup` command. For more
+information about using Serve and Passenger see:
+
+<http://bit.ly/serve-and-passenger>
+
+
+Exporting
+---------
+
+To export your project, use the new "export" command:
+
+ serve export <project> <output>
+
+Where "project" is the path to the project and "output" is the path to the
+directory where you would like your HTML and CSS generated.
+
+
+Learning More
+-------------
+
+You can learn more about Serve on the GitHub project page:
+
+<http://github.com/jlong/serve>
View
35 compass.config
@@ -1,11 +1,28 @@
-http_path = "/"
-http_stylesheets_path = "/stylesheets"
-http_images_path = "/images"
-http_javascripts_path = "/javascripts"
+#
+# Compass Configuration
+#
-sass_dir = "stylesheets"
-css_dir = "public/stylesheets"
-images_dir = "public/images"
-javascripts_dir = "public/javascripts"
+# HTTP paths
+http_path = '/'
+http_stylesheets_path = '/stylesheets'
+http_images_path = '/images'
+http_javascripts_path = '/javascripts'
-relative_assets = true
+# File system locations
+sass_dir = 'stylesheets'
+css_dir = 'public/stylesheets'
+images_dir = 'public/images'
+javascripts_dir = 'public/javascripts'
+
+# Set to true for easier debugging
+line_comments = false
+
+# CSS output style - :nested, :expanded, :compact, or :compressed
+output_style = :expanded
+
+# Determine whether Compass asset helper functions generate relative
+# or absolute paths
+relative_assets = true
+
+# Learn more:
+# http://compass-style.org/docs/tutorials/configuration-reference/
View
40 config.ru
@@ -1,35 +1,47 @@
#\ -p 4000
-gem 'activesupport', '>= 2.3.5'
-gem 'serve', '>= 0.11.6'
+require 'rubygems'
+require 'bundler'
+begin
+ Bundler.setup(:default, :development)
+rescue Bundler::BundlerError => e
+ $stderr.puts e.message
+ $stderr.puts "Run `bundle install` to install missing gems"
+ exit e.status_code
+end
require 'serve'
require 'serve/rack'
-require 'sass/plugin/rack'
-require 'compass'
-
# The project root directory
root = ::File.dirname(__FILE__)
-# Compass
-Compass.add_project_configuration(root + '/compass.config')
-Compass.configure_sass_plugin!
+# Compile Sass on the fly with the Sass plugin. Some production environments
+# don't allow you to write to the file system on the fly (like Heroku).
+# Remove this conditional if you want to compile Sass in production.
+if ENV['RACK_ENV'] != 'production'
+ require 'sass'
+ require 'sass/plugin/rack'
+ require 'compass'
+
+ Compass.add_project_configuration(root + '/compass.config')
+ Compass.configure_sass_plugin!
+
+ use Sass::Plugin::Rack # Sass Middleware
+end
-# Middleware
+# Other Rack Middleware
use Rack::ShowStatus # Nice looking 404s and other messages
use Rack::ShowExceptions # Nice looking errors
-use Sass::Plugin::Rack # Compile Sass on the fly
# Rack Application
if ENV['SERVER_SOFTWARE'] =~ /passenger/i
- # Passenger only needs the adapter
+ # Passendger only needs the adapter
run Serve::RackAdapter.new(root + '/views')
else
- # We use Rack::Cascade and Rack::Directory on other platforms to
- # handle static assets
+ # Use Rack::Cascade and Rack::Directory on other platforms for static assets
run Rack::Cascade.new([
Serve::RackAdapter.new(root + '/views'),
Rack::Directory.new(root + '/public')
])
-end
+end
View
1 public/.htaccess
@@ -0,0 +1 @@
+Options +MultiViews
View
3 stylesheets/admin/_base.sass
@@ -12,6 +12,7 @@ $primary-tab: rgba(white, 0.3)
$primary-tab-current: white
// Modules
-@import "compass"
+@import compass/utilities
+@import compass/css3
@import "modules/links"
@import "modules/boxes"
View
2 stylesheets/admin/modules/_boxes.sass
@@ -1,6 +1,6 @@
=alt-box
background: #d8d8d8
- +linear-gradient(color-stops(#fff, #ccc))
+ +background-image(linear-gradient(#fff, #ccc))
+border-radius(8px)
+box-shadow(rgba(0,0,0,0.15), 2px, 2px, 3px)
padding: 12px 10px
View
10 stylesheets/admin/partials/_actions.sass
@@ -9,15 +9,15 @@
right: 0
bottom: 0
background: #777
- +linear-gradient(color-stops(#555, #666, #777, #777))
+ +background-image(linear-gradient(#555, #666, #777, #777))
ul
padding: 14px 8px
li
display: inline
margin-right: 5px
a
background: #d8d8d8
- +linear-gradient(color-stops(#fff, #ccc))
+ +background-image(linear-gradient(#fff, #ccc))
color: #333
font-size: 80%
padding: 8px 12px
@@ -47,7 +47,7 @@
padding: 6px 12px 6px 12px
margin-right: 1px
background: #ddd
- +linear-gradient(color-stops(#c5c5c5, #f0f0f0 20%, #fff 35%, #fff))
+ +background-image(linear-gradient(#c5c5c5, #f0f0f0 20%, #fff 35%, #fff))
color: #999
font-size: 80%
text-decoration: none
@@ -57,7 +57,7 @@
text-shadow: 1px 1px 1px #eee
&:hover
background: #d8d8d8
- +linear-gradient(color-stops(#fff, #fff, #ddd))
+ +background-image(linear-gradient(#fff, #fff, #ddd))
color: #0076a3
+button-shadow
&:active
@@ -66,7 +66,7 @@
span.disabled
color: #666
background-color: #999
- +linear-gradient(color-stops(#888, #999, #999, #999))
+ +background-image(linear-gradient(#888, #999, #999, #999))
span.current
color: #000
background: white
View
6 stylesheets/admin/partials/_forms.sass
@@ -87,7 +87,7 @@
content: "\0020"
display: block
width: 100%
- +linear-gradient(color-stops(rgba(black,0.3), rgba(black, 0)))
+ +background-image(linear-gradient(rgba(black,0.3), rgba(black, 0)))
height: 3px
margin-bottom: -3px
table.fieldset
@@ -155,7 +155,7 @@
*
position: relative
&:before
- +linear-gradient(color-stops(white, #f5f1e2 50%, #f5f1e2))
+ +background-image(linear-gradient(white, #f5f1e2 50%, #f5f1e2))
+border-top-radius(10px)
content: "\0020"
display: block
@@ -257,7 +257,7 @@ body.single_form
#content
#single_form
background: #f5f1e2
- +linear-gradient(color-stops(#fdfcf9, #f5f1e2 25%, #f5f1e2))
+ +background-image(linear-gradient(#fdfcf9, #f5f1e2 25%, #f5f1e2))
border: 0.35em solid #efead3
padding: 0.5em 1.5em
padding-right: 22px
View
12 stylesheets/admin/partials/_header.sass
@@ -1,7 +1,7 @@
#header
font-size: 90%
background: $header
- +linear-gradient(color-stops(darken($header,12), $header, $header))
+ +background-image(linear-gradient(darken($header,12), $header, $header))
position: relative
&:after
content: "\0020"
@@ -11,7 +11,7 @@
height: 2px
width: 100%
position: absolute
- +linear-gradient(color-stops(rgba(black,0.3), rgba(black, 0)))
+ +background-image(linear-gradient(rgba(black,0.3), rgba(black, 0)))
#site_links
color: mix($header, white, 15%)
@@ -60,7 +60,7 @@ ul#navigation
#toolbar
background: white
- +linear-gradient(color-stops(white, darken(white, 5%), darken(white, 20%)))
+ +background-image(linear-gradient(white, darken(white, 5%), darken(white, 20%)))
font-size: 95%
clear: both
margin: 0
@@ -102,13 +102,13 @@ ul#secondary_navigation
height: 38px
text-decoration: none
&:hover
- +linear-gradient(color-stops(#e4f9ff, #d2ebfd 30%, #b1d1f1 50%, #9bc5ed 50%, #caecff))
+ +background-image(linear-gradient(#e4f9ff, #d2ebfd 30%, #b1d1f1 50%, #9bc5ed 50%, #caecff))
color: #444
&.current
background: #ddd
- +linear-gradient(color-stops(white, darken(white, 10%) 35%, darken(white, 15%) 50%, darken(white, 20%) 50%, darken(white, 15%)))
+ +background-image(linear-gradient(white, darken(white, 10%) 35%, darken(white, 15%) 50%, darken(white, 20%) 50%, darken(white, 15%)))
color: #333
font-weight: bold
&:hover
- +linear-gradient(color-stops(#e0f9fe, #c4e2f8 30%, #98c3e7 50%, #79aedb 50%, #b1ddef))
+ +background-image(linear-gradient(#e0f9fe, #c4e2f8 30%, #98c3e7 50%, #79aedb 50%, #b1ddef))
color: #222
View
2 stylesheets/admin/partials/_index.sass
@@ -40,7 +40,7 @@ table.index
text-decoration: none
&:hover
background: #d8d8d8
- +linear-gradient(color-stops(#fff, #ccc))
+ +background-image(linear-gradient(#fff, #ccc))
border: 1px solid #a5c9df
margin: 0 24px 0 0
+border-radius
View
8 stylesheets/admin/partials/_popup.sass
@@ -66,19 +66,19 @@ div.popup
border: 1px solid #959595
+border-radius(100px)
+box-shadow(white, 0, 2px, 0, inset)
- +linear-gradient(color-stops(#ddd 0%, #eee 15%, #fff 100%))
+ +background-image(linear-gradient(#ddd 0%, #eee 15%, #fff 100%))
&.default
border: 1px solid #154ca6
+box-shadow(#c7e0f6, 0, 2px, 1px, inset)
color: white
- +linear-gradient(color-stops(#67b4e1, #78b9e1))
+ +background-image(linear-gradient(#67b4e1, #78b9e1))
&:active
border: 1px solid #888
+box-shadow(none)
- +linear-gradient(color-stops(#ccc 0%, #ddd 15%, #eee 100%))
+ +background-image(linear-gradient(#ccc 0%, #ddd 15%, #eee 100%))
&.default:active
border: 1px solid #002c86
- +linear-gradient(color-stops(#4794c1, #78b9e1))
+ +background-image(linear-gradient(#4794c1, #78b9e1))
&:focus
border-width: 2px
a.cancel
View
2 stylesheets/admin/partials/_tabcontrol.sass
@@ -32,7 +32,7 @@
clear: both
.page
background: white
- +linear-gradient(color-stops(white, #f5f1e2 15%, #f5f1e2))
+ +background-image(linear-gradient(white, #f5f1e2 15%, #f5f1e2))
+box-shadow(rgba(0,0,0,0.15), 2px, 2px, 3px)
padding: 12px 20px 20px
p
View
6 views/view_helpers.rb
@@ -132,10 +132,10 @@ def fixture(hash={}, extensions=Module.new)
end
end
include FixtureHelper
-
+
def image(name, options = {})
- image_tag(append_image_extension("/images/admin/#{name}"), options)
+ image_tag(ensure_path(ensure_extension(name, 'png'), 'images/admin'), options)
end
-
+
end

0 comments on commit 8e558c0

Please sign in to comment.
Something went wrong with that request. Please try again.