skeletor_backbone 0.0.5 → 0.0.6
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 +3 -0
- data/app/assets/images/skeletor/skeletor.png +0 -0
- data/app/assets/stylesheets/skeletor-preview.sass +17 -0
- data/app/assets/stylesheets/skeletor.sass +64 -13
- data/app/assets/stylesheets/skeletor/_css3.sass +16 -16
- data/app/assets/stylesheets/skeletor/_functions.sass +8 -8
- data/app/assets/stylesheets/skeletor/_mixins.sass +20 -18
- data/app/assets/stylesheets/skeletor/_modules.sass +6 -8
- data/app/assets/stylesheets/skeletor/_settings.sass +15 -8
- data/app/assets/stylesheets/skeletor/{base/debug.sass → core/_debug.sass} +10 -18
- data/app/assets/stylesheets/skeletor/{layout → core}/_grid.sass +0 -0
- data/app/assets/stylesheets/skeletor/core/_helpers.sass +142 -0
- data/app/assets/stylesheets/skeletor/{base/print.sass → core/_print.sass} +3 -1
- data/app/assets/stylesheets/skeletor/{base/reset.sass → core/_reset.sass} +6 -3
- data/app/assets/stylesheets/skeletor/{base/foundation.sass → core/base.sass} +81 -148
- data/app/assets/stylesheets/skeletor/core/content.sass +93 -0
- data/app/assets/stylesheets/skeletor/{layout/skeleton.sass → core/layout.sass} +45 -6
- data/app/assets/stylesheets/skeletor/globals/css3/_prefixer.sass +14 -14
- data/app/assets/stylesheets/skeletor/globals/functions/_calculate_em.sass +8 -19
- data/app/assets/stylesheets/skeletor/globals/functions/_calculate_modular_scale.sass +6 -16
- data/app/assets/stylesheets/skeletor/globals/functions/_calculate_percent.sass +9 -20
- data/app/assets/stylesheets/skeletor/globals/functions/_calculate_rem.sass +9 -20
- data/app/assets/stylesheets/skeletor/globals/functions/_strip_units.sass +6 -16
- data/app/assets/stylesheets/skeletor/globals/mixins/_font_size.sass +31 -0
- data/app/assets/stylesheets/skeletor/globals/mixins/_media_query.sass +2 -6
- data/app/assets/stylesheets/skeletor/globals/mixins/_rem.sass +6 -61
- data/app/assets/stylesheets/skeletor/globals/mixins/_vertical_spacing.sass +29 -0
- data/app/assets/stylesheets/skeletor/modules/_forms.sass +27 -0
- data/app/assets/stylesheets/skeletor/modules/_rules.sass +54 -0
- data/app/assets/stylesheets/skeletor/modules/_tables.sass +43 -0
- data/app/controllers/skeletor_backbone/skeletor_controller.rb +10 -0
- data/app/views/skeletor_backbone/skeletor/index.html.erb +445 -0
- data/config/routes.rb +5 -0
- data/lib/generators/skeletor/install_generator.rb +2 -1
- data/lib/skeletor_backbone.rb +2 -2
- data/lib/skeletor_backbone/version.rb +1 -1
- data/skeletor_backbone.gemspec +2 -2
- data/vendor/assets/stylesheets/normalize.css +177 -160
- data/vendor/assets/stylesheets/pesticide.sass +206 -0
- metadata +36 -25
- data/app/assets/stylesheets/skeletor/_all.sass +0 -5
- data/app/assets/stylesheets/skeletor/base/helpers.sass +0 -203
@@ -1,5 +1,5 @@
|
|
1
|
-
// Layout
|
2
|
-
//
|
1
|
+
// Skeletor Layout
|
2
|
+
// -> Base-level layout (margin, padding, positioning, sizing, ect)
|
3
3
|
//
|
4
4
|
// =============================================================================
|
5
5
|
// Table of Contents
|
@@ -7,14 +7,17 @@
|
|
7
7
|
//
|
8
8
|
// IMPORTS......................Imported Sass Methods
|
9
9
|
// RESPONSIVE GRIDS.............Grid System
|
10
|
-
// BASE STRUCTURE...............
|
10
|
+
// BASE STRUCTURE...............Base Layout Elements (content, container, ect)
|
11
|
+
// UTILITIES....................Helper Classes for quick layouts.
|
11
12
|
//
|
12
13
|
|
13
14
|
|
14
15
|
// -----------------------------------------------------------------------------
|
15
16
|
// :: IMPORTS
|
16
17
|
// -----------------------------------------------------------------------------
|
17
|
-
@import "
|
18
|
+
@import "skeletor/globals/mixins/vertical_spacing"
|
19
|
+
@import "skeletor/core/grid"
|
20
|
+
|
18
21
|
|
19
22
|
|
20
23
|
|
@@ -50,9 +53,45 @@
|
|
50
53
|
// Page max width wrapper
|
51
54
|
.l-content
|
52
55
|
margin: 0 auto
|
53
|
-
|
54
|
-
|
56
|
+
max-width: $base-width
|
57
|
+
width: 95%
|
55
58
|
|
56
59
|
// 100% width container
|
57
60
|
.l-content--full
|
58
61
|
width: 100%
|
62
|
+
|
63
|
+
.l-container, .l-content, .l-content--full
|
64
|
+
position: relative
|
65
|
+
|
66
|
+
|
67
|
+
|
68
|
+
|
69
|
+
// -----------------------------------------------------------------------------
|
70
|
+
// :: UTILITIES
|
71
|
+
// -----------------------------------------------------------------------------
|
72
|
+
|
73
|
+
%l-block, .l-block
|
74
|
+
display: block
|
75
|
+
|
76
|
+
%l-inline, .l-inline
|
77
|
+
display: inline
|
78
|
+
|
79
|
+
%l-right, .l-right
|
80
|
+
float: right
|
81
|
+
|
82
|
+
%l-left, .l-left
|
83
|
+
float: left
|
84
|
+
|
85
|
+
%l-center, .l-center
|
86
|
+
float: none
|
87
|
+
margin-left: auto
|
88
|
+
margin-right: auto
|
89
|
+
|
90
|
+
%l-space, .l-space
|
91
|
+
@extend %sass-margin-bottom
|
92
|
+
|
93
|
+
%l-xspace, .l-xspace
|
94
|
+
+skeletor-vertical-spacing($base-line-height * 2)
|
95
|
+
|
96
|
+
%l-condense, .l-condense
|
97
|
+
+skeletor-vertical-spacing($base-line-height / 2)
|
@@ -17,17 +17,17 @@
|
|
17
17
|
// -----------------------------------------------------------------------------
|
18
18
|
// Prefix Property with vendor 'prefixes'
|
19
19
|
// -----------------------------------------------------------------------------
|
20
|
-
=skeletor-prefixer($property, $value, $
|
21
|
-
@if $
|
20
|
+
=skeletor-prefixer($property, $value, $support-webkit: $webkit-support, $support-firefox: $firefox-support, $support-explorer: $explorer-support, $support-opera: $opera-support)
|
21
|
+
@if $support-webkit
|
22
22
|
-webkit-#{$property}: $value
|
23
23
|
|
24
|
-
@if $
|
24
|
+
@if $support-firefox
|
25
25
|
-moz-#{$property}: $value
|
26
26
|
|
27
|
-
@if $
|
27
|
+
@if $support-explorer
|
28
28
|
-ms-#{$property}: $value
|
29
29
|
|
30
|
-
@if $
|
30
|
+
@if $support-opera
|
31
31
|
-o-#{$property}: $value
|
32
32
|
|
33
33
|
#{$property}: $value
|
@@ -37,17 +37,17 @@
|
|
37
37
|
// -----------------------------------------------------------------------------
|
38
38
|
// Prefix Property with values 'prefixes'
|
39
39
|
// -----------------------------------------------------------------------------
|
40
|
-
=skeletor-prefixer-value($property, $value, $
|
41
|
-
@if $
|
40
|
+
=skeletor-prefixer-value($property, $value, $support-webkit: $webkit-support, $support-firefox: $firefox-support, $support-explorer: $explorer-support, $support-opera: $opera-support)
|
41
|
+
@if $support-webkit
|
42
42
|
#{$property}: -webkit-#{$value}
|
43
43
|
|
44
|
-
@if $
|
44
|
+
@if $support-firefox
|
45
45
|
#{$property}: -moz-#{$value}
|
46
46
|
|
47
|
-
@if $
|
47
|
+
@if $support-explorer
|
48
48
|
#{$property}: -ms-#{$value}
|
49
49
|
|
50
|
-
@if $
|
50
|
+
@if $support-opera
|
51
51
|
#{$property}: -o-#{$value}
|
52
52
|
|
53
53
|
#{$property}: $value
|
@@ -57,11 +57,11 @@
|
|
57
57
|
// -----------------------------------------------------------------------------
|
58
58
|
// Alias for prefixer classes
|
59
59
|
// -----------------------------------------------------------------------------
|
60
|
-
=s-prefixer($property, $value, $
|
61
|
-
+skeletor-prefixer($property, $value, $
|
60
|
+
=s-prefixer($property, $value, $support-webkit: $webkit-support, $support-firefox: $firefox-support, $support-explorer: $explorer-support, $support-opera: $opera-support)
|
61
|
+
+skeletor-prefixer($property, $value, $support-webkit, $support-firefox, $support-explorer, $support-opera)
|
62
62
|
|
63
|
-
=s-prefixer-value($property, $value, $
|
64
|
-
+skeletor-prefixer-value($property, $value, $
|
63
|
+
=s-prefixer-value($property, $value, $support-webkit: $webkit-support, $support-firefox: $firefox-support, $support-explorer: $explorer-support, $support-opera: $opera-support)
|
64
|
+
+skeletor-prefixer-value($property, $value, $support-webkit, $support-firefox, $support-explorer, $support-opera)
|
65
65
|
|
66
66
|
|
67
67
|
|
@@ -1,22 +1,16 @@
|
|
1
|
-
// =============================================================================
|
2
1
|
// Calculate EM
|
3
|
-
//
|
4
|
-
// This function is used to return the calculated results of EM based on the
|
5
|
-
// provided pixel values.
|
2
|
+
// -> Function to return EM calculation based on pixel values.
|
6
3
|
//
|
7
4
|
// Available as:
|
8
5
|
// skeletor-calculate-em()
|
9
6
|
// s-calculate-em()
|
10
7
|
// s-ce()
|
11
8
|
//
|
12
|
-
//
|
13
|
-
|
9
|
+
// -----------------------------------------------------------------------------
|
14
10
|
|
15
11
|
|
16
|
-
//
|
17
|
-
|
18
|
-
// -----------------------------------------------------------------------------
|
19
|
-
@function skeletor-calculate-em($target, $context: $base-font-size)
|
12
|
+
// ----- Calculate EM Function ----- //
|
13
|
+
@function skeletor-calculate-em($target, $context: 16px)
|
20
14
|
//@if not unitless($target)
|
21
15
|
$target: skeletor-strip-units($target)
|
22
16
|
$context: skeletor-strip-units($context)
|
@@ -24,20 +18,15 @@
|
|
24
18
|
@return ($target / $context) * 1em
|
25
19
|
|
26
20
|
|
27
|
-
|
28
|
-
|
29
|
-
// Alias for calculate em function
|
30
|
-
// -----------------------------------------------------------------------------
|
31
|
-
@function s-calculate-em($target, $context: $base-font-size)
|
21
|
+
// ----- Alias for Calculate EM Function ----- //
|
22
|
+
@function s-calculate-em($target, $context: 16px)
|
32
23
|
@return skeletor-calculate-em($target, $context)
|
33
24
|
|
34
|
-
@function s-ce($target, $context:
|
25
|
+
@function s-ce($target, $context: 16px)
|
35
26
|
@return skeletor-calculate-em($target, $context)
|
36
27
|
|
37
28
|
|
38
|
-
//
|
39
|
-
// If no-conflict set to allow shorter function names
|
40
|
-
// -----------------------------------------------------------------------------
|
29
|
+
// ----- If no-conflict set to allow simpler function name ----- //
|
41
30
|
// @if $no-conflict
|
42
31
|
// @function calculate-em($target, $context: $base-font-size)
|
43
32
|
// @return skeletor-calculate-em($target, $context)
|
@@ -1,19 +1,16 @@
|
|
1
|
-
// =============================================================================
|
2
1
|
// Calculate Modular Scale
|
2
|
+
// -> Function to return Modular Scale calculations
|
3
3
|
//
|
4
|
-
//
|
5
|
-
// modular scale.
|
6
|
-
//
|
7
|
-
// Available as:
|
4
|
+
// Available as:
|
8
5
|
// skeletor-modular-scale()
|
9
6
|
// skeletor-ms()
|
10
7
|
// s-modular-scale()
|
11
8
|
// s-ms()
|
12
9
|
//
|
13
|
-
//
|
14
|
-
|
10
|
+
// -----------------------------------------------------------------------------
|
15
11
|
|
16
12
|
|
13
|
+
// ----- Calculate Modular Scale Function ----- //
|
17
14
|
@function skeletor-modular-scale($position, $base-size: $ms-base-size, $ratio: $ms-ratio, $round-pixels: $ms-round-pixels)
|
18
15
|
@if $position == 0
|
19
16
|
@return $base-size
|
@@ -26,10 +23,7 @@
|
|
26
23
|
@return $result
|
27
24
|
|
28
25
|
|
29
|
-
|
30
|
-
// -----------------------------------------------------------------------------
|
31
|
-
// Alias for modular scale function
|
32
|
-
// -----------------------------------------------------------------------------
|
26
|
+
// ----- Alias for Calculate Modular Scale Function ----- //
|
33
27
|
@function skeletor-ms($position, $base-size: $ms-base-size, $ratio: $ms-ratio, $round-pixels: $ms-round-pixels)
|
34
28
|
@return skeletor-modular-scale($position, $base-size, $ratio, $round-pixels)
|
35
29
|
|
@@ -40,9 +34,7 @@
|
|
40
34
|
@return skeletor-modular-scale($position, $base-size, $ratio, $round-pixels)
|
41
35
|
|
42
36
|
|
43
|
-
//
|
44
|
-
// If no-conflict set to allow shorter function names
|
45
|
-
// -----------------------------------------------------------------------------
|
37
|
+
// ----- If no-conflict set to allow simpler function name ----- //
|
46
38
|
// @if $no-conflict
|
47
39
|
// @function ms($position, $base-size: $ms-base-size, $ratio: $ms-ratio, $round-pixels: $ms-round-pixels)
|
48
40
|
// @return skeletor-modular-scale($position, $base-size, $ratio, $round-pixels)
|
@@ -52,8 +44,6 @@
|
|
52
44
|
|
53
45
|
|
54
46
|
|
55
|
-
|
56
|
-
|
57
47
|
// *****************************************************************************
|
58
48
|
// DEBUGGING
|
59
49
|
// *****************************************************************************
|
@@ -1,42 +1,31 @@
|
|
1
|
-
// =============================================================================
|
2
1
|
// Calculate Percent
|
2
|
+
// -> Function to return percent calculation based on pixel values.
|
3
3
|
//
|
4
|
-
//
|
5
|
-
// on the provided pixel values.
|
6
|
-
//
|
7
|
-
// Available as:
|
4
|
+
// Available as:
|
8
5
|
// skeletor-calculate-percent()
|
9
6
|
// s-calculate-percent()
|
10
7
|
// s-cp()
|
11
8
|
//
|
12
|
-
//
|
13
|
-
|
9
|
+
// -----------------------------------------------------------------------------
|
14
10
|
|
15
11
|
|
16
|
-
//
|
17
|
-
|
18
|
-
// -----------------------------------------------------------------------------
|
19
|
-
@function skeletor-calculate-percent($target, $context: $base-font-size)
|
12
|
+
// ----- Calculate Percent Function ----- //
|
13
|
+
@function skeletor-calculate-percent($target, $context: 16px)
|
20
14
|
$target: skeletor-strip-units($target)
|
21
15
|
$context: skeletor-strip-units($context)
|
22
16
|
//@return ($target / $context) * 100%
|
23
17
|
@return percentage(($target / $context))
|
24
18
|
|
25
19
|
|
26
|
-
|
27
|
-
|
28
|
-
// Alias for calculate percent function
|
29
|
-
// -----------------------------------------------------------------------------
|
30
|
-
@function s-calculate-percent($target, $context: $base-font-size)
|
20
|
+
// ----- Alias for Calculate Percent Function ----- //
|
21
|
+
@function s-calculate-percent($target, $context: 16px)
|
31
22
|
@return skeletor-calculate-percent($target, $context)
|
32
23
|
|
33
|
-
@function s-cp($target, $context:
|
24
|
+
@function s-cp($target, $context: 16px)
|
34
25
|
@return skeletor-calculate-percent($target, $context)
|
35
26
|
|
36
27
|
|
37
|
-
//
|
38
|
-
// If no-conflict set to allow shorter function names
|
39
|
-
// -----------------------------------------------------------------------------
|
28
|
+
// ----- If no-conflict set to allow simpler function name ----- //
|
40
29
|
// @if $no-conflict
|
41
30
|
// @function calculate-percent($target, $context: $base-font-size)
|
42
31
|
// @return skeletor-calculate-percent($target, $context)
|
@@ -1,42 +1,31 @@
|
|
1
|
-
// =============================================================================
|
2
1
|
// Calculate REM
|
2
|
+
// -> Function to return REM calculation based on pixel values.
|
3
3
|
//
|
4
|
-
//
|
5
|
-
// provided pixel values.
|
6
|
-
//
|
7
|
-
// Available as:
|
4
|
+
// Available as:
|
8
5
|
// skeletor-calculate-rem()
|
9
6
|
// s-calculate-rem()
|
10
7
|
// s-cr()
|
11
8
|
//
|
12
|
-
//
|
13
|
-
|
9
|
+
// -----------------------------------------------------------------------------
|
14
10
|
|
15
11
|
|
16
|
-
//
|
17
|
-
|
18
|
-
// -----------------------------------------------------------------------------
|
19
|
-
@function skeletor-calculate-rem($target, $context: $base-font-size)
|
12
|
+
// ----- Calculate REM Function ----- //
|
13
|
+
@function skeletor-calculate-rem($target, $context: 16px)
|
20
14
|
$target: skeletor-strip-units($target)
|
21
15
|
$context: skeletor-strip-units($context)
|
22
16
|
|
23
17
|
@return ($target / $context) * 1rem
|
24
18
|
|
25
19
|
|
26
|
-
|
27
|
-
|
28
|
-
// Alias for calculate rem function
|
29
|
-
// -----------------------------------------------------------------------------
|
30
|
-
@function s-calculate-rem($target, $context: $base-font-size)
|
20
|
+
// ----- Alias for Calculate REM Function ----- //
|
21
|
+
@function s-calculate-rem($target, $context: 16px)
|
31
22
|
@return skeletor-calculate-rem($target, $context)
|
32
23
|
|
33
|
-
@function s-cr($target, $context:
|
24
|
+
@function s-cr($target, $context: 16px)
|
34
25
|
@return skeletor-calculate-rem($target, $context)
|
35
26
|
|
36
27
|
|
37
|
-
//
|
38
|
-
// If no-conflict set to allow shorter function names
|
39
|
-
// -----------------------------------------------------------------------------
|
28
|
+
// ----- If no-conflict set to allow simpler function name ----- //
|
40
29
|
// @if $no-conflict
|
41
30
|
// @function calculate-rem($target, $context: $base-font-size)
|
42
31
|
// @return skeletor-calculate-rem($target, $context)
|
@@ -1,28 +1,20 @@
|
|
1
|
-
// =============================================================================
|
2
1
|
// Strip Units
|
2
|
+
// -> Function to strip 'units' from a value. (12px -> 12)
|
3
3
|
//
|
4
|
-
//
|
5
|
-
//
|
6
|
-
// Available as:
|
4
|
+
// Available as:
|
7
5
|
// skeletor-strip-units()
|
8
6
|
// s-strip-units()
|
9
7
|
// s-su()
|
10
8
|
//
|
11
|
-
//
|
12
|
-
|
9
|
+
// -----------------------------------------------------------------------------
|
13
10
|
|
14
11
|
|
15
|
-
//
|
16
|
-
// Strip Units
|
17
|
-
// -----------------------------------------------------------------------------
|
12
|
+
// ----- Strip Units Function ----- //
|
18
13
|
@function skeletor-strip-units($val)
|
19
14
|
@return ($val / ($val * 0 + 1))
|
20
15
|
|
21
16
|
|
22
|
-
|
23
|
-
// -----------------------------------------------------------------------------
|
24
|
-
// Alias for strip units function
|
25
|
-
// -----------------------------------------------------------------------------
|
17
|
+
// ----- Alias for Strip Units Function ----- //
|
26
18
|
@function s-strip-units($val)
|
27
19
|
@return skeletor-strip-units($val)
|
28
20
|
|
@@ -30,9 +22,7 @@
|
|
30
22
|
@return skeletor-strip-units($val)
|
31
23
|
|
32
24
|
|
33
|
-
//
|
34
|
-
// If no-conflict set to allow shorter function names
|
35
|
-
// -----------------------------------------------------------------------------
|
25
|
+
// ----- If no-conflict set to allow simpler function name ----- //
|
36
26
|
// @if $no-conflict
|
37
27
|
// @function strip-units($val)
|
38
28
|
// @return skeletor-strip-units($val)
|
@@ -0,0 +1,31 @@
|
|
1
|
+
// Skeletor Font Size
|
2
|
+
// -> Shorthand for REM font sizes (font-size)
|
3
|
+
//
|
4
|
+
// Available as:
|
5
|
+
// +skeletor-font-size()
|
6
|
+
// +s-font-size()
|
7
|
+
// +s-fs()
|
8
|
+
//
|
9
|
+
// -----------------------------------------------------------------------------
|
10
|
+
|
11
|
+
@import "skeletor/globals/mixins/rem"
|
12
|
+
|
13
|
+
// ----- Font Size Mixin ----- //
|
14
|
+
=skeletor-font-size($target, $line-height:false)
|
15
|
+
+skeletor-rem(font-size, $target)
|
16
|
+
@if $line-height
|
17
|
+
line-height: ($base-line-height / $target)
|
18
|
+
|
19
|
+
|
20
|
+
// ----- Alias for Font Size Mixin ----- //
|
21
|
+
=s-font-size($target, $line-height: false)
|
22
|
+
+skeletor-font-size($target, $line-height)
|
23
|
+
|
24
|
+
=s-fs($target, $line-height: false)
|
25
|
+
+skeletor-font-size($target, $line-height)
|
26
|
+
|
27
|
+
|
28
|
+
// ----- If no-conflict set to allow simpler mixin name ----- //
|
29
|
+
// @if $no-conflict
|
30
|
+
// =font-size($target, $line-height: false)
|
31
|
+
// +skeletor-font-size($target, $line-height)
|
@@ -1,8 +1,5 @@
|
|
1
|
-
// =============================================================================
|
2
1
|
// Media Query
|
3
|
-
//
|
4
|
-
// The media query mixin is used to easily add responsive design elements
|
5
|
-
// whenever needed in the css.
|
2
|
+
// -> Mixin to easily add responsive design elements.
|
6
3
|
//
|
7
4
|
// Available as:
|
8
5
|
// +skeletor-media-query()
|
@@ -14,8 +11,7 @@
|
|
14
11
|
// p
|
15
12
|
// font-size: 14px
|
16
13
|
//
|
17
|
-
//
|
18
|
-
|
14
|
+
// -----------------------------------------------------------------------------
|
19
15
|
|
20
16
|
|
21
17
|
$palm-end: $lap-start - 1px
|
@@ -1,11 +1,5 @@
|
|
1
|
-
//
|
2
|
-
//
|
3
|
-
//
|
4
|
-
// The REM mixin will set the REM value with a pixel fallback for browsers
|
5
|
-
// that don't yet support rem. Vertical Spacing and Fontsize are setup as
|
6
|
-
// shorthand for the REM mixin. Vertical Spacing mixin uses the REM
|
7
|
-
// calculation to apply a rem `margin-bottom`. Font Size mixin uses the REM
|
8
|
-
// calculation top apply a rem `font-size`.
|
1
|
+
// Skeletor REM
|
2
|
+
// -> Mixin to set REM property and values with PX fallback.
|
9
3
|
//
|
10
4
|
// TODO:
|
11
5
|
// REM should be able to accept multiple properties? Should those multiple
|
@@ -14,20 +8,11 @@
|
|
14
8
|
// Available As:
|
15
9
|
// +skeletor-rem()
|
16
10
|
// +s-rem()
|
17
|
-
// +skeletor-vertical-spacing()
|
18
|
-
// +s-vertical-spacing()
|
19
|
-
// +s-vs()
|
20
|
-
// +skeletor-font-size()
|
21
|
-
// +s-font-size()
|
22
|
-
// +s-fs()
|
23
11
|
//
|
24
|
-
//
|
25
|
-
|
12
|
+
// -----------------------------------------------------------------------------
|
26
13
|
|
27
14
|
|
28
|
-
//
|
29
|
-
// REM
|
30
|
-
// -----------------------------------------------------------------------------
|
15
|
+
// ----- REM Mixin ----- //
|
31
16
|
=skeletor-rem($property, $values)
|
32
17
|
$px-values: ()
|
33
18
|
$rem-values: ()
|
@@ -51,52 +36,12 @@
|
|
51
36
|
#{$property}: $rem-values
|
52
37
|
|
53
38
|
|
54
|
-
|
55
|
-
// -----------------------------------------------------------------------------
|
56
|
-
// Alias for REM mixin
|
57
|
-
// -----------------------------------------------------------------------------
|
39
|
+
// ----- Alias for REM Mixin ----- //
|
58
40
|
=s-rem($property, $values)
|
59
41
|
+skeletor-rem($property, $values)
|
60
42
|
|
61
43
|
|
62
|
-
|
63
|
-
// -----------------------------------------------------------------------------
|
64
|
-
// Shorthand for rem vertical spacing (margin-bottom)
|
65
|
-
// -----------------------------------------------------------------------------
|
66
|
-
=skeletor-vertical-spacing($target)
|
67
|
-
+skeletor-rem(margin-bottom, $target)
|
68
|
-
|
69
|
-
=s-vertical-spacing($target)
|
70
|
-
+skeletor-vertical-spacing($target)
|
71
|
-
|
72
|
-
=s-vs($target)
|
73
|
-
+skeletor-vertical-spacing($target)
|
74
|
-
|
75
|
-
|
76
|
-
// -----------------------------------------------------------------------------
|
77
|
-
// Shorthand for rem font-size
|
78
|
-
// -----------------------------------------------------------------------------
|
79
|
-
=skeletor-font-size($target, $line-height:false)
|
80
|
-
+skeletor-rem(font-size, $target)
|
81
|
-
@if $line-height
|
82
|
-
line-height: ($base-line-height / $target)
|
83
|
-
|
84
|
-
=s-font-size($target, $line-height: false)
|
85
|
-
+skeletor-font-size($target, $line-height)
|
86
|
-
|
87
|
-
=s-fs($target, $line-height: false)
|
88
|
-
+skeletor-font-size($target, $line-height)
|
89
|
-
|
90
|
-
|
91
|
-
// -----------------------------------------------------------------------------
|
92
|
-
// If no-conflict set to allow shorter mixin names
|
93
|
-
// -----------------------------------------------------------------------------
|
44
|
+
// ----- If no-conflict set to allow simpler mixin name ----- //
|
94
45
|
// @if $no-conflict
|
95
46
|
// =rem($property, $values)
|
96
47
|
// +skeletor-rem($property, $values)
|
97
|
-
|
98
|
-
// =vertical-spacing($target)
|
99
|
-
// +skeletor-vertical-spacing($target)
|
100
|
-
|
101
|
-
// =font-size($target, $line-height: false)
|
102
|
-
// +skeletor-font-size($target, $line-height)
|