forked from hemminger8/vw-starter-kit
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path_vw-starter.scss
167 lines (110 loc) · 4.61 KB
/
_vw-starter.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
//
// VW STARTER KIT
// https://github.com/hemminger8/vw-starter-kit
//
/* ----------------------------------------------------------------------------
Variables
Set the variables below to match your Photoshop file widths (in pixels) and to specify breakpoints based on browser window size.
---------------------------------------------------------------------------- */
// base font size must be in pixels!!!
$base-font-size: 16px;
// layouts -- the pixel width of the Photoshop file for each layout
$desktop-layout: 1250px;
$tablet-layout: 640px;
$mobile-layout: 320px;
// min max breakpoints -- the browser window size at which the layout should change
$desktop-max: 1250px;
$desktop-min: 900px;
$tablet-max: 899px;
$tablet-min: 601px;
$mobile-max: 600px;
/* ----------------------------------------------------------------------------
strip-units() : convert 14px/14em/etc to (int) 14
---------------------------------------------------------------------------- */
@function strip-units($number) {
@if ($number == null) {
@return null;
}
@return $number / ($number * 0 + 1);
}
/* ----------------------------------------------------------------------------
px2rem() : convert from pixels to rems
---------------------------------------------------------------------------- */
@function px2rem($pixels) {
$pixels : strip-units($pixels);
$unitless-base-font-size : strip-units($base-font-size);
@return #{$pixels/$unitless-base-font-size}rem;
}
/* ----------------------------------------------------------------------------
px2em() : convert from pixels to ems, based on the context (inherited font-size in pixels)
---------------------------------------------------------------------------- */
@function px2em($pixels, $context: $base-font-size) {
$pixels : strip-units($pixels);
$context : strip-units($context);
@return #{$pixels/$context}em;
}
/* ----------------------------------------------------------------------------
px2vw() : used to calculate vw font size so as to match Photoshop (or similar) design files.
Example usage:
$base-font-size: 16px;
html {
font-size: $base-font-size;
// set font-size to scale until reach max width of the site
@media screen and (max-width: $desktop-max) {
font-size: px2vw($base-font-size, $desktop-layout);
}
// font size reset to 16px at the tablet design layout width
@media screen and (max-width: $tablet-max) {
font-size: px2vw($base-font-size, $tablet-layout);
}
// font size reset to 16px at the mobile design layout width
@media screen and (max-width: $mobile-max) {
font-size: px2vw($base-font-size, $mobile-layout);
}
}
---------------------------------------------------------------------------- */
@function px2vw($font-size-px, $layout-size-px) {
$font-size-px : strip-units($font-size-px);
$layout-size-px : strip-units($layout-size-px);
@return ($font-size-px / $layout-size-px) * 100vw;
}
/* ----------------------------------------------------------------------------
vw-base() - set base font-size values in vws for each breakpoint
---------------------------------------------------------------------------- */
@mixin vw-base($body-width-fix: true) {
@if ($body-width-fix) {
@media screen {
width: 100vw;
margin-left: calc((100% - 100vw) / 2);
overflow-x: hidden;
}
}
font-size: $base-font-size * ($desktop-max/$desktop-layout);
// set font-size to scale until reach max width of the site
@media screen and (max-width: $desktop-max) {
font-size: px2vw($base-font-size, $desktop-layout);
}
// font size reset to 16px at the tablet design layout width
@media screen and (max-width: $tablet-max) {
font-size: px2vw($base-font-size, $tablet-layout);
}
// font size reset to 16px at the mobile design layout width
@media screen and (max-width: $mobile-max) {
font-size: px2vw($base-font-size, $mobile-layout);
}
}
/* ----------------------------------------------------------------------------
font-size-breakpoint() - calculate min/max font size breakpoints (for specific components)
Example usage:
blockquote {
font-size: px2rem(17); // scaling down from a base size of 17px
// when font-size shrinks to 12px, set the CSS to 12px to stop
// further scaling
@media (max-width: font-size-breakpoint(12px, $desktop-layout, 17px)) {
font-size: 12px;
}
}
---------------------------------------------------------------------------- */
@function font-size-breakpoint($font-size-limit-px, $layout-size-px, $font-size-px: $base-font-size) {
@return (($font-size-limit-px / $font-size-px) * $layout-size-px);
}