titon-toolkit 0.14.0 → 1.0.0.rc1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: d1877da81065120b8d59692a4d5976779e3c18b2
-  data.tar.gz: e80f6b1502deb01b3dff2a9a5f1fd6dcc4929c89
+  metadata.gz: 642d038256be3a9201f7a28cbc2aaa5f3458f42a
+  data.tar.gz: 609d7970a0d8e4bc24af97dfc7349811ae9f20ea
 SHA512:
-  metadata.gz: 56d5a8e9e9c58cea975f5ee53be72a08de641742633cc291d26916f2b2b2239e4f4adb9d23a8c910bd003915c10ed36b4086ec7f02c0496836f244d488b2c00e
-  data.tar.gz: 2f71d4940f0de9a354ec8ec37ef8588ebc51ce29936862c87edd37c0c9f1af489779e4b3a02b16cd6e359ac8fc59a77198a6945f0a05c6f33cec602cd7e5b42a
+  metadata.gz: e5a8d74277b44630e6ad4b1ea20a0c17a961a2813dff0e7a46870ed6c3dbc6793849135a41f52ee672c1045ca401d12e534d23db5ef4d9e18a8ee25a62cedf04
+  data.tar.gz: 333f1c3974501a0a7469b6b54ebd7b6230241fe7619fff9bae50cac1cea2679aa83f363c45771110b6ac414f1b29951d57bb58566f8483f816450eeebb6ece5b

data/readme.md

@@ -1,10 +1,10 @@
-# Toolkit v0.14.0 #
+# Toolkit v1.0.0 RC1 #
 
-Toolkit is a collection of very powerful user-interface components and utility classes.
+Titon 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.
+Sass for CSS pre-processing, and Grunt for task and package management.
 
 #### Demo ####
 A temporary demo can be found here: http://titon.io/toolkit
@@ -47,12 +47,16 @@ IE9 does not support CSS3 transitions and any type of animation will fallback to
 IE8 does not support CSS3 transitions, rem scaling, media queries and specific HTML 5 elements. To support IE8, the Toolkit `ie8.css` file must be included.
 To support media queries and responsiveness, use [respond.js](https://github.com/scottjehl/Respond). To support HTML 5 features, use [modernizr](http://modernizr.com).
 
+Furthermore, the following Toolkit components do not work in IE8: Input, Matrix.
+
 ## 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
+* `Dropdown` - Allows for toggleable dropdown menus with support for nested menus
 * `Flyout` - Displays nested flyout menus that appear below an element that activates it
+* `Input` - Replaces select boxes, checkboxes and radios with custom basic functionality
 * `LazyLoad` - Provides an easy way to lazy-load images (inline and background) while scrolling
 * `Matrix` - Reorganizes elements into a modular cascading grid (masonry style)
 * `Modal` - Displays dynamic modals that will display above the content
@@ -60,7 +64,6 @@ To support media queries and responsiveness, use [respond.js](https://github.com
 * `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
-* `Toggle` - Toggles the display of a target element; useful for triggering transitions
 * `Tooltip` - Displays dynamic tooltips over an element or the mouse cursor
 * `TypeAhead` - Displays a list of possible options below an input while typing
 
@@ -75,28 +78,25 @@ Titon also provides classes that build upon MooTools itself. These classes do no
 * `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
+* `Grid` - Implements a fluid 12 column grid system with responsive support for all devices
 * `Icon` - Allows for inline image sprites to be used at 12, 16, 24, 32, and 64 sizes
+* `InputGroup` - Allows for the grouping of inputs with buttons and static blocks
 * `Label` - Styles for inline tag labels
-* `Badge` - Styles for inline notification bubbles
+* `Notice` - Styles for block level notification messages
 * `Pagination` - Styles for pagination lists
 * `Pin` - Animations for element pinning
 * `Progress` - Basic styles for progress bars
+* `Table` - Styles for tables
 
 #### Themes ####
-* `Titon` - Titon specific theme that mimics Twitter Bootstrap
-* `TomorrowNight` - Tomorrow Night theme for all Titon components
+* `Titon` - Titon specific theme used for examples
 
 ## Authors ##
 * [Miles Johnson](https://github.com/milesj)
@@ -108,4 +108,9 @@ Titon also provides classes that build upon MooTools itself. These classes do no
 ## Known Issues ##
 * Zepto is currently not supported (too different of an API)
 * Slide in modal animations do not work correctly in Chrome/IE
-* Flip modal animations do not work in Opera
+* Flip modal animations do not work in Opera
+
+## To Do ##
+* Guide component
+* Marquee component
+* Custom inputs component

data/scss/ie8.scss

@@ -25,7 +25,11 @@ h4 { font-size: 28px; }
 h5 { font-size: 24px; }
 h6 { font-size: 18px; }
 
-.x { font-size: 24px; }
+.x,
+.arrow-up,
+.arrow-down,
+.arrow-left,
+.arrow-right { font-size: 24px; }
 
 .input,
 .input-static,
@@ -54,8 +58,6 @@ legend,
 }
 
 .type-ahead-desc,
-.label,
-.badge,
 .progress-bar {
     font-size: 9px;
 }
@@ -85,7 +87,7 @@ pre,
 .showcase-prev,
 .showcase-next,
 .showcase-tabs,
-.alert,
+.notice,
 .breadcrumbs a,
 .button {
     padding: $padding;
@@ -96,17 +98,17 @@ pre,
 .table.table--compact.table--sortable thead th a,
 .table.table--compact.table--sortable thead th span,
 .flyout ul li > a,
-.flyout ul li > .divider,
+.flyout-divider,
 .popover-head,
 .popover-body,
 .tooltip,
 .type-ahead ul li a
-.type-ahead ul li.heading,
+.type-ahead-heading,
 .breadcrumbs.small a,
 .button.small,
 .small .button,
 .dropdown li > a,
-.dropdown li.heading,
+.dropdown-heading,
 .type-ahead ul a {
     padding: $padding-small;
 }
@@ -122,7 +124,7 @@ blockquote { padding: 0 $padding; }
 legend { padding-right: $padding; }
 
 pre, p, ul, ol, hr,
-.alert,
+.notice,
 .breadcrumbs,
 .pagination {
     margin: $margin 0;
@@ -130,8 +132,9 @@ pre, p, ul, ol, hr,
 
 blockquote { margin: $margin; }
 
-.alert .close,
-.button-group + .button-group {
+.notice-close,
+.button-group + .button-group,
+.breadcrumbs a .divider {
     margin-left: $margin;
 }
 
@@ -149,27 +152,31 @@ blockquote { margin: $margin; }
 
 .form--inline  .field-label { margin: 0 ($margin / 2) 0 0; }
 .form--horizontal .field-col { padding-left: $margin; }
-.alert-title { margin: 0 0 ($margin / 2) 0; }
-.dropdown li.divider { margin: ($margin / 2) 0; }
+.notice { margin: 0 0 ($margin / 2) 0; }
+.dropdown-divider { margin: ($margin / 2) 0; }
 .pagination li { margin-right: $padding / 2; }
 
 .showcase-tabs { top: $padding; }
 .showcase-prev { left: $padding; }
 .showcase-next { right: $padding; }
 
+.label { padding: 5px; font-size: 10px; }
+.label.small { padding: 3px; font-size: 9px; }
+.label.large { padding: 8px; font-size: 12px; }
+
+.modal-close,
+.showcase-close { top: $padding; right: $padding; }
+
 // IE8 does not support rgba
 // So use solid colors instead
 
-.close .x { color: #000; }
-.close:hover { background: #fff; }
-
 .blackout { background: #000; filter: alpha(opacity=50); }
 
 .carousel-caption,
 .showcase-caption { background: #000; filter: alpha(opacity=70); }
 
 .carousel-tabs,
-.showcase-tabs { left: auto; right: auto; }
+.showcase-tabs { left: auto; right: auto; top: $padding; }
 
 .showcase-next,
 .showcase-prev,

data/scss/toolkit/_common.scss

@@ -1,16 +1,135 @@
 
-//-------------------- Toolkit --------------------//
+//-------------------- Imports --------------------//
 
-@import "variables";
 @import "mixins/layout";
 @import "mixins/grid";
 @import "mixins/responsive";
-@import "mixins/themes";
-
-//-------------------- Compass --------------------//
-
 @import "compass/css3/box-sizing";
 @import "compass/css3/images";
 @import "compass/css3/transition";
 @import "compass/css3/transform";
-@import "compass/css3/filter";
+@import "compass/css3/filter";
+
+//-------------------- Compass --------------------//
+
+$experimental-support-for-mozilla: true !default;
+$experimental-support-for-webkit: true !default;
+$experimental-support-for-opera: false !default;
+$experimental-support-for-microsoft: false !default;
+$experimental-support-for-khtml: false !default;
+
+$support-for-original-webkit-gradients: false !default;
+
+//-------------------- Colors --------------------//
+
+$gray-lightest: #fbfbfb !default;
+$gray-light: #f8f8f8 !default;
+$gray: #f5f5f5 !default;
+$gray-dark: #e5e5e5 !default;
+$gray-darkest: #c2c2c2 !default;
+
+$background-color: #fff !default;
+$foreground-color: #2d2d2d !default;
+
+//-------------------- Sizes --------------------//
+
+$padding: .75rem !default;
+$margin: 1.25rem !default;
+
+$small-size: .7rem !default;
+$small-padding: .5rem !default;
+
+$medium-size: inherit !default;
+$medium-padding: $padding !default;
+
+$large-size: 1.3rem !default;
+$large-padding: 1rem !default;
+
+//-------------------- States --------------------//
+
+$default: #929497 !default;
+$default-light: #d0d2d3 !default;
+$default-dark: #404041 !default;
+
+$info: #45c5eb !default;
+$info-light: #dbf1fa !default;
+$info-dark: #4067ab !default;
+
+$warning: #fcd04b !default;
+$warning-light: #ffebb5 !default;
+$warning-dark: #c87e00 !default;
+
+$success: #97cb6f !default;
+$success-light: #e7f2dd !default;
+$success-dark: #226b36 !default;
+
+$error: #f06060 !default;
+$error-light: #fdc5c1 !default;
+$error-dark: #b10e0e !default;
+
+//-------------------- Border Styles --------------------//
+
+$round: .2rem !default;
+
+$pill: 2rem !default;
+
+$oval-x: 7rem !default;
+$oval-y: 2.75rem !default;
+
+$skew-x: 1rem !default;
+$skew-y: 3rem !default;
+$skew: $skew-x $skew-y;
+$skew-reverse: $skew-y $skew-x;
+
+//-------------------- Opacity --------------------//
+
+$default-opacity: .5 !default;
+$disabled-opacity: $default-opacity !default;
+$blackout-opacity: $default-opacity !default;
+$carousel-opacity: $default-opacity !default;
+$showcase-opacity: $default-opacity !default;
+
+//-------------------- Transitions --------------------//
+
+$default-transition: .3s !default;
+$accordion-transition: $default-transition !default;
+$blackout-transition: $default-transition !default;
+$carousel-transition: 1s !default;
+$dropdown-transition: $default-transition !default;
+$flyout-transition: $default-transition !default;
+$lazyLoad-transition: $default-transition !default;
+$matrix-transition: $default-transition !default;
+$modal-transition: $default-transition !default;
+$progress-transition: $default-transition !default;
+$showcase-transition: $default-transition !default;
+$tooltip-transition: $default-transition !default;
+
+//-------------------- Transitions --------------------//
+
+$icon-animation: 1.5s !default;
+
+//-------------------- Responsive --------------------//
+
+$responsive-design: "mobile" !default; // mobile, desktop
+$responsive-size: "both" !default; // device, size, both
+
+$breakpoint-desktop: 1440px !default;
+$breakpoint-laptop: 1280px !default;
+$breakpoint-tablet-landscape: 1024px !default;
+$breakpoint-tablet-portrait: 768px !default;
+$breakpoint-mobile-landscape: 480px !default;
+$breakpoint-mobile-portrait: 320px !default;
+
+$breakpoint-small: 768px !default;
+$breakpoint-medium: 1280px !default;
+$breakpoint-large: 1440px !default;
+
+//-------------------- Grid --------------------//
+
+$grid-columns-large: 12 !default;
+$grid-columns-medium: 8 !default;
+$grid-columns-small: 6 !default;
+
+$grid-columns-desktop: 12 !default;
+$grid-columns-tablet: 6 !default;
+$grid-columns-mobile: 3 !default;

data/scss/toolkit/{modules → components}/accordion.scss

@@ -6,33 +6,13 @@
 
 @import "../common";
 
-$accordion-transition: $default-transition !default;
-
-/**
- * Should be used in conjunction with the JavaScript Titon.Tooltip module.
- *
- *    <ul class="accordion">
- *        <li>
- *            <header class="accordion-head">Title Bar</header>
- *            <section class="accordion-inner">
- *                <div class="accordion-body">Collapsible content</div>
- *            </section>
- *        </li>
- *    </ul>
- */
-
-.accordion,
-.accordion li {
+.accordion {
     list-style: none;
     text-align: left;
     margin: 0;
     padding: 0;
 }
 
-.accordion {
-    border: 1px solid $gray-dark;
-}
-
 .accordion-head {
     padding: $padding;
     background: $gray;
@@ -46,19 +26,17 @@ $accordion-transition: $default-transition !default;
     }
 }
 
-// Style this
 .accordion-body {
     padding: $padding;
 
     @include content-spacing;
 }
 
-// Inner is used for animations, do not style it!
-.accordion-inner {
+// Handle is used for animations, do not style it!
+.accordion-handle {
     overflow: hidden;
     position: relative;
     @include transition(all $accordion-transition ease-in-out);
 
-    &.show { height: auto; }
     &.hide { max-height: 0; } // don't include on base styles
 }

data/scss/toolkit/{modules → components}/blackout.scss

@@ -6,13 +6,6 @@
 
 @import "../common";
 
-$blackout-opacity: .5 !default;
-$blackout-transition: $default-transition !default;
-
-/**
- * Should be used in conjunction with the JavaScript Titon.Blackout module.
- */
-
 .blackout {
     position: fixed;
     top: 0;

data/scss/toolkit/{ui → components}/breadcrumbs.scss

@@ -6,24 +6,11 @@
 
 @import "../common";
 
-/**
- *    <nav class="breadcrumbs">
- *        <ol>
- *            <li><a href="">Home</a></li>
- *            <li><a href="">Sub-page</a></li>
- *            <li><a href="">Sub-page</a></li>
- *            <li><a href="">Sub-page</a></li>
- *            <li><a href="">Current</a></li>
- *        </ol>
- *    </nav>
- */
-
 .breadcrumbs {
     text-align: left;
     margin: $margin 0;
     background: $gray;
     border: 1px solid $gray-dark;
-    border-radius: $round;
 
     ul, ol {
         margin: 0;
@@ -34,16 +21,39 @@
         position: relative;
         list-style: none;
         float: left;
+
+        &:last-child {
+            .divider { display: none; }
+        }
     }
 
     a {
+        @include size-medium;
         display: block;
         line-height: 100%;
-        @include size-medium;
+        padding-right: 0;
+
+        .divider {
+            margin-left: $medium-padding;
+            color: $gray-darkest;
+            position: relative;
+            left: -1px;
+        }
     }
 
-    &.small a { @include size-small; }
-    &.large a { @include size-large; }
+    &.small a {
+        @include size-small;
+        padding-right: 0;
+
+        .divider { margin-left: $small-padding; }
+    }
+
+    &.large a {
+        @include size-large;
+        padding-right: 0;
+
+        .divider { margin-left: $large-padding; }
+    }
 
     @include clear-fix;
 }

data/scss/toolkit/{ui → components}/button-group.scss

@@ -6,14 +6,6 @@
 
 @import "../common";
 
-/**
- *    <div class="button-group pill">
- *        <a href="" class="button">Left Button</a>
- *        <a href="" class="button">Center Button</a>
- *        <a href="" class="button">Right Button</a>
- *    </div>
- */
-
 .button-group {
     @include reset-inline-block;
     white-space: nowrap;
@@ -103,6 +95,7 @@
     display: table;
     width: 100%;
 
+    > li,
     > .button {
         float: none;
         display: table-cell;

data/scss/toolkit/{ui → components}/button.scss

@@ -6,11 +6,6 @@
 
 @import "../common";
 
-/**
- *    <button type="button" class="button large round">Large Rounded Button</button>
- *    <a href="" class="button small pill">Small Pill Button</a>
- */
-
 .button {
     @include reset-inline-block;
     @include size-medium;

data/scss/toolkit/components/carousel.scss

@@ -0,0 +1,147 @@
+/**
+ * @copyright   2010-2013, The Titon Project
+ * @license     http://opensource.org/licenses/bsd-license.php
+ * @link        http://titon.io
+ */
+
+@import "../common";
+
+.carousel {
+    margin: 0 auto;
+    text-align: left;
+    background-color: #000;
+    position: relative;
+}
+
+.carousel-items {
+    /* 4:3 ratio */
+    padding-bottom: 75%;
+    width: 100%;
+    max-width: 100%;
+    overflow: hidden;
+    position: relative;
+
+    ul {
+        position: absolute;
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        top: 0;
+        left: 0;
+        @include transition(left $carousel-transition, top $carousel-transition);
+
+        > li {
+            width: 100%;
+            height: auto;
+            position: relative;
+
+            > img {
+                display: block;
+                width: 100%;
+                max-width: 100%;
+                height: auto;
+            }
+        }
+    }
+}
+
+.carousel-caption {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    padding: $padding;
+    color: #fff;
+    background: black(.7);
+
+    @include in-small {
+        font-size: $small-size;
+        padding: $small-padding;
+    }
+}
+
+.carousel-prev,
+.carousel-next {
+    display: block;
+    position: absolute;
+    padding: $padding;
+    width: auto;
+    height: auto;
+    z-index: 5;
+    opacity: $carousel-opacity;
+    top: 50%;
+    @include transform(translateY(-50%)); // move up 50% of their height
+
+    .arrow-left,
+    .arrow-right {
+        color: #fff;
+        font-size: 2rem;
+    }
+
+    &:hover { opacity: 1; }
+    &:focus { outline: none; }
+
+    // Large icons for large resolutions
+    @include if-tablet-landscape {
+        .arrow-left,
+        .arrow-right {
+            font-size: 3rem;
+        }
+    }
+}
+
+.carousel-prev { left: 0; }
+.carousel-next { right: 0; }
+
+.carousel-tabs {
+    position: absolute;
+    top: $padding;
+    left: 50%;
+    z-index: 5;
+    @include transform(translateX(-50%)); // move left 50% of their width
+}
+
+//-------------------- Animations --------------------//
+
+.carousel.slide {
+    .carousel-items ul {
+        @include clear-fix;
+
+        > li {
+            float: left;
+        }
+    }
+}
+
+.carousel.fade {
+    .carousel-items ul {
+        position: relative;
+
+        > li {
+            position: absolute;
+            top: 0;
+            left: 0;
+            opacity: 0;
+            z-index: 1;
+            @include transition(opacity $carousel-transition);
+
+            &.show { z-index: 2; }
+        }
+    }
+}
+
+//-------------------- Modifiers --------------------//
+
+.carousel.carousel--wide {
+    .carousel-items {
+        /* 16:9 ratio */
+        padding-bottom: 56.25%;
+    }
+}
+
+.carousel.carousel--square {
+    .carousel-items {
+        /* 1:1 ratio */
+        padding-bottom: 100%;
+    }
+}