head_start 0.1.0

data/lib/head_start/helpers/head_start_rails_helper.rb

@@ -0,0 +1,71 @@
+module HeadStartRailsHelper
+  # Create a named haml tag to wrap IE conditional around a block
+  # http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither
+  # helper courtesy of Peter Gumeson's html5-boilerplate gem
+  def ie_tag(name=:body, attrs={}, &block)
+    attrs.symbolize_keys!
+    haml_concat("<!--[if lt IE 7]> #{ tag(name, add_class('ie6 oldie', attrs), true) } <![endif]-->".html_safe)
+    haml_concat("<!--[if IE 7]>    #{ tag(name, add_class('ie7 oldie', attrs), true) } <![endif]-->".html_safe)
+    haml_concat("<!--[if IE 8]>    #{ tag(name, add_class('ie8 oldie', attrs), true) } <![endif]-->".html_safe)
+    haml_concat("<!--[if gt IE 8]><!-->".html_safe)
+    haml_tag name, attrs do
+      haml_concat("<!--<![endif]-->".html_safe)
+      block.call
+    end
+  end
+
+  def ie_html(attrs={}, &block)
+    ie_tag(:html, attrs, &block)
+  end
+  
+  #
+  # create a link that looks like a button using button_link_to instead of link_to
+  # this works exactly the same as link_to, but will automatically apply appropriate styling
+  # In addition, passing in one of the following classes will add a suitable icon to the button:
+  # 
+  # positive
+  # negative
+  # index
+  # new
+  # show
+  # create
+  # edit
+  # update
+  # destroy
+  # back
+  # print
+  # download
+  #
+  def button_link_to(button_text, path, options = {})
+    if options[:class]
+      options[:class] += " button"
+    else
+      options[:class] = "button"
+    end
+    name = "<span>#{button_text}</span>".html_safe
+    link_to name, path, options
+  end
+
+  # the cancel_link helper creates link back to the referring page
+  def cancel_link(label = "Cancel")
+      ("or " + link_to( label, :back )).html_safe
+  end
+  
+  def context_aware_link_to(name, url, options = {})
+    link = link_to_unless_current(name, url, options) do |name,url, options|
+      link_to(name,url,options[:class] += " current")
+    end
+    link.html_safe
+  end
+
+  private
+
+    def add_class(name, attrs)
+      classes = attrs[:class] || ''
+      classes.strip!
+      classes = ' ' + classes if !classes.blank?
+      classes = name + classes
+      attrs.merge(:class => classes)
+    end
+  
+end

data/lib/head_start/version.rb

@@ -0,0 +1,3 @@
+module HeadStart
+  VERSION = "0.1.0"
+end

data/lib/head_start.rb

@@ -0,0 +1,22 @@
+require "head_start/version"
+require "compass"
+
+extension_path = File.expand_path(File.join(File.dirname(__FILE__), ".."))
+Compass::Frameworks.register('head_start', :path => extension_path)
+
+require 'helpers/helpers/head_start_rails_helper'
+
+module HeadStart
+  # allows us to run compass command-line without it complaining about uninitialized constant Rails
+  if defined?(Rails)
+    class Engine < ::Rails::Engine
+      initializer "head_start.view_helpers" do
+        ActionView::Base.send :include, ::HeadStart_RailsHelper
+      end
+      initializer 'head_start.precompile_assets', :after => "sprockets.environment" do |app|
+        Rails.application.config.assets.precompile += %w(modernizr.js layouts/*.js layouts *.css)
+      end
+    end
+  end
+
+end

data/stylesheets/_boilerplate.scss

@@ -0,0 +1,6 @@
+// This is your framework's main stylesheet. Use it to import all default modules.
+
+@import 'boilerplate/fox_form_styles';
+@import 'boilerplate/fox_menu_styles';
+@import 'boilerplate/fox_message_styles';
+@import 'boilerplate/fox_table_styles';

data/stylesheets/_jumpstart.scss

@@ -0,0 +1 @@
+// This is your framework's main stylesheet. Use it to import all default modules.

data/stylesheets/_scorpion.scss

@@ -0,0 +1,5 @@
+// import all scorpion extension libraries allowing all libs to be included by referencing this stylesheet
+
+@import 'scorpion/web_app_theme';
+@import 'scorpion/kathleene';
+@import 'scorpion/fox_message_styles';

data/stylesheets/boilerplate/_fox_form_styles.scss

@@ -0,0 +1,353 @@
+// enable accessible text-hiding
+@import "compass/typography/text/replacement";
+
+// New Stuff
+
+$button_icons_path: '/assets/icons/buttons/silk/';
+// geomicons test icons
+/*$button_icons_path: '/assets/icons/buttons/geomicons/';*/
+
+@mixin form {
+  overflow-x: hidden;
+  padding-bottom:1.5em;
+  fieldset {
+    margin-bottom:1.5em;
+    border-bottom:1px solid #999;
+    fieldset {
+      margin-bottom:0;
+      border-bottom:0;
+      clear: left;
+      @include clearfix;
+      margin:1.8em 0 1em;
+    }
+    legend {
+      @include float(left);
+      @include columns-wide(8);
+      text-align:right;
+      font-size:1.25em;
+      margin-bottom:1em;
+      color: $color;
+    }
+    abbr, .error {
+      color:red;
+    }
+    .error {
+      @include float(left);
+      margin: 3px 6px 3px 0;
+    }
+    
+  }
+  .input {
+    clear: left;
+    @include clearfix;
+    margin:1.8em 0 1em;
+    &.required {
+      input,textarea,div {
+        background-color:#FFF4EE;
+      }
+    }
+    label {
+      @include float(left);
+      @include columns-wide(8);
+      padding:3px 0;
+      text-align:right;
+      line-height: 1.5em;
+    }
+    input, textarea {
+      @include float(left);
+      @include columns-wide(8, false, 6px);
+      line-height: 1.5em;
+      &.postcode {
+        @include input-w(7);
+      }
+      &.date {
+        @include input-w(6);
+      }
+      &.input-w2 {
+        @include input-w(2);
+      }
+      &.input-w5 {
+        @include input-w(5);
+      }
+      &.input-w10 {
+        @include input-w(10);
+      }
+      &.input-w20 {
+        @include input-w(20);
+      }
+      &.input-w40 {
+        @include input-w(40);
+      }
+      &.input-w80 {
+        @include input-w(80);
+      }
+    }
+    textarea {
+      height: 9em;
+    }
+    select {
+      @include float(left);
+      width:auto;
+      margin: 3px 6px 3px 0;
+      height:1.5em;
+    }
+  }
+  .input.radio {
+    div {
+      @include float(left);
+      @include columns-wide(8, false);
+      span {
+        @include clearfix;
+        margin: 3px 6px 3px 0;
+        padding-left:7px;
+        display:block;
+      }
+      input {
+        @include float(left);
+        width:auto;
+        height:1.5em;
+      }
+      label {
+        width:auto;
+        padding:0;
+        margin-right:20px;
+      }
+    }
+  }
+  .input.boolean {
+    @include columns-push(8);
+    input {
+      margin: 3px 6px 3px 0px;
+      width:auto;
+      height:1.5em;
+    }
+    label {
+      width:auto;
+    }
+  }
+  .form_buttons {
+    @include columns-push(8);
+    margin-top:1.8em;
+  }
+  .button {
+    @include button;
+  }
+  
+}
+
+@mixin login-box-form {
+  @include form;
+  @include border-radius;
+  background-color:$background-color;
+  fieldset {
+    margin-bottom:0.5em;
+    border:0;
+    .input {
+      label {
+        @include columns-wide(3);
+      }
+      input {
+        @include columns-wide(5, false, 6px);
+      }
+    }
+  }
+  .form_buttons {
+    @include columns-push(3);
+    margin-top:1.2em;
+  }
+}
+
+@mixin button {
+  display:inline-block;
+  margin-right:0.5em;
+  @include border-radius;
+  border: 1px solid darken($form-button-background-color, 10%);
+  padding: 0.5em 1em;
+  @include background-with-css2-fallback(
+    linear-gradient(
+      lighten($form-button-background-color, 10%),
+      darken($form-button-background-color, 10%)
+    )
+  );
+  color: $form-button-color;
+  font-weight:bold;
+  text-decoration:none;
+  &:hover {
+    @include background-with-css2-fallback(
+      linear-gradient(
+        darken($form-button-background-color, 10%),
+        lighten($form-button-background-color, 10%)
+      )
+    );
+  }
+  @include button-icons;
+  &.no-text {
+    @include hide-text;
+    padding: 0;
+    margin-top:0.25em;
+    span {
+      width: 16px;
+      padding-left:0;
+    }
+  }
+}
+
+@mixin button-icons {
+  padding-left:10px;
+  span {
+    display:block;
+    height: 16px;
+    vertical-align:bottom;
+    background:transparent none left top no-repeat;
+    width:auto;
+  }
+  &.positive span {
+    padding-left:22px;
+    background-image:url($button_icons_path+'positive.png');
+  }
+  &.negative span {
+    padding-left:22px;
+    background-image:image-url("#{$button_icons_path}negative.png");
+  }
+
+  &.index span {
+    padding-left:22px;
+    background-image:image-url("#{$button_icons_path}index.png");
+  }
+  &.new span {
+    padding-left:22px;
+    background-image:image-url("#{$button_icons_path}new.png");
+  }
+  &.show span {
+    padding-left:22px;
+/*    background-image:image-url("#{$button_icons_path}show.png");*/
+    background-image:image-url("#{$button_icons_path}show2.png");
+  }
+  &.create span {
+    padding-left:22px;
+    background-image:image-url("#{$button_icons_path}create.png");
+  }
+  &.edit span {
+    padding-left:22px;
+    background-image:image-url("#{$button_icons_path}edit.png");
+  }
+  &.update span {
+    padding-left:22px;
+    background-image:image-url("#{$button_icons_path}update.png");
+  }
+  &.destroy span {
+    padding-left:22px;
+    background-image:image-url("#{$button_icons_path}destroy.png");
+  }
+
+  &.back span {
+    padding-left:22px;
+    background-image:image-url("#{$button_icons_path}back.png");
+  }
+  &.print span {
+    padding-left:22px;
+    background-image:image-url("#{$button_icons_path}print.png");
+  }
+  &.download span {
+    padding-left:22px;
+    background-image:image-url("#{$button_icons_path}download.png");
+  }
+}
+
+// Old Stuff
+
+/* standard form styling */
+@mixin standard-form {
+  & div.message {
+    margin:1em !important;
+  }
+  fieldset {
+    .input {
+      .error, .hint {
+        display:block;
+        width:32%;
+        margin:0.5em 0 0.5em 24%;
+      }
+      .hint {
+        font-style:italic;
+        color: #666;
+        ul, ol, dl {
+          margin-top:0.5em !important; 
+        }
+      }
+    }
+  }
+  .input.radio, .input.check_boxes {
+    div {
+      padding:1px;
+      border:2px solid transparent;
+      padding-top:0.5em;
+      label {
+        line-height: 1em;
+        font-size:1em;
+      }
+      input {
+        height:1em;
+      }
+    }
+    .collection_radio, .collection_check_boxes {
+      position: relative;
+      float:none;
+      display:block;
+      width:auto;
+      margin: 0 0 0.5em ;
+      padding-left:1.5em;
+      text-align:left;
+      &:last-child {
+        margin-bottom:0;
+      }
+      input {
+        width:auto;
+        margin-right:0.5em;
+        position: absolute;
+        left: -0em;
+      }
+    }
+    .error {
+      width:auto;
+    }
+  }
+}
+
+@mixin input-w($width) {
+  width: $width*13px;
+}
+
+@mixin bg_gradient($start_color, $end_color) {
+  @include background-with-css2-fallback(
+    linear-gradient(
+      $start_color,
+      $end_color
+    )
+  );
+}
+
+
+
+
+/*jquery ui defaults*/
+@mixin ui-form {
+  fieldset {
+    .input {
+      input {
+        &.ui-date-text {
+          @include input-w(6);
+        }
+      }
+      .ui-slider-horizontal {
+        display:inline-block;
+        margin-top:0.3em;
+        margin-right:1.5%;
+      }
+      .ui-datepicker-trigger {
+        margin-top:0.5em;
+      }
+    }
+  }
+}
+

data/stylesheets/boilerplate/_fox_menu_styles.scss

@@ -0,0 +1,78 @@
+@mixin admin_menu {
+  @include columns-wide(24, true);
+  ul {
+    position:relative;
+    @include clearfix;
+    margin-bottom:1.5em;
+    @include border-radius;
+    border:1px solid #999;
+    @include background-with-css2-fallback(
+      linear-gradient(
+        lighten($color, 10%),
+        darken($color, 10%)
+      )
+    );
+    padding:0.5em;
+    li {
+      @include float(left);
+      &.logout {
+        position: absolute;
+        right: -0.5em;
+      }
+      a {
+        display:block;
+        margin-right:1em;
+        padding:0.5em 0.75em;
+        text-decoration:none;
+        color:$background-color;
+        border:1px solid transparent;
+        border-color: #666;
+        @include border-radius;
+        &.current {
+          font-weight:bold;
+          background-color: darken($background-color, 1%);
+          color: $color;
+        }
+        &:hover {
+          border-color:$background-color;
+        }
+      }
+    }
+  }
+}
+
+@mixin block_menu {
+  ul {
+    position:relative;
+    @include clearfix;
+    border:0px solid darken($main_nav_background_color, 20%);
+    padding:1px 0;
+    background-color:$main_nav_background_color;
+    li {
+      @include float(left);
+      a {
+        font-weight:bold;
+        display:block;
+        padding:1em 0;
+        text-decoration:none;
+        text-align:center;
+        color:$main_nav_color;
+        background-color: $main_nav_background_color;
+        border:0px solid darken($main_nav_background_color, 20%);
+      }
+      a {
+        &.current {
+          border:0px solid darken($main_nav_current_background_color, 20%);
+          background-color: $main_nav_current_background_color;
+          color: $main_nav_current_color;
+        }
+        &:hover {
+          border:0px solid darken($main_nav_current_background_color, 20%);
+          background-color: lighten($main_nav_current_background_color, 20%);
+          color: $main_nav_current_color;
+        }
+        
+      }
+    }
+  }
+}

data/stylesheets/boilerplate/_fox_message_styles.scss

@@ -0,0 +1,99 @@
+$message_icons_path: "/assets/icons/messages/";
+
+@mixin messages {
+  .error {
+    @include error_message;
+/*    @include waiting_message;*/
+  }
+  .warning {
+    @include warning_message;
+  }
+  .success {
+    @include success_message;
+  }
+  .notice {
+    @include notice_message;
+  }
+  .waiting {
+    @include waiting_message;
+  }
+}
+
+// wrappers for default messages
+@mixin error_message {
+  @include message(error, small);
+}
+
+@mixin warning_message {
+  @include message(warning, small);
+}
+
+@mixin success_message {
+  @include message(success, small);
+}
+
+@mixin notice_message {
+  @include message(notice, small);
+}
+
+@mixin waiting_message {
+  @include message(warning, small, "waiting_small.gif");
+}
+
+// helper for generating custom messages
+@mixin message($type, $icon_size: "small", $icon_url: "") {
+  margin:0 0 1.5em;
+  border: 2px solid #666;
+  @include border-radius;
+  background-color: #ddd;
+  background-position: 1em center;
+  background-repeat: no-repeat;
+  padding: 1em;
+  h3 {
+    margin-bottom:0.5em;
+  }
+  div {
+    border: 0;
+  }
+  @if $type == error {
+    color: $error-color;
+    border-color: $error-border-color;
+    background-color: $error-background-color;
+  } @else if $type == warning {
+    color: $warning-color;
+    border-color: $warning-border-color;
+    background-color: $warning-background-color;
+  } @else if $type == success {
+    color: $success-color;
+    border-color: $success-border-color;
+    background-color: $success-background-color;
+  } @else if $type == notice {
+    color: $notice-color;
+    border-color: $notice-border-color;
+    background-color: $notice-background-color;
+  }
+  @if $icon_size == small {
+    padding-left: 60px;
+    min-height: 15px;
+  } @else if $icon_size == medium {
+    padding-left: 80px;
+    min-height: 40px;
+  } @else if $icon_size == large {
+    padding-left: 100px;
+    min-height: 60px;
+  } @else if $icon_size == none {
+    background-image:none;
+  }
+  @if $icon_size != none {
+    @if $icon_url != "" {
+      @include message_icon("#{$message_icons_path}#{$icon_url}");
+    } @else {
+      @include message_icon("#{$message_icons_path}#{$type}_#{$icon_size}.png");
+    }
+  }
+  
+}
+
+@mixin message_icon($path_to_icon) {
+  background-image: image-url($path_to_icon);
+}

data/stylesheets/boilerplate/_fox_table_styles.scss

@@ -0,0 +1,40 @@
+@mixin simple_table{
+/*  width:100%;*/
+  margin-bottom:1.5em;
+  margin-top:1.5em;
+  col {
+    border-right:1px solid #ccc;
+    &.rowhead {
+      border-right:2px solid #888;
+    }
+  }
+  thead {
+    border-bottom:2px solid #888;
+    tr:hover {
+      background-color:#fff;
+    }
+  }
+  tr {
+    border-bottom:1px solid #ccc;
+    &:hover {
+      background-color:#f8f8f8;
+      th {
+        background-color: white;
+      }
+    }
+  }
+  th, td {
+    border: 0;
+    padding:1em 1.5em;
+    text-align:left;
+  }
+}
+
+@mixin ie7_simple_table {
+  thead th {
+    border-bottom:2px solid #888;
+  }
+  th, td {
+    border-bottom:1px solid #ccc;
+  }
+}