compass.takitapart.framework 0.0.2

data/README.md

@@ -0,0 +1,55 @@
+The takitapart framework
+========================
+A [Compass](http://compass-style.org) extension providing a semantic, responsive, and fluid framework.
+
+Usage
+-----
+A sample webpage using most of the features is included in this repository (index.html).
+
+This website is hosted here: http://takitapart.github.com/takitapart_framework/.
+
+To install this extension, from the command line run:
+
+	gem install takitapart_framework
+
+In your compass config.rb, include the framework:
+
+    require "takitapart_framework"
+
+In your stylesheet, include the individual modules as desired.
+
+    @import "takitapart_framework/normalize";
+    @import "takitapart_framework/typography";
+    @import "takitapart_framework/grid";
+    @import "takitapart_framework/form";
+    @import "takitapart_framework/print";
+
+I've also included a slightly modified version of the Golden Gridlet, adding in configuration 
+variables for custom columns. 
+
+Roadmap
+-------
++ Clean up configuation variables
++ Complete forms
++ Fix inconsistencies in vertical grid
++ Browser compatibility
++ Images
+
+Attribution & Credits
+---------------------
+The takitapart framework is largely adapted from Joni Korpi's fantastic
+Golden Grid System.
+
+Golden Grid System (1.0) 	<http://goldengridsystem.com/>
+by Joni Korpi               <http://jonikorpi.com/>
+licensed under MIT          <http://opensource.org/licenses/mit-license.php>
+
+Portions also derived from:
+
+Normalize.css is a project by Nicolas Gallagher (@necolas) and Jonathan Neal (@jon_neal).
+http://necolas.github.com/normalize.css/
+
+and
+
+HTML5 Boilerplate
+http://5bp.com

data/lib/takitapart.rb

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

data/stylesheets/_takitapart.scss

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

data/stylesheets/takitapart/_config.scss

@@ -0,0 +1,30 @@
+/*
+*  Base configuration stylesheet for the takitapart CSS framework.
+*  This module will be included by the other modules.
+*  These variables can be overridden in your site's stylesheets.
+*
+*  Part of the takitapart CSS framework [ http://takitapart.net/framework ].
+*
+*  See readme.md for details, licensing, and acknowledgments. 
+*
+*/
+
+// Do not change these values here.
+// Override these variables in your stylesheet above the @import directives.
+
+// Base font-size in pixels.
+$font-size: 16 !default;
+
+// Base line-height.
+$line: $font-size * 1.5 !default;
+$em: $font-size * 1 !default;
+
+// Number of columns.
+$columns: 12 !default;
+
+// Width of the outer margin, in percent.
+$outer-margin: 5.55555% !default;
+
+// Half width of the gutter, in em. 
+$half-gutter-width: #{($line/2)/$em}em !default;
+

data/stylesheets/takitapart/_form.scss

@@ -0,0 +1,114 @@
+/*
+*  A fluid, responsive-friendly form framework. 
+*
+*
+*  Part of the takitapart CSS framework [ http://takitapart.net/framework ].
+*
+*  See readme.md for details, licensing, and acknowledgments. 
+*
+*
+*  Notes on use
+*  ------------
+*  + Wrap field elements with label elements. 
+*
+*/
+@import "config";
+
+@mixin field-width($field-id, $field-width: 100%) {
+	label[for="#{$field-id}"] { width: $field-width; }
+}
+
+@mixin field-width-grid($column-units: 1) {
+	width: gridsystem-width($column-units, $total-columns);
+}
+
+form {
+
+    -webkit-box-sizing: border-box;
+       -moz-box-sizing: border-box;
+        -ms-box-sizing: border-box;
+            box-sizing: border-box;
+
+	fieldset {
+
+		border: 0;
+		margin: 0;
+		padding: 0;
+
+		legend {
+
+		}
+
+		input,textarea,select {
+			-webkit-box-sizing: border-box;
+		       -moz-box-sizing: border-box;
+		        -ms-box-sizing: border-box;
+		            box-sizing: border-box;
+
+			border-width: 0;
+			width: 100%;
+			margin: 0;
+			padding: 0 0.25em;
+		}
+		label {
+			-webkit-box-sizing: border-box;
+		       -moz-box-sizing: border-box;
+		        -ms-box-sizing: border-box;
+		            box-sizing: border-box;
+			margin: 0;
+			padding: 0;
+		}
+
+	}
+
+
+}
+
+@mixin inline-fields() {
+	input,textarea,select {
+		
+	}
+
+	label {
+		@include clearfix();
+		float: left;
+		padding-right: .5em;
+	}
+
+	label:last-child {
+		padding-right: 0;
+	}
+}
+
+@mixin label-below() {
+	legend {
+	}
+
+	label {
+		display: block;
+	    padding-top: #{($line / $em)}em; // one baseline-grid unit
+	    margin: 0 0 -1.0em 0;
+
+	    &:last-child {
+	    	margin: 0;
+	    }
+	}
+
+	input,textarea,select {
+	    display: block;
+	    height: #{($line / $em)}em; // one baseline-grid unit
+	    position: relative;
+	    top: -3em;
+	}
+}
+
+@mixin label-left($label-width: 30%) {
+	label {
+		display: inline-block;
+		width: $label-width;
+	}
+
+	input,textarea,select {
+	    display: inline-block;
+	}
+}

data/stylesheets/takitapart/_grid.scss

@@ -0,0 +1,106 @@
+/*
+*  A semantic, fluid, responsive grid system.
+*
+*  Part of the takitapart CSS framework [ http://takitapart.net/framework ].
+*
+*  See readme.md for details, licensing, and acknowledgments. 
+*
+*/
+@import "config";
+
+$total-width: 100%;
+$total-columns: $columns;
+
+@function gridsystem-width($columns:$columns, $total-columns:$total-columns) {
+    @return ($total-width / $total-columns) * $columns;
+}
+
+// The micro clearfix http://nicolasgallagher.com/micro-clearfix-hack/
+@mixin clearfix() {
+    *zoom:1;
+
+    &:before,
+    &:after {
+        content:"";
+        display:table;
+    }
+    &:after {
+        clear:both;
+    }
+}
+
+//////////
+// GRID //
+//////////
+
+// 
+@mixin grid() {
+    display: block;
+    width: $total-width - ($outer-margin * 2);
+    margin: 0 $outer-margin;
+
+    @include clearfix();
+
+    -webkit-box-sizing: border-box;
+       -moz-box-sizing: border-box;
+        -ms-box-sizing: border-box;
+            box-sizing: border-box;
+}
+
+// Subgrid is a container for nested columns
+@mixin subgrid($columns:$columns,$of-columns:$total-columns) {
+    display: block;
+    float: left;
+    width: gridsystem-width($columns,$of-columns);
+
+    // No gutters, this acts as a container. 
+    padding: 0;
+
+    -webkit-box-sizing: border-box;
+       -moz-box-sizing: border-box;
+        -ms-box-sizing: border-box;
+            box-sizing: border-box;
+}
+
+@mixin column($columns:$columns,$of-columns:$total-columns) {
+    display: block;
+    float: left;
+    width: gridsystem-width($columns,$of-columns);
+
+    // Elastic gutters.
+    padding: 0 $half-gutter-width;
+
+    -webkit-box-sizing: border-box;
+       -moz-box-sizing: border-box;
+        -ms-box-sizing: border-box;
+            box-sizing: border-box;
+}
+
+@mixin push($columns: 1, $of-columns: $total-columns) {
+    margin-left: gridsystem-width($columns,$of-columns);
+
+}
+
+@mixin pull($columns: 1, $of-columns: $total-columns) {
+    margin-right: gridsystem-width($columns,$of-columns);
+}
+
+@mixin block($width-in-cols: 1, $height-in-cols: $width-in-cols, $padding: 0) {
+
+    display: inline-block;
+    position: relative;
+    
+    @include column($width-in-cols);
+    padding-bottom: gridsystem-width($height-in-cols);
+
+    & > * {
+        position: absolute;
+        overflow: hidden;
+
+        top: $padding;
+        bottom: $padding;
+        left: $padding;
+        right: $padding;
+    }
+
+}

data/stylesheets/takitapart/_normalize.scss

@@ -0,0 +1,484 @@
+/*
+*  Normalization, bugfixes, workarounds, and defaults.
+*
+*  Part of the takitapart CSS framework [ http://takitapart.net/framework ].
+*
+*  See readme.md for details, licensing, and acknowledgments. 
+*
+*/
+
+/*  mostly adopted from http://necolas.github.com/normalize.css/ */
+
+/* =============================================================================
+   HTML5 display definitions
+   ========================================================================== */
+
+/*
+ * Corrects block display not defined in IE6/7/8/9 & FF3
+ */
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+nav,
+section,
+summary {
+    display: block;
+}
+
+/*
+ * Corrects inline-block display not defined in IE6/7/8/9 & FF3
+ */
+
+audio,
+canvas,
+video {
+    display: inline-block;
+    *display: inline;
+    *zoom: 1;
+}
+
+/*
+ * Prevents modern browsers from displaying 'audio' without controls
+ */
+
+audio:not([controls]) {
+    display: none;
+}
+
+/*
+ * Addresses styling for 'hidden' attribute not present in IE7/8/9, FF3, S4
+ * Known issue: no IE6 support
+ */
+
+[hidden] {
+    display: none;
+}
+
+
+/* =============================================================================
+   Base
+   ========================================================================== */
+
+
+body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,p,blockquote,th,td {
+    margin:0;
+    padding:0;
+}
+
+
+/*
+ * 1. Corrects text resizing oddly in IE6/7 when body font-size is set using em units
+ *    http://clagnut.com/blog/348/#c790
+ * 2. Prevents iOS text size adjust after orientation change, without disabling user zoom
+ *    www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/
+ */
+
+html {
+    font-size: 100%; /* 1 */
+    -webkit-text-size-adjust: 100%; /* 2 */
+    -ms-text-size-adjust: 100%; /* 2 */
+}
+
+/*
+ * Addresses font-family inconsistency between 'textarea' and other form elements.
+ */
+
+html,
+button,
+input,
+select,
+textarea {
+    font-family: sans-serif;
+}
+
+/*
+ * Addresses margins handled incorrectly in IE6/7
+ */
+
+body {
+    margin: 0;
+}
+
+
+
+
+/* =============================================================================
+   Links
+   ========================================================================== */
+
+/*
+ * Addresses outline displayed oddly in Chrome
+ */
+
+a:focus {
+    outline: thin dotted;
+}
+
+/*
+ * Improves readability when focused and also mouse hovered in all browsers
+ * people.opera.com/patrickl/experiments/keyboard/test
+ */
+
+a:hover,
+a:active {
+    outline: 0;
+}
+
+
+/* =============================================================================
+   Typography
+   ========================================================================== */
+/*
+ * Addresses styling not present in IE7/8/9, S5, Chrome
+ */
+
+abbr[title] {
+    border-bottom: 1px dotted;
+}
+
+/*
+ * Addresses style set to 'bolder' in FF3+, S4/5, Chrome
+*/
+
+b,
+strong {
+    font-weight: bold;
+}
+
+blockquote {
+    margin: 1em 40px;
+}
+
+/*
+ * Addresses styling not present in S5, Chrome
+ */
+
+dfn {
+    font-style: italic;
+}
+
+/*
+ * Addresses styling not present in IE6/7/8/9
+ */
+
+mark {
+    background: #ff0;
+    color: #000;
+}
+
+/*
+ * Addresses margins set differently in IE6/7
+ */
+
+p,
+pre {
+    margin: 1em 0;
+}
+
+/*
+ * Corrects font family set oddly in IE6, S4/5, Chrome
+ * en.wikipedia.org/wiki/User:Davidgothberg/Test59
+ */
+
+pre,
+code,
+kbd,
+samp {
+    font-family: monospace, serif;
+    _font-family: 'courier new', monospace;
+    font-size: 1em;
+}
+
+/*
+ * Improves readability of pre-formatted text in all browsers
+ */
+
+pre {
+    white-space: pre;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+}
+
+/*
+ * 1. Addresses CSS quotes not supported in IE6/7
+ * 2. Addresses quote property not supported in S4
+ */
+
+/* 1 */
+
+q {
+    quotes: none;
+}
+
+/* 2 */
+
+q:before,
+q:after {
+    content: '';
+    content: none;
+}
+
+small {
+    font-size: 75%;
+}
+
+/*
+ * Prevents sub and sup affecting line-height in all browsers
+ * gist.github.com/413930
+ */
+
+sub,
+sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+}
+
+sup {
+    top: -0.5em;
+}
+
+sub {
+    bottom: -0.25em;
+}
+
+
+/* =============================================================================
+   Lists
+   ========================================================================== */
+
+/*
+ * Addresses margins set differently in IE6/7
+ */
+
+dl,
+menu,
+ol,
+ul {
+    margin: 1em 0;
+}
+
+dd {
+    margin: 0 0 0 40px;
+}
+
+/*
+ * Addresses paddings set differently in IE6/7
+ */
+
+menu,
+ol,
+ul {
+    padding: 0 0 0 40px;
+}
+
+/*
+ * Corrects list images handled incorrectly in IE7
+ */
+
+nav ul,
+nav ol {
+    list-style: none;
+    list-style-image: none;
+}
+
+
+/* =============================================================================
+   Embedded content
+   ========================================================================== */
+
+/*
+ * 1. Removes border when inside 'a' element in IE6/7/8/9, FF3
+ * 2. Improves image quality when scaled in IE7
+ *    code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/
+ */
+
+img {
+    border: 0; /* 1 */
+    -ms-interpolation-mode: bicubic; /* 2 */
+}
+
+/*
+ * Corrects overflow displayed oddly in IE9
+ */
+
+svg:not(:root) {
+    overflow: hidden;
+}
+
+
+/* =============================================================================
+   Figures
+   ========================================================================== */
+
+/*
+ * Addresses margin not present in IE6/7/8/9, S5, O11
+ */
+
+figure {
+    margin: 0;
+}
+
+
+/* =============================================================================
+   Forms
+   ========================================================================== */
+
+/*
+ * Corrects margin displayed oddly in IE6/7
+ */
+
+form {
+    margin: 0;
+}
+
+/*
+ * Define consistent border, margin, and padding
+ */
+
+fieldset {
+    border: 1px solid #c0c0c0;
+    margin: 0 2px;
+    padding: 0.35em 0.625em 0.75em;
+}
+
+/*
+ * 1. Corrects color not being inherited in IE6/7/8/9
+ * 2. Corrects text not wrapping in FF3 
+ * 3. Corrects alignment displayed oddly in IE6/7
+ */
+
+legend {
+    border: 0; /* 1 */
+    padding: 0;
+    white-space: normal; /* 2 */
+    *margin-left: -7px; /* 3 */
+}
+
+/*
+ * 1. Corrects font size not being inherited in all browsers
+ * 2. Addresses margins set differently in IE6/7, FF3+, S5, Chrome
+ * 3. Improves appearance and consistency in all browsers
+ */
+
+button,
+input,
+select,
+textarea {
+    font-size: 100%; /* 1 */
+    margin: 0; /* 2 */
+    vertical-align: baseline; /* 3 */
+    *vertical-align: middle; /* 3 */
+}
+
+/*
+ * Addresses FF3/4 setting line-height on 'input' using !important in the UA stylesheet
+ */
+
+button,
+input {
+    line-height: normal; /* 1 */
+}
+
+/*
+ * 1. Improves usability and consistency of cursor style between image-type 'input' and others
+ * 2. Corrects inability to style clickable 'input' types in iOS
+ * 3. Removes inner spacing in IE7 without affecting normal text inputs
+ *    Known issue: inner spacing remains in IE6
+ */
+
+button,
+input[type="button"],
+input[type="reset"],
+input[type="submit"] {
+    cursor: pointer; /* 1 */
+    -webkit-appearance: button; /* 2 */
+    *overflow: visible;  /* 3 */
+}
+
+/*
+ * Re-set default cursor for disabled elements
+ */
+
+button[disabled],
+input[disabled] {
+    cursor: default;
+}
+
+/*
+ * 1. Addresses box sizing set to content-box in IE8/9
+ * 2. Removes excess padding in IE8/9
+ * 3. Removes excess padding in IE7
+      Known issue: excess padding remains in IE6
+ */
+
+input[type="checkbox"],
+input[type="radio"] {
+    box-sizing: border-box; /* 1 */
+    padding: 0; /* 2 */
+    *height: 13px; /* 3 */
+    *width: 13px; /* 3 */
+}
+
+/*
+ * 1. Addresses appearance set to searchfield in S5, Chrome
+ * 2. Addresses box-sizing set to border-box in S5, Chrome (include -moz to future-proof)
+ */
+
+input[type="search"] {
+    -webkit-appearance: textfield; /* 1 */
+    -moz-box-sizing: content-box;
+    -webkit-box-sizing: content-box; /* 2 */
+    box-sizing: content-box;
+}
+
+/*
+ * Removes inner padding and search cancel button in S5, Chrome on OS X
+ */
+
+input[type="search"]::-webkit-search-decoration,
+input[type="search"]::-webkit-search-cancel-button {
+    -webkit-appearance: none;
+}
+
+/*
+ * Removes inner padding and border in FF3+
+ * www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/
+ */
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+    border: 0;
+    padding: 0;
+}
+
+/*
+ * 1. Removes default vertical scrollbar in IE6/7/8/9
+ * 2. Improves readability and alignment in all browsers
+ */
+
+textarea {
+    overflow: auto; /* 1 */
+    vertical-align: top; /* 2 */
+}
+
+
+/* =============================================================================
+   Tables
+   ========================================================================== */
+
+/*
+ * Remove most spacing between table cells
+ */
+
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}

data/stylesheets/takitapart/_print.scss

@@ -0,0 +1,28 @@
+/*
+*  Print specifc style defaults. From HTML5 Boilerplate.
+*
+*  Part of the takitapart CSS framework [ http://takitapart.net/framework ].
+*
+*  See readme.md for details, licensing, and acknowledgments. 
+*
+*/
+
+/* ==|== print styles =======================================================
+   Print styles.
+   Inlined to avoid required HTTP connection: h5bp.com/r
+   ========================================================================== */
+
+@media print {
+  * { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
+  a, a:visited { text-decoration: underline; }
+  a[href]:after { content: " (" attr(href) ")"; }
+  abbr[title]:after { content: " (" attr(title) ")"; }
+  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
+  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
+  thead { display: table-header-group; } /* h5bp.com/t */
+  tr, img { page-break-inside: avoid; }
+  img { max-width: 100% !important; }
+  @page { margin: 0.5cm; }
+  p, h2, h3 { orphans: 3; widows: 3; }
+  h2, h3 { page-break-after: avoid; }
+}

data/stylesheets/takitapart/_responsive.scss

@@ -0,0 +1,41 @@
+/*
+*  Sample media selectors to apply device-specific styling.
+*
+*  Part of the takitapart CSS framework [ http://takitapart.net/framework ].
+*
+*  See readme.md for details, licensing, and acknowledgments. 
+*
+*/
+
+// This file is not included by default, and it's recommended that
+// you copy desired selectors to your individual website stylesheet(s).
+
+/* @media screen and (min-width: 480px) */
+@media screen and (min-width: 30em) {}
+
+/* @media screen and (min-width: 640px) */
+@media screen and (min-width: 40em) {}
+
+/* @media screen and (min-width: 720px) */
+@media screen and (min-width: 45em) {}
+
+/* @media screen and (min-width: 888px) */
+@media screen and (min-width: 55.5em) {}
+
+/* @media screen and (min-width: 984px) */
+@media screen and (min-width: 61.5em) {}
+
+/* @media screen and (min-width: 1200px) */
+@media screen and (min-width: 75em) {}
+
+/* @media screen and (min-width: 1392px) */
+@media screen and (min-width: 87em) {}
+
+/* @media screen and (min-width: 1680px) */
+@media screen and (min-width: 105em) {}
+
+/* @media screen and (min-width: 1872px) */
+@media screen and (min-width: 117em) {}
+
+/* @media screen and (min-width: 2080px) */
+@media screen and (min-width: 130em) {}

data/stylesheets/takitapart/_typography.scss

@@ -0,0 +1,151 @@
+/*
+*  Zoomable baseline grid, with mixins intended for responsive zooming.
+*  Along with some sensible typographic defaults. 
+*
+*
+*  Part of the takitapart CSS framework [ http://takitapart.net/framework ].
+*
+*  See readme.md for details, licensing, and acknowledgments. 
+*
+*/
+@import "config";
+
+@mixin baseline-grid($size: $font-size) {
+    body {
+        font-size: #{($size / $em)}em;
+    }
+}
+
+@mixin font-size($size-delta: 16px, $line-height: 24px) {
+    font-size: #{$font-size / $em}em;
+    line-height: #{$line / $em}em; /* 24 */
+    margin: #{(($line) / $em) / ($font-size / $em)}em 0;
+}
+
+// Leading before, in grid units.
+@mixin leading-before($amount: 1) {
+    margin-top: #{($line / $em) * $amount}em;
+}
+
+// Leading after, in grid units.
+@mixin leading-after($amount: 1) {
+    margin-bottom: #{($line / $em) * $amount}em;
+}
+
+// Leading before & after, in grid units.
+@mixin leading($before-amount: 1, $after-amount: $before-amount) {
+    @include leading-before($before-amount);
+    @include leading-after($after-amount);
+}
+
+
+body {
+    /* 16px / 24px */
+    font-size: $font-size / 16 * 1em;
+    line-height: #{$line / $em}em;
+}
+
+.miniscule {}
+
+.tiny {}
+
+.small {
+    /* 13px / 18px */
+    font-size: #{($font-size*0.8125) / $em}em;
+    line-height: ($line*0.75) / ($font-size*0.8125) * 1em;
+
+    margin: #{(($line) / $em) / ($font-size / $em)}em 0;
+}
+
+.medium, .normal, h3, p {
+    /* 16px / 24px */
+    font-size: #{$font-size / $em}em;
+    line-height: #{$line / $em}em; /* 24 */
+
+    margin: #{(($line) / $em) / ($font-size / $em)}em 0;
+}
+
+.large, h2, h1 {
+    /* 26 / 36px */
+    font-size: #{26 / $em}em;
+    line-height: ($line*1.5) / 26 * 1em;
+
+    margin: #{(($line) / $em) / (26 / $em)}em 0
+}
+
+.huge {
+    /* 42px / 48px */
+    font-size: #{42 / $em}em;
+    line-height: ($line*2) / 42 * 1em;
+
+    margin: #{(($line) / $em) / (42 / $em)}em 0;
+}
+
+.massive {
+    /* 68px / 72px */
+    font-size: #{68 / $em}em;
+    line-height: ($line*3) / 68 * 1em;
+
+    margin: #{(($line) / $em) / ($font-size / $em)}em 0;
+}
+
+.gigantic {
+    /* 110px / 120px */
+    font-size: #{110 / $em}em;
+    line-height: ($line*5) / 110 * 1em;
+
+    margin: #{(($line) / $em) / ($font-size / $em)}em 0;
+}
+
+
+@mixin indented() {
+
+    margin-bottom: 0; 
+
+    &:last-child {
+        margin-bottom: #{(($line) / $em) / ($font-size / $em)}em;
+    }  
+
+    & + p {
+        text-indent: #{$line / $em}em;
+        margin-top: 0;
+    }
+
+}
+
+@mixin first-line-small-caps() {
+
+    &:first-line {
+        font-weight: 800;
+        font-variant: small-caps;
+    }
+
+    & + p {
+        margin-top: 0;
+
+        &:first-line {
+            font-weight: 400;
+            font-variant: normal
+        }
+    }
+}
+
+@mixin drop-cap() {
+
+    &:first-letter {
+        font-size: 3.5em;
+        line-height: 1.0em;
+        font-weight: 400;
+        float: left;
+        margin: 0 0.107em 0 0;
+    }   
+
+    & + p {
+        &:first-letter {
+            font-size: 1em;
+            line-height: 1.25em;
+            float: none;
+            margin: 0;
+        }
+    }
+}

metadata

@@ -0,0 +1,73 @@
+--- !ruby/object:Gem::Specification
+name: compass.takitapart.framework
+version: !ruby/object:Gem::Version
+  version: 0.0.2
+  prerelease: 
+platform: ruby
+authors:
+- Bob VanderClay
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2012-10-02 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: compass
+  requirement: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0.11'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0.11'
+description: A semantic, fluid, responsive framework for compass.
+email: bob@vanderclay.net
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- README.md
+- lib/takitapart.rb
+- stylesheets/_takitapart.scss
+- stylesheets/takitapart/_color.scss
+- stylesheets/takitapart/_config.scss
+- stylesheets/takitapart/_form.scss
+- stylesheets/takitapart/_grid.scss
+- stylesheets/takitapart/_normalize.scss
+- stylesheets/takitapart/_print.scss
+- stylesheets/takitapart/_responsive.scss
+- stylesheets/takitapart/_takitapart-color.scss
+- stylesheets/takitapart/_typography.scss
+- stylesheets/takitapart/_utility.scss
+homepage: http://framework.takitapart.net/
+licenses: []
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  none: false
+  requirements:
+  - - ! '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  none: false
+  requirements:
+  - - ! '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: 
+rubygems_version: 1.8.24
+signing_key: 
+specification_version: 3
+summary: A semantic, fluid, responsive framework for compass.
+test_files: []