titon-toolkit 1.0.0.rc1 → 1.0.0.rc.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 642d038256be3a9201f7a28cbc2aaa5f3458f42a
-  data.tar.gz: 609d7970a0d8e4bc24af97dfc7349811ae9f20ea
+  metadata.gz: fc30641f32e37d76624fe6ad5b150e5813da1286
+  data.tar.gz: 2611239a2d146aa078fee9fd5f9c1f4c581a1c07
 SHA512:
-  metadata.gz: e5a8d74277b44630e6ad4b1ea20a0c17a961a2813dff0e7a46870ed6c3dbc6793849135a41f52ee672c1045ca401d12e534d23db5ef4d9e18a8ee25a62cedf04
-  data.tar.gz: 333f1c3974501a0a7469b6b54ebd7b6230241fe7619fff9bae50cac1cea2679aa83f363c45771110b6ac414f1b29951d57bb58566f8483f816450eeebb6ece5b
+  metadata.gz: 21871c29c0afb5e6f976fefa941547429220db7ab65ce79ed5f74504aca057dbb7012c6d1075026f3865d25f40ec24a49a044808797e44ad8356860336e19ab0
+  data.tar.gz: 1f7851607db03b0070ef94f2c91566377e37df6915f8ad205235d8fdbe0aa6fa387cbf3519c7d37cc495573e7d436f1cfe25dcca23e503c5be209aa74f35048c

data/readme.md

@@ -1,4 +1,4 @@
-# Toolkit v1.0.0 RC1 #
+# Toolkit v1.0.0 RC2 #
 
 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.
@@ -6,11 +6,22 @@ Each component represents encapsulated HTML, CSS and JS functionality for role s
 Titon makes use of the latest and greatest technology. This includes CSS3 for animation (fade, slide, etc),
 Sass for CSS pre-processing, and Grunt for task and package management.
 
+#### Why Toolkit? ####
+
+Toolkit was built from the ground up with the following concepts and philosophies in mind.
+If any of these concepts align with your thought process or your projects requirements, than Toolkit is right for you.
+
+* Mobile first design philosophy
+* Progressive enhancement and graceful degradation
+* Cascading CSS inheritance
+* Configuration over convention
+* Responsive and fluid as first class
+* Relative scaling with `em` and `rem`
+* Animations and transitions purely with CSS
+
 #### Demo ####
 A temporary demo can be found here: http://titon.io/toolkit
 
-It's literally the examples folder within this repository.
-
 #### Requirements ####
 * **HTML5**
 * **CSS3**
@@ -22,7 +33,7 @@ It's literally the examples folder within this repository.
     * More/Element.Shortcuts
     * More/Element.Measure
     * More/Drag (optional for Modal)
-    * More/Element.Event.Pseudos (for Tooltip)
+    * More/Element.Event.Pseudos (for LazyLoad, Pin, Stalker, Tooltip)
 
 #### Browser Support ####
 
@@ -63,6 +74,7 @@ Furthermore, the following Toolkit components do not work in IE8: Input, Matrix.
 * `Pin` - Pin an element in a container that stays within the viewport while scrolling
 * `Popover` - Displays dynamic notification elements over an element
 * `Showcase` - Provides a lightbox style image gallery
+* `Stalker` - Monitors the scroll of an element and notifies a target when a marker is reached
 * `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
@@ -108,9 +120,4 @@ 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
-
-## To Do ##
-* Guide component
-* Marquee component
-* Custom inputs component
+* Flip modal animations do not work in Opera

data/roadmap.md

@@ -0,0 +1,25 @@
+# Toolkit Roadmap #
+
+All releases will contain bug fixing and polishing for current features.
+
+### 1.1.0 - December 2013 ###
+* Guide - A component that displays introduction guides (popovers) in a sequential order. Useful for show casing new features and functionality.
+* Divider - A component for dividing content horizontally or vertically.
+
+### 1.2.0 - January 2014 ###
+* Marquee - A component that displays multiple slides at once and allows for cycling through a variable amount. A sister component to the carousel.
+* Mask - A component that will mask a target element with a blackout.
+
+### 1.3.0 - February 2014 ###
+* Step - A component that highlights a step in a series of consecutive steps (represented by an arrow based navigation).
+* Dialog - A component that prompts the user for an action. Sister to the modal component.
+
+### 2.0.0 - TBD ###
+* Remove the MooTools port.
+* Drop IE 8/9 support and upgrade to jQuery 2.
+* Replace JS option callbacks with namespaced element events.
+* Refactor the JS component layer and reduce complex implementation.
+* Move component options from the jQuery plugin to the Toolkit component.
+* Separate component transitions into a stand alone layer that can be used anywhere.
+* Refactor in-between loading states. Possibly into a new component? CSS or JS based?
+* Replace examples with unit tests.

data/scss/toolkit/_common.scss

@@ -1,15 +1,4 @@
 
-//-------------------- Imports --------------------//
-
-@import "mixins/layout";
-@import "mixins/grid";
-@import "mixins/responsive";
-@import "compass/css3/box-sizing";
-@import "compass/css3/images";
-@import "compass/css3/transition";
-@import "compass/css3/transform";
-@import "compass/css3/filter";
-
 //-------------------- Compass --------------------//
 
 $experimental-support-for-mozilla: true !default;
@@ -33,6 +22,9 @@ $foreground-color: #2d2d2d !default;
 
 //-------------------- Sizes --------------------//
 
+$base-size: 14px !default;
+$base-size-width: ($base-size * 100) / 1px;
+
 $padding: .75rem !default;
 $margin: 1.25rem !default;
 
@@ -132,4 +124,18 @@ $grid-columns-small: 6 !default;
 
 $grid-columns-desktop: 12 !default;
 $grid-columns-tablet: 6 !default;
-$grid-columns-mobile: 3 !default;
+$grid-columns-mobile: 3 !default;
+
+$grid-width: 100% !default;
+$grid-gutter: 0 !default;
+
+//-------------------- Imports --------------------//
+
+@import "mixins/layout";
+@import "mixins/grid";
+@import "mixins/responsive";
+@import "compass/css3/box-sizing";
+@import "compass/css3/images";
+@import "compass/css3/transition";
+@import "compass/css3/transform";
+@import "compass/css3/filter";

data/scss/toolkit/components/breadcrumbs.scss

@@ -15,6 +15,8 @@
     ul, ol {
         margin: 0;
         padding: 0;
+
+        @include clear-fix;
     }
 
     li {
@@ -54,6 +56,4 @@
 
         .divider { margin-left: $large-padding; }
     }
-
-    @include clear-fix;
 }

data/scss/toolkit/components/icon.scss

@@ -8,6 +8,8 @@
 
 [class*="icon-"] {
     @include reset-inline-block;
+    background-repeat: no-repeat;
+
     @include disabled-state { opacity: $disabled-opacity; }
 }
 

data/scss/toolkit/components/pagination.scss

@@ -10,26 +10,27 @@
     display: block;
     margin: $margin 0;
 
-    ul,
-    li {
-        @include reset-inline-block;
-        list-style: none;
+    ul, ol {
+        margin: 0;
+        padding: 0;
+
+        @include clear-fix;
     }
 
     li {
+        position: relative;
+        list-style: none;
         float: left;
         margin-right: $padding / 2;
 
-        .button {
-            float: left;
+        > a {
+            display: block;
         }
 
         &.is-active {
             z-index: 1;
         }
     }
-
-    @include clear-fix;
 }
 
 //-------------------- Modifiers --------------------//
@@ -40,10 +41,11 @@
         margin-right: 0;
 
         &:first-child { margin-left: 0; }
+
         &:hover,
-        .button:hover { z-index: 1; }
+        > a:hover { z-index: 1; }
 
-        .button {
+        > a {
             margin: 0;
             border-radius: 0;
         }
@@ -54,12 +56,12 @@
             border-radius: $round;
         }
 
-        li:first-child .button {
+        li:first-child > a {
             border-top-left-radius: $round;
             border-bottom-left-radius: $round;
         }
 
-        li:last-child .button {
+        li:last-child > a {
             border-top-right-radius: $round;
             border-bottom-right-radius: $round;
         }

data/scss/toolkit/components/pin.scss

@@ -6,6 +6,10 @@
 
 @import "../common";
 
-.pin {
-    @include transition(top 1s, right .5s, left .5s);
+.pin.sticky {
+    @include transition(top 1s ease-in-out, right .5s ease-in-out, left .5s ease-in-out);
+}
+
+.pin.slide {
+    @include transition(top .5s linear, right .5s linear, left .5s linear);
 }

data/scss/toolkit/layout/responsive.scss

@@ -12,6 +12,7 @@ img, video, canvas {
     height: auto;
 }
 
+.show-retina,
 .show-print { display: none; }
 
 @if $responsive-size == "device" or $responsive-size == "both" {
@@ -72,7 +73,18 @@ img, video, canvas {
 }
 
 // Type states
+@include if-retina {
+    .hide-retina { display: none; }
+    .show-retina { display: block; }
+    tr.show-retina { display: table-row; }
+    td.show-retina,
+    th.show-retina { display: table-cell; }
+}
+
 @media print {
-    .show-print { display: block; }
     .hide-print { display: none; }
+    .show-print { display: block; }
+    tr.show-print { display: table-row; }
+    td.show-print,
+    th.show-print { display: table-cell; }
 }

data/scss/toolkit/layout/typography.scss

@@ -6,6 +6,8 @@
 
 @import "../common";
 
+html { font-size: $base-size; }
+
 h1 { font-size: 3rem; }
 h2 { font-size: 2.5rem; }
 h3 { font-size: 2.1rem; }

data/scss/toolkit/mixins/_grid.scss

@@ -1,14 +1,31 @@
 
+//$gutter-width: if($grid-gutter, to-percent($grid-gutter), 0);
+
 // Calculate a width using a grid cell
 @function grid-span($columns, $n) {
-    @return (100% / $columns) * $n;
+    $row-width: 100%;
+
+    // If a gutter is set, remove width based on the sum of the gutter columns
+    /*@if $grid-gutter {
+        $row-width: $row-width - ($gutter-width * ($columns - 1));
+    }*/
+
+    // The column width should span a division of the total width
+    $span-width: ($row-width / $columns) * $n;
+
+    // If a gutter is set, increase the column width to fill in the missing gaps
+    /*@if $grid-gutter and $n > 1 {
+        $span-width: $span-width + (($n - 1) * $gutter-width);
+    }*/
+
+    @return $span-width;
 }
 
 // Styles for the row containing the columns
 @mixin grid-row() {
     text-align: left;
-    width: 100%;
-    max-width: 100%;
+    width: $grid-width;
+    max-width: $grid-width;
 
     @include clear-fix;
 }
@@ -18,4 +35,12 @@
     position: relative;
     min-height: 1px;
     float: left;
+
+    /*@if $grid-gutter {
+        margin-right: $gutter-width;
+
+        &:last-child {
+            margin-right: 0;
+        }
+    }*/
 }

data/scss/toolkit/mixins/_layout.scss

@@ -76,4 +76,32 @@
 
 @function white($opacity){
     @return rgba(255, 255, 255, $opacity);
+}
+
+//-------------------- Conversions --------------------//
+
+// Remove the unit and return the integer
+@function strip-unit($value) {
+    @return ($value / ($value * 0 + 1));
+}
+
+// Convert a unit value to a percentage while using $base-size as the reference
+@function to-percent($from) {
+    $from-unit: unit($from);
+    $value: $from;
+
+    @if $from-unit == '%' {
+        @return $from;
+
+    } @else if $from-unit == 'px' {
+        // Do nothing
+
+    } @else if $from-unit == 'em' or $from-unit == 'rem' {
+        $value: (strip-unit($from) * strip-unit($base-size)) * 1px;
+
+    } @else {
+        @warn 'Unknown conversion unit type.';
+    }
+
+    @return percentage(($value / $base-size) / 100);
 }

data/scss/toolkit/mixins/_responsive.scss

@@ -29,6 +29,15 @@
     }
 }
 
+@mixin if-retina {
+    @media
+        only screen and (-webkit-min-device-pixel-ratio: 2),
+        only screen and (-moz-min-device-pixel-ratio: 2),
+        only screen and (min-device-pixel-ratio: 2) {
+        @content;
+    }
+}
+
 // Either support desktop-first or mobile-first responsive pattern
 @mixin do-responsive($desktop, $mobile) {
     @if $responsive-design == "desktop" {

data/version.md

@@ -1 +1 @@
-1.0.0-rc1
+1.0.0-rc.2

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: titon-toolkit
 version: !ruby/object:Gem::Version
-  version: 1.0.0.rc1
+  version: 1.0.0.rc.2
 platform: ruby
 authors:
 - Titon
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2013-11-05 00:00:00.000000000 Z
+date: 2013-11-16 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sass
@@ -92,6 +92,7 @@ files:
 - scss/toolkit.scss
 - license.md
 - readme.md
+- roadmap.md
 - version.md
 homepage: http://titon.io
 licenses: