oocss-compass 0.0.2

data/LICENSE

@@ -0,0 +1,30 @@
+Software License Agreement (BSD License)
+
+Copyright (c) 2009, Nicole Sullivan.
+All rights reserved.
+
+Redistribution and use of this software in source and binary forms, with or without modification, are
+permitted provided that the following conditions are met:
+
+* Redistributions of source code must retain the above
+  copyright notice, this list of conditions and the
+  following disclaimer.
+
+* Redistributions in binary form must reproduce the above
+  copyright notice, this list of conditions and the
+  following disclaimer in the documentation and/or other
+  materials provided with the distribution.
+
+* Neither the name of Nicole Sullivan nor the names of its
+  contributors may be used to endorse or promote products
+  derived from this software without specific prior
+  written permission of Nicole Sullivan.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED
+WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A
+PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR
+ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR
+TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF
+ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

data/lib/oocss-compass.rb

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

data/stylesheets/_definitions.scss

@@ -0,0 +1,64 @@
+//Font definitions
+$body_fontFamily: "Myriad Pro","Segoe UI",Helvetica, Arial, sans-serif !default;
+
+
+
+
+//Sizes
+$default_padding: 10px !default;
+
+//Mod sizes
+$mod_corners_sizes: 10px !default;
+$mod_margin: 10px !default;
+
+//Font Sizes
+$h1_size: 196% !default;
+
+
+
+//Colors
+$hr_color: #e2e2e2 !default;
+
+
+
+//Namespace definitions
+$use_namespaces: true !default;
+	
+//OOCSS Core definitions
+$ns_oo: oo- !default;
+
+//OOCSS Mod definitions
+$ns_oo_m: om- !default;
+
+//OOCSS Mod Skins definitions
+$ns_oo_ms: oms- !default;
+
+//OOCSS Gridding definitions
+$ns_oo_g: og- !default;
+
+//OOCSS Tabs definitions
+$ns_oo_t: ot- !default;
+
+//OOCSS Talk definitions. (Tabs are based on mods)
+$ns_oo_mt: omt- !default;
+
+@if $use_namespaces == false {
+	
+	//OOCSS Core definitions
+	$ns_oo: unquote("");
+
+	//OOCSS Mod definitions
+	$ns_oo_m: unquote("");
+
+	//OOCSS Mod Skins definitions
+	$ns_oo_ms: unquote("");
+
+	//OOCSS Gridding definitions
+	$ns_oo_g: unquote("");
+
+	//OOCSS Tabs definitions
+	$ns_oo_t: unquote("");
+
+	//OOCSS Talk definitions. (Tabs are based on mods)
+	$ns_oo_mt: unquote("");
+}

data/stylesheets/_mixins.scss

@@ -0,0 +1,13 @@
+@mixin clearFix{
+	&:after{
+		clear: both;
+		display: block;
+		visibility: hidden;
+		overflow: hidden;
+		height: 0 !important;
+		line-height: 0;
+		font-size: xx-large;
+		content: " x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x ";
+	}
+
+}

data/stylesheets/_oocss-compass.scss

@@ -0,0 +1,61 @@
+//Variable File
+@import "definitions";
+
+//Mixins
+@import "mixins";
+
+
+//Core files
+@import "core/libraries";
+@import "core/grid/grids";
+@import "core/template/template";
+@import "core/module/mod";
+
+
+//Plug in files
+@import "plugins/breadcrumb/breadcrumb";
+@import "plugins/tabs/tabs";
+@import "plugins/talk/talk";
+
+
+//Debug files
+@import "core/grid/grids_debug";
+@import "core/template/template_debug";
+@import "core/module/mod_debug";
+
+
+
+//Import the OOCSS Core
+@mixin oocss-core{
+	@include oocss-reseter;
+	@include oocss-grids;
+	@include oocss-template;
+	@include oocss-mod;
+}
+
+//Import the OOCSS Core in debug mode
+@mixin oocss-core-debug{
+	@include oocss-core;
+	@include oocss-grids-debug;
+	@include oocss-mod-debug;
+	@include oocss-template-debug;
+}
+
+
+
+//Import all OOCSS
+@mixin oocss-full{
+	@include oocss-core;
+	@include oocss-breadcrumb;
+	@include oocss-tabs;
+	@include oocss-talk;
+}
+
+//Import all OOCSS in debug mode
+@mixin oocss-full-debug{
+	@include oocss-core-debug;
+	@include oocss-breadcrumb;
+	@include oocss-tabs;
+	@include oocss-talk;
+}
+

data/stylesheets/core/_libraries.scss

@@ -0,0 +1,82 @@
+@mixin oocss-reseter{
+	/*
+	Copyright (c) 2008, Yahoo! Inc. All rights reserved.
+	Code licensed under the BSD License:
+	http://developer.yahoo.net/yui/license.txt
+	version: 3.0.0pr2
+	*/
+	/* reset */
+	
+	html {
+	  color: #000;
+	  background: #FFF; }
+	
+	body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
+	  margin: 0;
+	  padding: 0; }
+	
+	table {
+	  border-collapse: collapse;
+	  border-spacing: 0; }
+	
+	fieldset, img {
+	  border: 0; }
+	
+	address, caption, cite, code, dfn, em, strong, th, var {
+	  font-style: normal;
+	  font-weight: normal; }
+	
+	li {
+	  list-style: none; }
+	
+	caption, th {
+	  text-align: left; }
+	
+	h1, h2, h3, h4, h5, h6 {
+	  font-size: 100%;
+	  font-weight: normal; }
+	
+	q {
+	  &:before, &:after {
+	    content: ''; } }
+	
+	abbr, acronym {
+	  border: 0;
+	  font-variant: normal; }
+	
+	sup {
+	  vertical-align: text-top; }
+	
+	sub {
+	  vertical-align: text-bottom; }
+	
+	input, textarea, select {
+	  font-family: inherit;
+	  font-size: inherit;
+	  font-weight: inherit; }
+	
+	input, textarea, select {
+	  *font-size: 100%; }
+	
+	legend {
+	  color: #000; }
+	
+	/* fonts */
+	
+	body {
+	  font: 13px/1.231 arial,helvetica,clean,sans-serif;
+	  *font-size: small;
+	  *font: x-small; }
+	
+	select, input, button, textarea {
+	  font: 99% arial,helvetica,clean,sans-serif; }
+	
+	table {
+	  font-size: inherit;
+	  font: 100%; }
+	
+	pre, code, kbd, samp, tt {
+	  font-family: monospace;
+	  *font-size: 108%;
+	  line-height: 100%; }
+}

data/stylesheets/core/grid/_grids.scss

@@ -0,0 +1,59 @@
+@mixin oocss-grids{
+
+	//TODO: find why 319px and it can be put as variable.
+	@media screen and (max-width: 319px) {
+	  .#{$ns_oo_g}unit {
+	    float: none !important;
+	    width: auto !important; } }
+	
+	
+	.#{$ns_oo_g}line, .#{$ns_oo_g}lastUnit {
+		@include clearFix;
+	}
+	
+	.#{$ns_oo_g}line {
+	  *zoom: 1; }
+	
+	.#{$ns_oo_g}unit {
+	  float: left; }
+	
+	.#{$ns_oo_g}size1of1 {
+	  float: none; }
+	
+	.#{$ns_oo_g}size1of2 {
+	  width: 50%; }
+	
+	.#{$ns_oo_g}size1of3 {
+	  width: 33.33333%; }
+	
+	.#{$ns_oo_g}size2of3 {
+	  width: 66.66666%; }
+	
+	.#{$ns_oo_g}size1of4 {
+	  width: 25%; }
+	
+	.#{$ns_oo_g}size3of4 {
+	  width: 75%; }
+	
+	.#{$ns_oo_g}size1of5 {
+	  width: 20%; }
+	
+	.#{$ns_oo_g}size2of5 {
+	  width: 40%; }
+	
+	.#{$ns_oo_g}size3of5 {
+	  width: 60%; }
+	
+	.#{$ns_oo_g}size4of5 {
+	  width: 80%; }
+	
+	.#{$ns_oo_g}lastUnit {
+	  display: table-cell;
+	  float: none;
+	  width: auto;
+	  *display: block;
+	  *zoom: 1;
+	  _position: relative;
+	  _left: -3px;
+	  _margin-right: -3px; }
+}

data/stylesheets/core/grid/_grids_debug.scss

@@ -0,0 +1,36 @@
+@mixin oocss-grids-debug{	
+	/* grids debug */
+	
+	.#{$ns_oo_g}line {
+	  background-color: #e2e2e2; }
+	
+	.#{$ns_oo_g}size1of1 {
+	  background-color: pink; }
+	
+	.#{$ns_oo_g}size1of2 {
+	  background-color: red; }
+	
+	.#{$ns_oo_g}size1of3 {
+	  background-color: orange; }
+	
+	.#{$ns_oo_g}size2of3 {
+	  background-color: yellow; }
+	
+	.#{$ns_oo_g}size1of4 {
+	  background-color: lime; }
+	
+	.#{$ns_oo_g}size3of4 {
+	  background-color: green; }
+	
+	.#{$ns_oo_g}size1of5 {
+	  background-color: aqua; }
+	
+	.#{$ns_oo_g}size2of5 {
+	  background-color: blue; }
+	
+	.#{$ns_oo_g}size3of5 {
+	  background-color: purple; }
+	
+	.#{$ns_oo_g}size4of5 {
+	  background-color: magenta; }
+}

data/stylesheets/core/module/_mod.scss

@@ -0,0 +1,120 @@
+@mixin oocss-mod{	
+	/*
+	Copyright (c) 2009, Nicole Sullivan. All rights reserved.
+	Code licensed under the BSD License:
+	version: 0.2
+	*/
+	/* **************** BLOCK STRUCTURES ***************** */
+	/* mod */
+	
+	.#{$ns_oo_m}mod {
+		margin: $mod_margin;
+		.#{$ns_oo_m}inner {
+			/*background: url(skin/transparent.png) repeat left top;*/ } }
+	
+	.#{$ns_oo_m}inner, .#{$ns_oo_m}bd, .#{$ns_oo_m}ft {
+		*zoom: 1; }
+	
+	.#{$ns_oo_m}inner, .#{$ns_oo_m}hd, .#{$ns_oo_m}bd, .#{$ns_oo_m}ft {
+		@include clearFix; 
+	}
+	
+	.#{$ns_oo_m}inner {
+		position: relative; }
+	
+	/* Removed definition to generic b, because, even if it's a deprecated tag, lot of sites are using it
+	 * I used classes to be tag agnostic: I worked with an XSLT which systematically replace b tags with strong... */
+	 
+	.#{$ns_oo_m}top,
+	.#{$ns_oo_m}top .#{$ns_oo_m}tl,
+	.#{$ns_oo_m}top .#{$ns_oo_m}tr,
+	.#{$ns_oo_m}bottom,
+	.#{$ns_oo_m}bottom .#{$ns_oo_m}bl,
+	.#{$ns_oo_m}bottom .#{$ns_oo_m}br{
+		display: block;
+		background-repeat: no-repeat;
+		font-size: 1%;
+		position: relative;
+		z-index: 10; 
+	}
+	
+	
+	
+	.#{$ns_oo_m}tl, .#{$ns_oo_m}tr, .#{$ns_oo_m}bl, .#{$ns_oo_m}br {
+		height: $mod_corner_sizes;
+		width: $mod_corner_sizes;
+		float: left; }
+	
+	.#{$ns_oo_m}tl {
+		background-position: left top; }
+	
+	.#{$ns_oo_m}tr {
+		background-position: right top; }
+	
+	.#{$ns_oo_m}bl {
+		background-position: left bottom; }
+	
+	.#{$ns_oo_m}br {
+		background-position: right bottom;
+		float: right; }
+	
+	.#{$ns_oo_m}tr {
+		float: right;
+		overflow: hidden;
+		margin-bottom: -32000px; }
+	
+	.#{$ns_oo_m}tl {
+		overflow: hidden;
+		margin-bottom: -32000px; }
+	
+	/* margin bottom needs to be < -9px */
+	
+	.#{$ns_oo_m}bl, .#{$ns_oo_m}br {
+		margin-top: -$mod_corner_sizes; }
+	
+	.#{$ns_oo_m}top {
+		background-position: center top; }
+	
+	.#{$ns_oo_m}bottom {
+		background-position: center bottom;
+		_zoom: 1; }
+	
+	/* this zoom required for IE5.5 only*/
+	/* complex */
+	
+	.#{$ns_oo_m}complex {
+		overflow: hidden;
+		*position: relative;
+		*zoom: 1;
+		.#{$ns_oo_m}tl, .#{$ns_oo_m}tr {
+			height: 32000px;
+			margin-bottom: -32000px;
+			width: $mod_corner_sizes; }
+		.#{$ns_oo_m}bl, .#{$ns_oo_m}br {
+			/*margin-top:0;*/ }
+		.#{$ns_oo_m}top {
+			height: 5px; }
+		.#{$ns_oo_m}bottom {
+			height: 5px;
+			/*margin-top:-10px;*/ } }
+	
+	/* position/zoom required for IE7, 6, 5.5 */
+	
+	/* pop */
+	
+	.#{$ns_oo_m}pop {
+		overflow: visible;
+		margin: 10px 20px 20px 10px;
+		background-position: left top;
+		.#{$ns_oo_m}inner {
+			right: -10px;
+			bottom: -10px;
+			background-position: right bottom;
+			padding: 0 10px 10px 0; }
+		.#{$ns_oo_m}tl, .#{$ns_oo_m}br {
+			display: none; }
+		.#{$ns_oo_m}bl {
+			bottom: -10px; }
+		.#{$ns_oo_m}tr {
+			right: -10px; } }
+}