titon-toolkit 0.11.2 → 0.12.0

data/readme.md

@@ -1,4 +1,4 @@
-# Toolkit v0.11.2 #
+# Toolkit v0.12.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.
@@ -6,27 +6,48 @@ 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, Grunt for task and package management, and Intern for unit testing.
 
+#### Demo ####
+
+A temporary demo can be found here: http://titon.io/toolkit
+
+It's literally the examples folder within this repository.
+
 #### Requirements ####
 * **HTML5**
 * **CSS3**
-* **MooTools 1.4** (for JS components)
-    * Core
+* **jQuery**
+* (or)
+* **MooTools**
     * 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)
+    * More/Element.Measure
+    * More/Drag (optional for Modal)
+    * More/Element.Event.Pseudos (for Tooltip)
+
+#### Browser Support ####
 
-#### Tested Against ####
+**Tested Against**
 * Chrome 26, 28
 * Firefox 20, 23
 * Internet Explorer 10
 * Opera 12
 * Safari 5
 
+**Suggested**
+* Chrome 11+
+* Firefox 4+
+* Internet Explorer 10+
+* Opera 11+
+* Safari 5+
+
+**What about IE8 and 9?**
+
+Toolkit works in older versions of IE, but...
+IE8 does not support em/rem scaling, media queries, and other CSS3 properties, so default styles and functionality look janky.
+Both IE8 and IE9 do not support CSS transitions or animations, so animation falls back to a simple show/hide.
+Compatibility for these browsers will be added in due time.
+
 ## Javascript Components ##
 #### Modules ####
 * `Accordion` - Provides collapsible support to a list of sections
@@ -86,6 +107,7 @@ Titon also provides classes that build upon MooTools itself. These classes do no
 * `Iconic` icon set provided by P.J. Onori
 
 ## 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
 * Tooltip positioning does not work in Opera

data/scss/toolkit/layout/grid.scss

@@ -6,59 +6,119 @@
 
 @import "../common";
 
-.grid {
+.grid,
+.row {
     @include grid-row;
 }
 
 // These should be the same for all sizes
-@for $i from 1 through $grid-columns {
-    $span: grid-span($i);
+.col[class*="span-"] {
+    @include grid-column;
+}
+
+@for $i from 1 through 12 {
+    $span: grid-span(12, $i);
 
     .span-#{$i} { width: $span; }
     .push-#{$i} { left: $span; }
     .pull-#{$i} { right: $span; }
 }
 
-// Mobile supports 3 columns
-.col[class*="span-"],
-.col[class*="mobile-"] {
-    @include grid-column;
-}
+// Determine which grid to use
+@if $responsive-size == "device" or $responsive-size == "both" {
 
-@for $i from 1 through ceil($grid-columns / 4) {
-    $span: grid-span($i * 4);
+    // Mobile supports 3 columns
+    @include in-mobile {
+        .col[class*="mobile-"] {
+            @include grid-column;
+        }
 
-    .col.mobile-#{$i} { width: $span; }
-    .col.mobile-push-#{$i} { left: $span; }
-    .col.mobile-pull-#{$i} { right: $span; }
-}
+        @for $i from 1 through $grid-columns-mobile {
+            $span: grid-span($grid-columns-mobile, $i);
 
-// Tablet supports 6 columns
-@include in-tablet {
-    .col[class*="tablet-"] {
-        @include grid-column;
+            .col.mobile-#{$i} { width: $span; }
+            .col.mobile-push-#{$i} { left: $span; }
+            .col.mobile-pull-#{$i} { right: $span; }
+        }
     }
 
-    @for $i from 1 through ceil($grid-columns / 2) {
-        $span: grid-span($i * 2);
+    // Tablet supports 6 columns
+    @include in-tablet {
+        .col[class*="tablet-"] {
+            @include grid-column;
+        }
+
+        @for $i from 1 through $grid-columns-tablet {
+            $span: grid-span($grid-columns-tablet, $i);
+
+            .col.tablet-#{$i} { width: $span; }
+            .col.tablet-push-#{$i} { left: $span; }
+            .col.tablet-pull-#{$i} { right: $span; }
+        }
+    }
+
+    // Desktop supports 12 columns
+    @include in-desktop {
+        .col[class*="desktop-"] {
+            @include grid-column;
+        }
+
+        @for $i from 1 through $grid-columns-desktop {
+            $span: grid-span($grid-columns-desktop, $i);
 
-        .col.tablet-#{$i} { width: $span; }
-        .col.tablet-push-#{$i} { left: $span; }
-        .col.tablet-pull-#{$i} { right: $span; }
+            .col.desktop-#{$i} { width: $span; }
+            .col.desktop-push-#{$i} { left: $span; }
+            .col.desktop-pull-#{$i} { right: $span; }
+        }
     }
+
 }
 
-// Desktop supports 12 columns
-@include in-desktop {
-    .col[class*="desktop-"] {
-        @include grid-column;
+@if $responsive-size == "size" or $responsive-size == "both" {
+
+    // Small supports 6 columns
+    @include in-small {
+        .col[class*="small-"] {
+            @include grid-column;
+        }
+
+        @for $i from 1 through $grid-columns-small {
+            $span: grid-span($grid-columns-small, $i);
+
+            .col.small-#{$i} { width: $span; }
+            .col.small-push-#{$i} { left: $span; }
+            .col.small-pull-#{$i} { right: $span; }
+        }
+    }
+
+    // Medium supports 8 columns
+    @include in-medium {
+        .col[class*="medium-"] {
+            @include grid-column;
+        }
+
+        @for $i from 1 through $grid-columns-medium {
+            $span: grid-span($grid-columns-medium, $i);
+
+            .col.medium-#{$i} { width: $span; }
+            .col.medium-push-#{$i} { left: $span; }
+            .col.medium-pull-#{$i} { right: $span; }
+        }
     }
 
-    @for $i from 1 through $grid-columns {
-        $span: grid-span($i);
+    // Large supports 12 columns
+    @include in-large {
+        .col[class*="large-"] {
+            @include grid-column;
+        }
 
-        .col.desktop-#{$i} { width: $span; }
-        .col.desktop-push-#{$i} { left: $span; }
-        .col.desktop-pull-#{$i} { right: $span; }
+        @for $i from 1 through $grid-columns-large {
+            $span: grid-span($grid-columns-large, $i);
+
+            .col.large-#{$i} { width: $span; }
+            .col.large-push-#{$i} { left: $span; }
+            .col.large-pull-#{$i} { right: $span; }
+        }
     }
+
 }

data/scss/toolkit/layout/responsive.scss

@@ -14,25 +14,50 @@ img, video, canvas {
 
 .show-print { display: none; }
 
-// Desktop states
-@include in-desktop {
-    .show-tablet,
-    .show-mobile,
-    .hide-desktop { display: none; }
-}
+@if $responsive-size == "device" or $responsive-size == "both" {
+    // Desktop states
+    @include in-desktop {
+        .show-tablet,
+        .show-mobile,
+        .hide-desktop { display: none; }
+    }
+
+    // Tablet states
+    @include in-tablet {
+        .show-desktop,
+        .show-mobile,
+        .hide-tablet { display: none; }
+    }
 
-// Tablet states
-@include in-tablet {
-    .show-desktop,
-    .show-mobile,
-    .hide-tablet { display: none; }
+    // Mobile states
+    @include in-mobile  {
+        .show-desktop,
+        .show-tablet,
+        .hide-mobile { display: none; }
+    }
 }
 
-// Mobile states
-@include in-mobile  {
-    .show-desktop,
-    .show-tablet,
-    .hide-mobile { display: none; }
+@if $responsive-size == "size" or $responsive-size == "both" {
+    // Large states
+    @include in-large {
+        .show-medium,
+        .show-small,
+        .hide-large { display: none; }
+    }
+
+    // Medium states
+    @include in-medium {
+        .show-large,
+        .show-small,
+        .hide-medium { display: none; }
+    }
+
+    // Small states
+    @include in-small  {
+        .show-large,
+        .show-medium,
+        .hide-small { display: none; }
+    }
 }
 
 // Orientation states

data/scss/toolkit/layout/typography.scss

@@ -6,12 +6,12 @@
 
 @import "../common";
 
-h1 { font-size: 2.5rem; }
-h2 { font-size: 2.2rem; }
-h3 { font-size: 1.8rem; }
-h4 { font-size: 1.5rem; }
-h5 { font-size: 1.2rem; }
-h6 { font-size: 1rem; }
+h1 { font-size: 3rem; }
+h2 { font-size: 2.5rem; }
+h3 { font-size: 2.1rem; }
+h4 { font-size: 1.8rem; }
+h5 { font-size: 1.5rem; }
+h6 { font-size: 1.2rem; }
 
 h1, h2, h3, h4, h5, h6 {
     margin: 0;

data/scss/toolkit/mixins/_grid.scss

@@ -1,10 +1,15 @@
 
-$grid-columns: 12 !default;
-$grid-width: (100% / $grid-columns) !default;
+$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;
 
 // Calculate a width using a grid cell
-@function grid-span($n) {
-    @return $grid-width * $n;
+@function grid-span($columns, $n) {
+    @return (100% / $columns) * $n;
 }
 
 // Styles for the row containing the columns

data/scss/toolkit/mixins/_responsive.scss

@@ -1,5 +1,7 @@
 
 $responsive-design: "mobile" !default;
+$responsive-size: "both" !default;
+
 $breakpoint-desktop: 1440px !default;
 $breakpoint-laptop: 1280px !default;
 $breakpoint-tablet-landscape: 1024px !default;
@@ -7,6 +9,10 @@ $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;
+
 @mixin if-min($min) {
     @media only screen and (min-width: $min) {
         @content;
@@ -91,6 +97,24 @@ $breakpoint-mobile-portrait: 320px !default;
     }
 }
 
+@mixin if-large() {
+    @include do-responsive($breakpoint-large, $breakpoint-medium) {
+        @content;
+    }
+}
+
+@mixin if-medium() {
+    @include do-responsive($breakpoint-medium, $breakpoint-small) {
+        @content;
+    }
+}
+
+@mixin if-small() {
+    @include do-responsive($breakpoint-small, null) {
+        @content;
+    }
+}
+
 // Within 2 ranges
 @mixin in-desktop {
     @include if-min($breakpoint-tablet-landscape + 1) {
@@ -108,4 +132,22 @@ $breakpoint-mobile-portrait: 320px !default;
     @include if-max($breakpoint-mobile-landscape)  {
         @content;
     }
+}
+
+@mixin in-large {
+    @include if-min($breakpoint-medium + 1) {
+        @content;
+    }
+}
+
+@mixin in-medium {
+    @include if-min-max($breakpoint-small + 1, $breakpoint-medium) {
+        @content;
+    }
+}
+
+@mixin in-small {
+    @include if-max($breakpoint-small) {
+        @content;
+    }
 }

data/scss/toolkit/mixins/_themes.scss

@@ -54,7 +54,7 @@
 }
 
 @mixin field-style() {
-    &.has-error {
+    &.is-error {
         .input,
         .select {
             border-color: $error;
@@ -68,7 +68,7 @@
         }
     }
 
-    &.has-warning {
+    &.is-warning {
         .input,
         .select {
             border-color: $warning;
@@ -82,7 +82,7 @@
         }
     }
 
-    &.has-success {
+    &.is-success {
         .input,
         .select {
             border-color: $success;

data/scss/toolkit/modules/carousel.scss

@@ -159,7 +159,7 @@
 
 .carousel.fade {
     .carousel-items {
-        height: 360px; // needs a base height because slides are absolute
+        padding-bottom: 56.25%; /* 16:9 ratio */
 
         > li {
             position: absolute;

data/scss/toolkit/themes/tomorrow-night.scss

@@ -48,6 +48,12 @@ body {
     background: $background-color;
 }
 
+.close {
+    width: 20px;
+    height: 20px;
+    line-height: 22px;
+}
+
 //-------------------- Typography --------------------//
 
 .caret-up { border-bottom-color: $foreground-color; }
@@ -415,7 +421,7 @@ $button-shadow: 0 1px 0 white(.5) inset, 0 0 3px #000;
 .modal {
     .close {
         top: -11px;
-        right: -45px;
+        right: -35px;
     }
 }
 
@@ -540,7 +546,7 @@ $button-shadow: 0 1px 0 white(.5) inset, 0 0 3px #000;
 
     .close {
         top: -11px;
-        right: -45px;
+        right: -35px;
     }
 }
 

data/version.md

@@ -1 +1 @@
-0.11.2
+0.12.0

metadata

@@ -1,63 +1,58 @@
---- !ruby/object:Gem::Specification 
+--- !ruby/object:Gem::Specification
 name: titon-toolkit
-version: !ruby/object:Gem::Version 
-  prerelease: false
-  segments: 
-  - 0
-  - 11
-  - 2
-  version: 0.11.2
+version: !ruby/object:Gem::Version
+  version: 0.12.0
+  prerelease: 
 platform: ruby
-authors: 
+authors:
 - Titon
 - Miles Johnson
 autorequire: 
 bindir: bin
 cert_chain: []
-
-date: 2013-09-18 00:00:00 -07:00
-default_executable: 
-dependencies: 
-- !ruby/object:Gem::Dependency 
+date: 2013-09-22 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
   name: sass
-  prerelease: false
-  requirement: &id001 !ruby/object:Gem::Requirement 
-    requirements: 
-    - - ">="
-      - !ruby/object:Gem::Version 
-        segments: 
-        - 3
-        - 2
-        - 0
+  requirement: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
         version: 3.2.0
   type: :runtime
-  version_requirements: *id001
-- !ruby/object:Gem::Dependency 
-  name: compass
   prerelease: false
-  requirement: &id002 !ruby/object:Gem::Requirement 
-    requirements: 
-    - - ">="
-      - !ruby/object:Gem::Version 
-        segments: 
-        - 0
-        - 11
-        version: "0.11"
+  version_requirements: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: 3.2.0
+- !ruby/object:Gem::Dependency
+  name: compass
+  requirement: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0.11'
   type: :runtime
-  version_requirements: *id002
-description: A powerful front-end UI and component toolkit. Provides Sass files for use in projects.
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0.11'
+description: A powerful front-end UI and component toolkit. Provides Sass files for
+  use in projects.
 email: 
 executables: []
-
 extensions: []
-
 extra_rdoc_files: []
-
-files: 
+files:
 - lib/titon-toolkit.rb
 - scss/normalize.scss
-- scss/toolkit/_common.scss
-- scss/toolkit/_variables.scss
 - scss/toolkit/effects/visual.scss
 - scss/toolkit/layout/base.scss
 - scss/toolkit/layout/code.scss
@@ -95,39 +90,35 @@ files:
 - scss/toolkit/ui/pagination.scss
 - scss/toolkit/ui/pin.scss
 - scss/toolkit/ui/progress.scss
+- scss/toolkit/_common.scss
+- scss/toolkit/_variables.scss
 - scss/toolkit.scss
 - license.md
 - readme.md
 - version.md
-has_rdoc: true
 homepage: http://titon.io
-licenses: 
+licenses:
 - BSD-2
 post_install_message: 
 rdoc_options: []
-
-require_paths: 
+require_paths:
 - lib
-required_ruby_version: !ruby/object:Gem::Requirement 
-  requirements: 
-  - - ">="
-    - !ruby/object:Gem::Version 
-      segments: 
-      - 0
-      version: "0"
-required_rubygems_version: !ruby/object:Gem::Requirement 
-  requirements: 
-  - - ">="
-    - !ruby/object:Gem::Version 
-      segments: 
-      - 0
-      version: "0"
+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.3.6
+rubygems_version: 1.8.23
 signing_key: 
 specification_version: 3
 summary: Provides Titon Toolkit Sass files for use in projects.
 test_files: []
-