titon-toolkit 1.0.0.rc.3 → 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +7 -0
- data/readme.md +11 -8
- data/roadmap.md +1 -1
- data/scss/toolkit.scss +4 -4
- data/scss/toolkit/_common.scss +11 -1
- data/scss/toolkit/components/{breadcrumbs.scss → breadcrumb.scss} +1 -1
- data/scss/toolkit/components/grid.scss +1 -1
- data/scss/toolkit/components/modal.scss +1 -1
- data/scss/toolkit/layout/base.scss +1 -1
- data/scss/toolkit/layout/form.scss +9 -6
- data/scss/toolkit/layout/typography.scss +8 -8
- data/scss/toolkit/themes/titon.scss +5 -2
- data/version.md +1 -1
- metadata +14 -20
checksums.yaml
ADDED
@@ -0,0 +1,7 @@
|
|
1
|
+
---
|
2
|
+
SHA1:
|
3
|
+
metadata.gz: 255f3100b0f5ad48091522c492aeab278e8c9ae6
|
4
|
+
data.tar.gz: 7a201853a7209808156e21aae0cff3d9721a7cf1
|
5
|
+
SHA512:
|
6
|
+
metadata.gz: 48713dfe0731c1c10bfc555bcab6b4c9716be9ef87bd202f52fb9ca6f02e57150a154491599f2b2a8aa8bb3b40e8483ac58fdc4fa4ce6e0850541ad887a9eb5c
|
7
|
+
data.tar.gz: 1e892c3ee6f266d0c4d1a8020ef0c97350d1c29e4eb9c20f5613ef1e416a05ad1b2902e13c2129ceb48107866026e13a18bfe47e41de406ea1495921825bafa6
|
data/readme.md
CHANGED
@@ -1,4 +1,12 @@
|
|
1
|
-
|
1
|
+
```
|
2
|
+
______ ______ ______ __ __ __ __ ______
|
3
|
+
/\__ _\/\ __ \/\ __ \/\ \ /\ \/ /_ /\ \/\__ _\
|
4
|
+
\/_/\ \/\ \ \/\ \ \ \/\ \ \ \___\ \ _ \\ \ \/_/\ \/
|
5
|
+
\ \_\ \ \_____\ \_____\ \_____\ \_\ \_\\ \_\ \ \_\
|
6
|
+
\/_/ \/_____/\/_____/\/_____/\/_/\/_/ \/_/ \/_/
|
7
|
+
```
|
8
|
+
|
9
|
+
# Toolkit v1.0.0 #
|
2
10
|
|
3
11
|
Titon Toolkit is a collection of very powerful user interface components and utility classes.
|
4
12
|
Each component represents encapsulated HTML, CSS and JS functionality for role specific page elements.
|
@@ -20,7 +28,7 @@ If any of these concepts align with your thought process or your projects requir
|
|
20
28
|
* Animations and transitions purely with CSS
|
21
29
|
|
22
30
|
#### Demo ####
|
23
|
-
|
31
|
+
An interactive demo can be found here: http://titon.io/toolkit
|
24
32
|
|
25
33
|
#### Requirements ####
|
26
34
|
* **HTML5**
|
@@ -87,7 +95,7 @@ Titon also provides classes that build upon MooTools itself. These classes do no
|
|
87
95
|
* `Typography` - Resets and default styles for typography
|
88
96
|
|
89
97
|
#### UI ####
|
90
|
-
* `
|
98
|
+
* `Breadcrumb` - Styles for bread crumb navigation trails
|
91
99
|
* `Button` - Styles for generic cross-browser compatible buttons
|
92
100
|
* `ButtonGroup` - Allows for the grouping of multiple buttons into 1 visual styled button
|
93
101
|
* `Grid` - Implements a fluid 12 column grid system with responsive support for all devices
|
@@ -96,7 +104,6 @@ Titon also provides classes that build upon MooTools itself. These classes do no
|
|
96
104
|
* `Label` - Styles for inline tag labels
|
97
105
|
* `Notice` - Styles for block level notification messages
|
98
106
|
* `Pagination` - Styles for pagination lists
|
99
|
-
* `Pin` - Animations for element pinning
|
100
107
|
* `Progress` - Basic styles for progress bars
|
101
108
|
* `Table` - Styles for tables
|
102
109
|
|
@@ -106,10 +113,6 @@ Titon also provides classes that build upon MooTools itself. These classes do no
|
|
106
113
|
## Authors ##
|
107
114
|
* [Miles Johnson](https://github.com/milesj)
|
108
115
|
|
109
|
-
#### Third Party ####
|
110
|
-
* `Normalize.css` provided by Nicolas Gallagher
|
111
|
-
* `Iconic` icon set provided by P.J. Onori
|
112
|
-
|
113
116
|
## Known Issues ##
|
114
117
|
* Zepto is currently not supported (too different of an API)
|
115
118
|
* Slide in modal animations do not work correctly in Chrome/IE
|
data/roadmap.md
CHANGED
@@ -5,6 +5,7 @@ All releases will contain bug fixing and polishing for current features.
|
|
5
5
|
### 1.1.0 - December 2013 ###
|
6
6
|
* Marquee - A component that displays multiple slides at once and allows for cycling through a variable amount. A sister component to the carousel.
|
7
7
|
* Mask - A component that will mask a target element with a blackout.
|
8
|
+
* Improvements for Input by adding custom select dropdowns and multi-select support
|
8
9
|
|
9
10
|
### 1.2.0 - January 2014 ###
|
10
11
|
* Step - A component that highlights a step in a series of consecutive steps (represented by an arrow based navigation).
|
@@ -19,7 +20,6 @@ All releases will contain bug fixing and polishing for current features.
|
|
19
20
|
* Drop IE 8/9 support and upgrade to jQuery 2.
|
20
21
|
* Replace JS option callbacks with namespaced element events.
|
21
22
|
* Refactor the JS component layer and reduce complex implementation.
|
22
|
-
* Move component options from the jQuery plugin to the Toolkit component.
|
23
23
|
* Separate component transitions into a stand alone layer that can be used anywhere.
|
24
24
|
* Refactor in-between loading states. Possibly into a new component? CSS or JS based?
|
25
25
|
* Replace examples with unit tests.
|
data/scss/toolkit.scss
CHANGED
@@ -15,7 +15,7 @@
|
|
15
15
|
|
16
16
|
// Then basic UI styles
|
17
17
|
@import "toolkit/components/grid";
|
18
|
-
@import "toolkit/components/
|
18
|
+
@import "toolkit/components/breadcrumb";
|
19
19
|
@import "toolkit/components/button";
|
20
20
|
@import "toolkit/components/button-group";
|
21
21
|
@import "toolkit/components/dropdown";
|
@@ -23,11 +23,8 @@
|
|
23
23
|
@import "toolkit/components/input";
|
24
24
|
@import "toolkit/components/input-group";
|
25
25
|
@import "toolkit/components/label";
|
26
|
-
@import "toolkit/components/lazy-load";
|
27
|
-
@import "toolkit/components/matrix";
|
28
26
|
@import "toolkit/components/notice";
|
29
27
|
@import "toolkit/components/pagination";
|
30
|
-
@import "toolkit/components/pin";
|
31
28
|
@import "toolkit/components/progress";
|
32
29
|
@import "toolkit/components/table";
|
33
30
|
|
@@ -36,7 +33,10 @@
|
|
36
33
|
@import "toolkit/components/blackout";
|
37
34
|
@import "toolkit/components/carousel";
|
38
35
|
@import "toolkit/components/flyout";
|
36
|
+
@import "toolkit/components/lazy-load";
|
37
|
+
@import "toolkit/components/matrix";
|
39
38
|
@import "toolkit/components/modal";
|
39
|
+
@import "toolkit/components/pin";
|
40
40
|
@import "toolkit/components/popover";
|
41
41
|
@import "toolkit/components/showcase";
|
42
42
|
@import "toolkit/components/tabs";
|
data/scss/toolkit/_common.scss
CHANGED
@@ -23,6 +23,16 @@ $foreground-color: #2d2d2d !default;
|
|
23
23
|
//-------------------- Sizes --------------------//
|
24
24
|
|
25
25
|
$base-size: 14px !default;
|
26
|
+
$base-line-height: 1.25em !default;
|
27
|
+
|
28
|
+
$h1-size: 3rem !default;
|
29
|
+
$h2-size: 2.5rem !default;
|
30
|
+
$h3-size: 2.1rem !default;
|
31
|
+
$h4-size: 1.8rem !default;
|
32
|
+
$h5-size: 1.5rem !default;
|
33
|
+
$h6-size: 1.2rem !default;
|
34
|
+
|
35
|
+
//-------------------- Spacing --------------------//
|
26
36
|
|
27
37
|
$padding: .75rem !default;
|
28
38
|
$margin: 1.25rem !default;
|
@@ -95,7 +105,7 @@ $progress-transition: $default-transition !default;
|
|
95
105
|
$showcase-transition: $default-transition !default;
|
96
106
|
$tooltip-transition: $default-transition !default;
|
97
107
|
|
98
|
-
//--------------------
|
108
|
+
//-------------------- Animations --------------------//
|
99
109
|
|
100
110
|
$icon-animation: 1.5s !default;
|
101
111
|
|
@@ -14,7 +14,7 @@ fieldset {
|
|
14
14
|
border: 0;
|
15
15
|
border-top: 1px solid $gray-dark;
|
16
16
|
|
17
|
-
&.legendless {
|
17
|
+
&.is-legendless {
|
18
18
|
border: 0;
|
19
19
|
padding: 0;
|
20
20
|
}
|
@@ -34,8 +34,9 @@ input::-moz-focus-inner {
|
|
34
34
|
border: 0;
|
35
35
|
}
|
36
36
|
|
37
|
+
// Override normalize
|
37
38
|
input[type="search"] {
|
38
|
-
@include box-sizing(
|
39
|
+
@include box-sizing(border-box);
|
39
40
|
}
|
40
41
|
|
41
42
|
// Required values to match browser restrictions
|
@@ -53,8 +54,10 @@ label,
|
|
53
54
|
.input-checkbox {
|
54
55
|
@include reset-inline-block;
|
55
56
|
border: 1px solid $gray-dark;
|
56
|
-
|
57
|
-
|
57
|
+
@include size-medium;
|
58
|
+
|
59
|
+
&.small { @include size-small; }
|
60
|
+
&.large { @include size-large; }
|
58
61
|
}
|
59
62
|
|
60
63
|
.input {
|
@@ -88,8 +91,8 @@ label,
|
|
88
91
|
.input-checkbox {
|
89
92
|
background: transparent;
|
90
93
|
border-color: transparent;
|
91
|
-
padding-left: 0;
|
92
|
-
padding-right: 0;
|
94
|
+
padding-left: 0 !important;
|
95
|
+
padding-right: 0 !important;
|
93
96
|
}
|
94
97
|
|
95
98
|
.input-radio,
|
@@ -6,19 +6,19 @@
|
|
6
6
|
|
7
7
|
@import "../common";
|
8
8
|
|
9
|
-
html { font-size: $base-size; }
|
9
|
+
html { font-size: $base-size; line-height: $base-line-height; }
|
10
10
|
|
11
|
-
h1 { font-size:
|
12
|
-
h2 { font-size:
|
13
|
-
h3 { font-size:
|
14
|
-
h4 { font-size:
|
15
|
-
h5 { font-size:
|
16
|
-
h6 { font-size:
|
11
|
+
h1 { font-size: $h1-size; }
|
12
|
+
h2 { font-size: $h2-size; }
|
13
|
+
h3 { font-size: $h3-size; }
|
14
|
+
h4 { font-size: $h4-size; }
|
15
|
+
h5 { font-size: $h5-size; }
|
16
|
+
h6 { font-size: $h6-size; }
|
17
17
|
|
18
18
|
h1, h2, h3, h4, h5, h6 {
|
19
19
|
margin: 0;
|
20
20
|
padding: 0;
|
21
|
-
line-height:
|
21
|
+
line-height: $base-line-height;
|
22
22
|
font-weight: normal;
|
23
23
|
}
|
24
24
|
|
@@ -50,7 +50,7 @@ mark { background: lighten($warning-light, 25%); }
|
|
50
50
|
|
51
51
|
//-------------------- Breadcrumbs --------------------//
|
52
52
|
|
53
|
-
.
|
53
|
+
.breadcrumb {
|
54
54
|
border: 1px solid $gray-dark;
|
55
55
|
}
|
56
56
|
|
@@ -312,6 +312,10 @@ mark { background: lighten($warning-light, 25%); }
|
|
312
312
|
box-shadow: 5px 5px black(.25);
|
313
313
|
}
|
314
314
|
|
315
|
+
.modal-head {
|
316
|
+
background: $gray-lightest;
|
317
|
+
}
|
318
|
+
|
315
319
|
.modal-body {
|
316
320
|
background: #fff;
|
317
321
|
border-top: 1px solid $gray-dark;
|
@@ -319,7 +323,6 @@ mark { background: lighten($warning-light, 25%); }
|
|
319
323
|
}
|
320
324
|
|
321
325
|
.modal-foot {
|
322
|
-
background: $gray-lightest;
|
323
326
|
text-align: center;
|
324
327
|
}
|
325
328
|
|
data/version.md
CHANGED
@@ -1 +1 @@
|
|
1
|
-
1.0.0
|
1
|
+
1.0.0
|
metadata
CHANGED
@@ -1,8 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: titon-toolkit
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 1.0.0
|
5
|
-
prerelease: 6
|
4
|
+
version: 1.0.0
|
6
5
|
platform: ruby
|
7
6
|
authors:
|
8
7
|
- Titon
|
@@ -10,38 +9,34 @@ authors:
|
|
10
9
|
autorequire:
|
11
10
|
bindir: bin
|
12
11
|
cert_chain: []
|
13
|
-
date: 2013-
|
12
|
+
date: 2013-12-04 00:00:00.000000000 Z
|
14
13
|
dependencies:
|
15
14
|
- !ruby/object:Gem::Dependency
|
16
15
|
name: sass
|
17
16
|
requirement: !ruby/object:Gem::Requirement
|
18
|
-
none: false
|
19
17
|
requirements:
|
20
|
-
- -
|
18
|
+
- - '>='
|
21
19
|
- !ruby/object:Gem::Version
|
22
20
|
version: 3.2.0
|
23
21
|
type: :runtime
|
24
22
|
prerelease: false
|
25
23
|
version_requirements: !ruby/object:Gem::Requirement
|
26
|
-
none: false
|
27
24
|
requirements:
|
28
|
-
- -
|
25
|
+
- - '>='
|
29
26
|
- !ruby/object:Gem::Version
|
30
27
|
version: 3.2.0
|
31
28
|
- !ruby/object:Gem::Dependency
|
32
29
|
name: compass
|
33
30
|
requirement: !ruby/object:Gem::Requirement
|
34
|
-
none: false
|
35
31
|
requirements:
|
36
|
-
- -
|
32
|
+
- - '>='
|
37
33
|
- !ruby/object:Gem::Version
|
38
34
|
version: '0.11'
|
39
35
|
type: :runtime
|
40
36
|
prerelease: false
|
41
37
|
version_requirements: !ruby/object:Gem::Requirement
|
42
|
-
none: false
|
43
38
|
requirements:
|
44
|
-
- -
|
39
|
+
- - '>='
|
45
40
|
- !ruby/object:Gem::Version
|
46
41
|
version: '0.11'
|
47
42
|
description: A collection of extensible front-end UI components for the responsive
|
@@ -53,9 +48,10 @@ extra_rdoc_files: []
|
|
53
48
|
files:
|
54
49
|
- lib/titon-toolkit.rb
|
55
50
|
- scss/normalize.scss
|
51
|
+
- scss/toolkit/_common.scss
|
56
52
|
- scss/toolkit/components/accordion.scss
|
57
53
|
- scss/toolkit/components/blackout.scss
|
58
|
-
- scss/toolkit/components/
|
54
|
+
- scss/toolkit/components/breadcrumb.scss
|
59
55
|
- scss/toolkit/components/button-group.scss
|
60
56
|
- scss/toolkit/components/button.scss
|
61
57
|
- scss/toolkit/components/carousel.scss
|
@@ -95,7 +91,6 @@ files:
|
|
95
91
|
- scss/toolkit/mixins/_state.scss
|
96
92
|
- scss/toolkit/mixins/_unit.scss
|
97
93
|
- scss/toolkit/themes/titon.scss
|
98
|
-
- scss/toolkit/_common.scss
|
99
94
|
- scss/toolkit.scss
|
100
95
|
- license.md
|
101
96
|
- readme.md
|
@@ -104,26 +99,25 @@ files:
|
|
104
99
|
homepage: http://titon.io
|
105
100
|
licenses:
|
106
101
|
- BSD-2
|
102
|
+
metadata: {}
|
107
103
|
post_install_message:
|
108
104
|
rdoc_options: []
|
109
105
|
require_paths:
|
110
106
|
- lib
|
111
107
|
required_ruby_version: !ruby/object:Gem::Requirement
|
112
|
-
none: false
|
113
108
|
requirements:
|
114
|
-
- -
|
109
|
+
- - '>='
|
115
110
|
- !ruby/object:Gem::Version
|
116
111
|
version: '0'
|
117
112
|
required_rubygems_version: !ruby/object:Gem::Requirement
|
118
|
-
none: false
|
119
113
|
requirements:
|
120
|
-
- -
|
114
|
+
- - '>='
|
121
115
|
- !ruby/object:Gem::Version
|
122
|
-
version:
|
116
|
+
version: '0'
|
123
117
|
requirements: []
|
124
118
|
rubyforge_project:
|
125
|
-
rubygems_version:
|
119
|
+
rubygems_version: 2.0.3
|
126
120
|
signing_key:
|
127
|
-
specification_version:
|
121
|
+
specification_version: 4
|
128
122
|
summary: Provides Titon Toolkit Sass files for use in projects.
|
129
123
|
test_files: []
|