Permalink
Browse files

first commit

  • Loading branch information...
0 parents commit e583bb4a6367aa836ab5ad41e1ed0b5d182bc712 @nathos committed Aug 5, 2011
@@ -0,0 +1,25 @@
+## MAC OS
+.DS_Store
+
+## TEXTMATE
+*.tmproj
+tmtags
+
+## EMACS
+*~
+\#*
+.\#*
+
+## VIM
+*.swp
+
+## PROJECT::GENERAL
+.sass-cache
+coverage
+rdoc
+pkg
+
+## PROJECT::SPECIFIC
+*.gem
+.rvmrc
+.bundle
26 Gemfile
@@ -0,0 +1,26 @@
+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'
+
+# Markdown and Textile
+# gem 'rdiscount' # Markdown
+# gem 'RedCloth' # Textile
+
+# Other templating languages
+# gem 'erubis'
+# gem 'haml'
+# gem 'slim'
+# gem 'radius'
+# gem 'less'
+
+# Coffee Script
+# gem 'coffee-script'
+
+# Use mongrel for the Web server
+# gem 'mongrel'
No changes.
@@ -0,0 +1,87 @@
+What is this?
+=============
+
+This is a simple HTML prototype written in HAML or ERB 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.
+
+
+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 this project to pure HTML and CSS you will need the prerelease
+version of Serve. To get started with the prerelease version:
+
+ gem install --pre serve
+
+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>
@@ -0,0 +1,28 @@
+#
+# Compass Configuration
+#
+
+# HTTP paths
+http_path = '/'
+http_stylesheets_path = '/stylesheets'
+http_images_path = '/images'
+http_javascripts_path = '/javascripts'
+
+# 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/
@@ -0,0 +1,47 @@
+#\ -p 4000
+
+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'
+
+# The project root directory
+root = ::File.dirname(__FILE__)
+
+# 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
+
+# Other Rack Middleware
+use Rack::ShowStatus # Nice looking 404s and other messages
+use Rack::ShowExceptions # Nice looking errors
+
+# Rack Application
+if ENV['SERVER_SOFTWARE'] =~ /passenger/i
+ # Passendger only needs the adapter
+ run Serve::RackAdapter.new(root + '/views')
+else
+ # 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
@@ -0,0 +1 @@
+Options +MultiViews
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -0,0 +1,3 @@
+@import "utility";
+@import "links";
+@import "typography";
@@ -0,0 +1,15 @@
+@mixin basic-link($color: $link-color, $visited: $color, $hover: $color, $decoration: "underline") {
+ &:link {
+ color: $color;
+ @if $decoration == "underline" { text-decoration: underline; }
+ @if $decoration == "plain" { text-decoration: none; }
+ }
+ &:visited {
+ color: $visited;
+ }
+ &:hover {
+ color: $hover;
+ @if $decoration == "underline" { text-decoration: none; }
+ @if $decoration == "plain" { text-decoration: underline; }
+ }
+}
@@ -0,0 +1,133 @@
+// This should be applied to the body of the document:
+//
+// body { @include base-font; }
+//
+@mixin base-font {
+ color: $text-color;
+ font-family: $base-font-family;
+ font-size: $base-font-size;
+ line-height: $base-line-height;
+}
+
+// Typically this should be applied to content portion of the document:
+//
+// .content { @include basic-typography; }
+//
+// Pass true if you would like to use indented instead of block level paragraphs:
+//
+// .content { @include basic-typography(true); }
+//
+@mixin basic-typography($indented: $indented-paragraphs) {
+ @include inline-elements;
+ @include headings;
+ @if $indented {
+ @include indented-paragraphs;
+ } @else {
+ @include block-paragraphs;
+ }
+ @include lists;
+ @include fixed-font-elements;
+}
+
+// Style inline elements like strong, em, abbr, etc...
+@mixin inline-elements($loud-color: $loud-color) {
+ @include bold-italic-elements($loud-color);
+ @include misc-inline-elements;
+}
+
+// Basic styles for strong, b, em, and i
+@mixin bold-italic-elements($loud-color: $loud-color) {
+ strong, b { color: $loud-color; font-weight: bold; }
+ em, i { font-style: italic; }
+}
+
+// Basic styles for abbr, acronym, sub, sup, and span.caps
+@mixin misc-inline-elements {
+ abbr, acronym { border-bottom: 1px dotted soften($text-color, 2); }
+ sub, sup { font-size: 85%; }
+ sub { vertical-align: sub; }
+ sup { vertical-align: super; }
+ span.caps { font-size: 95%; }
+}
+
+// Basic styles for headings
+@mixin headings($color: $header-color, $line-height: $base-line-height) {
+ h1, h2, h3, h4, h5, h6 {
+ color: $color;
+ margin: 1em 0;
+ }
+ h1 {
+ font-weight: bold;
+ font-size: 200%;
+ line-height: 0.785 * $line-height;
+ margin: 0.75em 0;
+ }
+ h2 {
+ font-weight: bold;
+ font-size: 170%;
+ line-height: 0.785 * $line-height;
+ }
+ h3 {
+ font-weight: bold;
+ font-size: 140%;
+ line-height: 0.835 * $line-height;
+ margin: 1.25em 0 0.5em;
+ }
+ h4 {
+ font-weight: bold;
+ font-size: 110%;
+ line-height: 0.9 * $line-height;
+ margin: 0.5em 0 0.5em;
+ }
+ h5 {
+ font-style: italic;
+ font-size: 110%;
+ line-height: $line-height;
+ margin: 0.65em 0;
+ }
+ h6 {
+ font-weight: bold;
+ margin-bottom: -0.75em;
+ }
+}
+
+// Block-level paragraphs with vertical margin
+@mixin block-paragraphs {
+ p { margin: 1em 0; }
+}
+
+// Indented paragraphs
+@mixin indented-paragraphs($indent: 1em) {
+ p { margin-top: 0.5; margin-bottom: 0.5; }
+ p + p { text-indent: $indent; }
+}
+
+// Basic styles for list elements
+@mixin lists($indent: 2.25em, $ul-list-style: disc, $ol-list-style: decimal) {
+ ul, ol, dl { margin-top: 1em; margin-bottom: 1em; }
+ ul, ol, dd { padding-left: $indent; }
+ ul { list-style: $ul-list-style; }
+ ol { list-style: $ol-list-style; }
+ li { margin-top: 0.5em; margin-bottom: 0.5em; }
+ dt { margin-top: 1em; }
+ dd { margin-bottom: 1em; }
+}
+
+// Typewritter styles for fixed-font elements
+@mixin fixed-font-elements($font-family: $fixed-font-family, $font-size: $fixed-font-size, $line-height: $fixed-line-height) {
+ code, dfn, kbd, samp, tt {
+ font-family: $font-family;
+ font-size: 95%;
+ color: soften($text-color);
+ }
+ pre {
+ background: soften($text-color);
+ color: invert($text-color);
+ font-family: $font-family;
+ font-size: 95%;
+ line-height: $line-height;
+ margin: 1.5em 0;
+ padding: 1em;
+ @include border-radius;
+ }
+}
@@ -0,0 +1,15 @@
+@function strengthen($color, $multiplier: 1, $reversed: $reversed-text) {
+ @if $reversed {
+ @return lighten($color, 20% * $multiplier);
+ } @else {
+ @return darken($color, 20% * $multiplier);
+ }
+}
+
+@function soften($color, $multiplier: 1, $reversed: $reversed-text) {
+ @if $reversed {
+ @return darken($color, 20% * $multiplier);
+ } @else {
+ @return lighten($color, 20% * $multiplier);
+ }
+}
Oops, something went wrong.

0 comments on commit e583bb4

Please sign in to comment.