meedan-bootstrap 0.0.3

data/README.mkdn

@@ -0,0 +1,7 @@
+An internal style guide compass plugin for Meedan
+
+Inspired by twitter-bootstrap but with more bidirectional support using the Susy grid framework. Also Meedan-bootstrap does not contain a javascript requirements, just SCSS.
+
+This is used as a quick-start for generating projects, but also for maintaining up-to-date projects in production, and for maintaining a readily available set of frontend patterns expressed in Sass.
+
+It comes with a [handy styleguide]:"http://".

data/lib/meedan-bootstrap.rb

@@ -0,0 +1,3 @@
+require 'compass'
+extension_path = File.expand_path(File.join(File.dirname(__FILE__), ".."))
+Compass::Frameworks.register('meedan-bootstrap', :path => extension_path)

data/stylesheets/_autorefresh.scss

@@ -0,0 +1,3 @@
+@mixin autorefresh() {
+  
+}

data/stylesheets/_base.scss

@@ -0,0 +1,29 @@
+// Susy grid settings for compass-susy-plugin
+// Surgeworks blog post on this grid concept: http://bit.ly/nkOyO8
+// Required by Susy: 
+$show-grid-backgrounds: true !default;  // toggle grid visualization
+$total-width: 1180px !default; // total target width in pixels
+$total-cols: 20 !default; // total number of cols across
+$col-width-abs: 40px !default; // one col width
+$col-width: ($col-width-abs / $total-width) * 100% !default; // to %
+$gutter-width-abs: 20px !default; // target space between cols
+$gutter-width: ($gutter-width-abs / $total-width) * 100% !default; // to %
+$side-gutter-width: 0 !default; // padding on outermost sides?
+$gutter: $gutter-width !default; // Convenience alias
+$primary-cols: 14 !default; // 14 not 16: b/c default setup expects pad(1,1) on the primary
+$secondary-cols: 4 !default; // 14 primary + 2 pad + 4 secondary = 20 total columns
+
+// Fonts and vertical rhythm
+// Scott Davis blog post on vertical rhythm: http://bit.ly/vpvrit
+// Required by compass typography:
+$base-font-size: 16px !default; // for rhythm()
+$base-line-height: 24px !default; // for rhythm()
+$default-rhythm-border-style: solid !default; // for debugging rhythm()
+$ie-font-ratio: 16px / 100% !default; // WARNING deprecated: 
+$base-rhythm-unit: $base-line-height / $base-font-size * 1em !default;
+$base-leader: ($base-line-height - $base-font-size) * 1em / $base-font-size !default;
+$base-half-leader: $base-leader / 2 !default;
+$relative-font-size: false !default; // switching to ems, in the future.
+$legacy-support-for-ie: true !default; // Drop IE Support: Optional Compass override for validation
+$round-to-nearest-half-line: true; 
+

data/stylesheets/_bevels.scss

@@ -0,0 +1,17 @@
+// bevels helper, works with lists of .row elements and li elements
+// used in forms.scss and navigation
+@mixin bevels($color: $light-gray, $background: lighten($gray, 5%)) {
+  .row, li {
+    background: $background;
+    border-top: 1px solid $color;
+    border-bottom: 1px solid darken($color, 20%);
+  }
+  
+  .row:first-child, li:first-child {
+    border-top-width:0;
+  }
+  
+  .row:last-child, li:first-child {
+    border-bottom-width: 0;
+  }
+}

data/stylesheets/_bundles.scss

@@ -0,0 +1,46 @@
+// A bundle of media objects
+@mixin bundle($cols: $primary-cols, $context: $primary-cols) {
+  padding-top: rhythm(2);
+  @include full();
+  background: #ffffff;
+  @include pad(1/2, 1/2);
+  
+  blockquote {
+    float: $from-direction;
+    clear: both;
+    padding: rhythm(1);
+    margin: rhythm(1);
+    font-weight: normal;
+    color: lighten(black, 20%);
+  }
+
+  div.bundle-byline {
+    font-weight: bold;
+    text-decoration: none; 
+    font-size: $xsmall-font-size;
+    padding: 0 rhythm(1);
+
+    /* The timestamp */
+    span a {
+      color: black;
+      text-decoration: none;
+      &:visited {color: black;}
+      &:hover { color: $identity;}
+    }
+  }
+  
+  div.bundle-body {
+    float: $from-direction;
+    clear: both;
+    padding: rhythm(1);
+  }
+
+  /* This is the whole section that wraps the actual media objects.*/
+  .bundle-reports {
+    @include full;
+    .media-object { 
+      @include media-object();
+      padding: rhythm(1);
+    }
+  }
+}

data/stylesheets/_buttons.scss

@@ -0,0 +1,34 @@
+
+// use it on a button element.
+@mixin button($width: 30%, $font-size: $large-font-size, $color: $gray) {
+  // defaults to nothing
+  &.default {
+    
+  }
+  
+  &.large {
+    @include adjust-font-size-to($large-font-size);
+  }
+  
+  &.xlarge {
+    @include adjust-font-size-to($xlarge-font-size);
+  }
+  
+  &.fancy {
+    @include background-image(linear-gradient($color, darken($color, 10%))); 
+    @include border-radius($font-size/6);
+    @include adjust-font-size-to($font-size);
+    @include text-shadow(darken($color, 30%) 0px -1px 0);
+    color: white;
+    text-decoration: none;
+    text-align: center;
+    &:hover {
+      cursor: pointer;
+    }
+
+    &:active {
+      @include background-image(linear-gradient(darken($color, 40%), $color, $color 4%));
+    }
+  }
+}
+

data/stylesheets/_cab.scss

@@ -0,0 +1,91 @@
+// ====================
+// = button style cab =
+// ====================
+
+// just a list of buttons, the default "CAB"
+@mixin contextual-action-buttons {
+  @include clearfix;
+}
+
+$cab-dropdown-height: rhythm(1); 
+
+/* =================================================== */
+/* = Dropdown style CAB                                */
+/* A flexible popup/dropdown thing for Media Objects   */
+/* Applied to the ul.links in Media Object             */
+/* =================================================== */
+@mixin cab-dropdown() {
+//  // rare case where we use absolute positioning, probably can remove CGB apr 23 2012
+//  position: absolute;
+//  top: $cab-dropdown-height;
+//  #{opposite-position($from-direction)}: 0;
+//  /* we toggle this on with js */
+//  display: none;
+//  width: 100px;
+//  background: white;
+//  z-index: 10000;
+//  @include box-shadow($dark-gray 0px 1px 1px);
+//
+//  li.publish {
+//    a {
+//      &:hover {
+//        background: lighten($midnight-blue, 50%);
+//      }
+//      .icon {
+//        @include bidi-sprite("check_alt_12x12");
+//      }
+//    }
+//  }
+//  /*3. Moderate */
+//  li.moderate {
+//    a {
+//      &:hover {
+//        background: lighten($cinnamon-brown, 50%);
+//      }
+//      .icon {
+//        @include bidi-sprite("chat_12x12");
+//      }
+//    }
+//  }
+//  /*4. Edit */
+//  li.edit {
+//    a {
+//      &:hover {
+//        background: lighten($postit-yellow, 50%);
+//      }
+//      .icon {
+//        @include bidi-sprite("pen_12x12");
+//      }
+//    }
+//  }
+}
+
+/* ========================================================== */
+/* = Mixin: the CAB button, used in media object             = */
+/* This is the main button that opens the cab                 */
+/* TODO should be used in the cab mixin, not media object CGB */
+/* ========================================================== */
+@mixin cab-dropdown-button() {
+//  float: none;
+//  position: absolute;
+//  padding: rhythm(1/2);
+//  #{opposite-position($from-direction)}: 0px;
+//  top: 0px;
+//  
+//  /* the button is an anchor with "+" in it */
+//  a {
+//    width: 100%;
+//    text-align: center;
+//    text-decoration: none;
+//    color: $dark-gray;
+//    @include bidi_sprite("cab_active_gear");
+//    padding: 0;
+//    font-family: courier, sans-serif;
+//    width: rhythm(1);
+//    height: $cab-height;
+//    display: block;
+//    &:hover {
+//      color: black;
+//    }
+//  }
+}

data/stylesheets/_calendar.scss

@@ -0,0 +1,69 @@
+@mixin calendar-today() {
+  color: black;
+  border-#{$opposite}: 1px solid $gray;
+  div.month {
+    font-size: $medium-font-size;
+    margin-top: 10px;    
+  }
+  div.day {
+    font-size: 60px;
+    font-weight: 700;
+    line-height: 1;
+    .timezone {
+      font-size: $small-font-size;
+      color: $gray;
+      float: $from-direction;
+      clear: both;
+      width: 100%;
+      text-align: center;
+      padding-bottom: $gutter;
+    }
+  }
+}
+
+@mixin calendar-month() {
+  .today {
+    background: transparent!important;
+    color: black;
+    font-weight: bold;
+    a {
+      color: black;
+      font-weight: bold;
+    }
+  }
+  .date-nav {
+    background: white!important;
+    border-width: 0;
+    border-top: 1px solid $gray;
+  }
+  
+  thead th.days {
+    background: white;
+    border-width: 0;
+  }
+  
+  td {
+    text-align: center;
+  }
+  
+  .mini-day-on {
+    a {
+      color: $rdio-blue;
+      &:hover {
+        background: lighten($rdio-blue, 20%);
+        color: white;
+        font-weight: bold;
+      }
+      &:active {
+        background: lighten($rdio-blue, 10%);
+      }
+      font-weight: bold;
+      @include border-radius(30px);
+      display: block;
+      text-align: center;
+    }
+  }
+  a {
+    text-decoration: none;
+  }
+}

data/stylesheets/_colors.scss

@@ -0,0 +1,93 @@
+/* don't use 3-digit colors, use the full hex */
+
+/* Colors */
+$bright-blue: #0089e4;
+$midnight-blue: #003366;
+$cinnamon-brown: #884400;
+
+$frenchpass-blue: #bbddff;
+$cornflower-blue: #aaccee;
+$sulu-green: #bbee77;
+$terminal-green: #5BB304;
+
+/* Greys */
+$light-gray: #eeeeee;
+$gray: #cccccc;
+$dark-gray: #d0d0d0;
+$darker-gray: darken($dark-gray, 30%);
+$darkest-gray: #000000;
+
+/* ... Some other colors available */
+$dark-blue: #0064a6;
+
+$yellow-orange: #ffcd93;
+$postit-yellow: #fff9e6;
+$paris-daisy-yellow: #ffee66;
+$confetti-yellow: #eedd55;
+$flamingo-orange: #ee6633;
+$cinnamon-orange: #C25000;
+$hot-cinnamon-orange: #dd5522;
+
+$verdun-green: #336600;
+$reef-green: #ccff88;
+$dark-brown: #998d86;
+$firetruck-red: #B60800;
+$donjuan: #5f4c4c;
+
+// Identity and theme colors 
+$identity: $firetruck-red;
+
+// needed by compass 
+$default-box-shadow-color: #c3c3c3;
+$accent: $identity;
+
+// ===============
+// = syntax.scss =
+// ===============
+$syntax-background: lighten(#09223F, 30%);
+$syntax-foreground: #FFEFFF;
+$syntax-border: #888;
+$line-no-background: #EFEFEF;
+$line-no-foreground: #888;
+$entity-clr: #FFDD00;
+$keyword-clr: #FF9D00;
+$constant-clr: #FF628C;
+$string-clr: #3AD900;
+$comment-clr: #0088FF;
+$regex-clr: #80FFC2;
+$variable-clr: #CCCCCC;
+$key: #ddf080;
+
+$twitter-blue: #1D88C9;
+$facebook-blue: #264887;
+$youtube-red: #F32824;
+
+
+$body-bkg-color: $light-gray;
+$sidebar-bkg-color: #ffffff;
+
+// ====================
+// = susy grid colors =
+// ====================
+$grid-background-gutter-color : $postit-yellow;
+$grid-background-column-color : white;
+
+// ====================================
+// = recently used in checkdesk theme =
+// TODO not sure how to structure the palette
+// but clearly we can improve, create a few other pallets — CGB
+// ====================================
+$thrush-brown: #a55c26;
+$buttermilk-yellow: #ffe789;
+$tupperware-blue: #1777a4;
+
+// links colors for compass links helper
+$links-color: $tupperware-blue;
+$links-active-color: $darkest-gray;
+$links-visited-color: $tupperware-blue;
+
+// form colors for forms.scss
+$form-primary-accent: $bright-blue;
+$form-validation-error: $firetruck-red;
+$form-validation-success: $verdun-green;
+$form-valifation-warning: $yellow-orange;

data/stylesheets/_desk.scss

@@ -0,0 +1,333 @@
+@mixin thread($thread-width: $primary-cols, $context: $primary-cols ) {
+  @include border-radius(4px);
+  @include columns($thread-width, $context);
+  background: $light-gray;
+  @include leader-and-trailer(1, $medium-font-size);
+  
+  // footer of a thread
+  footer {
+    background-color: darken($light-gray, 5%);
+    @include columns($thread-width, $thread-width);
+    @include trailer(1, $medium-font-size);
+
+    // sometimes footers go in the top (in html5), so they need special treatment like so:
+    &:first-of-type {
+      margin-bottom: 0;
+    }
+    
+    .contextual-action-buttons {
+      padding: 0 2%;
+      @include opacity(1);
+      clear: both;
+      height: rhythm(1);
+      @include leader-and-trailer(0.5, $medium-font-size);
+    }
+  }
+  
+  // thread prompt
+  .prompt {
+    background: lighten($dark-blue, 10%);
+    @include columns($thread-width, $thread-width);
+    @include leader(0.5);
+    
+    h2 {
+      @include adjust-font-size-to($xxlarge-font-size);
+      font-weight: 700;
+      @include en-sans-font-stack;
+      color: white;
+    }
+    
+    // inner padding to each element inside the prompt
+    h2,
+    .contextual-action-buttons, 
+    .byline {
+      padding-#{$from-direction}: 2%;
+    }
+    
+    .byline > * {
+      float: $from-direction;
+      @include adjust-font-size-to($small-font-size);
+      margin-#{opposite-position($from-direction)}: rhythm(0.2, $small-font-size);
+    }
+    
+    .contextual-action-buttons button {
+      @include opacity(1);
+    }
+    
+    
+    .byline {
+      @include adjust-font-size-to($medium-large-font-size); 
+      @include en-sans-font-stack;
+      color: lighten($bright-blue, 20%);
+      font-style: italic;
+      a {
+        color: lighten($bright-blue, 20%);
+      }
+      img {
+        width: rhythm(1);
+        float: $from-direction;
+        padding-#{opposite-position($from-direction)}: 2%;
+      }
+    }
+  }
+
+  // individual comment
+  div.comment {
+    float: $from-direction;
+    clear: both;
+    @include adjust-font-size-to($medium-large-font-size);
+    padding-left: 2%;
+    padding-right: 2%;
+    h4 {
+      @include en-sans-caption-font-stack;
+    }
+    // nested comment
+    &.nested {
+      @include adjust-font-size-to($small-font-size);
+      @include leader-and-trailer(0.5, $small-font-size);
+      padding-#{$from-direction}: 10%;
+    }
+
+    // author avatar 
+    img {
+      @include columns(1, $thread-width);
+    }
+  }
+}
+
+
+@mixin desk-header($header-width: $primary-cols, $desk-width: $primary-cols) {
+  @include columns($header-width, $desk-width);
+  
+  h2 {
+    @include adjust-font-size-to($xxlarge-font-size);
+    @include leader(1, $xxlarge-font-size);
+    font-weight: 400;
+    color: black;
+    display: block;
+    clear: none;
+  }
+}
+
+// featured metadata, a row of boxes featured on a desk
+@mixin feature($feature-width: 6, $context: $desk-width) {
+  @include columns($feature-width, $context);
+    
+  h3, p, .avatars {
+    @include full;
+  }
+  
+  h3 {
+    text-transform: uppercase;
+    color: black;
+  }
+
+  .avatars {
+    @include clearfix;
+    height: rhythm(1, $medium-font-size);
+    img {
+      width: rhythm(1, $medium-font-size);
+      height: rhythm(1, $medium-font-size);
+    }
+  }
+  
+  &.secondary {
+    @include columns($feature-width, $context);
+  }
+  
+  &.tertiary {
+    @include columns($feature-width - 2, $context);
+    clear: none;
+
+    time {
+      @include adjust-font-size-to($large-font-size);
+      font-weight: normal;
+    }
+
+    h3 {
+      clear: none;
+      text-transform: uppercase;
+    }
+  }
+}
+
+// CABs! Appear in many contexts: A list of buttons.
+.contextual-action-buttons { 
+  @include full;
+  
+  button {
+    float: $from-direction;
+  }
+}
+
+// a main thread in a conversation (inside a section)
+section.thread {
+  @include thread;
+}
+
+// the links column
+@mixin links-section($links-width, $context) {
+  @include columns($links-width - 2, $context);
+  @include pad(1, 1, $context);
+  .media-object {
+    @include media-object($links-width - 2, $links-width - 2);
+    @include pad(1, 1, $links-width - 2);
+  }
+}
+
+// discussion and links combined one column
+@mixin discussion-and-links-section($discussion-width, $context) {
+  @include columns($discussion-width - 2, $context);
+  @include pad(1, 1, $context);
+  
+  // override comment width
+  div.comment {
+    @include leader(1, $medium-font-size);
+    @include columns($discussion-width - 4, $discussion-width - 2);
+    @include pad(1, 1, $context);
+
+    @include trailing-border;
+    border-color: $dark-gray;
+    
+    &.nested {
+      // need to turn off nesting for a second 
+      // font-size: $medium-font-size;
+      // @include columns($discussion-width - 4, $discussion-width - 2);
+      // @include pad(1, 0, $context);
+    }
+  }
+  
+  // override media object
+  .media-object {
+    @include leader(0.5, $medium-font-size);
+    @include columns($discussion-width - 4, $discussion-width - 2);
+    @include pad(1, 1, $discussion-width - 2);
+    embed iframe {
+      height: 400px;
+    }
+  }
+}
+
+// the discussion column
+@mixin discussion-section($discussion-width, $context) {
+  @include columns($discussion-width - 1, $context);
+  @include omega;
+}
+
+// =============
+// = Main desk =
+// =============
+@mixin desk($desk-width: $primary-cols, $context: $primary-cols) {
+  
+  // the CAB
+  .contextual-action-buttons {
+    @include full;
+    height: rhythm(1);
+    @include leader-and-trailer(0.5, $medium-font-size);
+    button {
+      float: $from-direction;
+      margin-top: 2px;
+      @include opacity(0.2);
+    }
+  }
+
+  // CAB partial opacity until hover 
+  * { &:hover { &>.contextual-action-buttons { button { @include opacity(1); } } } }
+  
+  
+  // Main desk layout div
+  .main {
+    @include columns($desk-width - 1, $context);
+    
+    // Main desk header
+    &>header {
+      h1 {
+        // background: url("/images/cover_photo.png");
+        @include columns($desk-width - 1, $desk-width - 1);
+        @include leader(1, $xxlarge-font-size);
+      }
+      .byline {
+        color: $gray;
+        a {
+          color: $gray;
+        }
+        img {
+          width: rhythm(0.8);
+        }
+      }
+    }
+
+    // desk statement in the desk header
+    $statement-width: $desk-width;
+    div.statement {
+      @include columns($statement-width, $desk-width);
+      p.inner {
+        @include adjust-font-size-to($large-font-size);
+        @include trailer(0.5, $large-font-size);
+      }
+    }
+
+    // desk feature boxes in the desk header
+    $features-width: $desk-width;
+    $feature-width: 5;
+    
+    .features {
+      @include columns($desk-width, $desk-width);
+      .feature {
+        @include feature($feature-width, $features-width);
+      }
+      
+      // the row of labels in the desk header
+      &.alt {
+        @include columns($desk-width, $desk-width);
+        @include leader-and-trailer(0.5);
+        .label-wrapper {
+          float: $from-direction;
+          width: auto;
+          clear: none;
+          min-width: 180px;
+          width: 13%;
+          padding-#{opposite-position($from-direction)}: 2%;
+          margin-#{opposite-position($from-direction)}: 2%;
+          height: rhythm(1);
+        }
+      }
+    }
+  }
+  
+  .helper {
+    background-color: $buttermilk-yellow;
+    @include messages;    
+    .get-started {
+      @include icon { @extend .icon-hand-#{opposite-position($from-direction)};};
+      padding-#{$from-direction}: 20px;
+    }
+  }
+  // Discussion and link section headers
+  section.discussion>header,
+  section.links>header, 
+  section.discussion-and-links>header {
+    @include desk-header;
+  }
+
+  // empty discussion or links section
+  .empty {
+    @include leader-and-trailer(0.5, $medium-font-size);
+    @include leader-and-trailer(1, $medium-font-size, 1);
+    background: $buttermilk-yellow;
+    h3 {
+      padding-#{$from-direction}: 2%;
+    }
+  }
+  
+  // Main sections
+  section.links { @include links-section(7, $desk-width); }
+  section.discussion { @include discussion-section(9, $desk-width); }  
+  section.discussion-and-links { @include discussion-and-links-section($desk-width, $desk-width); }
+  
+  // editing a desk
+  &.desk-edit {
+    padding: rhythm(1);
+    @include clearfix;
+  }
+}