prelude-framework 0.7

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.
Files changed (53) hide show
  1. data/.gitignore +20 -0
  2. data/Gemfile +4 -0
  3. data/LICENCE +19 -0
  4. data/README.md +5 -0
  5. data/Rakefile +1 -0
  6. data/lib/prelude/version.rb +3 -0
  7. data/lib/prelude-framework.rb +8 -0
  8. data/prelude.gemspec +23 -0
  9. data/scss/prelude/_abstractions.scss +21 -0
  10. data/scss/prelude/_all.scss +6 -0
  11. data/scss/prelude/_base.scss +6 -0
  12. data/scss/prelude/_core.scss +13 -0
  13. data/scss/prelude/_debug-mode.scss +125 -0
  14. data/scss/prelude/_defaults.scss +159 -0
  15. data/scss/prelude/_functions.scss +8 -0
  16. data/scss/prelude/_images.scss +9 -0
  17. data/scss/prelude/_mixins.scss +9 -0
  18. data/scss/prelude/_modules.scss +7 -0
  19. data/scss/prelude/_typography.scss +15 -0
  20. data/scss/prelude/abstractions/_flag.scss +67 -0
  21. data/scss/prelude/abstractions/_flexbox.scss +29 -0
  22. data/scss/prelude/abstractions/_island.scss +53 -0
  23. data/scss/prelude/abstractions/_media.scss +61 -0
  24. data/scss/prelude/abstractions/_nav.scss +110 -0
  25. data/scss/prelude/abstractions/_split.scss +26 -0
  26. data/scss/prelude/base/_border-box.scss +7 -0
  27. data/scss/prelude/base/_helpers.scss +167 -0
  28. data/scss/prelude/functions/_contrasty.scss +24 -0
  29. data/scss/prelude/functions/_is-saturated.scss +14 -0
  30. data/scss/prelude/functions/_pixels-to-ems.scss +7 -0
  31. data/scss/prelude/images/_base.scss +36 -0
  32. data/scss/prelude/images/_cover-image.scss +16 -0
  33. data/scss/prelude/images/_thumbnails.scss +47 -0
  34. data/scss/prelude/mixins/_button-style.scss +40 -0
  35. data/scss/prelude/mixins/_each-grid-breakpoint.scss +21 -0
  36. data/scss/prelude/mixins/_gradients.scss +12 -0
  37. data/scss/prelude/mixins/_rem.scss +31 -0
  38. data/scss/prelude/mixins/_set-font-size.scss +26 -0
  39. data/scss/prelude/modules/_buttons.scss +126 -0
  40. data/scss/prelude/modules/_forms.scss +634 -0
  41. data/scss/prelude/modules/_tables.scss +160 -0
  42. data/scss/prelude/typography/_base.scss +16 -0
  43. data/scss/prelude/typography/_brand.scss +19 -0
  44. data/scss/prelude/typography/_links.scss +14 -0
  45. data/scss/prelude/typography/_paragraphs.scss +9 -0
  46. data/scss/prelude/typography/_quotes.scss +31 -0
  47. data/scss/prelude/typography/_sizes.scss +63 -0
  48. data/scss/prelude.scss +53 -0
  49. data/test/config.rb +9 -0
  50. data/test/index.html +381 -0
  51. data/test/scss/_prelude-settings.scss +159 -0
  52. data/test/scss/style.scss +55 -0
  53. metadata +164 -0
@@ -0,0 +1,61 @@
1
+ // =============================================================================
2
+ // Media Object
3
+ // The media object is an image to the left, with descriptive content
4
+ // to the right (and an optional button to the right).
5
+ // It saves hundreds of lines of code.
6
+ //
7
+ // Learn more:
8
+ // http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/
9
+ //
10
+ // @usage:
11
+ // <div class="t-media">
12
+ // <div class="t-media__fl">
13
+ // <img src="placehold.it/45" alt="image">
14
+ // </div>
15
+ // <div class="t-media__body">
16
+ // Descriptive content to the right
17
+ // </div>
18
+ // </div>
19
+ //
20
+ // @usage (extended - adding a button to the right):
21
+ // <div class="t-media">
22
+ // <div class="t-media__fr">
23
+ // <a href="#" class="btn">click me</a>
24
+ // </div>
25
+ // <div class="t-media__fl">
26
+ // <img src="placehold.it/45" alt="image">
27
+ // </div>
28
+ // <div class="t-media__body">
29
+ // Descriptive content to the right
30
+ // </div>
31
+ // </div>
32
+ //
33
+ // =============================================================================
34
+
35
+ // Container
36
+ .media {
37
+ @extend %prelude-clearfix;
38
+ }
39
+
40
+ // Left floated image
41
+ .media__fl {
42
+ float: left;
43
+ margin-right: $base-spacing-unit;
44
+
45
+ .islet & { margin-right: $half-spacing-unit; }
46
+ .nauru & { margin-right: $quarter-spacing-unit; }
47
+ }
48
+
49
+ // Right floated image
50
+ .media__fr {
51
+ float: right;
52
+ margin-left: $base-spacing-unit;
53
+ .islet & { margin-left: $half-spacing-unit; }
54
+ .nauru & { margin-left: $quarter-spacing-unit; }
55
+ }
56
+
57
+ // Main content
58
+ .media__body {
59
+ @extend %prelude-clearfix;
60
+ overflow: hidden;
61
+ }
@@ -0,0 +1,110 @@
1
+ // =============================================================================
2
+ // Nav Object
3
+ //
4
+ // The nav object is a horizontal list of things (a menu, a breadcrumb, a list
5
+ // of logos,…)
6
+ // It saves lots of lines of code.
7
+ //
8
+ // Table of contents:
9
+ // 1. Nav
10
+ // 2. Stacked extension
11
+ // 3. Banner extension
12
+ // 4. Elastic extension
13
+ //
14
+ // Learn more:
15
+ // http://csswizardry.com/2011/09/the-nav-abstraction/
16
+ //
17
+ // =============================================================================
18
+
19
+ // =============================================================================
20
+ // 1. Nav
21
+ //
22
+ // @usage:
23
+ // <ul class="nav">
24
+ // <li><a href="#">item 1</a></li>
25
+ // <li><a href="#">item 2</a></li>
26
+ // <li><a href="#">item 3</a></li>
27
+ // </ul>
28
+ //
29
+ // =============================================================================
30
+
31
+ // Use only on `ul` or `ol` elements
32
+ .nav {
33
+ @extend %prelude-clearfix;
34
+ list-style: none;
35
+ margin-left: 0;
36
+
37
+ // (Required)
38
+ > li,
39
+ > li > a {
40
+ display: inline-block;
41
+ }
42
+
43
+ }
44
+
45
+
46
+ // =============================================================================
47
+ // 2. Stacked extension
48
+ //
49
+ // Vertical mode for the list
50
+ //
51
+ // @usage:
52
+ // <ul class="nav nav--stacked">
53
+ // <li><a href="#">item 1</a></li>
54
+ // <li><a href="#">item 2</a></li>
55
+ // <li><a href="#">item 3</a></li>
56
+ // </ul>
57
+ //
58
+ // =============================================================================
59
+
60
+ .nav--stacked {
61
+ > li {
62
+ display:list-item;
63
+ > a { display: block; }
64
+ }
65
+ }
66
+
67
+
68
+ // =============================================================================
69
+ // 3. Banner extension
70
+ //
71
+ // Centered list
72
+ //
73
+ // @usage:
74
+ // <ul class="nav nav--banner">
75
+ // <li><a href="#">item 1</a></li>
76
+ // <li><a href="#">item 2</a></li>
77
+ // <li><a href="#">item 3</a></li>
78
+ // </ul>
79
+ //
80
+ // =============================================================================
81
+
82
+ .nav--banner {
83
+ text-align: center;
84
+ }
85
+
86
+
87
+ // =============================================================================
88
+ // 4. Elastic extension
89
+ //
90
+ // Makes the list span the whole width
91
+ //
92
+ // @usage:
93
+ // <ul class="nav nav--elastic">
94
+ // <li><a href="#">item 1</a></li>
95
+ // <li><a href="#">item 2</a></li>
96
+ // <li><a href="#">item 3</a></li>
97
+ // </ul>
98
+ //
99
+ // =============================================================================
100
+
101
+ .nav--elastic {
102
+ display: table !important;
103
+ width: 100%;
104
+ padding-left: 0;
105
+
106
+ >li {
107
+ text-align: center;
108
+ display: table-cell !important;
109
+ }
110
+ }
@@ -0,0 +1,26 @@
1
+ // =============================================================================
2
+ // Split
3
+ //
4
+ // The split abstraction floats two elements away from each other
5
+ //
6
+ // @usage:
7
+ // <dl class="split">
8
+ // <dt class="split__left">Title</dt>
9
+ // <dd>Value</dd>
10
+ // </dl>
11
+ //
12
+ // =============================================================================
13
+
14
+ // Split block
15
+ .split{
16
+ text-align: right;
17
+ list-style: none;
18
+ margin-left: 0;
19
+ }
20
+
21
+ // Element to the left
22
+ .split__left{
23
+ text-align: left;
24
+ float: left;
25
+ clear: left;
26
+ }
@@ -0,0 +1,7 @@
1
+ // =============================================================================
2
+ // Border-box FTW
3
+ // =============================================================================
4
+
5
+ * {
6
+ @include box-sizing(border-box);
7
+ }
@@ -0,0 +1,167 @@
1
+ // =============================================================================
2
+ // Helpers
3
+ // A collection of helper classes
4
+ //
5
+ // Table of contents:
6
+ // 1. Clearfix
7
+ // 2. Floats
8
+ // 3. Text utilities
9
+ // 4. Display utilities
10
+ // 5. Hidden text
11
+ // 6. Add/remove margins
12
+ // 7. Add/remove paddings
13
+ //
14
+ // =============================================================================
15
+
16
+ // =============================================================================
17
+ // 1. Clearfix
18
+ // =============================================================================
19
+
20
+ .cf { @extend %prelude-clearfix; }
21
+
22
+ // =============================================================================
23
+ // 2. Floats
24
+ // =============================================================================
25
+
26
+ // Float left
27
+ .fl { float: left; }
28
+
29
+ // Float right
30
+ .fr { float: right }
31
+
32
+ // Float none
33
+ .fn { float: none; }
34
+
35
+ // Clear left
36
+ .cl { clear: left; }
37
+
38
+ // Clear right
39
+ .cr { clear: right; }
40
+
41
+ // Clear both
42
+ .cb { clear: both; }
43
+
44
+ // =============================================================================
45
+ // 3. Text utilities
46
+ // =============================================================================
47
+
48
+ // Ellipsis clips text that does not fit into its box
49
+ .ellipsis { @include ellipsis; }
50
+
51
+ // Uppercase text
52
+ .caps { text-transform: uppercase; }
53
+
54
+
55
+ // Text alignment
56
+ // =============================================================================
57
+
58
+ .text--left { text-align: left; }
59
+ .text--center { text-align: center; }
60
+ .text--right { text-align: right; }
61
+
62
+
63
+ // =============================================================================
64
+ // 4. Display state utilities
65
+ // =============================================================================
66
+
67
+ // Hide for both screenreaders and browsers:
68
+ // css-discuss.incutio.com/wiki/Screenreader_Visibility
69
+ .is-hidden {
70
+ display: none !important;
71
+ visibility: hidden !important;
72
+ }
73
+
74
+ .is-displayed {
75
+ display: block !important;
76
+ visibility: visible !important;
77
+ }
78
+
79
+ // Hide visually and from screenreaders, but maintain layout
80
+ .is-invisible {
81
+ visibility: hidden !important;
82
+ }
83
+
84
+ .is-visible {
85
+ visibility: visible !important;
86
+ }
87
+
88
+ // Hide only visually, but have it available for screenreaders: h5bp.com/v
89
+ .is-visually-hidden {
90
+ position: absolute;
91
+ overflow: hidden;
92
+ clip: rect(0 0 0 0);
93
+ height: 1px;
94
+ width: 1px;
95
+ margin: -1px;
96
+ padding: 0;
97
+ border: 0;
98
+ }
99
+
100
+ // =============================================================================
101
+ // 5. Hidden text
102
+ // =============================================================================
103
+
104
+ // Hides text using the Kellum method
105
+ // http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/
106
+ .ht {
107
+ text-indent: 100%;
108
+ white-space: nowrap;
109
+ overflow: hidden;
110
+ }
111
+
112
+ // =============================================================================
113
+ // 6. Add/remove margins
114
+ // =============================================================================
115
+
116
+ .push { margin: $base-spacing-unit !important; }
117
+ .push--top { margin-top: $base-spacing-unit !important; }
118
+ .push--right { margin-right: $base-spacing-unit !important; }
119
+ .push--bottom { margin-bottom: $base-spacing-unit !important; }
120
+ .push--left { margin-left: $base-spacing-unit !important; }
121
+ .push--ends { margin-top: $base-spacing-unit !important; margin-bottom: $base-spacing-unit !important; }
122
+ .push--sides { margin-right: $base-spacing-unit !important; margin-left: $base-spacing-unit !important; }
123
+
124
+ .push-half { margin: $half-spacing-unit !important; }
125
+ .push-half--top { margin-top: $half-spacing-unit !important; }
126
+ .push-half--right { margin-right: $half-spacing-unit !important; }
127
+ .push-half--bottom { margin-bottom:$half-spacing-unit !important; }
128
+ .push-half--left { margin-left: $half-spacing-unit !important; }
129
+ .push-half--ends { margin-top: $half-spacing-unit !important; margin-bottom:$half-spacing-unit !important; }
130
+ .push-half--sides { margin-right: $half-spacing-unit !important; margin-left: $half-spacing-unit !important; }
131
+
132
+ .flush { margin: 0 !important; }
133
+ .flush--top { margin-top: 0 !important; }
134
+ .flush--right { margin-right: 0 !important; }
135
+ .flush--bottom { margin-bottom:0 !important; }
136
+ .flush--left { margin-left: 0 !important; }
137
+ .flush--ends { margin-top: 0 !important; margin-bottom:0 !important; }
138
+ .flush--sides { margin-right: 0 !important; margin-left: 0 !important; }
139
+
140
+
141
+ // =============================================================================
142
+ // 7. Add/remove paddings
143
+ // =============================================================================
144
+
145
+ .soft { padding: $base-spacing-unit !important; }
146
+ .soft--top { padding-top: $base-spacing-unit !important; }
147
+ .soft--right { padding-right: $base-spacing-unit !important; }
148
+ .soft--bottom { padding-bottom:$base-spacing-unit !important; }
149
+ .soft--left { padding-left: $base-spacing-unit !important; }
150
+ .soft--ends { padding-top: $base-spacing-unit !important; padding-bottom:$base-spacing-unit !important; }
151
+ .soft--sides { padding-right: $base-spacing-unit !important; padding-left: $base-spacing-unit !important; }
152
+
153
+ .soft-half { padding: $half-spacing-unit !important; }
154
+ .soft-half--top { padding-top: $half-spacing-unit !important; }
155
+ .soft-half--right { padding-right: $half-spacing-unit !important; }
156
+ .soft-half--bottom { padding-bottom:$half-spacing-unit !important; }
157
+ .soft-half--left { padding-left: $half-spacing-unit !important; }
158
+ .soft-half--ends { padding-top: $half-spacing-unit !important; padding-bottom:$half-spacing-unit !important; }
159
+ .soft-half--sides { padding-right: $half-spacing-unit !important; padding-left: $half-spacing-unit !important; }
160
+
161
+ .hard { padding: 0 !important; }
162
+ .hard--top { padding-top: 0 !important; }
163
+ .hard--right { padding-right: 0 !important; }
164
+ .hard--bottom { padding-bottom:0 !important; }
165
+ .hard--left { padding-left: 0 !important; }
166
+ .hard--ends { padding-top: 0 !important; padding-bottom:0 !important; }
167
+ .hard--sides { padding-right: 0 !important; padding-left: 0 !important; }
@@ -0,0 +1,24 @@
1
+ // =============================================================================
2
+ // Contrasty
3
+ //
4
+ // A more robust color contrast function
5
+ // Important! -> This function might be part of Compass 0.13
6
+ // https://github.com/chriseppstein/compass/issues/1051
7
+ // =============================================================================
8
+
9
+ @function contrasty(
10
+ $bg-color,
11
+ $dark-color: black,
12
+ $light-color: white
13
+ ) {
14
+
15
+ $color-brightness: round((red($bg-color) * 299) + (green($bg-color) * 587) + (blue($bg-color) * 114) / 1000);
16
+ $light-color-brightness: round((red($light-color) * 299) + (green($light-color) * 587) + (blue($light-color) * 114) / 1000);
17
+ $dark-color-brightness: round((red($dark-color) * 299) + (green($dark-color) * 587) + (blue($dark-color) * 114) / 1000);
18
+
19
+ @if abs($color-brightness - $light-color-brightness) > abs($color-brightness - $dark-color-brightness) {
20
+ @return $light-color;
21
+ } @else {
22
+ @return $dark-color;
23
+ }
24
+ }
@@ -0,0 +1,14 @@
1
+ // =============================================================================
2
+ // Is saturated?
3
+ //
4
+ // Checks if a color has saturation or not
5
+ //
6
+ // =============================================================================
7
+
8
+ @function is-saturated($color) {
9
+ @if ($color == desaturate($color,100%)) {
10
+ @return false;
11
+ } @else {
12
+ @return true;
13
+ }
14
+ }
@@ -0,0 +1,7 @@
1
+ // =============================================================================
2
+ // Convert pixel values into ems
3
+ // =============================================================================
4
+
5
+ @function pixels-to-ems($px, $context: $base-font-size) {
6
+ @return #{$px / $context}em;
7
+ }
@@ -0,0 +1,36 @@
1
+ // =============================================================================
2
+ // Base
3
+ //
4
+ // Base image styles
5
+ // =============================================================================
6
+
7
+ img {
8
+ max-width: 100%;
9
+ }
10
+
11
+ figure > img {
12
+ display: block;
13
+ }
14
+
15
+
16
+ // Image placement
17
+ // =============================================================================
18
+
19
+ .img--center{
20
+ display: block;
21
+ margin-right: auto;
22
+ margin-bottom: $base-spacing-unit;
23
+ margin-left: auto;
24
+ }
25
+
26
+ .img--left{
27
+ float: left;
28
+ margin-right: $base-spacing-unit;
29
+ margin-bottom: $base-spacing-unit;
30
+ }
31
+
32
+ .img--right{
33
+ float: right;
34
+ margin-bottom: $base-spacing-unit;
35
+ margin-left: $base-spacing-unit;
36
+ }
@@ -0,0 +1,16 @@
1
+ // =============================================================================
2
+ // Cover Image mixin
3
+ // =============================================================================
4
+
5
+ @mixin cover-image($image-url, $background-position: 50% 50%){
6
+ @include background-size(cover);
7
+ position: fixed;
8
+ top: 0;
9
+ left: 0;
10
+ z-index: -1;
11
+ width: 100%;
12
+ height: 100%;
13
+ background-image: image-url($image-url);
14
+ background-repeat: no-repeat;
15
+ background-position: $background-position;
16
+ }
@@ -0,0 +1,47 @@
1
+ // =============================================================================
2
+ // Thumbnails
3
+ //
4
+ // Classes for styling <img> elements
5
+ //
6
+ // Table of contents:
7
+ // 1. Thumbnail Rounded
8
+ // 2. Thumbnail Circle
9
+ // 3. Thumbnail Polaroid
10
+ //
11
+ // =============================================================================
12
+
13
+ // =============================================================================
14
+ // Settings
15
+ // =============================================================================
16
+
17
+ $thumbail-rounded-radius: $default-border-radius !default;
18
+ $thumbail-polaroid-border-width: 4px !default;
19
+
20
+
21
+ // =============================================================================
22
+ // 1. Thumbnail-rounded
23
+ // =============================================================================
24
+
25
+ .thumbnail-rounded {
26
+ border-radius: $thumbail-rounded-radius;
27
+ }
28
+
29
+
30
+ // =============================================================================
31
+ // 2. Thumbnail-rounded
32
+ // =============================================================================
33
+
34
+ .thumbnail-circle {
35
+ border-radius: 500px;
36
+ }
37
+
38
+
39
+ // =============================================================================
40
+ // 3. Thumbnail-rounded
41
+ // =============================================================================
42
+
43
+ .thumbnail-polaroid {
44
+ @include box-shadow(0 1px 2px rgba(0,0,0,.25));
45
+ padding: 4px;
46
+ background-color: #fff;
47
+ }
@@ -0,0 +1,40 @@
1
+ // =============================================================================
2
+ // Buttons style generator
3
+ //
4
+ // @usage:
5
+ // simply include the btn-style mixin into your new button class and pass
6
+ // the desired background color. The mixin takes care of gradients and
7
+ // text color
8
+ // =============================================================================
9
+
10
+ @import "gradients";
11
+
12
+ @mixin btn-style($background-color, $use-gradient: $btn-use-gradient ){
13
+
14
+ $is-saturated: is-saturated($background-color);
15
+ $contrast-color: contrasty($background-color, scale-lightness($background-color, 90%), scale-lightness($background-color, -90%));
16
+
17
+ @if ($is-saturated) {
18
+ border-color: scale-saturation(scale-lightness($background-color, -40%), 75%);
19
+ } @else {
20
+ border-color: scale-lightness($background-color, -40%);
21
+ }
22
+
23
+ color: $contrast-color;
24
+
25
+ @if $use-gradient == false {
26
+ background-color: $background-color;
27
+ &:hover { background-color: scale-lightness($background-color, 25%); }
28
+ } @else {
29
+
30
+ @if ($is-saturated) {
31
+ @include vertical-gradient(scale-saturation(scale-lightness($background-color, 30%), 50%), scale-saturation(scale-lightness($background-color, -15%), 50%));
32
+ } @else {
33
+ @include vertical-gradient(scale-lightness($background-color, 30%), scale-lightness($background-color, -15%));
34
+ }
35
+
36
+ filter: "progid:DXImageTransform.Microsoft.gradient(enabled = false)"; // Reset filter for IE
37
+ background-repeat: repeat-x;
38
+ text-shadow: 0 1px 0 rgba(invert($contrast-color), .5);
39
+ }
40
+ }
@@ -0,0 +1,21 @@
1
+ // =============================================================================
2
+ // Each grid breakpoint
3
+ // Generates a class with for each breakpoint
4
+ // =============================================================================
5
+
6
+ @mixin each-grid-breakpoint($class-name, $base-class: false) {
7
+
8
+ @if $base-class == true {
9
+ .#{$class-name}{
10
+ @content;
11
+ }
12
+ }
13
+
14
+ @each $grid in $grids {
15
+ .#{$grid}-#{$class-name}{
16
+ @include respond-to(#{nth($breakpoints,index($grids, $grid))}-only){
17
+ @content;
18
+ }
19
+ }
20
+ }
21
+ }
@@ -0,0 +1,12 @@
1
+ // =============================================================================
2
+ // Gradient mixins
3
+ // =============================================================================
4
+
5
+ // Vertical gradient
6
+ @mixin vertical-gradient($primary-color, $secondary-color) {
7
+ background-color: $secondary-color;
8
+ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, $primary-color), color-stop(100%, $secondary-color));
9
+ background-image: -webkit-linear-gradient($primary-color, $secondary-color);
10
+ background-image: linear-gradient($primary-color, $secondary-color);
11
+ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#{ie-hex-str($primary-color)}', endColorstr='#{ie-hex-str($secondary-color)}')";
12
+ }
@@ -0,0 +1,31 @@
1
+ // =============================================================================
2
+ // Pixels to rems
3
+ //
4
+ // @usage: @include rem(property, value-in-pixels)
5
+ // @example: @include rem(font-size, 16px); // result: font-size: 16px; font-size: 1rem;
6
+ //
7
+ // =============================================================================
8
+
9
+ @mixin rem($property, $values) {
10
+
11
+ // Placeholder variables
12
+ $shorthand-px: "";
13
+ $shorthand-rem: "";
14
+
15
+ // Parameter $values might be a list of elements
16
+ @each $value in $values
17
+ {
18
+ // Current value is a valid number and greater than 0
19
+ @if $value != auto and $value != 0 {
20
+ $shorthand-px: #{ $shorthand-px + " " + $value };
21
+ $shorthand-rem: #{ $shorthand-rem + " " + ($value / $base-font-size) + rem };
22
+ } @else {
23
+ // Add only 'auto' or 0 to the placeholder variables
24
+ $shorthand-px: #{ $shorthand-px + " " + $value };
25
+ $shorthand-rem: #{ $shorthand-rem + " " + $value };
26
+ }
27
+ }
28
+ // Output the property in px and rems
29
+ #{$property}: $shorthand-px;
30
+ #{$property}: $shorthand-rem;
31
+ }
@@ -0,0 +1,26 @@
1
+ // =============================================================================
2
+ // Set font size mixins
3
+ //
4
+ // Sets base html font-size and line-height. Use within media queries for
5
+ // responsive typography. Font size is converted into percentage and line-height
6
+ // in a unit-less value.
7
+ //
8
+ // @usage
9
+ // // Base
10
+ // @include set-font-size(24px, 36px);
11
+ // // Responsive design
12
+ // @media only screen and (min-width: 30em) {
13
+ // @include set-font-size(18px, 24px);
14
+ // }
15
+ //
16
+ // =============================================================================
17
+
18
+ @mixin set-font-size($font-size: $base-font-size, $base-line: $base-line-height ) {
19
+ $fs: (($font-size / 1px ) / 16) * 100;
20
+ $bl: ($base-line / $font-size);
21
+
22
+ html {
23
+ font-size: $fs * 1%;
24
+ line-height: $bl;
25
+ }
26
+ }