type-heading 0.0.13 → 0.0.14
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 +4 -4
- data/README.md +28 -12
- data/stylesheets/type-heading/_settings.scss +57 -24
- data/stylesheets/type-heading/functions/_core.scss +67 -32
- data/stylesheets/type-heading/functions/_heading.scss +99 -102
- data/stylesheets/type-heading/functions/_helpers.scss +336 -267
- data/stylesheets/type-heading/functions/_property.scss +288 -296
- data/stylesheets/type-heading/mixins/_breakpoint.scss +19 -20
- data/stylesheets/type-heading/mixins/_core.scss +148 -31
- data/stylesheets/type-heading/mixins/_heading.scss +65 -144
- data/stylesheets/type-heading/mixins/_property.scss +237 -129
- metadata +2 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: ba4a423c88bb3a9181e6f699b9ba8ee5be9a92bf
|
|
4
|
+
data.tar.gz: a203207d96590ba085502dba03a7c0c1fdb2bffa
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 3cafac27b260505b72a2f3e31497fdc1326687c819c1460b0e414bb2eaf67105be6f35125c75b9645f2ea825839b3bb574e47158b227167fa9d59d47051a3f2c
|
|
7
|
+
data.tar.gz: cbfff014a83078b8ea361b94f5f944e0c19de38b4adbffb3f294b763ffa672795e30a3f39569f0ad82dbd73ba1a37859828ba9ea406434026212f2c3d18269e6
|
data/README.md
CHANGED
|
@@ -1,21 +1,37 @@
|
|
|
1
1
|
[](http://badge.fury.io/rb/type-heading)
|
|
2
2
|
|
|
3
|
-
# Type Heading
|
|
3
|
+
# Type Heading
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
Type Heading is a lightweight Compass Extension that lets you easily manage
|
|
6
|
+
responsive typographic sizing.
|
|
6
7
|
|
|
7
|
-
|
|
8
|
-
development, not production work.
|
|
8
|
+
## Libsass Compatible
|
|
9
9
|
|
|
10
|
-
|
|
10
|
+
Ruby is fucking slow as fuck and I hate it. Type heading is 100% (or will try to
|
|
11
|
+
be) compatible with Libsass.
|
|
11
12
|
|
|
12
|
-
|
|
13
|
+
## Organised & Maintainable
|
|
13
14
|
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
- Compass 1.0.1
|
|
15
|
+
Reference or change any heading size throughout your stylesheets from a single
|
|
16
|
+
variable. Now you don't have to try and remember what the font size of your h3 is!
|
|
17
17
|
|
|
18
|
-
##
|
|
18
|
+
## Reponsive Typography Made Easy
|
|
19
19
|
|
|
20
|
-
|
|
21
|
-
|
|
20
|
+
Headings are stuctured by breakpoint, giving you the power to quickly find the
|
|
21
|
+
right heading size for the right media query.
|
|
22
|
+
|
|
23
|
+
## Simple Unit Conversion
|
|
24
|
+
|
|
25
|
+
Working with relative units can be tricky. Fortunately Type Heading can convert
|
|
26
|
+
px values into relative units, so you can stay you away from any tricky math.
|
|
27
|
+
|
|
28
|
+
## License
|
|
29
|
+
|
|
30
|
+
Type Heading uses the [MIT license](http://en.wikipedia.org/wiki/MIT_License)
|
|
31
|
+
and always will.
|
|
32
|
+
|
|
33
|
+
## Contributing
|
|
34
|
+
|
|
35
|
+
You can make Type Heading better! If you find a bug, please [create an
|
|
36
|
+
issue](https://github.com/ellioseven/type-heading/issues) or
|
|
37
|
+
[provide a pull request](https://github.com/ellioseven/type-heading/pulls).
|
|
@@ -1,29 +1,49 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
////
|
|
2
|
+
/// Settings
|
|
3
|
+
/// @group Config
|
|
4
|
+
////
|
|
5
5
|
|
|
6
|
-
//
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
6
|
+
// $th-base-font-size
|
|
7
|
+
/// Font size used for relative calculations.
|
|
8
|
+
///
|
|
9
|
+
/// @since 0.0.10
|
|
10
|
+
/// @type Number
|
|
11
11
|
|
|
12
12
|
$th-base-font-size: 16px !default;
|
|
13
13
|
|
|
14
|
-
// th-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
14
|
+
// $th-rem-base
|
|
15
|
+
/// Font size base for calculating rem units.
|
|
16
|
+
///
|
|
17
|
+
/// @since 0.0.14
|
|
18
|
+
/// @type Number
|
|
19
|
+
|
|
20
|
+
$th-rem-base: $th-base-font-size !default;
|
|
21
|
+
|
|
22
|
+
// $th-headings
|
|
23
|
+
/// Sets of headings.
|
|
24
|
+
///
|
|
25
|
+
/// @since 0.0.10
|
|
26
|
+
/// @type Map
|
|
27
|
+
///
|
|
28
|
+
/// @example scss - Defining a few sets of headings.
|
|
29
|
+
/// $th-headings: (
|
|
30
|
+
/// h1: (32px 38px 20px, 38px 42px 30px 768px),
|
|
31
|
+
/// h2: (24px 30px, 32px 36px default 768px),
|
|
32
|
+
/// h3: (18px 24px (10px 20px), 21px 26px 30px 768px)
|
|
33
|
+
/// );
|
|
19
34
|
|
|
20
35
|
$th-headings: () !default;
|
|
21
36
|
|
|
22
|
-
//
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
37
|
+
// $th-property-defaults
|
|
38
|
+
/// Default property values for headings.
|
|
39
|
+
///
|
|
40
|
+
/// @since 0.0.10
|
|
41
|
+
/// @type Map
|
|
42
|
+
///
|
|
43
|
+
/// @prop {number} font-size [16px] - Default font size for headings
|
|
44
|
+
/// @prop {number} line-height [24px] - Default line height for headings
|
|
45
|
+
/// @prop {number} margin-top [20px] - Default margin top for headings
|
|
46
|
+
/// @prop {number} margin-bottom [20px] - Default margin bottom for headings
|
|
27
47
|
|
|
28
48
|
$th-property-defaults: (
|
|
29
49
|
font-size: 16px,
|
|
@@ -32,11 +52,24 @@ $th-property-defaults: (
|
|
|
32
52
|
margin-bottom: 20px
|
|
33
53
|
) !default;
|
|
34
54
|
|
|
35
|
-
//
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
55
|
+
// $th-property-defaults
|
|
56
|
+
/// Units for heading properties.
|
|
57
|
+
///
|
|
58
|
+
/// @since 0.0.11
|
|
59
|
+
/// @type Map
|
|
60
|
+
///
|
|
61
|
+
/// @prop {boolean | string} font-size [false] - (px | em | rem | rel | percent) - Unit conversion for font sizes.
|
|
62
|
+
/// @prop {boolean | string} line-height [false] - (px | em | rem | rel | percent) - Unit conversion for line heights.
|
|
63
|
+
/// @prop {boolean | string} margin-top [false] - (px | em | rem | rel | percent) - Unit conversion for top margins.
|
|
64
|
+
/// @prop {boolean | string} margin-bottom [false] - (px | em | rem | rel | percent) - Unit conversion for bottom margins.
|
|
65
|
+
///
|
|
66
|
+
/// @example scss - Defining units for heading properties.
|
|
67
|
+
/// $th-property-units: (
|
|
68
|
+
/// font-size: percent,
|
|
69
|
+
/// line-height: rel,
|
|
70
|
+
/// margin-top: em,
|
|
71
|
+
/// margin-bottom: em
|
|
72
|
+
/// )
|
|
40
73
|
|
|
41
74
|
$th-property-units: (
|
|
42
75
|
font-size: false,
|
|
@@ -1,38 +1,73 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
//
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
$_th-core-
|
|
14
|
-
|
|
15
|
-
//
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
//
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
@
|
|
1
|
+
////
|
|
2
|
+
/// Core
|
|
3
|
+
/// @group Core
|
|
4
|
+
////
|
|
5
|
+
|
|
6
|
+
// $_th-core-breakpoint-context
|
|
7
|
+
/// Global breakpoint variable for various mixins and functions.
|
|
8
|
+
///
|
|
9
|
+
/// @since 0.0.12
|
|
10
|
+
/// @type Bool | Number
|
|
11
|
+
/// @access private
|
|
12
|
+
|
|
13
|
+
$_th-core-breakpoint-context: false !default;
|
|
14
|
+
|
|
15
|
+
// $_th-core-with
|
|
16
|
+
/// Map of heading property values within a th-with loop.
|
|
17
|
+
///
|
|
18
|
+
/// @since 0.0.14
|
|
19
|
+
/// @see {function} th-with
|
|
20
|
+
/// @type Map
|
|
21
|
+
/// @access private
|
|
22
|
+
|
|
23
|
+
$_th-core-with: () !default;
|
|
24
|
+
|
|
25
|
+
// $_th-core-properties
|
|
26
|
+
/// List of available heading property names.
|
|
27
|
+
///
|
|
28
|
+
/// @since 0.0.14
|
|
29
|
+
/// @type List
|
|
30
|
+
/// @access private
|
|
31
|
+
|
|
32
|
+
$_th-core-properties: (margin-top margin-bottom font-size line-height);
|
|
33
|
+
|
|
34
|
+
// _th-core-breakpoint-context()
|
|
35
|
+
/// Return either contextual breakpoint if set or current breakpoint value.
|
|
36
|
+
///
|
|
37
|
+
/// @since 0.0.12
|
|
38
|
+
/// @return {number} Current or contextual breakpoint.
|
|
39
|
+
///
|
|
40
|
+
/// @param {number} $breakpoint - A heading breakpoint.
|
|
41
|
+
|
|
42
|
+
@function _th-core-breakpoint-context(
|
|
31
43
|
$breakpoint
|
|
32
44
|
){
|
|
33
|
-
@if global-variable-exists('_th-core-
|
|
34
|
-
@return $_th-core-
|
|
45
|
+
@if global-variable-exists('_th-core-breakpoint-context') and $_th-core-breakpoint-context {
|
|
46
|
+
@return $_th-core-breakpoint-context;
|
|
35
47
|
} @else {
|
|
36
48
|
@return $breakpoint;
|
|
37
49
|
}
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
// th-with-get()
|
|
53
|
+
/// Return a heading property value within a th-with loop.
|
|
54
|
+
///
|
|
55
|
+
/// @since 0.0.14
|
|
56
|
+
/// @see {mixin} th-with
|
|
57
|
+
/// @return {number} Heading property value.
|
|
58
|
+
///
|
|
59
|
+
/// @param {string} $property-name - Name of the heading property to return.
|
|
60
|
+
///
|
|
61
|
+
/// @example scss - Return font size from within a th-with loop.
|
|
62
|
+
/// @include th-with(h1) {
|
|
63
|
+
/// font-size: th-with-get(font-size);
|
|
64
|
+
/// }
|
|
65
|
+
/// // font-size: 18px;
|
|
66
|
+
|
|
67
|
+
@function th-with-get(
|
|
68
|
+
$property-name
|
|
69
|
+
){
|
|
70
|
+
@if $_th-core-with {
|
|
71
|
+
@return map-get($_th-core-with, $property-name);
|
|
72
|
+
}
|
|
38
73
|
}
|
|
@@ -1,131 +1,108 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
////
|
|
2
|
+
/// Heading
|
|
3
|
+
/// @group Heading
|
|
4
|
+
////
|
|
5
5
|
|
|
6
|
-
//
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
//
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
//
|
|
22
|
-
// @example scss Return a heading list.
|
|
23
|
-
// // // h1: (10px 20px (30px 40px), 50px 60px (70px 80px) 768px)
|
|
24
|
-
// // th-heading(h1)
|
|
25
|
-
// // // 10px 20px (30px 40px)
|
|
26
|
-
// // @example scss Return a heading list with breakpoint.
|
|
27
|
-
// // // h1: (10px 20px (30px 40px), 50px 60px (70px 80px) 768px)
|
|
28
|
-
// // th-heading(h1, 768px)
|
|
29
|
-
// // // 50px 60px (70px 80px) 768px
|
|
6
|
+
// th-heading()
|
|
7
|
+
/// Return a heading list. The first heading list will be returned
|
|
8
|
+
/// if no breakpoint is specified.
|
|
9
|
+
///
|
|
10
|
+
/// @since 0.0.10
|
|
11
|
+
/// @return {list} A heading list.
|
|
12
|
+
///
|
|
13
|
+
/// @param {list | string} $heading - A heading map key or list.
|
|
14
|
+
/// @param {number} $breakpoint [false] - A heading list breakpoint.
|
|
15
|
+
///
|
|
16
|
+
/// @example scss Return a heading list.
|
|
17
|
+
/// th-heading(h1)
|
|
18
|
+
/// // (10px 20px (30px 40px)
|
|
19
|
+
/// @example scss Return a heading list with breakpoint.
|
|
20
|
+
/// th-heading(h1, 768px)
|
|
21
|
+
/// // 50px 60px (70px 80px) 768px
|
|
30
22
|
|
|
31
23
|
@function th-heading(
|
|
32
24
|
$heading,
|
|
33
25
|
$breakpoint: false
|
|
34
26
|
){
|
|
35
|
-
$
|
|
36
|
-
$
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
@if _th-heading-has-next($_return) {
|
|
40
|
-
$_return: _th-heading-get-next($_return, $breakpoint);
|
|
41
|
-
}
|
|
42
|
-
}
|
|
43
|
-
@return $_return;
|
|
27
|
+
$breakpoint: _th-core-breakpoint-context($breakpoint);
|
|
28
|
+
$heading: th-heading-get-map($heading);
|
|
29
|
+
$heading: _th-heading-maybe-next($heading, $breakpoint);
|
|
30
|
+
@return $heading;
|
|
44
31
|
}
|
|
45
32
|
|
|
46
|
-
//
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
//
|
|
57
|
-
// // // h1: (10px 20px (30px 40px), 50px 60px (70px 80px) 768px)
|
|
58
|
-
// // th-heading-get-map(h1)
|
|
59
|
-
// // // 10px 20px (30px 40px), 50px 60px (70px 80px) 768px
|
|
33
|
+
// th-heading-get-map()
|
|
34
|
+
/// Return a heading map.
|
|
35
|
+
///
|
|
36
|
+
/// @since 0.0.10
|
|
37
|
+
/// @return {list} A heading map.
|
|
38
|
+
///
|
|
39
|
+
/// @param {string} $heading - A heading map key.
|
|
40
|
+
///
|
|
41
|
+
/// @example scss - Return h1 heading map.
|
|
42
|
+
/// th-heading-get-map(h1)
|
|
43
|
+
/// // 10px 20px (30px 40px), 50px 60px (70px 80px) 768px
|
|
60
44
|
|
|
61
45
|
@function th-heading-get-map(
|
|
62
46
|
$heading
|
|
63
47
|
){
|
|
64
|
-
$_return: $heading;
|
|
65
48
|
@if string == type-of($heading) and map-has-key($th-headings, $heading) {
|
|
66
|
-
$
|
|
49
|
+
$heading: map-get($th-headings, $heading);
|
|
67
50
|
}
|
|
68
|
-
@return $
|
|
51
|
+
@return $heading;
|
|
69
52
|
}
|
|
70
53
|
|
|
71
|
-
//
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
//
|
|
86
|
-
|
|
87
|
-
//
|
|
88
|
-
|
|
89
|
-
//
|
|
90
|
-
|
|
91
|
-
//
|
|
54
|
+
// _th-heading-has-next()
|
|
55
|
+
/// Check a for multiple heading lists.
|
|
56
|
+
///
|
|
57
|
+
/// @since 0.0.10
|
|
58
|
+
/// @access private
|
|
59
|
+
/// @return {boolean} If heading has next or not.
|
|
60
|
+
///
|
|
61
|
+
/// @param {list | string} $heading - A heading map key or list.
|
|
62
|
+
///
|
|
63
|
+
/// @example
|
|
64
|
+
/// 4 + 2 = 8
|
|
65
|
+
/// 4 / 2 = 2
|
|
66
|
+
///
|
|
67
|
+
/// @example scss - Check heading with next.
|
|
68
|
+
/// // h1: (10px 20px (30px 40px), 50px 60px (70px 80px) 768px)
|
|
69
|
+
/// _th-heading-has-next(h1)
|
|
70
|
+
/// // true
|
|
71
|
+
/// @example scss - Check heading without next.
|
|
72
|
+
/// // h2: (10px 20px (30px 40px))
|
|
73
|
+
/// _th-heading-has-next(h2)
|
|
74
|
+
/// // false
|
|
92
75
|
|
|
93
76
|
@function _th-heading-has-next(
|
|
94
77
|
$heading
|
|
95
78
|
){
|
|
96
|
-
$_return: false;
|
|
97
79
|
$heading: th-heading-get-map($heading);
|
|
98
|
-
@if list-separator($heading) == comma {
|
|
99
|
-
|
|
80
|
+
@if list-separator($heading) == comma {
|
|
81
|
+
@return true;
|
|
82
|
+
} @else {
|
|
83
|
+
@return false;
|
|
100
84
|
}
|
|
101
|
-
@return $_return;
|
|
102
85
|
}
|
|
103
86
|
|
|
104
|
-
//
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
//
|
|
116
|
-
|
|
117
|
-
//
|
|
118
|
-
//
|
|
119
|
-
// @example scss Return h1 heading map.
|
|
120
|
-
// // // h1: (10px 20px (30px 40px), 50px 60px (70px 80px) 768px)
|
|
121
|
-
// // _th-heading-get-next(h1, 768px)
|
|
122
|
-
// // // 50px 60px (70px 80px) 768px
|
|
87
|
+
// _th-heading-get-next()
|
|
88
|
+
/// Return a heading list by breakpoint.
|
|
89
|
+
///
|
|
90
|
+
/// @since 0.0.10
|
|
91
|
+
/// @access private
|
|
92
|
+
/// @return {list} A heading list.
|
|
93
|
+
///
|
|
94
|
+
/// @param {list | string} $heading - A heading map key or list.
|
|
95
|
+
/// @param {number} $breakpoint [false] - A heading list breakpoint.
|
|
96
|
+
///
|
|
97
|
+
/// @example scss - Return h1 heading map.
|
|
98
|
+
/// // h1: (10px 20px (30px 40px), 50px 60px (70px 80px) 768px)
|
|
99
|
+
/// _th-heading-get-next(h1, 768px)
|
|
100
|
+
/// // 50px 60px (70px 80px) 768px
|
|
123
101
|
|
|
124
102
|
@function _th-heading-get-next(
|
|
125
103
|
$heading,
|
|
126
104
|
$breakpoint: false
|
|
127
105
|
){
|
|
128
|
-
$_return: $heading;
|
|
129
106
|
$heading: th-heading-get-map($heading);
|
|
130
107
|
@if $breakpoint {
|
|
131
108
|
@each $heading-list in $heading {
|
|
@@ -133,11 +110,31 @@
|
|
|
133
110
|
$heading: $heading-list,
|
|
134
111
|
$property-name: breakpoint,
|
|
135
112
|
$convert: false) == $breakpoint {
|
|
136
|
-
$
|
|
113
|
+
$heading: $heading-list;
|
|
137
114
|
}
|
|
138
115
|
}
|
|
139
116
|
} @else {
|
|
140
|
-
$
|
|
117
|
+
$heading: nth($heading, 1);
|
|
118
|
+
}
|
|
119
|
+
@return $heading;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
// _th-heading-maybe-next()
|
|
123
|
+
/// Check and get a heading list from a heading map key.
|
|
124
|
+
///
|
|
125
|
+
/// @since 0.0.14
|
|
126
|
+
/// @access private
|
|
127
|
+
/// @return {mixed} Returns heading list if available.
|
|
128
|
+
///
|
|
129
|
+
/// @param {list | string} $heading - A heading map key or list.
|
|
130
|
+
/// @param {number} $breakpoint [false] - A heading list breakpoint.
|
|
131
|
+
|
|
132
|
+
@function _th-heading-maybe-next(
|
|
133
|
+
$heading,
|
|
134
|
+
$breakpoint: false
|
|
135
|
+
){
|
|
136
|
+
@if _th-heading-has-next($heading) {
|
|
137
|
+
$heading: _th-heading-get-next($heading, $breakpoint);
|
|
141
138
|
}
|
|
142
|
-
@return $
|
|
139
|
+
@return $heading;
|
|
143
140
|
}
|