titon-toolkit 0.9.4 → 0.10.0

data/license.md

@@ -0,0 +1,23 @@
+Copyright (c) 2013, The Titon Project
+All rights reserved.
+
+Redistribution and use 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.
+
+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 HOLDER 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/readme.md

@@ -0,0 +1,93 @@
+# Toolkit v0.10.0 #
+
+Toolkit is a collection of very powerful user-interface components and utility classes.
+Each component represents encapsulated HTML, CSS and JS functionality for role specific page elements.
+
+Titon makes use of the latest and greatest technology. This includes CSS3 for animation (fade, slide, etc),
+Sass for CSS pre-processing, Grunt for task and package management, and Intern for unit testing.
+
+#### Requirements ####
+* **HTML5**
+* **CSS3**
+* **MooTools 1.4** (for JS components)
+    * Core
+    * More/Class.Binds
+    * More/Elements.From
+    * More/Element.Shortcuts
+    * More/Locale
+    * More/Drag (optional: Modal)
+    * More/Array.Extras (optional: Flyout)
+    * More/Element.Position (optional: Tooltip)
+    * More/Element.Event.Pseudos (optional: Tooltip)
+
+#### Tested Against ####
+* Chrome 26, 28
+* Firefox 20, 23
+* Internet Explorer 10
+* Opera 12
+* Safari 5
+
+## Javascript Components ##
+#### Modules ####
+* `Accordion` - Provides collapsible support to a list of sections
+* `Blackout` - Displays a transparent black element over the document
+* `Carousel` - Provides a 16:9 responsive carousel with panels that slide or fade in
+* `Flyout` - Displays nested flyout menus that appear below an element that activates it
+* `Modal` - Displays dynamic modals that will display above the content
+* `Popover` - Displays dynamic notification elements over an element
+* `Showcase` - Provides a lightbox style image gallery
+* `Tabs` - Provides tabbed support to an element containing navigation tabs and sections
+* `Tooltip` - Displays dynamic tooltips over an element or the mouse cursor
+* `TypeAhead` - Displays a list of possible options below an input while typing
+
+#### Utilities ####
+* `LazyLoad` - Provides an easy way to lazy-load images (inline and background) while scrolling
+* `Matrix` - Reorganizes elements into a modular cascading grid (masonry style)
+* `Pin` - Pin an element in a container that stays within the viewport while scrolling
+* `Toggle` - Toggles the display of a target element; useful for triggering transitions
+
+#### Extensions ####
+Titon also provides classes that build upon MooTools itself. These classes do not require the Titon library.
+
+* `Timers` - Provides timer and interval management within the class layer
+* `Cache` - Provides local and session storage within the class layer
+
+## CSS Components ##
+#### Layout ####
+* `Base` - Provides utility and helper classes
+* `Code` - Styles for code blocks
+* `Form` - Allows for vertical, horizontal and inline forms; also provides default styles
+* `Grid` - Implements a fluid 12 column grid system with responsive support for all devices
+* `InputGroup` - Allows for the grouping of inputs with buttons and static blocks
+* `Responsive` - Responsive classes for mobile, tablet and desktop resolutions
+* `Table` - Styles for tables
+* `Typography` - Resets and default styles for typography
+
+#### UI ####
+* `Alert` - Styles for block level notification messages
+* `Breadcrumbs` - Styles for bread crumb navigation trails
+* `Button` - Styles for generic cross-browser compatible buttons
+* `ButtonGroup` - Allows for the grouping of multiple buttons into 1 visual styled button
+* `Dropdown` - Allows for toggleable dropdown menus with support for nested menus
+* `Icon` - Allows for inline image sprites to be used at 12, 16, 24, 32, and 64 sizes
+* `Label` - Styles for inline tag labels
+* `Badge` - Styles for inline notification bubbles
+* `Pagination` - Styles for pagination lists
+* `Pin` - Animations for element pinning
+* `Progress` - Basic styles for progress bars
+
+#### Themes ####
+* `Titon` - Titon specific theme that mimics Twitter Bootstrap
+* `TomorrowNight` - Tomorrow Night theme for all Titon components
+
+## Authors ##
+* Miles Johnson - https://github.com/milesj
+
+#### Third Party ####
+* `Normalize.css` provided by Nicolas Gallagher
+* `Iconic` icon set provided by P.J. Onori
+
+## Known Issues ##
+* Slide in modal animations do not work correctly in Chrome/IE
+* Flip modal animations do not work in Opera
+* Tooltip positioning does not work in Opera

data/src/lib/titon-toolkit.rb

@@ -3,6 +3,6 @@ require 'compass'
 root = File.join(File.dirname(__FILE__), "..")
 
 Compass::Frameworks.register("toolkit",
-	:stylesheets_directory => File.join(root, "scss"),
-	:templates_directory => File.join(root, "templates")
+    :stylesheets_directory => File.join(root, "scss"),
+    :templates_directory => File.join(root, "templates")
 )

data/src/scss/toolkit.scss

@@ -1,7 +1,7 @@
 /**
- * @copyright	Copyright 2010-2013, The Titon Project
- * @license		http://opensource.org/licenses/bsd-license.php
- * @link		http://titon.io
+ * @copyright   2010-2013, The Titon Project
+ * @license     http://opensource.org/licenses/bsd-license.php
+ * @link        http://titon.io
  */
 
 @import "normalize";

data/src/scss/toolkit/effects/visual.scss

@@ -1,7 +1,7 @@
 /**
- * @copyright	Copyright 2010-2013, The Titon Project
- * @license		http://opensource.org/licenses/bsd-license.php
- * @link		http://titon.io
+ * @copyright   2010-2013, The Titon Project
+ * @license     http://opensource.org/licenses/bsd-license.php
+ * @link        http://titon.io
  */
 
 @import "../common";
@@ -9,67 +9,67 @@
 //-------------------- Gloss --------------------//
 
 .visual-gloss {
-	&:after {
-		content: "";
-		position: absolute;
-		width: 100%;
-		height: 60%;
-		top: 1%;
-		left: 0;
-		border-radius: 0 0 2rem 2rem / 0 0 1rem 1rem;
-		@include background-image(linear-gradient(left, white(.3) 0%, white(0) 50%, white(.3) 100%));
-	}
+    &:after {
+        content: "";
+        position: absolute;
+        width: 100%;
+        height: 60%;
+        top: 1%;
+        left: 0;
+        border-radius: 0 0 2rem 2rem / 0 0 1rem 1rem;
+        @include background-image(linear-gradient(left, white(.3) 0%, white(0) 50%, white(.3) 100%));
+    }
 
-	&.round:after {
-		border-radius: .2rem .2rem 2rem 2rem / .5rem .5rem 1rem 1rem;
-		width: 98%;
-		left: 1.5%;
-	}
+    &.round:after {
+        border-radius: .2rem .2rem 2rem 2rem / .5rem .5rem 1rem 1rem;
+        width: 98%;
+        left: 1.5%;
+    }
 
-	&.pill:after,
-	&.oval:after,
-	&.skew:after {
-		width: 90%;
-		left: 5.5%;
-	}
+    &.pill:after,
+    &.oval:after,
+    &.skew:after {
+        width: 90%;
+        left: 5.5%;
+    }
 
-	&.pill:after { border-radius: 1rem 1rem 2rem 2rem / 1rem 1rem 1rem 1rem; }
-	&.oval:after { border-radius: 5rem 5rem 4rem 4rem / 1.5rem 1.5rem 1.5rem 1.5rem; }
-	&.skew:after { border-radius: 1rem 1rem 3rem 3rem / 1rem 1rem 2rem 2rem; }
+    &.pill:after { border-radius: 1rem 1rem 2rem 2rem / 1rem 1rem 1rem 1rem; }
+    &.oval:after { border-radius: 5rem 5rem 4rem 4rem / 1.5rem 1.5rem 1.5rem 1.5rem; }
+    &.skew:after { border-radius: 1rem 1rem 3rem 3rem / 1rem 1rem 2rem 2rem; }
 }
 
 //-------------------- Reflection --------------------//
 
 .visual-reflect:after {
-	content: "";
-	position: absolute;
-	width: 100%;
-	height: 50%;
-	top: 0;
-	left: 0;
-	@include background-image(linear-gradient(top, white(0), white(.3)));
+    content: "";
+    position: absolute;
+    width: 100%;
+    height: 50%;
+    top: 0;
+    left: 0;
+    @include background-image(linear-gradient(top, white(0), white(.3)));
 }
 
 //-------------------- Glare --------------------//
 
 .visual-glare:after {
-	content: "";
-	position: absolute;
-	width: 100%;
-	height: 100%;
-	top: 0;
-	left: 0;
-	@include background-image(linear-gradient(160deg, white(.5) 0%, white(.1) 50%, white(0) 50%, white(.3) 100%));
+    content: "";
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    @include background-image(linear-gradient(160deg, white(.5) 0%, white(.1) 50%, white(0) 50%, white(.3) 100%));
 }
 
 //-------------------- Popout --------------------//
 
 .visual-popout {
-	box-shadow: 0 6px 0 0 black(.25) !important;
-	top: -3px;
+    box-shadow: 0 6px 0 0 black(.25) !important;
+    top: -3px;
 
-	&:active {
-		box-shadow: 0 3px 0 0 black(.5) !important;
-		top: 0;
-	}
+    &:active {
+        box-shadow: 0 3px 0 0 black(.5) !important;
+        top: 0;
+    }
 }

data/src/scss/toolkit/layout/base.scss

@@ -1,7 +1,7 @@
 /**
- * @copyright	Copyright 2010-2013, The Titon Project
- * @license		http://opensource.org/licenses/bsd-license.php
- * @link		http://titon.io
+ * @copyright   2010-2013, The Titon Project
+ * @license     http://opensource.org/licenses/bsd-license.php
+ * @link        http://titon.io
  */
 
 @import "../common";
@@ -49,11 +49,11 @@ button[disabled] { cursor: not-allowed !important; pointer-events: none; }
 .caret-down,
 .caret-left,
 .caret-right {
-	@include reset-inline-block;
-	border: 5px solid transparent;
-	content: "";
-	height: 0;
-	width: 0;
+    @include reset-inline-block;
+    border: 5px solid transparent;
+    content: "";
+    height: 0;
+    width: 0;
 }
 
 .caret-up { border-bottom-color: $foreground-color; }
@@ -63,31 +63,31 @@ button[disabled] { cursor: not-allowed !important; pointer-events: none; }
 
 // Close
 .x {
-	@include reset-inline-block;
-	color: $foreground-color;
-	font: bold 1.5rem/100% Arial, sans-serif;
-	text-transform: uppercase;
+    @include reset-inline-block;
+    color: $foreground-color;
+    font: bold 1.5rem/100% Arial, sans-serif;
+    text-transform: uppercase;
 }
 
 .close {
-	@include reset-inline-block;
-	width: 30px;
-	height: 30px;
-	line-height: 30px;
-	text-align: center;
-	background: white(.5);
-	border-radius: 2px;
-	cursor: pointer;
-
-	.x {
-		color: black(.5);
-		position: relative;
-		top: -1px;
-	}
-
-	&:hover {
-		background: white(.8);
-
-		.x { color: black(.75); }
-	}
+    @include reset-inline-block;
+    width: 30px;
+    height: 30px;
+    line-height: 30px;
+    text-align: center;
+    background: white(.5);
+    border-radius: 2px;
+    cursor: pointer;
+
+    .x {
+        color: black(.5);
+        position: relative;
+        top: -1px;
+    }
+
+    &:hover {
+        background: white(.8);
+
+        .x { color: black(.75); }
+    }
 }

data/src/scss/toolkit/layout/code.scss

@@ -1,7 +1,7 @@
 /**
- * @copyright	Copyright 2010-2013, The Titon Project
- * @license		http://opensource.org/licenses/bsd-license.php
- * @link		http://titon.io
+ * @copyright   2010-2013, The Titon Project
+ * @license     http://opensource.org/licenses/bsd-license.php
+ * @link        http://titon.io
  */
 
 @import "../common";
@@ -10,52 +10,52 @@ code,
 var,
 kbd,
 pre {
-	font: normal .8rem/115% Consolas, Monaco, 'Andale Mono', monospace;
+    font: normal .8rem/115% Consolas, Monaco, 'Andale Mono', monospace;
 }
 
 code,
 var,
 kbd {
-	display: inline-block;
-	background: $gray-dark;
-	border-radius: 2px;
-	padding: 2px 4px;
+    display: inline-block;
+    background: $gray-dark;
+    border-radius: 2px;
+    padding: 2px 4px;
 }
 
 pre {
-	padding: $padding;
-	margin: $margin 0;
-	background: $gray-light;
-	border: 1px solid $gray-dark;
-	border-radius: 3px;
-	text-align: left;
-	direction: ltr;
-	white-space: pre;
-	word-spacing: normal;
-	font-size: .9rem;
-	overflow-x: auto;
+    padding: $padding;
+    margin: $margin 0;
+    background: $gray-light;
+    border: 1px solid $gray-dark;
+    border-radius: 3px;
+    text-align: left;
+    direction: ltr;
+    white-space: pre;
+    word-spacing: normal;
+    font-size: .9rem;
+    overflow-x: auto;
 
-	code {
-		padding: 0;
-		margin: 0;
-		color: inherit;
-		font: inherit;
-		white-space: pre-wrap;
-		background: transparent;
-		border: none;
-	}
+    code {
+        padding: 0;
+        margin: 0;
+        color: inherit;
+        font: inherit;
+        white-space: pre-wrap;
+        background: transparent;
+        border: none;
+    }
 
-	&.code--scrollable {
-		max-height: 350px;
-		overflow-y: auto;
-	}
+    &.code--scrollable {
+        max-height: 350px;
+        overflow-y: auto;
+    }
 }
 
 kbd {
-	background: #fff;
-	position: relative;
-	border: 1px solid $gray-dark;
-	border-top-color: $gray-dark;
-	box-shadow: 0 2px 0 1px $gray-darkest;
-	top: -3px;
+    background: #fff;
+    position: relative;
+    border: 1px solid $gray-dark;
+    border-top-color: $gray-dark;
+    box-shadow: 0 2px 0 1px $gray-darkest;
+    top: -3px;
 }

data/src/scss/toolkit/layout/form.scss

@@ -1,7 +1,7 @@
 /**
- * @copyright	Copyright 2010-2013, The Titon Project
- * @license		http://opensource.org/licenses/bsd-license.php
- * @link		http://titon.io
+ * @copyright   2010-2013, The Titon Project
+ * @license     http://opensource.org/licenses/bsd-license.php
+ * @link        http://titon.io
  */
 
 @import "../common";
@@ -9,20 +9,20 @@
 form { text-align: left; }
 
 fieldset {
-	padding: $padding 0;
-	margin: 0;
-	border: 0;
-	border-top: 1px solid $gray-dark;
-
-	&.legendless {
-		border: 0;
-		padding: 0;
-	}
+    padding: $padding 0;
+    margin: 0;
+    border: 0;
+    border-top: 1px solid $gray-dark;
+
+    &.legendless {
+        border: 0;
+        padding: 0;
+    }
 }
 
 legend {
-	font-size: 1.3rem;
-	padding-right: $padding;
+    font-size: 1.3rem;
+    padding-right: $padding;
 }
 
 select[multiple],
@@ -30,129 +30,129 @@ select[size] { height: auto; }
 
 // Reset browser styles
 input::-moz-focus-inner {
-	padding: 0;
-	border: 0;
+    padding: 0;
+    border: 0;
 }
 
 // Required values to match browser restrictions
 label,
 .input-static {
-	font-size: inherit;
-	line-height: normal;
+    font-size: inherit;
+    line-height: normal;
 }
 
 //-------------------- Inputs --------------------//
 
 .input,
 .input-static {
-	@include reset-inline-block;
-	border: 1px solid $gray-dark;
-	font-size: $medium-size;
-	padding: $medium-padding;
+    @include reset-inline-block;
+    border: 1px solid $gray-dark;
+    font-size: $medium-size;
+    padding: $medium-padding;
 }
 
 .input {
-	background: $gray-lightest;
-	border-radius: $round;
-	@include transition(all .3s);
-
-	&:hover { border-color: $gray-darkest; }
-	&:focus { border-color: $info; box-shadow: 0 0 5px $info-light; outline: 0; }
-
-	@include disabled-state {
-		cursor: not-allowed;
-		color: $gray-darkest;
-		border-color: $gray;
-	}
-
-	&[readonly] {
-		color: $gray-darkest;
-		border: 1px solid $gray-dark;
-		box-shadow: none;
-	}
+    background: $gray-lightest;
+    border-radius: $round;
+    @include transition(all .3s);
+
+    &:hover { border-color: $gray-darkest; }
+    &:focus { border-color: $info; box-shadow: 0 0 5px $info-light; outline: 0; }
+
+    @include disabled-state {
+        cursor: not-allowed;
+        color: $gray-darkest;
+        border-color: $gray;
+    }
+
+    &[readonly] {
+        color: $gray-darkest;
+        border: 1px solid $gray-dark;
+        box-shadow: none;
+    }
 }
 
 .input-static {
-	background: transparent;
-	border-color: transparent;
-	padding-left: 0;
-	padding-right: 0;
+    background: transparent;
+    border-color: transparent;
+    padding-left: 0;
+    padding-right: 0;
 }
 
 select.input { padding: $medium-padding - .05; } // fixes vertical alignment
 select.input[multiple] { min-height: 150px; max-height: 500px; }
 
 textarea.input {
-	line-height: 135%;
-	min-height: 150px;
+    line-height: 135%;
+    min-height: 150px;
 }
 
 .radio,
 .checkbox {
-	display: inline-block;
-	vertical-align: middle;
-	cursor: pointer;
-
-	input[type="checkbox"],
-	input[type="radio"] {
-		vertical-align: middle;
-		position: relative;
-		top: -1px;
-		margin-right: 3px;
-	}
+    display: inline-block;
+    vertical-align: middle;
+    cursor: pointer;
+
+    input[type="checkbox"],
+    input[type="radio"] {
+        vertical-align: middle;
+        position: relative;
+        top: -1px;
+        margin-right: 3px;
+    }
 }
 
 //-------------------- Fields, Labels --------------------//
 
 .field {
-	margin-bottom: $margin;
+    margin-bottom: $margin;
 
-	&.is-required {
-		.field-label { font-weight: bold; }
-	}
+    &.is-required {
+        .field-label { font-weight: bold; }
+    }
 
-	@include field-style;
+    @include field-style;
 }
 
 .field-label {
-	display: block;
-	vertical-align: middle;
-	margin-bottom: 7px;
+    display: block;
+    vertical-align: middle;
+    margin-bottom: 7px;
 }
 
 .field-help {
-	margin-top: 7px;
-	font-size: $small-size;
+    margin-top: 7px;
+    font-size: $small-size;
 }
 
 .form-actions {
-	text-align: center;
+    text-align: center;
 }
 
 //-------------------- Modifiers --------------------//
 
 .form--horizontal {
-	.field { @include grid-row; }
+    .field { @include grid-row; }
 
-	.field-label {
-		text-align: right;
-		border: 1px solid transparent; // matches input sizes
-		padding-top: $medium-padding;
-	}
+    .field-label {
+        text-align: right;
+        border: 1px solid transparent; // matches input sizes
+        padding-top: $medium-padding;
+    }
 
-	.field-col { padding-left: $margin; }
+    .field-col { padding-left: $margin; }
 }
 
 .form--inline {
-	.field,
-	.field-label,
-	.form-actions {
-		display: inline-block;
-		vertical-align: middle;
-		margin-right: $margin;
-		margin-bottom: $margin / 2;
-	}
-
-	.field-label { margin: 0 ($margin / 2) 0 0; }
-	.field-help { display: none; }
+    .field,
+    .field-label,
+    .form-actions {
+        display: inline-block;
+        vertical-align: middle;
+        margin-right: $margin;
+        margin-bottom: $margin / 2;
+    }
+
+    .field-label { margin: 0 ($margin / 2) 0 0; }
+    .field-help { display: none; }
 }