meedan-bootstrap 0.0.3

data/stylesheets/_tables.scss

@@ -0,0 +1,18 @@
+@mixin tables() {  
+  thead {
+    padding: rhythm(0.5) 0;
+    height: rhythm(2);
+    @include adjust-font-size-to($xlarge-font-size);
+  }
+
+  th, th a {
+    font-weight: bold;
+    padding: rhythm(1);
+    text-decoration: none;
+    @include adjust-font-size-to($small-font-size);
+  }
+
+  td {
+    padding: rhythm(0.5);
+  }
+}

data/stylesheets/_tabs.scss

@@ -0,0 +1,29 @@
+@mixin tabs($color: $tupperware-blue, $size: $medium-font-size) {
+  
+  ul {
+    font-size: $size;
+    border-bottom: 2px solid $light-gray;
+    padding: 0;
+  }
+  
+  li {
+    padding: rhythm(1, $size);
+    float: $from-direction;
+    display: inline;
+    text-align: center;
+    a {
+      padding: rhythm(1/2);
+      @include en-sans-font-stack;
+      font-weight: normal;
+      position: relative;
+      color: $color;
+      background: transparent;
+    }
+
+    a.active {
+      background: $color;
+      font-weight: bold;
+      color: white;
+    }
+  }
+}

data/stylesheets/_tooltips.scss

@@ -0,0 +1,180 @@
+@mixin tooltips {
+  /*
+  * qTip2 - Pretty powerful tooltips
+  * http://craigsworks.com/projects/qtip2/
+  *
+  * Version: nightly
+  * Copyright 2009-2010 Craig Michael Thompson - http://craigsworks.com
+  *
+  * Dual licensed under MIT or GPLv2 licenses
+  *   http://en.wikipedia.org/wiki/MIT_License
+  *   http://en.wikipedia.org/wiki/GNU_General_Public_License
+  *
+  * Date: Sat May 19 09:45:07.0000000000 2012
+  */
+
+  /* Core qTip styles */
+  .ui-tooltip, .qtip{
+    position: absolute;
+    left: -28000px;
+    top: -28000px;
+    display: none;
+
+    max-width: 280px;
+    min-width: 50px;
+
+    border-width: 1px;
+    border-style: solid;
+  }
+
+    /* Fluid class for determining actual width in IE */
+    .ui-tooltip-fluid{
+      display: block;
+      visibility: hidden;
+      position: static !important;
+      float: left !important;
+    }
+
+    .ui-tooltip-content{
+      position: relative;
+      padding: 5px 9px;
+      overflow: hidden;
+
+      text-align: left;
+      word-wrap: break-word;
+      overflow: hidden;
+    }
+
+    .ui-tooltip-titlebar{
+      position: relative;
+      min-height: 14px;
+      padding: 5px 35px 5px 10px;
+      overflow: hidden;
+
+      border-width: 0 0 1px;
+      font-weight: bold;
+    }
+
+    .ui-tooltip-titlebar + .ui-tooltip-content{ border-top-width: 0px !important; }
+
+      /*! Default close button class */
+      .ui-tooltip-titlebar .ui-state-default{
+        position: absolute;
+        right: 4px;
+        top: 50%;
+        margin-top: -9px;
+
+        cursor: pointer;
+        outline: medium none;
+
+        border-width: 1px;
+        border-style: solid;
+      }
+
+      * html .ui-tooltip-titlebar .ui-state-default{ top: 16px; } /* IE fix */
+
+      .ui-tooltip-titlebar .ui-icon,
+      .ui-tooltip-icon .ui-icon{
+        display: block;
+        text-indent: -1000em;
+      }
+
+      .ui-tooltip-icon, .ui-tooltip-icon .ui-icon{
+        -moz-border-radius: 3px;
+        -webkit-border-radius: 3px;
+        border-radius: 3px;
+      }
+
+        .ui-tooltip-icon .ui-icon{
+          width: 18px;
+          height: 14px;
+
+          text-align: center;
+          text-indent: 0;
+          font: normal bold 10px/13px Tahoma,sans-serif;
+
+          color: inherit;
+          background: transparent none no-repeat -100em -100em;
+        }
+
+
+  /* Applied to 'focused' tooltips e.g. most recently displayed/interacted with */
+  .ui-tooltip-focus{
+
+  }
+
+  /* Applied on hover of tooltips i.e. added/removed on mouseenter/mouseleave respectively */
+  .ui-tooltip-hover{
+
+  }
+
+
+  /*! Default tooltip style */
+  .ui-tooltip-default{
+    border-color: black;
+    background-color: black;
+    color: #fff;
+  }
+
+    .ui-tooltip-default .ui-tooltip-titlebar{
+      background-color: black;
+    }
+
+    .ui-tooltip-default .ui-tooltip-icon{
+      border-color: #CCC;
+      background: #F1F1F1;
+      color: #777;
+    }
+
+    .ui-tooltip-default .ui-tooltip-titlebar .ui-state-hover{
+      border-color: #AAA;
+      color: #111;
+    }
+
+  /* Tips plugin */
+  .ui-tooltip .ui-tooltip-tip{
+    margin: 0 auto;
+    overflow: hidden;
+    z-index: 10;
+  }
+
+    .ui-tooltip .ui-tooltip-tip,
+    .ui-tooltip .ui-tooltip-tip *{
+      position: absolute;
+
+      line-height: 0.1px !important;
+      font-size: 0.1px !important;
+      color: #123456;
+
+      background: transparent;
+      border: 0px dashed transparent;
+    }
+
+    .ui-tooltip .ui-tooltip-tip canvas{ top: 0; left: 0; }
+
+
+  /* Modal plugin */
+  #qtip-overlay{
+    position: fixed;
+    left: -10000em;
+    top: -10000em;
+  }
+
+    /* Applied to modals with show.modal.blur set to true */
+    #qtip-overlay.blurs{ cursor: pointer; }
+
+    /* Change opacity of overlay here */
+    #qtip-overlay div{
+      position: absolute;
+      left: 0; top: 0;
+      width: 100%; height: 100%;
+
+      background-color: black;
+
+      opacity: 0.7;
+      filter:alpha(opacity=70);
+      -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
+    }
+
+  
+}

data/stylesheets/_typography.scss

@@ -0,0 +1,163 @@
+// Standardize font sizes
+$xxxlarge-font-size: 50px !default;
+$xxlarge-font-size: 40px !default;
+$xlarge-font-size: 32px !default;
+$large-font-size: 26px !default;
+$medium-large-font-size: 21px !default;
+$medium-font-size: 16px !default;
+$small-font-size: 14px !default;
+$xsmall-font-size: 11px !default;
+
+@mixin en-sans-font-stack { font-family: 'PT Sans', "Helvetica Neue", arial, sans-serif; }
+@mixin en-sans-caption-font-stack { font-family: 'PT Sans Caption', 'Lucida Sans', "Helvetica Neue", arial, sans-serif; }
+@mixin en-plain-font-stack { font-family: "helvetica neue", sans-serif; }
+@mixin en-alt-font-stack { font-family: 'Pacifico', "helvetica neue"; }
+@mixin en-serif-font-stack { font-family: palatino, Georgia, Times, Times New Roman, serif; }
+
+@mixin leader-and-trailer($amount: 1, $context: $medium-font-size, $padding: 0) {
+  @include leader($amount, $context);
+  @include trailer($amount, $context);
+  @if $padding > 0 {                        
+    @include leader($amount, $context, padding);
+    @include trailer($amount, $context, padding);
+  }
+}
+
+@mixin quote-content {
+  &:before {
+    display: block;
+    @include adjust-font-size-to(70px);
+    font-weight: normal!important;
+    content: "\"";
+    height: 1px;
+    margin-#{$from-direction}: -0.45em;
+    position:relative;
+    top:-20px;
+    @include en-alt-font-stack;
+  }
+}
+
+@mixin typography() {
+  text-align: $from-direction;
+  @include en-serif-font-stack;
+  
+  ol {
+    list-style-type: decimal;
+  }
+  
+  h1, h2, h3, h4, h5, h6 {
+    font-weight: 500;
+    color: black;
+    @include full;
+    @include en-sans-font-stack;
+  }
+  
+  ul {
+    list-style-type: disc;
+    list-style-position: inside;
+  }
+
+  strong {
+    font-weight: bold;
+  }
+  
+  em {
+    font-style: italic;
+  }
+
+  pre {
+    // in syntax.scss
+  }
+  
+  code {
+    background: $syntax-background;
+    color: $syntax-foreground;
+    @include border-radius(6%);
+    font-family: monospace;
+    @include adjust-font-size-to($small-font-size);
+    line-height: $large-font-size * 2;
+    @include border-radius(4px);
+    padding: 2px;
+  }
+  
+  h1 {
+    color: black;
+    @include adjust-font-size-to($xxxlarge-font-size);
+    font-weight: 700;
+  }
+
+  h2 {
+    font-weight: 100;
+    @include adjust-font-size-to($large-font-size);
+    color: black;
+  }
+  
+  h3 {
+    @include adjust-font-size-to($medium-font-size);
+    font-weight: bold;
+  }
+  
+  h1, h2, h3 {
+    &.icon {
+      @include messages($paris-daisy-yellow);
+      font-weight: normal;
+      padding-top: 0;
+      padding-bottom: 0;
+    }
+  }
+
+  h4 {
+    @include adjust-font-size-to($medium-font-size);
+    @include en-sans-font-stack;
+    display: inline;
+    font-weight: bold;
+  }
+  
+  /* default link styles*/
+  /* link, visited, hover, active */
+  a { 
+    @include link-colors( $links-color, $links-color, $links-color, $links-color, $links-color );
+    text-decoration: none;
+   }
+
+  a:hover { 
+    text-decoration: underline; 
+    }
+  
+  p {
+    @include en-serif-font-stack;
+    @include full;
+  }
+  
+  p.leader {
+    @include adjust-font-size-to($xlarge-font-size);
+  }
+  
+  blockquote {
+    @include adjust-font-size-to($large-font-size);
+    @include leader-and-trailer(1, $medium-font-size);
+    clear: both;
+    @include full;
+    @include pad(2,2);
+    @include quote-content;
+    footer {
+      cite a {
+        @include adjust-font-size-to($xsmall-font-size);
+      }
+    }
+  }
+
+ dt {
+   font-weight: bold;
+ }
+
+  abbr {
+    border-bottom: 1px dotted #666666;
+    cursor: help;
+    white-space: nowrap; 
+  }
+  
+  header {
+    @include en-sans-font-stack;
+  }
+}

data/stylesheets/meedan_bootstrap.scss

@@ -0,0 +1,51 @@
+// ==================================================================
+// = Meedan bootstrap default configuration and centralized imports =
+// This file renders no css, only loads mixins for use in themes
+// ==================================================================
+
+// ============================================= 
+// ============================================= centralized @imports
+// ============================================= 
+
+// Configuration
+@import "base";
+// Compass
+@import "compass"; // See http://compass-style.org/
+@import "compass/css3"; //http://compass-style.org/reference/compass/css3/
+@import "compass/reset"; // http://compass-style.org/reference/compass/reset/
+@import "compass/typography/vertical_rhythm"; // Compass Docs: http://bit.ly/g3CoPo
+// Reset
+@import "reset"; // Our reset on top of compass/reset
+// Design setup
+@import "colors"; // All project colors
+@import "typography"; // All typography except resets
+// Susy 
+@import "susy"; // Compass grid library: http://susy.oddbird.net/tutorial/
+// Media queries
+@import "respond_to"; 
+// Page Structures
+@import "pagination"; // Pagination layout
+@import "tabs"; // Drupal tabs, in several flavors
+@import "navigation"; // Drupal tabs, in several flavors
+// Forms
+@import "forms"; // Our own form markup
+
+// Meedan-Bootstrap Features 
+@import "labels";
+@import "buttons"; // Configurable colorful buttons
+@import "tables"; // All tabular data
+@import "calendar"; // A calendar widget
+@import "messages"; // Notifications messages
+@import "profile"; // User-profile related styles
+@import "syntax"; // Code syntax highlighting
+@import "cab"; // Contextual action boxes (lists of links)
+@import "media_object"; // media object -- eg a youtube video or tweet
+@import "bundles"; // blog update or Desk -- the thing that has many media objects
+@import "tooltips"; // using qTip2 
+@import "desk";
+@import "icons"; // using FontAwesome
+@import "bevels"; // bevels helper
+@import "pointer"; // css3 triangular pointer eg for talk bubbles
+
+// Establish baseline
+@include establish-baseline($base-font-size); // this uses html > body selector

data/templates/project/foo_theme/starter-theme.scss

@@ -0,0 +1,85 @@
+// ==============================================================
+// = Starter theme for meedan-bootstrap                         =
+// ==============================================================
+
+// This theme implements the meedan-bootstrap library
+// ... which centralizes imports and provides most functionality
+@import "meedan_bootstrap";
+
+// set key layout variables for mixins we will use
+// ... view all settings in meedan-bootstrap/base.scss
+// you may wish to create your own base.scss
+
+$total-cols: 20;
+$primary-cols: 16;
+$primary-padding: 0;
+$secondary-cols: 4;
+
+// Default theme layout mixin
+@mixin theme-layout($primary-cols, $secondary-cols) {
+  #page {
+    @include container;
+    @include leader(1, $medium-font-size);
+  }
+  
+  #content-primary {
+    @include columns($primary-cols, false);
+    .main {
+      h4 { 
+        color: black;
+      }
+      @include columns($primary-cols, false);
+    }
+  }
+  
+  #content-secondary {
+    @include columns($secondary-cols, false);
+    @include leader(4, $medium-font-size);
+    @include omega;
+  }
+}
+
+// main styles for theme
+// .. because it begins with a selector, it is going to render CSS
+body {
+  // .. first it include the basics from meedan-bootstrap
+  // ... these files only contain mixins, you still have to use them.
+  @include typography;
+  @include reset;
+  @include tooltips;
+  
+  // ... the primary section of the layout
+  #content-primary {
+    // tabs from meedan-bootstrap
+    .tabs { @include tabs; }
+
+    // table from meedan-bootstrap
+    table { @include tables; }
+
+    // pagination from meedan-bootstrap
+    .pagination { @include pagination; }
+   }
+   
+  // Main layout
+  @include theme-layout($primary-cols, $secondary-cols);  
+  
+  // ===========================================================================
+  // = Responsive layout overrides
+  // ===========================================================================
+  
+  @include respond-to("small-screens") {
+
+    .optional, .really-optional {
+    display: none;
+    }
+
+    @include respond-to("medium-screens") {
+    .optional, .really-optional {
+    display: none;
+    }
+    }
+
+    @include respond-to("large-screens") {  
+    }
+  }
+}