oocss-compass 0.0.2

data/templates/project/manifest.rb

@@ -0,0 +1,13 @@
+description "The OOCSS framework implemented into Compass"
+
+stylesheet 'default.scss', :media => 'all'
+stylesheet 'partials/_base.scss'
+
+
+help %Q{
+
+}
+
+welcome_message %Q{
+
+}

data/templates/project/partials/core/_content.scss

@@ -0,0 +1,261 @@
+body {
+  font-family: $body_fontFamily; }
+
+/* **************** CONTENT OBJECTS ***************** */
+/* ====== Default spacing ====== */
+
+h1, h2, h3, h4, h5, h6, ul, ol, dl, p, blockquote {
+  padding: $default_padding; }
+
+h1, h2, h3, h4, h5, h6, img {
+  padding-bottom: 0px; }
+
+pre {
+  margin: $default_padding; }
+
+table {
+  h1, h2, h3, h4, h5, h6, p, ul, ol, dl {
+    padding: 0; } }
+
+/* ====== Elements ====== */
+
+img {
+  display: block; }
+
+em {
+  font-style: italic; }
+
+strong {
+  font-weight: bold; }
+
+hr {
+  border: 5px solid $hr_color;
+  border-width: 0 0 5px 0;
+  margin: #{$default_padding * 2} $default_padding $default_padding $default_padding; }
+
+code {
+  color: #0B8C8F; }
+
+/* ====== Headings ====== */
+/* .h1-.h6 classes should be used to maintain the semantically appropriate heading levels - NOT for use on non-headings */
+
+h1, .h1 {
+  font-size: $h1_size;
+  font-weight: normal;
+  font-style: normal;
+  color: #AE0345; }
+
+h2, .h2 {
+  font-size: 167%;
+  font-weight: normal;
+  font-style: normal;
+  color: #AE0345; }
+
+h3, .h3 {
+  font-size: 146.5%;
+  font-weight: normal;
+  font-style: normal;
+  color: #DF2B72; }
+
+h4, .h4 {
+  font-size: 123.1%;
+  font-weight: normal;
+  font-style: normal;
+  color: #333; }
+
+h5, .h5 {
+  font-size: 108%;
+  font-weight: bold;
+  font-style: normal;
+  color: #AE0345; }
+
+h6, .h6 {
+  font-size: 108%;
+  font-weight: normal;
+  font-style: italic;
+  color: #333; }
+
+/* if additional headings are needed they should be created via additional classes, never via location dependant styling */
+
+.category {
+  font-size: 108%;
+  font-weight: normal;
+  font-style: normal;
+  text-transform: uppercase;
+  color: #333;
+  a {
+    color: #333; } }
+
+.important a {
+  font-weight: bold; }
+
+/* links */
+
+a {
+  color: #2c4460;
+  text-decoration: none;
+  &:focus, &:hover {
+    text-decoration: underline; }
+  &:focus {
+    background-color: #FFFFCC; }
+  &:visited {
+    color: #005a9c; } }
+
+/* ====== Lists ======*/
+/* numbered list */
+
+ol.simpleList li {
+  list-style-type: decimal;
+  margin-left: 40px; }
+
+/* standard list */
+
+ul.simpleList li {
+  list-style-type: disc;
+  margin-left: 40px; }
+
+/* ====== Tables ====== */
+
+.data {
+  padding: 20px;
+  position: relative;
+  zoom: 1;
+  vertical-align: top;
+  border-right: solid 1px transparent;
+  /* border fixes a FF2 bug which causes the data table to overlay its borders*/
+  table {
+    width: 100%;
+    border: 1px solid #AE0345; } }
+
+th, td {
+  vertical-align: top;
+  border: 1px solid #AE0345; }
+
+.txtC {
+  text-align: center; }
+
+.data .txtC {
+  td, th {
+    text-align: center; } }
+
+.txtL {
+  text-align: left; }
+
+.data .txtL {
+  td, th {
+    text-align: left; } }
+
+.txtR {
+  text-align: right; }
+
+.data .txtR {
+  td, th {
+    text-align: right; } }
+
+.txtT {
+  vertical-align: top; }
+
+.data .txtT {
+  td, th {
+    vertical-align: top; } }
+
+.txtB {
+  vertical-align: bottom; }
+
+.data .txtB {
+  td, th {
+    vertical-align: bottom; } }
+
+.txtM {
+  vertical-align: middle; }
+
+.data {
+  .txtM {
+    td, th {
+      vertical-align: middle; } }
+  th, td {
+    padding: 3px 20px; }
+  thead tr {
+    background-color: #fff0f8; }
+  th {
+    color: #000;
+    font-weight: bold; } }
+
+/* specification table - extends data table */
+
+.spec {
+  padding: 10px;
+  table {
+    border-top: 1px solid #e2e2e2;
+    border-bottom-color: #fff;
+    border-left: none;
+    border-right: none; }
+  th, td {
+    border: 1px solid #e2e2e2;
+    border-width: 1px 0;
+    padding-left: 0; }
+  .odd, .even {
+    background-color: #fff; } }
+
+/* ====== blockquote ====== */
+
+cite {
+  display: block;
+  text-align: right;
+  padding-top: 10px; }
+
+/* ====== callout ====== */
+
+.callout {
+  font-size: 189%;
+  color: #999999;
+  font-style: italic;
+  cite {
+    display: block;
+    text-align: right;
+    padding-top: 30px;
+    font-size: 69.25%; }
+  span {
+    &.quot {
+      font-size: 500%;
+      vertical-align: sub;
+      color: #e2e2e2;
+      line-height: 25px;
+      font-weight: bold; }
+    &.quotLast {
+      vertical-align: middle; } } }
+
+/* ====== image treatments (get more from jason santa maria) ====== */
+
+.caption {
+  font-size: 13px;
+  color: #666666;
+  font-style: italic;
+  padding-top: 0; }
+
+/* will need to either
+1. find a way to capture the width of the caption in the width of the image or flash
+2. Set some default widths, mby use flickr widths?
+*/
+/* ====== media ====== */
+
+.media {
+  overflow: hidden;
+  overflow: visible;
+  zoom: 1;
+  margin: 10px;
+  .img {
+    float: left;
+    margin-right: 10px;
+    img {
+      display: block; } }
+  .imgExt {
+    float: right;
+    margin-left: 10px; } }
+
+/* ====== special formatting classes ====== */
+
+.detail {
+  color: #777;
+  font-size: 11px;
+  display: block; }

data/templates/project/partials/core/_mod_skins.scss

@@ -0,0 +1,405 @@
+/* **************** BLOCK SKINS ***************** */
+/* ====== Contour blocks ====== */
+/* remove background-image:" to default to square corners for IE */
+/* ----- simple (extends mod) ----- */
+
+.simple {
+  .inner {
+    border: 1px solid #D7D7D7;
+    -moz-border-radius: 7px;
+    -webkit-border-radius: 7px;
+    border-radius: 7px; }
+  b {
+    *background-image: url(skin/simple_corners.png); } }
+
+/* ----- basic (extends mod) ----- */
+
+.basic {
+  .inner {
+    -moz-border-radius: 7px;
+    -webkit-border-radius: 7px;
+    border-radius: 7px; }
+  b {
+    *background-image: url(skin/round.png); } }
+
+/* ----- simpleExt (extends mod) ----- */
+
+.simpleExt {
+  border: 1px solid #c7c7c7;
+  -moz-border-radius: 7px;
+  -webkit-border-radius: 7px;
+  border-radius: 7px;
+  .inner {
+    border: 1px solid #c7c7c7;
+    -moz-border-radius: 7px;
+    -webkit-border-radius: 7px;
+    border-radius: 7px;
+    border-color: #fff;
+    border-width: 4px;
+    background-color: #e2e2e2; }
+  b {
+    *background-image: url(skin/simple_extended.png); }
+  .tl {
+    left: -1px;
+    top: -1px;
+    height: 12px;
+    width: 12px; }
+  .tr {
+    right: -1px;
+    top: -1px;
+    height: 12px;
+    width: 12px; }
+  .bl {
+    left: -1px;
+    bottom: -1px;
+    height: 12px;
+    width: 12px;
+    margin-top: -12px; }
+  .br {
+    right: -1px;
+    bottom: -1px;
+    height: 12px;
+    width: 12px;
+    margin-top: -12px; } }
+
+/* ----- me (extends mod) use for my comments ----- */
+
+.me {
+  border: 1px solid #909090;
+  -moz-border-radius: 5px;
+  -webkit-border-radius: 5px;
+  border-radius: 5px;
+  .inner {
+    border: 1px solid #909090;
+    -moz-border-radius: 5px;
+    -webkit-border-radius: 5px;
+    border-radius: 5px;
+    border-color: #d76a84; }
+  b {
+    *background-image: url(skin/me.png); }
+  .tl {
+    left: -1px;
+    top: -1px; }
+  .tr {
+    right: -1px;
+    top: -1px; }
+  .bl {
+    left: -1px;
+    bottom: -1px; }
+  .br {
+    right: -1px;
+    bottom: -1px; } }
+
+/* ----- noted (extends mod) ----- */
+
+.noted {
+  border: 1px solid #c2c2c2;
+  -moz-border-radius: 5px;
+  -webkit-border-radius: 5px;
+  border-radius: 5px;
+  .inner {
+    border: 1px solid #c2c2c2;
+    -moz-border-radius: 5px;
+    -webkit-border-radius: 5px;
+    border-radius: 5px;
+    border-color: #eded68; }
+  b {
+    *background-image: url(skin/noted.png); }
+  .tl {
+    left: -1px;
+    top: -1px; }
+  .tr {
+    right: -1px;
+    top: -1px; }
+  .bl {
+    left: -1px;
+    bottom: -1px; }
+  .br {
+    right: -1px;
+    bottom: -1px; } }
+
+/* ----- grab (extends mod) ----- */
+
+.grab {
+  .inner {
+    border: 3px solid #00477a;
+    border-bottom-width: 10px; }
+  b {
+    background-image: url(skin/grab.png); }
+  .bl, .br {
+    height: 16px;
+    /*if height is set, margin set*/
+    margin-top: -16px; } }
+
+/* can't be done w border radius */
+
+/*.grab .tl, .grab .tr{height:10px; width:10px;}*/
+
+/* ----- faq (extends mod) ----- */
+
+.faq {
+  .inner {
+    border: 3px solid #b20029;
+    border-bottom-width: 10px; }
+  b {
+    background-image: url(skin/faq.png); }
+  .bl, .br {
+    height: 16px;
+    /*if height is set, margin set*/
+    margin-top: -16px; } }
+
+/* can't be done w border radius */
+
+/* ----- onlinestore (extends mod) ----- */
+
+.onlinestore {
+  .inner {
+    border: 3px solid #9a9800;
+    border-bottom-width: 10px; }
+  b {
+    background-image: url(skin/store.png); }
+  .bl, .br {
+    height: 16px;
+    /*if height is set, margin set*/
+    margin-top: -16px; } }
+
+/* can't be done w border radius */
+
+/* ----- about (extends mod) ----- */
+
+.about {
+  .inner {
+    border: 3px solid #494949;
+    border-bottom-width: 10px; }
+  b {
+    background-image: url(skin/about.png); }
+  .bl, .br {
+    height: 16px;
+    /*if height is set, margin set*/
+    margin-top: -16px; } }
+
+/* can't be done w border radius */
+
+/* ----- talk (extends mod) ----- */
+
+.talk {
+  border: 1px solid #c7c7c7;
+  -moz-border-radius: 5px;
+  -webkit-border-radius: 5px;
+  border-radius: 5px;
+  .inner {
+    border: 1px solid #c7c7c7;
+    -moz-border-radius: 5px;
+    -webkit-border-radius: 5px;
+    border-radius: 5px;
+    border-color: #ededed; }
+  b {
+    *background-image: url(skin/talk.png); }
+  .tl {
+    left: -1px;
+    top: -1px; }
+  .tr {
+    right: -1px;
+    top: -1px; }
+  .bl {
+    left: -1px;
+    bottom: -1px; }
+  .br {
+    right: -1px;
+    bottom: -1px; } }
+
+/* ----- photo (extends complex) ----- */
+
+.photo {
+  .inner {
+    border: solid 10px #fff;
+    margin: 0 4px; }
+  b {
+    background-image: url(skin/photo.png); }
+  .tr, .tl {
+    width: 20px; }
+  .top, .bottom {
+    height: 4px;
+    margin-top: 0px; }
+  .bl, .br {
+    height: 16px;
+    margin-top: -12px; } }
+
+/* muck with margins to change how the block will align with other blocks, any value between 0-10px */
+
+/* ----- flow (extends complex) ----- */
+
+.flow {
+  margin: 6px;
+  b {
+    background-image: url(skin/even.png); }
+  .inner {
+    padding: 0 4px; }
+  .top {
+    height: 4px; }
+  .bottom {
+    height: 4px;
+    margin-top: -4px; }
+  .br, .bl {
+    margin-top: -6px; } }
+
+/* margin top = bottom height - corner height */
+/* ----- shadow test (experimental attempt to match "flow" cross browser w no img)----- */
+
+.boo {
+  -webkit-box-shadow: 0px 0px 1px rgba(0, 0, 0, 33);
+  -moz-box-shadow: black 2px 2px 2px 2px;
+  /*-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;*/
+  border: solid 1px #949494;
+  background: #fff; }
+
+/* ----- .excerpt (extends complex) ----- */
+
+.excerpt {
+  b {
+    background-image: url(skin/excerpt.png); }
+  .top {
+    height: 1px; }
+  .bottom {
+    height: 6px;
+    margin-top: -6px; }
+  .br, .bl {
+    height: 12px;
+    margin-top: -6px; } }
+
+/* margin top equal to - height of bottom */
+/* margin top = bottom height - corner height */
+/* ----- sommers (extends pop) ----- */
+
+.sommers {
+  .inner {
+    _border: 3px solid #D7D7D7;
+    background-image: url(skin/glow_7px.png);
+    _background-image: none; }
+  background-image: url(skin/glow_7px.png);
+  _background-image: none;
+  b {
+    background-image: url(skin/glow_7px.png);
+    _background-image: none; }
+  margin: 3px 20px 20px 3px; }
+
+/*IE6 backup no alpha transparency */
+
+/* ----- gonzalo ----- */
+
+.gonzalo {
+  background-image: url(skin/gc.png);
+  .inner, b {
+    background-image: url(skin/gc.png); } }
+
+/* ====== Background blocks ====== */
+
+.sale .inner {
+  background: red none; }
+
+.nicole {
+  .inner {
+    background: #c01c41 none;
+    color: #fff; }
+  * {
+    color: #fff; } }
+
+.login * {
+  color: #fff; }
+
+.highlight .inner {
+  background: #e3e36f none; }
+
+.universe .inner {
+  background: url(skin/universe.png) repeat left top; }
+
+.foo .inner {
+  background: url(skin/universe_gray.png) repeat left top; }
+
+.login .inner {
+  background: url(skin/universe_login.png) repeat left top; }
+
+.comment .inner {
+  background: #e2e2e2 none; }
+
+/* ====== Block headers and footers ====== */
+
+.hd {
+  h1, h2, h3, h4, h5, h6 {
+    padding: 5px 10px; } }
+
+.section {
+  background: #e9e9e9 url(skin/header.png) repeat-x left bottom;
+  color: #de2c72;
+  font-size: 120%;
+  padding: 5px 10px;
+  h1, h2, h3, h4, h5, h6 {
+    font-size: 100%;
+    color: #de2c72;
+    padding: 0; } }
+
+.act {
+  background-color: #e9e9e9; }
+
+.topper {
+  background: white url(skin/header_gradient_light.png) repeat-x left bottom;
+  color: #4D4D4D;
+  font-size: 120%;
+  padding: 5px 10px;
+  h1, h2, h3, h4, h5, h6 {
+    font-size: 100%;
+    color: #4D4D4D;
+    padding: 0; } }
+
+.tabPosLeft .topper li, .tabPosRight .topper li {
+  background: white url(skin/header_gradient_light.png) repeat-x left bottom;
+  /* belongs in topper */ }
+
+.tabPosBottom .topper {
+  background-image: -webkit-gradient(linear, 0% 0%, 0% 40%, from(#e2e2e2), to(white));
+  background-image: -moz-linear-gradient(0% 8% 270deg, #e2e2e2, white, white 77%); }
+
+.bam {
+  background: #00477a url(skin/header_glossy.png) repeat-x left top;
+  color: #fff;
+  font-size: 120%;
+  padding: 5px 10px;
+  h1, h2, h3, h4, h5, h6 {
+    font-size: 100%;
+    color: #fff;
+    padding: 0; } }
+
+.gonz {
+  background: url(skin/gc_header.png) no-repeat left top; }
+
+/* messed up */
+
+.online {
+  background: #9a9400 url(skin/online.png) repeat-x left top;
+  color: #000;
+  font-size: 120%;
+  padding: 5px 10px;
+  h1, h2, h3, h4, h5, h6 {
+    font-size: 100%;
+    color: #000;
+    padding: 0; } }
+
+.help {
+  background: #b20029 url(skin/help.png) repeat-x left top;
+  color: #fff;
+  font-size: 120%;
+  padding: 5px 10px;
+  h1, h2, h3, h4, h5, h6 {
+    font-size: 100%;
+    color: #fff;
+    padding: 0; } }
+
+.info {
+  background: #636363 url(skin/info.png) repeat-x left top;
+  color: #fff;
+  font-size: 120%;
+  padding: 5px 10px;
+  h1, h2, h3, h4, h5, h6 {
+    font-size: 100%;
+    color: #fff;
+    padding: 0; } }