typey 1.0.0.alpha.2
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +7 -0
- data/LICENSE.txt +339 -0
- data/README.md +113 -0
- data/lib/typey.rb +10 -0
- data/stylesheets/_typey.scss +6 -0
- data/stylesheets/typey/_defaults.scss +59 -0
- data/stylesheets/typey/_font-size.scss +49 -0
- data/stylesheets/typey/_font-stacks.scss +25 -0
- data/stylesheets/typey/_font-weight.scss +12 -0
- data/stylesheets/typey/_helpers.scss +49 -0
- data/stylesheets/typey/_line-height.scss +63 -0
- data/typey.gemspec +27 -0
- metadata +68 -0
checksums.yaml
ADDED
@@ -0,0 +1,7 @@
|
|
1
|
+
---
|
2
|
+
SHA1:
|
3
|
+
metadata.gz: d5bde67de41ca21a5a20e598d671daea1016cb84
|
4
|
+
data.tar.gz: 189981d94abe425190b521182a59192470b8ebbe
|
5
|
+
SHA512:
|
6
|
+
metadata.gz: c46083bc0fcb61690da13fbe35423b02bbde95d0b1980f5ac4c535dfe1fade6700c93fc6437998f1c41f7575fc3296668ccd81c2a7f0f1144e12dac4456f0e22
|
7
|
+
data.tar.gz: 71264cfab07b7df2fec6d2bf12b93f1220f6661ee800d9aa1d825d706c1751bdd1a2a3a2416a26cb57bbd032faf808eb64abc6a5b5272ecbef547bbadd8ec7bf
|
data/LICENSE.txt
ADDED
@@ -0,0 +1,339 @@
|
|
1
|
+
GNU GENERAL PUBLIC LICENSE
|
2
|
+
Version 2, June 1991
|
3
|
+
|
4
|
+
Copyright (C) 1989, 1991 Free Software Foundation, Inc.,
|
5
|
+
51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
|
6
|
+
Everyone is permitted to copy and distribute verbatim copies
|
7
|
+
of this license document, but changing it is not allowed.
|
8
|
+
|
9
|
+
Preamble
|
10
|
+
|
11
|
+
The licenses for most software are designed to take away your
|
12
|
+
freedom to share and change it. By contrast, the GNU General Public
|
13
|
+
License is intended to guarantee your freedom to share and change free
|
14
|
+
software--to make sure the software is free for all its users. This
|
15
|
+
General Public License applies to most of the Free Software
|
16
|
+
Foundation's software and to any other program whose authors commit to
|
17
|
+
using it. (Some other Free Software Foundation software is covered by
|
18
|
+
the GNU Lesser General Public License instead.) You can apply it to
|
19
|
+
your programs, too.
|
20
|
+
|
21
|
+
When we speak of free software, we are referring to freedom, not
|
22
|
+
price. Our General Public Licenses are designed to make sure that you
|
23
|
+
have the freedom to distribute copies of free software (and charge for
|
24
|
+
this service if you wish), that you receive source code or can get it
|
25
|
+
if you want it, that you can change the software or use pieces of it
|
26
|
+
in new free programs; and that you know you can do these things.
|
27
|
+
|
28
|
+
To protect your rights, we need to make restrictions that forbid
|
29
|
+
anyone to deny you these rights or to ask you to surrender the rights.
|
30
|
+
These restrictions translate to certain responsibilities for you if you
|
31
|
+
distribute copies of the software, or if you modify it.
|
32
|
+
|
33
|
+
For example, if you distribute copies of such a program, whether
|
34
|
+
gratis or for a fee, you must give the recipients all the rights that
|
35
|
+
you have. You must make sure that they, too, receive or can get the
|
36
|
+
source code. And you must show them these terms so they know their
|
37
|
+
rights.
|
38
|
+
|
39
|
+
We protect your rights with two steps: (1) copyright the software, and
|
40
|
+
(2) offer you this license which gives you legal permission to copy,
|
41
|
+
distribute and/or modify the software.
|
42
|
+
|
43
|
+
Also, for each author's protection and ours, we want to make certain
|
44
|
+
that everyone understands that there is no warranty for this free
|
45
|
+
software. If the software is modified by someone else and passed on, we
|
46
|
+
want its recipients to know that what they have is not the original, so
|
47
|
+
that any problems introduced by others will not reflect on the original
|
48
|
+
authors' reputations.
|
49
|
+
|
50
|
+
Finally, any free program is threatened constantly by software
|
51
|
+
patents. We wish to avoid the danger that redistributors of a free
|
52
|
+
program will individually obtain patent licenses, in effect making the
|
53
|
+
program proprietary. To prevent this, we have made it clear that any
|
54
|
+
patent must be licensed for everyone's free use or not licensed at all.
|
55
|
+
|
56
|
+
The precise terms and conditions for copying, distribution and
|
57
|
+
modification follow.
|
58
|
+
|
59
|
+
GNU GENERAL PUBLIC LICENSE
|
60
|
+
TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
|
61
|
+
|
62
|
+
0. This License applies to any program or other work which contains
|
63
|
+
a notice placed by the copyright holder saying it may be distributed
|
64
|
+
under the terms of this General Public License. The "Program", below,
|
65
|
+
refers to any such program or work, and a "work based on the Program"
|
66
|
+
means either the Program or any derivative work under copyright law:
|
67
|
+
that is to say, a work containing the Program or a portion of it,
|
68
|
+
either verbatim or with modifications and/or translated into another
|
69
|
+
language. (Hereinafter, translation is included without limitation in
|
70
|
+
the term "modification".) Each licensee is addressed as "you".
|
71
|
+
|
72
|
+
Activities other than copying, distribution and modification are not
|
73
|
+
covered by this License; they are outside its scope. The act of
|
74
|
+
running the Program is not restricted, and the output from the Program
|
75
|
+
is covered only if its contents constitute a work based on the
|
76
|
+
Program (independent of having been made by running the Program).
|
77
|
+
Whether that is true depends on what the Program does.
|
78
|
+
|
79
|
+
1. You may copy and distribute verbatim copies of the Program's
|
80
|
+
source code as you receive it, in any medium, provided that you
|
81
|
+
conspicuously and appropriately publish on each copy an appropriate
|
82
|
+
copyright notice and disclaimer of warranty; keep intact all the
|
83
|
+
notices that refer to this License and to the absence of any warranty;
|
84
|
+
and give any other recipients of the Program a copy of this License
|
85
|
+
along with the Program.
|
86
|
+
|
87
|
+
You may charge a fee for the physical act of transferring a copy, and
|
88
|
+
you may at your option offer warranty protection in exchange for a fee.
|
89
|
+
|
90
|
+
2. You may modify your copy or copies of the Program or any portion
|
91
|
+
of it, thus forming a work based on the Program, and copy and
|
92
|
+
distribute such modifications or work under the terms of Section 1
|
93
|
+
above, provided that you also meet all of these conditions:
|
94
|
+
|
95
|
+
a) You must cause the modified files to carry prominent notices
|
96
|
+
stating that you changed the files and the date of any change.
|
97
|
+
|
98
|
+
b) You must cause any work that you distribute or publish, that in
|
99
|
+
whole or in part contains or is derived from the Program or any
|
100
|
+
part thereof, to be licensed as a whole at no charge to all third
|
101
|
+
parties under the terms of this License.
|
102
|
+
|
103
|
+
c) If the modified program normally reads commands interactively
|
104
|
+
when run, you must cause it, when started running for such
|
105
|
+
interactive use in the most ordinary way, to print or display an
|
106
|
+
announcement including an appropriate copyright notice and a
|
107
|
+
notice that there is no warranty (or else, saying that you provide
|
108
|
+
a warranty) and that users may redistribute the program under
|
109
|
+
these conditions, and telling the user how to view a copy of this
|
110
|
+
License. (Exception: if the Program itself is interactive but
|
111
|
+
does not normally print such an announcement, your work based on
|
112
|
+
the Program is not required to print an announcement.)
|
113
|
+
|
114
|
+
These requirements apply to the modified work as a whole. If
|
115
|
+
identifiable sections of that work are not derived from the Program,
|
116
|
+
and can be reasonably considered independent and separate works in
|
117
|
+
themselves, then this License, and its terms, do not apply to those
|
118
|
+
sections when you distribute them as separate works. But when you
|
119
|
+
distribute the same sections as part of a whole which is a work based
|
120
|
+
on the Program, the distribution of the whole must be on the terms of
|
121
|
+
this License, whose permissions for other licensees extend to the
|
122
|
+
entire whole, and thus to each and every part regardless of who wrote it.
|
123
|
+
|
124
|
+
Thus, it is not the intent of this section to claim rights or contest
|
125
|
+
your rights to work written entirely by you; rather, the intent is to
|
126
|
+
exercise the right to control the distribution of derivative or
|
127
|
+
collective works based on the Program.
|
128
|
+
|
129
|
+
In addition, mere aggregation of another work not based on the Program
|
130
|
+
with the Program (or with a work based on the Program) on a volume of
|
131
|
+
a storage or distribution medium does not bring the other work under
|
132
|
+
the scope of this License.
|
133
|
+
|
134
|
+
3. You may copy and distribute the Program (or a work based on it,
|
135
|
+
under Section 2) in object code or executable form under the terms of
|
136
|
+
Sections 1 and 2 above provided that you also do one of the following:
|
137
|
+
|
138
|
+
a) Accompany it with the complete corresponding machine-readable
|
139
|
+
source code, which must be distributed under the terms of Sections
|
140
|
+
1 and 2 above on a medium customarily used for software interchange; or,
|
141
|
+
|
142
|
+
b) Accompany it with a written offer, valid for at least three
|
143
|
+
years, to give any third party, for a charge no more than your
|
144
|
+
cost of physically performing source distribution, a complete
|
145
|
+
machine-readable copy of the corresponding source code, to be
|
146
|
+
distributed under the terms of Sections 1 and 2 above on a medium
|
147
|
+
customarily used for software interchange; or,
|
148
|
+
|
149
|
+
c) Accompany it with the information you received as to the offer
|
150
|
+
to distribute corresponding source code. (This alternative is
|
151
|
+
allowed only for noncommercial distribution and only if you
|
152
|
+
received the program in object code or executable form with such
|
153
|
+
an offer, in accord with Subsection b above.)
|
154
|
+
|
155
|
+
The source code for a work means the preferred form of the work for
|
156
|
+
making modifications to it. For an executable work, complete source
|
157
|
+
code means all the source code for all modules it contains, plus any
|
158
|
+
associated interface definition files, plus the scripts used to
|
159
|
+
control compilation and installation of the executable. However, as a
|
160
|
+
special exception, the source code distributed need not include
|
161
|
+
anything that is normally distributed (in either source or binary
|
162
|
+
form) with the major components (compiler, kernel, and so on) of the
|
163
|
+
operating system on which the executable runs, unless that component
|
164
|
+
itself accompanies the executable.
|
165
|
+
|
166
|
+
If distribution of executable or object code is made by offering
|
167
|
+
access to copy from a designated place, then offering equivalent
|
168
|
+
access to copy the source code from the same place counts as
|
169
|
+
distribution of the source code, even though third parties are not
|
170
|
+
compelled to copy the source along with the object code.
|
171
|
+
|
172
|
+
4. You may not copy, modify, sublicense, or distribute the Program
|
173
|
+
except as expressly provided under this License. Any attempt
|
174
|
+
otherwise to copy, modify, sublicense or distribute the Program is
|
175
|
+
void, and will automatically terminate your rights under this License.
|
176
|
+
However, parties who have received copies, or rights, from you under
|
177
|
+
this License will not have their licenses terminated so long as such
|
178
|
+
parties remain in full compliance.
|
179
|
+
|
180
|
+
5. You are not required to accept this License, since you have not
|
181
|
+
signed it. However, nothing else grants you permission to modify or
|
182
|
+
distribute the Program or its derivative works. These actions are
|
183
|
+
prohibited by law if you do not accept this License. Therefore, by
|
184
|
+
modifying or distributing the Program (or any work based on the
|
185
|
+
Program), you indicate your acceptance of this License to do so, and
|
186
|
+
all its terms and conditions for copying, distributing or modifying
|
187
|
+
the Program or works based on it.
|
188
|
+
|
189
|
+
6. Each time you redistribute the Program (or any work based on the
|
190
|
+
Program), the recipient automatically receives a license from the
|
191
|
+
original licensor to copy, distribute or modify the Program subject to
|
192
|
+
these terms and conditions. You may not impose any further
|
193
|
+
restrictions on the recipients' exercise of the rights granted herein.
|
194
|
+
You are not responsible for enforcing compliance by third parties to
|
195
|
+
this License.
|
196
|
+
|
197
|
+
7. If, as a consequence of a court judgment or allegation of patent
|
198
|
+
infringement or for any other reason (not limited to patent issues),
|
199
|
+
conditions are imposed on you (whether by court order, agreement or
|
200
|
+
otherwise) that contradict the conditions of this License, they do not
|
201
|
+
excuse you from the conditions of this License. If you cannot
|
202
|
+
distribute so as to satisfy simultaneously your obligations under this
|
203
|
+
License and any other pertinent obligations, then as a consequence you
|
204
|
+
may not distribute the Program at all. For example, if a patent
|
205
|
+
license would not permit royalty-free redistribution of the Program by
|
206
|
+
all those who receive copies directly or indirectly through you, then
|
207
|
+
the only way you could satisfy both it and this License would be to
|
208
|
+
refrain entirely from distribution of the Program.
|
209
|
+
|
210
|
+
If any portion of this section is held invalid or unenforceable under
|
211
|
+
any particular circumstance, the balance of the section is intended to
|
212
|
+
apply and the section as a whole is intended to apply in other
|
213
|
+
circumstances.
|
214
|
+
|
215
|
+
It is not the purpose of this section to induce you to infringe any
|
216
|
+
patents or other property right claims or to contest validity of any
|
217
|
+
such claims; this section has the sole purpose of protecting the
|
218
|
+
integrity of the free software distribution system, which is
|
219
|
+
implemented by public license practices. Many people have made
|
220
|
+
generous contributions to the wide range of software distributed
|
221
|
+
through that system in reliance on consistent application of that
|
222
|
+
system; it is up to the author/donor to decide if he or she is willing
|
223
|
+
to distribute software through any other system and a licensee cannot
|
224
|
+
impose that choice.
|
225
|
+
|
226
|
+
This section is intended to make thoroughly clear what is believed to
|
227
|
+
be a consequence of the rest of this License.
|
228
|
+
|
229
|
+
8. If the distribution and/or use of the Program is restricted in
|
230
|
+
certain countries either by patents or by copyrighted interfaces, the
|
231
|
+
original copyright holder who places the Program under this License
|
232
|
+
may add an explicit geographical distribution limitation excluding
|
233
|
+
those countries, so that distribution is permitted only in or among
|
234
|
+
countries not thus excluded. In such case, this License incorporates
|
235
|
+
the limitation as if written in the body of this License.
|
236
|
+
|
237
|
+
9. The Free Software Foundation may publish revised and/or new versions
|
238
|
+
of the General Public License from time to time. Such new versions will
|
239
|
+
be similar in spirit to the present version, but may differ in detail to
|
240
|
+
address new problems or concerns.
|
241
|
+
|
242
|
+
Each version is given a distinguishing version number. If the Program
|
243
|
+
specifies a version number of this License which applies to it and "any
|
244
|
+
later version", you have the option of following the terms and conditions
|
245
|
+
either of that version or of any later version published by the Free
|
246
|
+
Software Foundation. If the Program does not specify a version number of
|
247
|
+
this License, you may choose any version ever published by the Free Software
|
248
|
+
Foundation.
|
249
|
+
|
250
|
+
10. If you wish to incorporate parts of the Program into other free
|
251
|
+
programs whose distribution conditions are different, write to the author
|
252
|
+
to ask for permission. For software which is copyrighted by the Free
|
253
|
+
Software Foundation, write to the Free Software Foundation; we sometimes
|
254
|
+
make exceptions for this. Our decision will be guided by the two goals
|
255
|
+
of preserving the free status of all derivatives of our free software and
|
256
|
+
of promoting the sharing and reuse of software generally.
|
257
|
+
|
258
|
+
NO WARRANTY
|
259
|
+
|
260
|
+
11. BECAUSE THE PROGRAM IS LICENSED FREE OF CHARGE, THERE IS NO WARRANTY
|
261
|
+
FOR THE PROGRAM, TO THE EXTENT PERMITTED BY APPLICABLE LAW. EXCEPT WHEN
|
262
|
+
OTHERWISE STATED IN WRITING THE COPYRIGHT HOLDERS AND/OR OTHER PARTIES
|
263
|
+
PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESSED
|
264
|
+
OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
|
265
|
+
MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE. THE ENTIRE RISK AS
|
266
|
+
TO THE QUALITY AND PERFORMANCE OF THE PROGRAM IS WITH YOU. SHOULD THE
|
267
|
+
PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF ALL NECESSARY SERVICING,
|
268
|
+
REPAIR OR CORRECTION.
|
269
|
+
|
270
|
+
12. IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
|
271
|
+
WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MAY MODIFY AND/OR
|
272
|
+
REDISTRIBUTE THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES,
|
273
|
+
INCLUDING ANY GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING
|
274
|
+
OUT OF THE USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED
|
275
|
+
TO LOSS OF DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY
|
276
|
+
YOU OR THIRD PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER
|
277
|
+
PROGRAMS), EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE
|
278
|
+
POSSIBILITY OF SUCH DAMAGES.
|
279
|
+
|
280
|
+
END OF TERMS AND CONDITIONS
|
281
|
+
|
282
|
+
How to Apply These Terms to Your New Programs
|
283
|
+
|
284
|
+
If you develop a new program, and you want it to be of the greatest
|
285
|
+
possible use to the public, the best way to achieve this is to make it
|
286
|
+
free software which everyone can redistribute and change under these terms.
|
287
|
+
|
288
|
+
To do so, attach the following notices to the program. It is safest
|
289
|
+
to attach them to the start of each source file to most effectively
|
290
|
+
convey the exclusion of warranty; and each file should have at least
|
291
|
+
the "copyright" line and a pointer to where the full notice is found.
|
292
|
+
|
293
|
+
<one line to give the program's name and a brief idea of what it does.>
|
294
|
+
Copyright (C) <year> <name of author>
|
295
|
+
|
296
|
+
This program is free software; you can redistribute it and/or modify
|
297
|
+
it under the terms of the GNU General Public License as published by
|
298
|
+
the Free Software Foundation; either version 2 of the License, or
|
299
|
+
(at your option) any later version.
|
300
|
+
|
301
|
+
This program is distributed in the hope that it will be useful,
|
302
|
+
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
303
|
+
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
304
|
+
GNU General Public License for more details.
|
305
|
+
|
306
|
+
You should have received a copy of the GNU General Public License along
|
307
|
+
with this program; if not, write to the Free Software Foundation, Inc.,
|
308
|
+
51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.
|
309
|
+
|
310
|
+
Also add information on how to contact you by electronic and paper mail.
|
311
|
+
|
312
|
+
If the program is interactive, make it output a short notice like this
|
313
|
+
when it starts in an interactive mode:
|
314
|
+
|
315
|
+
Gnomovision version 69, Copyright (C) year name of author
|
316
|
+
Gnomovision comes with ABSOLUTELY NO WARRANTY; for details type `show w'.
|
317
|
+
This is free software, and you are welcome to redistribute it
|
318
|
+
under certain conditions; type `show c' for details.
|
319
|
+
|
320
|
+
The hypothetical commands `show w' and `show c' should show the appropriate
|
321
|
+
parts of the General Public License. Of course, the commands you use may
|
322
|
+
be called something other than `show w' and `show c'; they could even be
|
323
|
+
mouse-clicks or menu items--whatever suits your program.
|
324
|
+
|
325
|
+
You should also get your employer (if you work as a programmer) or your
|
326
|
+
school, if any, to sign a "copyright disclaimer" for the program, if
|
327
|
+
necessary. Here is a sample; alter the names:
|
328
|
+
|
329
|
+
Yoyodyne, Inc., hereby disclaims all copyright interest in the program
|
330
|
+
`Gnomovision' (which makes passes at compilers) written by James Hacker.
|
331
|
+
|
332
|
+
<signature of Ty Coon>, 1 April 1989
|
333
|
+
Ty Coon, President of Vice
|
334
|
+
|
335
|
+
This General Public License does not permit incorporating your program into
|
336
|
+
proprietary programs. If your program is a subroutine library, you may
|
337
|
+
consider it more useful to permit linking proprietary applications with the
|
338
|
+
library. If this is what you want to do, use the GNU Lesser General
|
339
|
+
Public License instead of this License.
|
data/README.md
ADDED
@@ -0,0 +1,113 @@
|
|
1
|
+
# typey
|
2
|
+
Do typography better.
|
3
|
+
|
4
|
+
*This repo contains alpha code that is likely to change at any point. Use at your own risk ;)*
|
5
|
+
|
6
|
+
### Features
|
7
|
+
|
8
|
+
* Use px (for screen) and pt (for print) and then output in px, pt, rem or em.
|
9
|
+
* Define font sizes inside a sass map as t-shirt sizes (m, l, xl, xxl, etc).
|
10
|
+
* Define line-height as multiples of the base line height OR as static values.
|
11
|
+
* Automatic px fallbacks when using rem as the base unit.
|
12
|
+
* Define font weights inside a sass map.
|
13
|
+
* Ready to go web safe font stacks that are easy to extend. Credit: John Albin Wilkins.
|
14
|
+
|
15
|
+
### CSS units used in typey
|
16
|
+
|
17
|
+
`px` - By far the simplest unit you can use to size typography on the web. It translates very easily from mockups produced in a certain over-rated graphics suite. In typey, all base sizes are specified in `px` (or `pt`) and are automatically converted to your `$base-unit`.
|
18
|
+
|
19
|
+
`pt` - Translates equally well from design mockups as `px` but should be kept for use solely within print stylesheets. For the simplest approach when writing print stylesheets set your $base-unit as `pt` and define all base sizes as `pt`.
|
20
|
+
|
21
|
+
`rem` - Sets `font-size` as relative to the `html` elements `font-size` and allows you to resize fonts dynamically with media queries. It has one irritating caveat: no IE8 support! Fear not, typey can help.
|
22
|
+
|
23
|
+
|
24
|
+
`em` - In the way the `rem` unit is relative to the `html` element, `em` is relative to the parent `font-size`. It is supported in all browsers and also allows you to dynamically resize fonts with media queries. It can just get severely confusing when you have various nested elements - each with an `em` `font-size`. Typey functions and mixins accept a second parameter to help with this problem.
|
25
|
+
|
26
|
+
### Getting started
|
27
|
+
|
28
|
+
Just like in compass Vertical Rhythm we define our base font size and line height first.
|
29
|
+
|
30
|
+
```sass
|
31
|
+
$base-font-size: 16px;
|
32
|
+
$base-line-height: 21px;
|
33
|
+
```
|
34
|
+
|
35
|
+
We also need to define the base unit that the functions and mixins will output. you can use `px`, `pt` (for print stylesheets), `rem` or `em`.
|
36
|
+
|
37
|
+
```sass
|
38
|
+
$base-unit: rem;
|
39
|
+
```
|
40
|
+
|
41
|
+
You can now setup your type defaults like so:
|
42
|
+
|
43
|
+
```sass
|
44
|
+
html {
|
45
|
+
@include define-type-sizing;
|
46
|
+
}
|
47
|
+
```
|
48
|
+
|
49
|
+
Define the `$font-size` map using `px` (or `pt`) - which are easy to read and keep track of (not to mention convert from a design mockup) and t-shirt sizes (which are even easier to keep track of).
|
50
|
+
|
51
|
+
```sass
|
52
|
+
$font-size: (
|
53
|
+
xxxl: 60px,
|
54
|
+
xxl: 46px,
|
55
|
+
xl: 32px,
|
56
|
+
l: 24px,
|
57
|
+
m: 16px,
|
58
|
+
s: 14px,
|
59
|
+
xs: 12px
|
60
|
+
);
|
61
|
+
```
|
62
|
+
|
63
|
+
### Line height and font sizing examples
|
64
|
+
|
65
|
+
The simplest way to set `font-size` is via this function.
|
66
|
+
|
67
|
+
```sass
|
68
|
+
h1 {
|
69
|
+
font-size: font-size(xxxl);
|
70
|
+
}
|
71
|
+
```
|
72
|
+
|
73
|
+
You can specify `line-height` as a multiple of `$base-line-height` (for a vertical rhythm approach).
|
74
|
+
|
75
|
+
```sass
|
76
|
+
h2 {
|
77
|
+
line-height: line-height(3);
|
78
|
+
}
|
79
|
+
```
|
80
|
+
|
81
|
+
Or for those finicky designs, you can just use a static `px` value for granular control.
|
82
|
+
|
83
|
+
```sass
|
84
|
+
h3 {
|
85
|
+
line-height: line-height(43px);
|
86
|
+
}
|
87
|
+
```
|
88
|
+
|
89
|
+
If you are using rem as a base unit for its super lovely font resizing abilities `px` fallbacks are added automatically when using the `font-size()` and `line-height()` mixins. Both mixins support exactly the same parameters as their function counterparts.
|
90
|
+
|
91
|
+
```sass
|
92
|
+
h4 {
|
93
|
+
@include font-size(l);
|
94
|
+
@include line-height(2);
|
95
|
+
}
|
96
|
+
```
|
97
|
+
|
98
|
+
When using `em` as your `$base-unit`, use each functions second parameter so you can set the `em` value relative to the parent or element `font-size`. The second parameter can either accept a t-shirt size or a static value for granular control.
|
99
|
+
|
100
|
+
```sass
|
101
|
+
h4 span {
|
102
|
+
font-size: font-size(s, l);
|
103
|
+
line-height: line-height(2, 14px);
|
104
|
+
}
|
105
|
+
```
|
106
|
+
|
107
|
+
### Extras
|
108
|
+
|
109
|
+
Grab one of the web-safe font stacks included and extend it with your own fonts.
|
110
|
+
|
111
|
+
```sass
|
112
|
+
$your-font-stack: extend-font-stack("Open sans", $sans-serif-stack);
|
113
|
+
```
|
data/lib/typey.rb
ADDED
@@ -0,0 +1,59 @@
|
|
1
|
+
// The browser font size default. No need to change this.
|
2
|
+
$browser-font-size: 16px;
|
3
|
+
|
4
|
+
// The base font size will be used for most calculations involving font-size.
|
5
|
+
// Allowed units: px or pt
|
6
|
+
$base-font-size: 16px !default;
|
7
|
+
|
8
|
+
// The base line height will be used for most calculations involving height.
|
9
|
+
// Allowed units: Must be the same as $base-line-height
|
10
|
+
$base-line-height: 21px !default;
|
11
|
+
|
12
|
+
// Allowed units: px, pt, em or rem.
|
13
|
+
$base-unit: rem !default;
|
14
|
+
|
15
|
+
// Default font sizes
|
16
|
+
// Once you redefine the $font-size map it will overwrite all sizes here.
|
17
|
+
// Allowed units: Must be the same as $base-line-height
|
18
|
+
$font-size: (
|
19
|
+
xxxl: 60px,
|
20
|
+
xxl: 46px,
|
21
|
+
xl: 32px,
|
22
|
+
l: 24px,
|
23
|
+
m: 16px,
|
24
|
+
s: 14px,
|
25
|
+
xs: 12px
|
26
|
+
) !default;
|
27
|
+
|
28
|
+
// Default font weights
|
29
|
+
// This map and accompanying function help provide granular control over
|
30
|
+
// setting and retrieving static font weights.
|
31
|
+
$font-weight: (
|
32
|
+
bold: 700,
|
33
|
+
normal: 400,
|
34
|
+
lighter: 200
|
35
|
+
) !default;
|
36
|
+
|
37
|
+
// Define defaults (in the HTML element).
|
38
|
+
//
|
39
|
+
// @param number $base-font-size
|
40
|
+
// (optional) Use to set to anything other than the base value.
|
41
|
+
// Allowed units: px or pt
|
42
|
+
// @param number $base-line-height
|
43
|
+
// (optional) Use to set to anything other than the base value.
|
44
|
+
// Allowed units: px or pt
|
45
|
+
@mixin define-type-sizing($base-font-size: $base-font-size, $base-line-height: $base-line-height) {
|
46
|
+
@if $base-unit == px or $base-unit == pt {
|
47
|
+
font-size: $base-font-size;
|
48
|
+
line-height: $base-line-height;
|
49
|
+
}
|
50
|
+
@if $base-unit == rem {
|
51
|
+
font-size: $base-font-size / $browser-font-size * 100%;
|
52
|
+
line-height: $base-line-height;
|
53
|
+
line-height: $base-font-size / $base-line-height + $base-unit;
|
54
|
+
}
|
55
|
+
@if $base-unit == em {
|
56
|
+
font-size: $base-font-size / $browser-font-size * 100%;
|
57
|
+
line-height: $base-font-size / $base-line-height + $base-unit;
|
58
|
+
}
|
59
|
+
}
|
@@ -0,0 +1,49 @@
|
|
1
|
+
// Takes a sizing from the $font-size map (m, xl, xxl, etc) and convert it to
|
2
|
+
// the base unit.
|
3
|
+
//
|
4
|
+
// @param string $size
|
5
|
+
// A size from the $font-size map.
|
6
|
+
// @param number|string $context
|
7
|
+
// (optional) Only used if em is the $base-unit. The value of the parent
|
8
|
+
// font-size if it differs from $base-font-size. Specified as a t-shirt size or
|
9
|
+
// value in the same unit as the $font-size map.
|
10
|
+
//
|
11
|
+
// @return number
|
12
|
+
// The selected font-size in $base-unit.
|
13
|
+
@function font-size($size, $context: $base-font-size) {
|
14
|
+
@if type-of($size) == 'string' {
|
15
|
+
$map-size: map-get($font-size, $size);
|
16
|
+
@if $base-unit == px or $base-unit == pt {
|
17
|
+
@return strip-unit($map-size) + $base-unit;
|
18
|
+
}
|
19
|
+
@if $base-unit == rem {
|
20
|
+
@return ($map-size / $base-font-size) + $base-unit;
|
21
|
+
}
|
22
|
+
@if $base-unit == em {
|
23
|
+
@if type-of($context) == 'string' {
|
24
|
+
$context-map-size: map-get($font-size, $context);
|
25
|
+
@return ($map-size / $context-map-size) + $base-unit;
|
26
|
+
}
|
27
|
+
@if type-of($context) == 'number' {
|
28
|
+
@return ($map-size / $context) + $base-unit;
|
29
|
+
}
|
30
|
+
}
|
31
|
+
}
|
32
|
+
}
|
33
|
+
|
34
|
+
// Define font-size (with fallback).
|
35
|
+
// This is only necessary to use if you want to provide fallbacks when you are
|
36
|
+
// using rem as $base-unit.
|
37
|
+
//
|
38
|
+
// @param string $size
|
39
|
+
// A size from the $font-size map.
|
40
|
+
// @param number $context
|
41
|
+
// (optional) Only used if em is the $base-unit. The value of the parent
|
42
|
+
// font-size if differs from $base-font-size. Must be the same unit as used in the map.
|
43
|
+
@mixin font-size($size, $context: $base-font-size) {
|
44
|
+
$map-size: map-get($font-size, $size);
|
45
|
+
@if $base-unit == rem {
|
46
|
+
font-size: $map-size;
|
47
|
+
}
|
48
|
+
font-size: font-size($size, $context);
|
49
|
+
}
|
@@ -0,0 +1,25 @@
|
|
1
|
+
// Three standard do-all stacks.
|
2
|
+
$serif-stack: TimesNewRoman, "Times New Roman", Times, Baskerville, Georgia, serif;
|
3
|
+
$sans-serif-stack: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
4
|
+
$monospaced-stack: "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace;
|
5
|
+
|
6
|
+
// Specific font stacks.
|
7
|
+
$arial-stack: Arial, "Helvetica Neue", Helvetica, sans-serif;
|
8
|
+
$helvetica-stack: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
9
|
+
$baskerville-stack: Baskerville, "Baskerville Old Face", "Hoefler Text", Garamond, "Times New Roman", serif;
|
10
|
+
$monaco-stack: Monaco, Consolas, "Lucida Console", monospace;
|
11
|
+
$trebuchet-ms-stack: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
|
12
|
+
|
13
|
+
// Extend a font by adding a web-safe stack to it.
|
14
|
+
//
|
15
|
+
// Example usage:
|
16
|
+
// $new-font-stack: extend-font-stack("Open sans", $sans-serif-stack);
|
17
|
+
//
|
18
|
+
// @param string $font
|
19
|
+
// The name of the font. Use inverted commas if there are spaces in the font
|
20
|
+
// name. i.e "Open sans"
|
21
|
+
// @param list $font-stack
|
22
|
+
// The font stack variable to extend.
|
23
|
+
@function extend-font-stack($font, $font-stack) {
|
24
|
+
@return join($font, $font-stack, $separator: comma);
|
25
|
+
}
|
@@ -0,0 +1,12 @@
|
|
1
|
+
// Retrieve a font weight.
|
2
|
+
//
|
3
|
+
// @param string $weight
|
4
|
+
// A weight from the $font-weight map.
|
5
|
+
//
|
6
|
+
// @return string
|
7
|
+
// The selected font-weight.
|
8
|
+
@function font-weight($weight) {
|
9
|
+
@if type-of($weight) == 'string' {
|
10
|
+
@return map-get($font-weight, $weight);
|
11
|
+
}
|
12
|
+
}
|
@@ -0,0 +1,49 @@
|
|
1
|
+
// Remove the unit from a number.
|
2
|
+
//
|
3
|
+
// @param number $number
|
4
|
+
// The number (with unit) to convert. Allowed units: any
|
5
|
+
//
|
6
|
+
// @return number
|
7
|
+
// The number without the unit.
|
8
|
+
@function strip-unit($number) {
|
9
|
+
@if type-of($number) == 'number' and not unitless($number) {
|
10
|
+
@return $number / ($number * 0 + 1);
|
11
|
+
}
|
12
|
+
@return $number;
|
13
|
+
}
|
14
|
+
|
15
|
+
// Convert px or pt to the $base-unit.
|
16
|
+
//
|
17
|
+
// @param number $number
|
18
|
+
// The number (with unit) to convert. Allowed units: px, pt
|
19
|
+
// @param number $context
|
20
|
+
// (optional) Only used if em is the $base-unit. The value of the elements/parents
|
21
|
+
// font-size if it differs from $base-font-size. Specified as a t-shirt size or
|
22
|
+
// value in the same unit as the $font-size map.
|
23
|
+
//
|
24
|
+
// @return number
|
25
|
+
// The number converted to the base unit.
|
26
|
+
@function convert-unit($number, $context: $base-font-size) {
|
27
|
+
@if type-of($number) == 'number' and not unitless($number) {
|
28
|
+
$unit: unit($number);
|
29
|
+
@if $unit == px or $unit == pt {
|
30
|
+
@if $base-unit == px or $base-unit == pt {
|
31
|
+
@return strip-unit($number) + $base-unit;
|
32
|
+
}
|
33
|
+
@if $base-unit == rem {
|
34
|
+
@if $unit == unit($base-font-size) {
|
35
|
+
@return ($number / $base-font-size) + $base-unit;
|
36
|
+
}
|
37
|
+
}
|
38
|
+
@if $base-unit == em {
|
39
|
+
@if type-of($context) == 'string' {
|
40
|
+
$context-map-size: map-get($font-size, $context);
|
41
|
+
@return ($number / $context-map-size) + $base-unit;
|
42
|
+
}
|
43
|
+
@if type-of($context) == 'number' {
|
44
|
+
@return ($number / $context) + $base-unit;
|
45
|
+
}
|
46
|
+
}
|
47
|
+
}
|
48
|
+
}
|
49
|
+
}
|
@@ -0,0 +1,63 @@
|
|
1
|
+
// Generate a value to be used as line-height (or margin, padding, etc) from
|
2
|
+
// either: a) a multiple of $base-line-height or b) a static px or pt value.
|
3
|
+
//
|
4
|
+
// Example usage with multiple:
|
5
|
+
// line-height: line-height(2);
|
6
|
+
// Example usage with static value:
|
7
|
+
// line-height: line-height(18px);
|
8
|
+
//
|
9
|
+
// @param number $x
|
10
|
+
// Multiple of line height to be used or px/pt value to be converted.
|
11
|
+
// @param number $context
|
12
|
+
// (optional) Only used if em is the $base-unit. The value of the elements
|
13
|
+
// font-size if it differs from $base-font-size. Specified as a t-shirt size or
|
14
|
+
// value in the same unit as the $font-size map.
|
15
|
+
//
|
16
|
+
// @return number
|
17
|
+
// The caculated height in $base-unit.
|
18
|
+
@function line-height($x, $context: $base-font-size) {
|
19
|
+
@if type-of($x) == 'number' and unitless($x) {
|
20
|
+
@if $base-unit == px or $base-unit == pt {
|
21
|
+
@return strip-unit($x * $base-line-height) + $base-unit;
|
22
|
+
}
|
23
|
+
@if $base-unit == rem {
|
24
|
+
@return ($x * $base-line-height) / $base-font-size + $base-unit;
|
25
|
+
}
|
26
|
+
@if $base-unit == em {
|
27
|
+
@if type-of($context) == 'string' {
|
28
|
+
$context-map-size: map-get($font-size, $context);
|
29
|
+
@return ($x * $base-line-height) / $context-map-size + $base-unit;
|
30
|
+
}
|
31
|
+
@if type-of($context) == 'number' {
|
32
|
+
@return ($x * $base-line-height) / $context + $base-unit;
|
33
|
+
}
|
34
|
+
}
|
35
|
+
}
|
36
|
+
@if type-of($x) == 'number' and not unitless($x) {
|
37
|
+
@if unit($x) == px or unit($x) == pt {
|
38
|
+
@return convert-unit($x, $context);
|
39
|
+
}
|
40
|
+
}
|
41
|
+
}
|
42
|
+
|
43
|
+
// Define line-height (with fallback).
|
44
|
+
// This is only necessary to use if you want to provide fallbacks when you are
|
45
|
+
// using rem as $base-unit.
|
46
|
+
//
|
47
|
+
// @param number $x
|
48
|
+
// Multiple of line height to be used or px/pt value to be converted.
|
49
|
+
// @param number $context
|
50
|
+
// (optional) Only used if em is the $base-unit. The value of the elements
|
51
|
+
// font-size if it differs from $base-font-size. Specified as a t-shirt size or
|
52
|
+
// value in the same unit as the $font-size map.
|
53
|
+
@mixin line-height($x, $context: $base-font-size) {
|
54
|
+
@if $base-unit == rem {
|
55
|
+
@if type-of($x) == 'number' and unitless($x) {
|
56
|
+
line-height: $x * $base-line-height;
|
57
|
+
}
|
58
|
+
@if type-of($x) == 'number' and not unitless($x) {
|
59
|
+
line-height: $x;
|
60
|
+
}
|
61
|
+
}
|
62
|
+
line-height: line-height($x, $context);
|
63
|
+
}
|
data/typey.gemspec
ADDED
@@ -0,0 +1,27 @@
|
|
1
|
+
# -*- encoding: utf-8 -*-
|
2
|
+
|
3
|
+
Gem::Specification.new do |spec|
|
4
|
+
spec.name = 'typey'
|
5
|
+
|
6
|
+
spec.summary = %q{Do typography better.}
|
7
|
+
spec.description = %q{Tools to help you manage font sizing and css units.}
|
8
|
+
|
9
|
+
spec.homepage = 'http://github.com/jptaranto/typey'
|
10
|
+
spec.rubyforge_project =
|
11
|
+
|
12
|
+
spec.version = '1.0.0.alpha.2'
|
13
|
+
spec.date = '2015-04-22'
|
14
|
+
spec.licenses = ['GPL-2']
|
15
|
+
|
16
|
+
spec.authors = ['Jack Taranto']
|
17
|
+
spec.email = 'jacktaranto@gmail.com'
|
18
|
+
|
19
|
+
spec.add_runtime_dependency('sass', "~> 3.3")
|
20
|
+
|
21
|
+
spec.files = `git ls-files`.split($/).select {|f| File.exist?(f) && f =~ %r{^(lib|stylesheets)/} }
|
22
|
+
spec.files += %w(
|
23
|
+
LICENSE.txt
|
24
|
+
README.md
|
25
|
+
typey.gemspec
|
26
|
+
)
|
27
|
+
end
|
metadata
ADDED
@@ -0,0 +1,68 @@
|
|
1
|
+
--- !ruby/object:Gem::Specification
|
2
|
+
name: typey
|
3
|
+
version: !ruby/object:Gem::Version
|
4
|
+
version: 1.0.0.alpha.2
|
5
|
+
platform: ruby
|
6
|
+
authors:
|
7
|
+
- Jack Taranto
|
8
|
+
autorequire:
|
9
|
+
bindir: bin
|
10
|
+
cert_chain: []
|
11
|
+
date: 2015-04-22 00:00:00.000000000 Z
|
12
|
+
dependencies:
|
13
|
+
- !ruby/object:Gem::Dependency
|
14
|
+
name: sass
|
15
|
+
requirement: !ruby/object:Gem::Requirement
|
16
|
+
requirements:
|
17
|
+
- - ~>
|
18
|
+
- !ruby/object:Gem::Version
|
19
|
+
version: '3.3'
|
20
|
+
type: :runtime
|
21
|
+
prerelease: false
|
22
|
+
version_requirements: !ruby/object:Gem::Requirement
|
23
|
+
requirements:
|
24
|
+
- - ~>
|
25
|
+
- !ruby/object:Gem::Version
|
26
|
+
version: '3.3'
|
27
|
+
description: Tools to help you manage font sizing and css units.
|
28
|
+
email: jacktaranto@gmail.com
|
29
|
+
executables: []
|
30
|
+
extensions: []
|
31
|
+
extra_rdoc_files: []
|
32
|
+
files:
|
33
|
+
- lib/typey.rb
|
34
|
+
- stylesheets/_typey.scss
|
35
|
+
- stylesheets/typey/_defaults.scss
|
36
|
+
- stylesheets/typey/_font-size.scss
|
37
|
+
- stylesheets/typey/_font-stacks.scss
|
38
|
+
- stylesheets/typey/_font-weight.scss
|
39
|
+
- stylesheets/typey/_helpers.scss
|
40
|
+
- stylesheets/typey/_line-height.scss
|
41
|
+
- LICENSE.txt
|
42
|
+
- README.md
|
43
|
+
- typey.gemspec
|
44
|
+
homepage: http://github.com/jptaranto/typey
|
45
|
+
licenses:
|
46
|
+
- GPL-2
|
47
|
+
metadata: {}
|
48
|
+
post_install_message:
|
49
|
+
rdoc_options: []
|
50
|
+
require_paths:
|
51
|
+
- lib
|
52
|
+
required_ruby_version: !ruby/object:Gem::Requirement
|
53
|
+
requirements:
|
54
|
+
- - '>='
|
55
|
+
- !ruby/object:Gem::Version
|
56
|
+
version: '0'
|
57
|
+
required_rubygems_version: !ruby/object:Gem::Requirement
|
58
|
+
requirements:
|
59
|
+
- - '>'
|
60
|
+
- !ruby/object:Gem::Version
|
61
|
+
version: 1.3.1
|
62
|
+
requirements: []
|
63
|
+
rubyforge_project: 1.0.0.alpha.2
|
64
|
+
rubygems_version: 2.0.14
|
65
|
+
signing_key:
|
66
|
+
specification_version: 4
|
67
|
+
summary: Do typography better.
|
68
|
+
test_files: []
|