compass-webfontspecimen-plugin 0.1
Sign up to get free protection for your applications and to get access to all the features.
- data/LICENSE.txt +9 -0
- data/Manifest +14 -0
- data/README.mkdn +24 -0
- data/Rakefile +21 -0
- data/VERSION +1 -0
- data/compass-webfontspecimen-plugin.gemspec +35 -0
- data/lib/webfontspecimen.rb +2 -0
- data/lib/wfs/compass_plugin.rb +5 -0
- data/lib/wfs/sass_extensions.rb +13 -0
- data/sass/wfs/_960.sass +404 -0
- data/sass/wfs/_base.sass +362 -0
- data/sass/wfs/_font_face.sass +31 -0
- data/templates/project/manifest.rb +2 -0
- data/templates/project/wfs.html +246 -0
- data/templates/project/wfs.sass +32 -0
- metadata +95 -0
data/LICENSE.txt
ADDED
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
Created by Tim Brown
|
|
2
|
+
http://webfontspecimen.com
|
|
3
|
+
http://nicewebtype.com
|
|
4
|
+
|
|
5
|
+
Compass Plugin by Eric Meyer
|
|
6
|
+
http://www.oddbird.net
|
|
7
|
+
|
|
8
|
+
Feel free to edit and re-release this plugin, wfs.css and the markup that uses it. They are all licensed under a Creative Commons Attribution 3.0 License:
|
|
9
|
+
http://creativecommons.org/licenses/by/3.0/us/
|
data/Manifest
ADDED
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
lib/wfs/compass_plugin.rb
|
|
2
|
+
lib/wfs/sass_extensions.rb
|
|
3
|
+
lib/webfontspecimen.rb
|
|
4
|
+
Manifest
|
|
5
|
+
Rakefile
|
|
6
|
+
README.mkdn
|
|
7
|
+
sass/wfs/_font_face.sass
|
|
8
|
+
sass/wfs/_960.sass
|
|
9
|
+
sass/wfs/_base.sass
|
|
10
|
+
templates/project/wfs.sass
|
|
11
|
+
templates/project/wfs.html
|
|
12
|
+
templates/project/manifest.rb
|
|
13
|
+
VERSION
|
|
14
|
+
LICENSE.txt
|
data/README.mkdn
ADDED
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
Web Font Specimen - Compass Plugin
|
|
2
|
+
=====================
|
|
3
|
+
|
|
4
|
+
[Web Font Specimen](http://webfontspecimen.com/) is a tool built by Tim Brown
|
|
5
|
+
([Nice Web Type](http://nicewebtype.com/)) to help web designers make
|
|
6
|
+
type-setting decisions. It was ported to Compass by [Eric
|
|
7
|
+
Meyer](http://www.oddbird.net)
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
Install
|
|
11
|
+
=======
|
|
12
|
+
|
|
13
|
+
sudo gem sources --add http://gemcutter.org/
|
|
14
|
+
sudo gem install compass-webfontspecimen-plugin
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
Create a Web Font Specimen
|
|
18
|
+
==========================
|
|
19
|
+
|
|
20
|
+
compass -r webfontspecimen -f webfontspecimen <project name>
|
|
21
|
+
|
|
22
|
+
Copy your fint files into a `fonts` directory in your CSS directory. Fill in your normal, italic and bold
|
|
23
|
+
@font-face variables and mixins in `wfs.sass`, make sure your stylesheet link in `wfs.html` is pointed
|
|
24
|
+
correctly, and check out your new font specimen.
|
data/Rakefile
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
require 'fileutils'
|
|
2
|
+
require 'sass'
|
|
3
|
+
|
|
4
|
+
begin
|
|
5
|
+
require 'echoe'
|
|
6
|
+
|
|
7
|
+
Echoe.new('compass-susy-plugin', open('VERSION').read) do |p|
|
|
8
|
+
# p.rubyforge_name = 'susy'
|
|
9
|
+
p.summary = "A Compass plugin for working with web fonts."
|
|
10
|
+
p.description = "An adaptation of Tim Brown's Web Font Specimen for Compass."
|
|
11
|
+
p.url = "http://github.com/ericam/compass-webfontspecimen-plugin"
|
|
12
|
+
p.author = ['Eric Meyer']
|
|
13
|
+
p.email = "eric@oddbird.net"
|
|
14
|
+
p.dependencies = ["compass"]
|
|
15
|
+
p.has_rdoc = false
|
|
16
|
+
end
|
|
17
|
+
|
|
18
|
+
rescue LoadError => boom
|
|
19
|
+
puts "You are missing a dependency required for meta-operations on this gem."
|
|
20
|
+
puts "#{boom.to_s.capitalize}."
|
|
21
|
+
end
|
data/VERSION
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
0.1
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
# -*- encoding: utf-8 -*-
|
|
2
|
+
|
|
3
|
+
Gem::Specification.new do |s|
|
|
4
|
+
s.name = %q{compass-webfontspecimen-plugin}
|
|
5
|
+
s.version = "0.1"
|
|
6
|
+
|
|
7
|
+
s.required_rubygems_version = Gem::Requirement.new(">= 1.2") if s.respond_to? :required_rubygems_version=
|
|
8
|
+
s.authors = ["Eric Meyer"]
|
|
9
|
+
s.date = %q{2009-11-24}
|
|
10
|
+
s.description = %q{An adaptation of Tim Brown's Web Font Specimen for Compass.}
|
|
11
|
+
s.email = %q{eric@oddbird.net}
|
|
12
|
+
s.extra_rdoc_files = ["lib/wfs/compass_plugin.rb", "lib/webfontspecimen.rb", "README.mkdn"]
|
|
13
|
+
s.files = ["lib/wfs/compass_plugin.rb", "lib/wfs/sass_extensions.rb", "lib/webfontspecimen.rb", "Manifest", "Rakefile", "README.mkdn", "sass/wfs/_font_face.sass", "sass/wfs/_960.sass", "sass/wfs/_base.sass", "templates/project/wfs.sass", "templates/project/wfs.html", "templates/project/manifest.rb", "VERSION", "LICENSE.txt", "compass-webfontspecimen-plugin.gemspec"]
|
|
14
|
+
s.homepage = %q{http://github.com/ericam/compass-webfontspecimen-plugin}
|
|
15
|
+
s.rdoc_options = ["--line-numbers", "--inline-source", "--title", "Compass-webfontspecimen-plugin", "--main", "README.mkdn"]
|
|
16
|
+
s.require_paths = ["lib"]
|
|
17
|
+
s.rubygems_version = %q{1.3.3}
|
|
18
|
+
s.summary = %q{A Compass plugin for working with web fonts.}
|
|
19
|
+
|
|
20
|
+
if s.respond_to? :specification_version then
|
|
21
|
+
current_version = Gem::Specification::CURRENT_SPECIFICATION_VERSION
|
|
22
|
+
s.specification_version = 3
|
|
23
|
+
|
|
24
|
+
if Gem::Version.new(Gem::RubyGemsVersion) >= Gem::Version.new('1.2.0') then
|
|
25
|
+
s.add_runtime_dependency(%q<compass>, [">= 0"])
|
|
26
|
+
s.add_development_dependency(%q<echoe>, [">= 0"])
|
|
27
|
+
else
|
|
28
|
+
s.add_dependency(%q<compass>, [">= 0"])
|
|
29
|
+
s.add_dependency(%q<echoe>, [">= 0"])
|
|
30
|
+
end
|
|
31
|
+
else
|
|
32
|
+
s.add_dependency(%q<compass>, [">= 0"])
|
|
33
|
+
s.add_dependency(%q<echoe>, [">= 0"])
|
|
34
|
+
end
|
|
35
|
+
end
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
options = Hash.new
|
|
2
|
+
options[:stylesheets_directory] = File.expand_path(File.join(File.dirname(__FILE__), '..', '..', 'sass'))
|
|
3
|
+
options[:templates_directory] = File.expand_path(File.join(File.dirname(__FILE__), '..', '..', 'templates'))
|
|
4
|
+
|
|
5
|
+
Compass::Frameworks.register('webfontspecimen', options)
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
require 'sass'
|
|
2
|
+
|
|
3
|
+
module Sass::Script::Functions
|
|
4
|
+
def font_files(*args)
|
|
5
|
+
raise Sass::SyntaxError, "An even number of arguments must be passed to font_files()" unless args.size % 2 == 0
|
|
6
|
+
files = []
|
|
7
|
+
while args.size > 0
|
|
8
|
+
files << "url('fonts/#{args.shift}') format('fonts/#{args.shift}')"
|
|
9
|
+
end
|
|
10
|
+
Sass::Script::String.new(files.join(", "))
|
|
11
|
+
end
|
|
12
|
+
end
|
|
13
|
+
|
data/sass/wfs/_960.sass
ADDED
|
@@ -0,0 +1,404 @@
|
|
|
1
|
+
/*
|
|
2
|
+
960 Grid System ~ Core CSS.
|
|
3
|
+
Learn more ~ http://960.gs/
|
|
4
|
+
|
|
5
|
+
Licensed under GPL and MIT.
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
/* `Containers
|
|
9
|
+
----------------------------------------------------------------------------------------------------*/
|
|
10
|
+
|
|
11
|
+
.container_12,
|
|
12
|
+
.container_16
|
|
13
|
+
margin-left: auto
|
|
14
|
+
margin-right: auto
|
|
15
|
+
width: 960px
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
/* `Grid >> Global
|
|
19
|
+
----------------------------------------------------------------------------------------------------*/
|
|
20
|
+
|
|
21
|
+
.grid_1,
|
|
22
|
+
.grid_2,
|
|
23
|
+
.grid_3,
|
|
24
|
+
.grid_4,
|
|
25
|
+
.grid_5,
|
|
26
|
+
.grid_6,
|
|
27
|
+
.grid_7,
|
|
28
|
+
.grid_8,
|
|
29
|
+
.grid_9,
|
|
30
|
+
.grid_10,
|
|
31
|
+
.grid_11,
|
|
32
|
+
.grid_12,
|
|
33
|
+
.grid_13,
|
|
34
|
+
.grid_14,
|
|
35
|
+
.grid_15,
|
|
36
|
+
.grid_16
|
|
37
|
+
display: inline
|
|
38
|
+
float: left
|
|
39
|
+
margin-left: 10px
|
|
40
|
+
margin-right: 10px
|
|
41
|
+
|
|
42
|
+
|
|
43
|
+
.container_12 .grid_3,
|
|
44
|
+
.container_16 .grid_4
|
|
45
|
+
width: 220px
|
|
46
|
+
|
|
47
|
+
|
|
48
|
+
.container_12 .grid_6,
|
|
49
|
+
.container_16 .grid_8
|
|
50
|
+
width: 460px
|
|
51
|
+
|
|
52
|
+
|
|
53
|
+
.container_12 .grid_9,
|
|
54
|
+
.container_16 .grid_12
|
|
55
|
+
width: 700px
|
|
56
|
+
|
|
57
|
+
|
|
58
|
+
.container_12 .grid_12,
|
|
59
|
+
.container_16 .grid_16
|
|
60
|
+
width: 940px
|
|
61
|
+
|
|
62
|
+
|
|
63
|
+
/* `Grid >> Children (Alpha ~ First, Omega ~ Last)
|
|
64
|
+
----------------------------------------------------------------------------------------------------*/
|
|
65
|
+
|
|
66
|
+
.alpha
|
|
67
|
+
margin-left: 0
|
|
68
|
+
|
|
69
|
+
|
|
70
|
+
.omega
|
|
71
|
+
margin-right: 0
|
|
72
|
+
|
|
73
|
+
|
|
74
|
+
/* `Grid >> 12 Columns
|
|
75
|
+
----------------------------------------------------------------------------------------------------*/
|
|
76
|
+
|
|
77
|
+
.container_12 .grid_1
|
|
78
|
+
width: 60px
|
|
79
|
+
|
|
80
|
+
|
|
81
|
+
.container_12 .grid_2
|
|
82
|
+
width: 140px
|
|
83
|
+
|
|
84
|
+
|
|
85
|
+
.container_12 .grid_4
|
|
86
|
+
width: 300px
|
|
87
|
+
|
|
88
|
+
|
|
89
|
+
.container_12 .grid_5
|
|
90
|
+
width: 380px
|
|
91
|
+
|
|
92
|
+
|
|
93
|
+
.container_12 .grid_7
|
|
94
|
+
width: 540px
|
|
95
|
+
|
|
96
|
+
|
|
97
|
+
.container_12 .grid_8
|
|
98
|
+
width: 620px
|
|
99
|
+
|
|
100
|
+
|
|
101
|
+
.container_12 .grid_10
|
|
102
|
+
width: 780px
|
|
103
|
+
|
|
104
|
+
|
|
105
|
+
.container_12 .grid_11
|
|
106
|
+
width: 860px
|
|
107
|
+
|
|
108
|
+
|
|
109
|
+
/* `Grid >> 16 Columns
|
|
110
|
+
----------------------------------------------------------------------------------------------------*/
|
|
111
|
+
|
|
112
|
+
.container_16 .grid_1
|
|
113
|
+
width: 40px
|
|
114
|
+
|
|
115
|
+
|
|
116
|
+
.container_16 .grid_2
|
|
117
|
+
width: 100px
|
|
118
|
+
|
|
119
|
+
|
|
120
|
+
.container_16 .grid_3
|
|
121
|
+
width: 160px
|
|
122
|
+
|
|
123
|
+
|
|
124
|
+
.container_16 .grid_5
|
|
125
|
+
width: 280px
|
|
126
|
+
|
|
127
|
+
|
|
128
|
+
.container_16 .grid_6
|
|
129
|
+
width: 340px
|
|
130
|
+
|
|
131
|
+
|
|
132
|
+
.container_16 .grid_7
|
|
133
|
+
width: 400px
|
|
134
|
+
|
|
135
|
+
|
|
136
|
+
.container_16 .grid_9
|
|
137
|
+
width: 520px
|
|
138
|
+
|
|
139
|
+
|
|
140
|
+
.container_16 .grid_10
|
|
141
|
+
width: 580px
|
|
142
|
+
|
|
143
|
+
|
|
144
|
+
.container_16 .grid_11
|
|
145
|
+
width: 640px
|
|
146
|
+
|
|
147
|
+
|
|
148
|
+
.container_16 .grid_13
|
|
149
|
+
width: 760px
|
|
150
|
+
|
|
151
|
+
|
|
152
|
+
.container_16 .grid_14
|
|
153
|
+
width: 820px
|
|
154
|
+
|
|
155
|
+
|
|
156
|
+
.container_16 .grid_15
|
|
157
|
+
width: 880px
|
|
158
|
+
|
|
159
|
+
|
|
160
|
+
/* `Prefix Extra Space >> Global
|
|
161
|
+
----------------------------------------------------------------------------------------------------*/
|
|
162
|
+
|
|
163
|
+
.container_12 .prefix_3,
|
|
164
|
+
.container_16 .prefix_4
|
|
165
|
+
padding-left: 240px
|
|
166
|
+
|
|
167
|
+
|
|
168
|
+
.container_12 .prefix_6,
|
|
169
|
+
.container_16 .prefix_8
|
|
170
|
+
padding-left: 480px
|
|
171
|
+
|
|
172
|
+
|
|
173
|
+
.container_12 .prefix_9,
|
|
174
|
+
.container_16 .prefix_12
|
|
175
|
+
padding-left: 720px
|
|
176
|
+
|
|
177
|
+
|
|
178
|
+
/* `Prefix Extra Space >> 12 Columns
|
|
179
|
+
----------------------------------------------------------------------------------------------------*/
|
|
180
|
+
|
|
181
|
+
.container_12 .prefix_1
|
|
182
|
+
padding-left: 80px
|
|
183
|
+
|
|
184
|
+
|
|
185
|
+
.container_12 .prefix_2
|
|
186
|
+
padding-left: 160px
|
|
187
|
+
|
|
188
|
+
|
|
189
|
+
.container_12 .prefix_4
|
|
190
|
+
padding-left: 320px
|
|
191
|
+
|
|
192
|
+
|
|
193
|
+
.container_12 .prefix_5
|
|
194
|
+
padding-left: 400px
|
|
195
|
+
|
|
196
|
+
|
|
197
|
+
.container_12 .prefix_7
|
|
198
|
+
padding-left: 560px
|
|
199
|
+
|
|
200
|
+
|
|
201
|
+
.container_12 .prefix_8
|
|
202
|
+
padding-left: 640px
|
|
203
|
+
|
|
204
|
+
|
|
205
|
+
.container_12 .prefix_10
|
|
206
|
+
padding-left: 800px
|
|
207
|
+
|
|
208
|
+
|
|
209
|
+
.container_12 .prefix_11
|
|
210
|
+
padding-left: 880px
|
|
211
|
+
|
|
212
|
+
|
|
213
|
+
/* `Prefix Extra Space >> 16 Columns
|
|
214
|
+
----------------------------------------------------------------------------------------------------*/
|
|
215
|
+
|
|
216
|
+
.container_16 .prefix_1
|
|
217
|
+
padding-left: 60px
|
|
218
|
+
|
|
219
|
+
|
|
220
|
+
.container_16 .prefix_2
|
|
221
|
+
padding-left: 120px
|
|
222
|
+
|
|
223
|
+
|
|
224
|
+
.container_16 .prefix_3
|
|
225
|
+
padding-left: 180px
|
|
226
|
+
|
|
227
|
+
|
|
228
|
+
.container_16 .prefix_5
|
|
229
|
+
padding-left: 300px
|
|
230
|
+
|
|
231
|
+
|
|
232
|
+
.container_16 .prefix_6
|
|
233
|
+
padding-left: 360px
|
|
234
|
+
|
|
235
|
+
|
|
236
|
+
.container_16 .prefix_7
|
|
237
|
+
padding-left: 420px
|
|
238
|
+
|
|
239
|
+
|
|
240
|
+
.container_16 .prefix_9
|
|
241
|
+
padding-left: 540px
|
|
242
|
+
|
|
243
|
+
|
|
244
|
+
.container_16 .prefix_10
|
|
245
|
+
padding-left: 600px
|
|
246
|
+
|
|
247
|
+
|
|
248
|
+
.container_16 .prefix_11
|
|
249
|
+
padding-left: 660px
|
|
250
|
+
|
|
251
|
+
|
|
252
|
+
.container_16 .prefix_13
|
|
253
|
+
padding-left: 780px
|
|
254
|
+
|
|
255
|
+
|
|
256
|
+
.container_16 .prefix_14
|
|
257
|
+
padding-left: 840px
|
|
258
|
+
|
|
259
|
+
|
|
260
|
+
.container_16 .prefix_15
|
|
261
|
+
padding-left: 900px
|
|
262
|
+
|
|
263
|
+
|
|
264
|
+
/* `Suffix Extra Space >> Global
|
|
265
|
+
----------------------------------------------------------------------------------------------------*/
|
|
266
|
+
|
|
267
|
+
.container_12 .suffix_3,
|
|
268
|
+
.container_16 .suffix_4
|
|
269
|
+
padding-right: 240px
|
|
270
|
+
|
|
271
|
+
|
|
272
|
+
.container_12 .suffix_6,
|
|
273
|
+
.container_16 .suffix_8
|
|
274
|
+
padding-right: 480px
|
|
275
|
+
|
|
276
|
+
|
|
277
|
+
.container_12 .suffix_9,
|
|
278
|
+
.container_16 .suffix_12
|
|
279
|
+
padding-right: 720px
|
|
280
|
+
|
|
281
|
+
|
|
282
|
+
/* `Suffix Extra Space >> 12 Columns
|
|
283
|
+
----------------------------------------------------------------------------------------------------*/
|
|
284
|
+
|
|
285
|
+
.container_12 .suffix_1
|
|
286
|
+
padding-right: 80px
|
|
287
|
+
|
|
288
|
+
|
|
289
|
+
.container_12 .suffix_2
|
|
290
|
+
padding-right: 160px
|
|
291
|
+
|
|
292
|
+
|
|
293
|
+
.container_12 .suffix_4
|
|
294
|
+
padding-right: 320px
|
|
295
|
+
|
|
296
|
+
|
|
297
|
+
.container_12 .suffix_5
|
|
298
|
+
padding-right: 400px
|
|
299
|
+
|
|
300
|
+
|
|
301
|
+
.container_12 .suffix_7
|
|
302
|
+
padding-right: 560px
|
|
303
|
+
|
|
304
|
+
|
|
305
|
+
.container_12 .suffix_8
|
|
306
|
+
padding-right: 640px
|
|
307
|
+
|
|
308
|
+
|
|
309
|
+
.container_12 .suffix_10
|
|
310
|
+
padding-right: 800px
|
|
311
|
+
|
|
312
|
+
|
|
313
|
+
.container_12 .suffix_11
|
|
314
|
+
padding-right: 880px
|
|
315
|
+
|
|
316
|
+
|
|
317
|
+
/* `Suffix Extra Space >> 16 Columns
|
|
318
|
+
----------------------------------------------------------------------------------------------------*/
|
|
319
|
+
|
|
320
|
+
.container_16 .suffix_1
|
|
321
|
+
padding-right: 60px
|
|
322
|
+
|
|
323
|
+
|
|
324
|
+
.container_16 .suffix_2
|
|
325
|
+
padding-right: 120px
|
|
326
|
+
|
|
327
|
+
|
|
328
|
+
.container_16 .suffix_3
|
|
329
|
+
padding-right: 180px
|
|
330
|
+
|
|
331
|
+
|
|
332
|
+
.container_16 .suffix_5
|
|
333
|
+
padding-right: 300px
|
|
334
|
+
|
|
335
|
+
|
|
336
|
+
.container_16 .suffix_6
|
|
337
|
+
padding-right: 360px
|
|
338
|
+
|
|
339
|
+
|
|
340
|
+
.container_16 .suffix_7
|
|
341
|
+
padding-right: 420px
|
|
342
|
+
|
|
343
|
+
|
|
344
|
+
.container_16 .suffix_9
|
|
345
|
+
padding-right: 540px
|
|
346
|
+
|
|
347
|
+
|
|
348
|
+
.container_16 .suffix_10
|
|
349
|
+
padding-right: 600px
|
|
350
|
+
|
|
351
|
+
|
|
352
|
+
.container_16 .suffix_11
|
|
353
|
+
padding-right: 660px
|
|
354
|
+
|
|
355
|
+
|
|
356
|
+
.container_16 .suffix_13
|
|
357
|
+
padding-right: 780px
|
|
358
|
+
|
|
359
|
+
|
|
360
|
+
.container_16 .suffix_14
|
|
361
|
+
padding-right: 840px
|
|
362
|
+
|
|
363
|
+
|
|
364
|
+
.container_16 .suffix_15
|
|
365
|
+
padding-right: 900px
|
|
366
|
+
|
|
367
|
+
|
|
368
|
+
/* `Clear Floated Elements
|
|
369
|
+
----------------------------------------------------------------------------------------------------*/
|
|
370
|
+
|
|
371
|
+
/* http://sonspring.com/journal/clearing-floats */
|
|
372
|
+
|
|
373
|
+
.clear
|
|
374
|
+
clear: both
|
|
375
|
+
display: block
|
|
376
|
+
overflow: hidden
|
|
377
|
+
visibility: hidden
|
|
378
|
+
width: 0
|
|
379
|
+
height: 0
|
|
380
|
+
|
|
381
|
+
|
|
382
|
+
/* http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-hack */
|
|
383
|
+
|
|
384
|
+
.clearfix:after
|
|
385
|
+
clear: both
|
|
386
|
+
content: ' '
|
|
387
|
+
display: block
|
|
388
|
+
font-size: 0
|
|
389
|
+
line-height: 0
|
|
390
|
+
visibility: hidden
|
|
391
|
+
width: 0
|
|
392
|
+
height: 0
|
|
393
|
+
|
|
394
|
+
|
|
395
|
+
.clearfix
|
|
396
|
+
display: inline-block
|
|
397
|
+
|
|
398
|
+
|
|
399
|
+
* html .clearfix
|
|
400
|
+
height: 1%
|
|
401
|
+
|
|
402
|
+
|
|
403
|
+
.clearfix
|
|
404
|
+
display: block
|
data/sass/wfs/_base.sass
ADDED
|
@@ -0,0 +1,362 @@
|
|
|
1
|
+
/* @group reset */
|
|
2
|
+
@import compass/reset.sass
|
|
3
|
+
/* @end */
|
|
4
|
+
|
|
5
|
+
/* @group grid */
|
|
6
|
+
@import 960.sass
|
|
7
|
+
/* @end */
|
|
8
|
+
|
|
9
|
+
!normal_font_face ||= false
|
|
10
|
+
!italic_font_face ||= false
|
|
11
|
+
!bold_font_face ||= false
|
|
12
|
+
|
|
13
|
+
=normal
|
|
14
|
+
@if !normal_font_face
|
|
15
|
+
font-family: '#{!normal_font_face}', Georgia
|
|
16
|
+
font-style: normal
|
|
17
|
+
|
|
18
|
+
=italic
|
|
19
|
+
@if !italic_font_face
|
|
20
|
+
font-family: '#{!italic_font_face}', Georgia
|
|
21
|
+
font-style: italic
|
|
22
|
+
|
|
23
|
+
=bold
|
|
24
|
+
@if !bold_font_face
|
|
25
|
+
font-family: '#{!bold_font_face}', Georgia
|
|
26
|
+
font-weight: bold
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
/* Fonts
|
|
30
|
+
----------------------------------------------- */
|
|
31
|
+
body, .typeface1
|
|
32
|
+
+normal
|
|
33
|
+
|
|
34
|
+
.typeface2
|
|
35
|
+
font-family: Verdana
|
|
36
|
+
|
|
37
|
+
em
|
|
38
|
+
+italic
|
|
39
|
+
|
|
40
|
+
strong
|
|
41
|
+
+bold
|
|
42
|
+
|
|
43
|
+
|
|
44
|
+
/* General
|
|
45
|
+
----------------------------------------------- */
|
|
46
|
+
body
|
|
47
|
+
margin: 0 0 72px
|
|
48
|
+
font-size: 13px
|
|
49
|
+
line-height: 18px
|
|
50
|
+
background-color: #eeeee2
|
|
51
|
+
color: #333
|
|
52
|
+
|
|
53
|
+
.container_16
|
|
54
|
+
background-color: #fff
|
|
55
|
+
padding-bottom: 36px
|
|
56
|
+
|
|
57
|
+
#header
|
|
58
|
+
padding-top: 24px
|
|
59
|
+
border-top: 16px #ddddd2 solid
|
|
60
|
+
|
|
61
|
+
.dim
|
|
62
|
+
background-color: #ddddd2
|
|
63
|
+
color: #333
|
|
64
|
+
|
|
65
|
+
.dim .container_16
|
|
66
|
+
background-color: #fcfcf3
|
|
67
|
+
|
|
68
|
+
.dim, .dim .upp
|
|
69
|
+
text-align: center
|
|
70
|
+
|
|
71
|
+
.dark
|
|
72
|
+
background-color: #111112
|
|
73
|
+
color: #fff
|
|
74
|
+
|
|
75
|
+
.dark .container_16
|
|
76
|
+
background-color: #000
|
|
77
|
+
|
|
78
|
+
#footer
|
|
79
|
+
padding-bottom: 36px
|
|
80
|
+
border-top: 24px #ddddd2 solid
|
|
81
|
+
font: 13px/21px Verdana
|
|
82
|
+
color: #888882
|
|
83
|
+
|
|
84
|
+
#footer span
|
|
85
|
+
margin: 0
|
|
86
|
+
|
|
87
|
+
|
|
88
|
+
/* Type
|
|
89
|
+
----------------------------------------------- */
|
|
90
|
+
h1
|
|
91
|
+
font-size: 96px
|
|
92
|
+
line-height: 96px
|
|
93
|
+
font-weight: normal
|
|
94
|
+
border-bottom: 2px #eeeee2 solid
|
|
95
|
+
|
|
96
|
+
h2
|
|
97
|
+
font: normal 13px/18px Verdana, sans-serif
|
|
98
|
+
color: #c00
|
|
99
|
+
|
|
100
|
+
h3
|
|
101
|
+
font-size: 24px
|
|
102
|
+
line-height: 24px
|
|
103
|
+
font-weight: normal
|
|
104
|
+
|
|
105
|
+
h4
|
|
106
|
+
font-weight: normal
|
|
107
|
+
text-transform: uppercase
|
|
108
|
+
letter-spacing: 1px
|
|
109
|
+
|
|
110
|
+
h5 + p
|
|
111
|
+
margin-top: 0
|
|
112
|
+
|
|
113
|
+
h2, p, ul, ol
|
|
114
|
+
margin: 18px 0
|
|
115
|
+
|
|
116
|
+
ul
|
|
117
|
+
list-style-type: square
|
|
118
|
+
margin-left: 28px
|
|
119
|
+
|
|
120
|
+
ol
|
|
121
|
+
list-style-type: decimal
|
|
122
|
+
margin-left: 28px
|
|
123
|
+
|
|
124
|
+
.dropcap:first-letter
|
|
125
|
+
float: left
|
|
126
|
+
margin: 0 10px 4px 0
|
|
127
|
+
font-size: 48px
|
|
128
|
+
line-height: 48px
|
|
129
|
+
font-variant: normal
|
|
130
|
+
|
|
131
|
+
.dropcap:first-line
|
|
132
|
+
font-variant: small-caps
|
|
133
|
+
letter-spacing: 1px
|
|
134
|
+
|
|
135
|
+
|
|
136
|
+
|
|
137
|
+
/* Links
|
|
138
|
+
-----------------------------------------*/
|
|
139
|
+
a
|
|
140
|
+
text-decoration: none
|
|
141
|
+
padding: 3px 0
|
|
142
|
+
|
|
143
|
+
a:link,
|
|
144
|
+
a:visited
|
|
145
|
+
color: #888882
|
|
146
|
+
background-color: #eeeee2
|
|
147
|
+
|
|
148
|
+
a:hover
|
|
149
|
+
background-color: #fffff2
|
|
150
|
+
|
|
151
|
+
a:active
|
|
152
|
+
color: #fff
|
|
153
|
+
background-color: #000
|
|
154
|
+
|
|
155
|
+
|
|
156
|
+
|
|
157
|
+
/* Body size comparison
|
|
158
|
+
-----------------------------------------*/
|
|
159
|
+
p.char-compare
|
|
160
|
+
font-size: 72px
|
|
161
|
+
line-height: 96px
|
|
162
|
+
color: #ddd
|
|
163
|
+
text-decoration: underline
|
|
164
|
+
|
|
165
|
+
.char-compare .typeface1
|
|
166
|
+
margin-right: 0
|
|
167
|
+
color: #333
|
|
168
|
+
border-bottom: 1px #999 solid
|
|
169
|
+
border-top: 1px #999 solid
|
|
170
|
+
|
|
171
|
+
.char-compare .typeface2
|
|
172
|
+
color: #333
|
|
173
|
+
background-color: #eeeee2
|
|
174
|
+
border-bottom: 1px #999 solid
|
|
175
|
+
border-top: 1px #999 solid
|
|
176
|
+
|
|
177
|
+
|
|
178
|
+
|
|
179
|
+
/* Leading
|
|
180
|
+
-----------------------------------------*/
|
|
181
|
+
.l-less
|
|
182
|
+
line-height: 16px
|
|
183
|
+
.l-mid
|
|
184
|
+
line-height: 18px
|
|
185
|
+
.l-more
|
|
186
|
+
line-height: 21px
|
|
187
|
+
.l-most
|
|
188
|
+
line-height: 24px
|
|
189
|
+
|
|
190
|
+
|
|
191
|
+
/* Measure
|
|
192
|
+
-----------------------------------------*/
|
|
193
|
+
.m-widest
|
|
194
|
+
width: 900px
|
|
195
|
+
.m-wide
|
|
196
|
+
width: 700px
|
|
197
|
+
.m-mid
|
|
198
|
+
width: 450px
|
|
199
|
+
.m-narrow
|
|
200
|
+
width: 300px
|
|
201
|
+
|
|
202
|
+
.small
|
|
203
|
+
font-size: 11px
|
|
204
|
+
line-height: 14px
|
|
205
|
+
.small .m-mid
|
|
206
|
+
width: 350px
|
|
207
|
+
.small .m-narrow
|
|
208
|
+
width: 250px
|
|
209
|
+
.small .m-mini
|
|
210
|
+
font-size: 9px
|
|
211
|
+
line-height: 13px
|
|
212
|
+
width: 200px
|
|
213
|
+
|
|
214
|
+
|
|
215
|
+
|
|
216
|
+
/* Size
|
|
217
|
+
-----------------------------------------*/
|
|
218
|
+
.s
|
|
219
|
+
line-height: 1.5em
|
|
220
|
+
.s9
|
|
221
|
+
font-size: 9px
|
|
222
|
+
.s10
|
|
223
|
+
font-size: 10px
|
|
224
|
+
.s11
|
|
225
|
+
font-size: 11px
|
|
226
|
+
.s12
|
|
227
|
+
font-size: 12px
|
|
228
|
+
.s13
|
|
229
|
+
font-size: 13px
|
|
230
|
+
.s14
|
|
231
|
+
font-size: 14px
|
|
232
|
+
.s16
|
|
233
|
+
font-size: 16px
|
|
234
|
+
.s18
|
|
235
|
+
font-size: 18px
|
|
236
|
+
.s21
|
|
237
|
+
font-size: 21px
|
|
238
|
+
.s24
|
|
239
|
+
font-size: 24px
|
|
240
|
+
.s30
|
|
241
|
+
font-size: 30px
|
|
242
|
+
.s36
|
|
243
|
+
font-size: 36px
|
|
244
|
+
.s42
|
|
245
|
+
font-size: 42px
|
|
246
|
+
line-height: 60px
|
|
247
|
+
.s96
|
|
248
|
+
font-size: 96px
|
|
249
|
+
line-height: 96px
|
|
250
|
+
.s300
|
|
251
|
+
font-size: 300px
|
|
252
|
+
line-height: 300px
|
|
253
|
+
|
|
254
|
+
.container_16 span
|
|
255
|
+
margin-right: 6px
|
|
256
|
+
color: #999
|
|
257
|
+
|
|
258
|
+
.s span
|
|
259
|
+
display: block
|
|
260
|
+
float: left
|
|
261
|
+
width: 80px
|
|
262
|
+
margin-left: -96px
|
|
263
|
+
margin-right: 0
|
|
264
|
+
text-align: right
|
|
265
|
+
color: #999
|
|
266
|
+
|
|
267
|
+
|
|
268
|
+
|
|
269
|
+
/* Uppercase
|
|
270
|
+
-----------------------------------------*/
|
|
271
|
+
.upp
|
|
272
|
+
text-align: right
|
|
273
|
+
text-transform: uppercase
|
|
274
|
+
letter-spacing: 1px
|
|
275
|
+
|
|
276
|
+
.upp span
|
|
277
|
+
display: block
|
|
278
|
+
float: right
|
|
279
|
+
width: 80px
|
|
280
|
+
margin-right: -96px
|
|
281
|
+
text-align: left
|
|
282
|
+
|
|
283
|
+
|
|
284
|
+
|
|
285
|
+
/* Grayscale
|
|
286
|
+
-----------------------------------------*/
|
|
287
|
+
.c000
|
|
288
|
+
color: #000
|
|
289
|
+
.c333
|
|
290
|
+
color: #333
|
|
291
|
+
.c666
|
|
292
|
+
color: #666
|
|
293
|
+
.c999
|
|
294
|
+
color: #999
|
|
295
|
+
.cCCC
|
|
296
|
+
color: #ccc
|
|
297
|
+
.cFFF
|
|
298
|
+
color: #fff
|
|
299
|
+
|
|
300
|
+
|
|
301
|
+
/* Color
|
|
302
|
+
-----------------------------------------*/
|
|
303
|
+
.c
|
|
304
|
+
padding: 0 12px
|
|
305
|
+
border: 1px #eee solid
|
|
306
|
+
color: #000
|
|
307
|
+
|
|
308
|
+
.c h2
|
|
309
|
+
color: #000
|
|
310
|
+
.c000-fff
|
|
311
|
+
color: #000
|
|
312
|
+
background-color: #fff
|
|
313
|
+
|
|
314
|
+
.cfff-000
|
|
315
|
+
color: #fff
|
|
316
|
+
background-color: #000
|
|
317
|
+
border-color: #000
|
|
318
|
+
|
|
319
|
+
.cfff-000 h2
|
|
320
|
+
color: #c00
|
|
321
|
+
.cf00-fff
|
|
322
|
+
color: #f00
|
|
323
|
+
background-color: #fff
|
|
324
|
+
|
|
325
|
+
.cf00-000
|
|
326
|
+
color: #f00
|
|
327
|
+
background-color: #000
|
|
328
|
+
border-color: #000
|
|
329
|
+
|
|
330
|
+
.cf00-000 h2
|
|
331
|
+
color: #eee
|
|
332
|
+
.c0ff-fff
|
|
333
|
+
color: #0ff
|
|
334
|
+
background-color: #fff
|
|
335
|
+
|
|
336
|
+
.c0ff-000
|
|
337
|
+
color: #0ff
|
|
338
|
+
background-color: #000
|
|
339
|
+
border-color: #000
|
|
340
|
+
|
|
341
|
+
.c0ff-000 h2
|
|
342
|
+
color: #eee
|
|
343
|
+
.cfff-f00
|
|
344
|
+
color: #fff
|
|
345
|
+
background-color: #f00
|
|
346
|
+
border-color: #f00
|
|
347
|
+
|
|
348
|
+
.c000-f00
|
|
349
|
+
color: #000
|
|
350
|
+
background-color: #f00
|
|
351
|
+
border-color: #f00
|
|
352
|
+
|
|
353
|
+
.cfff-0ff
|
|
354
|
+
color: #fff
|
|
355
|
+
background-color: #0ff
|
|
356
|
+
border-color: #0ff
|
|
357
|
+
|
|
358
|
+
.c000-0ff
|
|
359
|
+
color: #000
|
|
360
|
+
background-color: #0ff
|
|
361
|
+
border-color: #0ff
|
|
362
|
+
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
// @Font-Face
|
|
2
|
+
// Cross-browser support for @font-face
|
|
3
|
+
// - !name is required, arbitrary, and what you will use in font stacks.
|
|
4
|
+
// - !font_files is required using font_files('relative_location', 'format').
|
|
5
|
+
// - for best results use this order: woff, opentype/truetype, svg
|
|
6
|
+
// - !eot is required by IE, and is a relative location of the eot file.
|
|
7
|
+
// - postscript name is required by some browsers to look for local fonts.
|
|
8
|
+
=font-face( !name, !font_files, !eot = false, !postscript = false, !style = false)
|
|
9
|
+
@font-face
|
|
10
|
+
font-family: '#{!name}'
|
|
11
|
+
@if !style
|
|
12
|
+
font-style= !style
|
|
13
|
+
@if !eot
|
|
14
|
+
src: url('#{!eot}')
|
|
15
|
+
@if !postscript
|
|
16
|
+
src: local('#{!name}'), local('#{!postscript}'), #{!font_files}
|
|
17
|
+
@else
|
|
18
|
+
src: local('#{!name}'), #{!font_files}
|
|
19
|
+
|
|
20
|
+
// EXAMPLE
|
|
21
|
+
+font-face("this name", font_files("this.woff", "woff", "this.otf", "opentype"), "fonts/this.eot", "thisname")
|
|
22
|
+
|
|
23
|
+
will generate:
|
|
24
|
+
|
|
25
|
+
@font-face {
|
|
26
|
+
font-family: 'this name';
|
|
27
|
+
src: url('fonts/this.eot');
|
|
28
|
+
src: local('this name'), local('thisname'),
|
|
29
|
+
url('this.otf') format('woff'),
|
|
30
|
+
url('this.woff') format('opentype');
|
|
31
|
+
}
|
|
@@ -0,0 +1,246 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en" dir="ltr">
|
|
3
|
+
<head>
|
|
4
|
+
|
|
5
|
+
<meta charset="utf-8" />
|
|
6
|
+
<meta http-equiv="X-UA-Compatible" content="chrome=1">
|
|
7
|
+
|
|
8
|
+
<title>Web Font Specimen</title>
|
|
9
|
+
<link rel="stylesheet" href="css/wfs.css" type="text/css" media="screen" charset="utf-8">
|
|
10
|
+
|
|
11
|
+
</head>
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
<body>
|
|
15
|
+
<div id="header" class="container_16 clearfix">
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
<!-- NAME OF TYPEFACE -->
|
|
19
|
+
<div class="grid_16">
|
|
20
|
+
<h1>Your Font</h1>
|
|
21
|
+
</div>
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
<!-- HEADINGS, LISTS, EMPHASIS -->
|
|
25
|
+
<div class="grid_8">
|
|
26
|
+
<h2>Headings, lists, and emphasis</h2>
|
|
27
|
+
<p>The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to</p>
|
|
28
|
+
<h3>Lorem ipsum <em>dolor</em> sit <strong>amet</strong></h3>
|
|
29
|
+
<p>The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to</p>
|
|
30
|
+
<ul>
|
|
31
|
+
<li>Duis aute irure dolor in reprehenderit</li>
|
|
32
|
+
<li>in <em>voluptate velit esse cillum</em> dolore eu fugiat nulla pariatur</li>
|
|
33
|
+
<li>Excepteur sint occaecat cupidatat non proident</li>
|
|
34
|
+
<li>sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
|
|
35
|
+
</ul>
|
|
36
|
+
<ol>
|
|
37
|
+
<li>Duis aute irure dolor in reprehenderit</li>
|
|
38
|
+
<li>in <em>voluptate velit esse cillum</em> dolore eu fugiat nulla pariatur</li>
|
|
39
|
+
<li>Excepteur sint occaecat cupidatat non proident</li>
|
|
40
|
+
<li>sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
|
|
41
|
+
</ol>
|
|
42
|
+
<h4>Consectetur <em>adipisicing</em> elit <strong>voluptate</strong></h4>
|
|
43
|
+
<p>The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to</p>
|
|
44
|
+
<p class="dropcap">The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to discard knowledge of what has gone before or what is now going on in his own trade and profession. If the printers of today do not wish to be esteemed arrogant when they term this calling of theirs an art, they must be willing, and show that they are willing, to subject it to such laws as have made its</p>
|
|
45
|
+
<p><em>The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to</em></p>
|
|
46
|
+
<h5>Sed do <em>eiusmod</em> tempor <strong>incididunt</strong></h5>
|
|
47
|
+
<p>The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to</p>
|
|
48
|
+
</div>
|
|
49
|
+
|
|
50
|
+
|
|
51
|
+
<!-- BODY SIZE COMPARISON -->
|
|
52
|
+
<div class="grid_8">
|
|
53
|
+
<h2>Body size comparison <span>· Your Font and Verdana</span></h2>
|
|
54
|
+
<p class="char-compare">
|
|
55
|
+
<span class="typeface1">a</span><span class="typeface2">a</span>
|
|
56
|
+
<span class="typeface1">b</span><span class="typeface2">b</span>
|
|
57
|
+
<span class="typeface1">c</span><span class="typeface2">c</span><br />
|
|
58
|
+
<span class="typeface1">e</span><span class="typeface2">e</span>
|
|
59
|
+
<span class="typeface1">f</span><span class="typeface2">f</span>
|
|
60
|
+
<span class="typeface1">g</span><span class="typeface2">g</span><br />
|
|
61
|
+
<span class="typeface1">n</span><span class="typeface2">n</span>
|
|
62
|
+
<span class="typeface1">o</span><span class="typeface2">o</span>
|
|
63
|
+
<span class="typeface1">t</span><span class="typeface2">t</span><br />
|
|
64
|
+
<span class="typeface1">A</span><span class="typeface2">A</span>
|
|
65
|
+
<span class="typeface1">O</span><span class="typeface2">O</span>
|
|
66
|
+
<span class="typeface1">R</span><span class="typeface2">R</span>
|
|
67
|
+
</p>
|
|
68
|
+
</div>
|
|
69
|
+
|
|
70
|
+
|
|
71
|
+
<!-- LEADING -->
|
|
72
|
+
<div class="grid_8">
|
|
73
|
+
<h2>Leading <span>– CSS font-size/line-height (px)</span></h2>
|
|
74
|
+
<p class="l-less"><span>13/16</span>The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to</p>
|
|
75
|
+
<p class="l-mid"><span>13/18</span>The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to</p>
|
|
76
|
+
<p class="l-more"><span>13/21</span>The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to</p>
|
|
77
|
+
<p class="l-most"><span>13/24</span>The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to</p>
|
|
78
|
+
</div><div class="clearfix"></div>
|
|
79
|
+
</div><!-- end .container-16 -->
|
|
80
|
+
|
|
81
|
+
|
|
82
|
+
<!-- ALPHABET -->
|
|
83
|
+
<div class="dim">
|
|
84
|
+
<div class="container_16 clearfix">
|
|
85
|
+
<div class="grid_16 center">
|
|
86
|
+
<h2>· 42px ·</h2>
|
|
87
|
+
<p class="s42">The best kind of originality is that which comes after a sound apprenticeship, that which shall</p>
|
|
88
|
+
<p class="s42"><em>The best kind of originality is that which comes after a sound apprenticeship, that which shall</em></p>
|
|
89
|
+
<p class="s42 upp ls">abcdefghijklmnopqrstuvwxyz</p>
|
|
90
|
+
<p class="s42">abcdefghijklmnopqrstuvwxyz</p>
|
|
91
|
+
<p class="s42 ls">$ & § 1234567890-.,:;—“”?!</p>
|
|
92
|
+
</div>
|
|
93
|
+
</div><!-- end .container_16 -->
|
|
94
|
+
</div><!-- end .dim -->
|
|
95
|
+
|
|
96
|
+
|
|
97
|
+
<!-- MEASURE -->
|
|
98
|
+
<div class="container_16 clearfix">
|
|
99
|
+
<div class="grid_16">
|
|
100
|
+
<h2>Measure <span>– CSS font-size/line-height × width (px)</span></h2>
|
|
101
|
+
<p class="m-widest"><span>13/18 × 900</span> The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to discard knowledge of what has gone before or what is now going on in his own trade and profession. If the printers of today do not wish to be esteemed arrogant when they term this calling of theirs an art, they must be willing, and show that they are willing, to subject it to such laws as have made its</p>
|
|
102
|
+
<p class="m-wide"><span>13/18 × 700</span> The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to discard knowledge of what has gone before or what is now going on in his own trade and profession. If the printers of today do not wish to be esteemed arrogant when they term this calling of theirs an art, they must be willing, and show that they are willing, to subject it to such laws as have made its</p>
|
|
103
|
+
</div>
|
|
104
|
+
<div class="grid_9">
|
|
105
|
+
<p class="m-mid"><span>13/18 × 450</span> The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to</p>
|
|
106
|
+
<p class="m-narrow"><span>13/18 × 300</span> The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to</p>
|
|
107
|
+
</div>
|
|
108
|
+
<div class="grid_7 small">
|
|
109
|
+
<p class="m-mid"><span>11/14 × 350</span> The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to</p>
|
|
110
|
+
<p class="m-narrow"><span>11/14 × 250</span> The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to</p>
|
|
111
|
+
<p class="m-mini"><span>9/13 × 200</span> The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to</p>
|
|
112
|
+
</div>
|
|
113
|
+
|
|
114
|
+
|
|
115
|
+
<!-- SIZE -->
|
|
116
|
+
<div class="grid_16">
|
|
117
|
+
<h2>Size <span>– CSS font-size (px)</span></h2>
|
|
118
|
+
<p class="s s36"><span>36</span> Pack my box with five dozen liquor jugs.</p>
|
|
119
|
+
<p class="s s30"><span>30</span> Pack my box with five dozen liquor jugs.</p>
|
|
120
|
+
<p class="s s24"><span>24</span> Pack my box with five dozen liquor jugs.</p>
|
|
121
|
+
</div><div class="clearfix"></div>
|
|
122
|
+
<div class="grid_10">
|
|
123
|
+
<p class="s s21"><span>21</span> Pack my box with five dozen liquor jugs.</p>
|
|
124
|
+
<p class="s s18"><span>18</span> Pack my box with five dozen liquor jugs.</p>
|
|
125
|
+
</div>
|
|
126
|
+
<div class="grid_6 upp">
|
|
127
|
+
<p class="s s9"><span>9</span> Pack my box with five dozen liquor jugs.</p>
|
|
128
|
+
<p class="s s10"><span>10</span> Pack my box with five dozen liquor jugs.</p>
|
|
129
|
+
</div><div class="clearfix"></div>
|
|
130
|
+
<div class="grid_8">
|
|
131
|
+
<p class="s s16"><span>16</span> Pack my box with five dozen liquor jugs.</p>
|
|
132
|
+
<p class="s s14"><span>14</span> Pack my box with five dozen liquor jugs.</p>
|
|
133
|
+
<p class="s s13"><span>13</span> Pack my box with five dozen liquor jugs.</p>
|
|
134
|
+
</div>
|
|
135
|
+
<div class="grid_8 upp">
|
|
136
|
+
<p class="s s11"><span>11</span> Pack my box with five dozen liquor jugs.</p>
|
|
137
|
+
<p class="s s12"><span>12</span> Pack my box with five dozen liquor jugs.</p>
|
|
138
|
+
<p class="s s13"><span>13</span> Pack my box with five dozen liquor jugs.</p>
|
|
139
|
+
</div><div class="clearfix"></div>
|
|
140
|
+
<div class="grid_6">
|
|
141
|
+
<p class="s s12"><span>12</span> Pack my box with five dozen liquor jugs.</p>
|
|
142
|
+
<p class="s s11"><span>11</span> Pack my box with five dozen liquor jugs.</p>
|
|
143
|
+
<p class="s s10"><span>10</span> Pack my box with five dozen liquor jugs.</p>
|
|
144
|
+
<p class="s s9"><span>9</span> Pack my box with five dozen liquor jugs.</p>
|
|
145
|
+
</div>
|
|
146
|
+
<div class="grid_10 upp">
|
|
147
|
+
<p class="s s14"><span>14</span> Pack my box with five dozen liquor jugs.</p>
|
|
148
|
+
<p class="s s16"><span>16</span> Pack my box with five dozen liquor jugs.</p>
|
|
149
|
+
<p class="s s18"><span>18</span> Pack my box with five dozen liquor jugs.</p>
|
|
150
|
+
</div><div class="clearfix"></div>
|
|
151
|
+
<div class="grid_16 upp">
|
|
152
|
+
<p class="s s21"><span>21</span> Pack my box with five dozen liquor jugs.</p>
|
|
153
|
+
<p class="s s24"><span>24</span> Pack my box with five dozen liquor jugs.</p>
|
|
154
|
+
</div>
|
|
155
|
+
|
|
156
|
+
|
|
157
|
+
<!-- GRAYSCALE AND COLOR ON WHITE -->
|
|
158
|
+
<div class="grid_8">
|
|
159
|
+
<h2>Grayscale <span>– CSS color (shorthand hexadecimal)</span></h2>
|
|
160
|
+
<p class="c000"><span>#000</span>The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to</p>
|
|
161
|
+
<p class="c333"><span>#333</span>The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to</p>
|
|
162
|
+
<p class="c666"><span>#666</span>The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to</p>
|
|
163
|
+
<p class="c999"><span>#999</span>The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to</p>
|
|
164
|
+
<p class="cCCC"><span>#CCC</span>The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to</p>
|
|
165
|
+
</div>
|
|
166
|
+
<div class="grid_8">
|
|
167
|
+
<div class="c000-fff">
|
|
168
|
+
<h2>Color <span>– CSS color (shorthand hexadecimal)</span></h2>
|
|
169
|
+
<p><span>#000</span>The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to</p>
|
|
170
|
+
</div>
|
|
171
|
+
<div class="cf00-fff">
|
|
172
|
+
<p><span>#F00</span>The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to</p>
|
|
173
|
+
</div>
|
|
174
|
+
<div class="c0ff-fff">
|
|
175
|
+
<p><span>#0FF</span>The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to</p>
|
|
176
|
+
</div>
|
|
177
|
+
</div>
|
|
178
|
+
</div><!-- end .container_16 -->
|
|
179
|
+
|
|
180
|
+
|
|
181
|
+
<!-- GRAYSCALE AND COLOR ON BLACK -->
|
|
182
|
+
<div class="dark">
|
|
183
|
+
<div class="container_16 clearfix">
|
|
184
|
+
<div class="grid_8">
|
|
185
|
+
<h2>Grayscale <span>– CSS color (shorthand hexadecimal)</span></h2>
|
|
186
|
+
<p class="cfff"><span>#FFF</span>The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to</p>
|
|
187
|
+
<p class="cCCC"><span>#CCC</span>The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to</p>
|
|
188
|
+
<p class="c999"><span>#999</span>The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to</p>
|
|
189
|
+
<p class="c666"><span>#666</span>The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to</p>
|
|
190
|
+
<p class="c333"><span>#333</span>The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to</p>
|
|
191
|
+
</div>
|
|
192
|
+
<div class="grid_8">
|
|
193
|
+
<div class="cfff-000">
|
|
194
|
+
<h2>Color <span>– CSS color (shorthand hexadecimal)</span></h2>
|
|
195
|
+
<p><span>#FFF</span>The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to</p>
|
|
196
|
+
</div>
|
|
197
|
+
<div class="c0ff-000">
|
|
198
|
+
<p><span>#0FF</span>The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to</p>
|
|
199
|
+
</div>
|
|
200
|
+
<div class="cf00-000">
|
|
201
|
+
<p><span>#F00</span>The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to</p>
|
|
202
|
+
</div>
|
|
203
|
+
</div>
|
|
204
|
+
</div><!-- end .container_16 -->
|
|
205
|
+
</div><!-- end .dark -->
|
|
206
|
+
|
|
207
|
+
|
|
208
|
+
<!-- BLACK AND WHITE ON COLOR -->
|
|
209
|
+
<div class="container_16 clearfix">
|
|
210
|
+
<div class="grid_8">
|
|
211
|
+
<div class="c cfff-f00">
|
|
212
|
+
<h2>#FFF on #F00</h2>
|
|
213
|
+
<p>The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to</p>
|
|
214
|
+
</div>
|
|
215
|
+
</div>
|
|
216
|
+
<div class="grid_8">
|
|
217
|
+
<div class="c c000-f00">
|
|
218
|
+
<h2>#000 on #0FF</h2>
|
|
219
|
+
<p>The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to</p>
|
|
220
|
+
</div>
|
|
221
|
+
</div>
|
|
222
|
+
<div class="grid_8">
|
|
223
|
+
<div class="c cfff-0ff">
|
|
224
|
+
<h2>#FFF on #0FF</h2>
|
|
225
|
+
<p>The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to</p>
|
|
226
|
+
</div>
|
|
227
|
+
</div>
|
|
228
|
+
<div class="grid_8">
|
|
229
|
+
<div class="c c000-0ff">
|
|
230
|
+
<h2>#000 on #0FF</h2>
|
|
231
|
+
<p>The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to</p>
|
|
232
|
+
</div>
|
|
233
|
+
</div>
|
|
234
|
+
</div><!-- end .container_16 -->
|
|
235
|
+
|
|
236
|
+
|
|
237
|
+
<!-- ABOUT -->
|
|
238
|
+
<div id="footer" class="container_12">
|
|
239
|
+
<div class="grid_6 suffix_6">
|
|
240
|
+
<p>This web font specimen is brought to you by <a href="http://nicewebtype.com/">Nice Web Type</a>.<br />
|
|
241
|
+
<a href="http://webfontspecimen.com/">Grab a copy and test your type</a>. Licensed via <a rel="license" href="http://creativecommons.org/licenses/by/3.0/us/">Creative Commons</a>.</p>
|
|
242
|
+
</div>
|
|
243
|
+
</div><!-- end #footer -->
|
|
244
|
+
|
|
245
|
+
</body>
|
|
246
|
+
</html>
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
/*
|
|
2
|
+
Welcome to WebFontSpecimen
|
|
3
|
+
Based on Nice Web Type's tool by the same name
|
|
4
|
+
http://webfontspecimen.com/
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
// Import the font-family mixin
|
|
8
|
+
@import wfs/font_face.sass
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
// Place your font directory directly inside your CSS directory.
|
|
12
|
+
// It is recommended that you name your different font-styles differently
|
|
13
|
+
// rather than using the optional !style argument: IE ignores font-style.
|
|
14
|
+
|
|
15
|
+
// Your normal font face
|
|
16
|
+
!normal_font_face = "Name Your Font"
|
|
17
|
+
+font-face(!normal_font_face, font_files("type_file.woff", "woff", "type_file.otf", "opentype"), "fonts/type_file.eot", "postscriptname")
|
|
18
|
+
|
|
19
|
+
// Your italic font face
|
|
20
|
+
// - delete or comment out these lines if there is no italic version
|
|
21
|
+
!italic_font_face = "Name Your Italic Font"
|
|
22
|
+
+font-face(!italic_font_face, font_files("type_file.woff", "woff", "type_file.otf", "opentype"), "fonts/type_file.eot", "postscriptname")
|
|
23
|
+
|
|
24
|
+
// Your bold font face
|
|
25
|
+
// - delete or comment out these lines if there is no bold version
|
|
26
|
+
!bold_font_face = "Name Your Bold Font"
|
|
27
|
+
+font-face("Your bold typeface", font_files("type_file.woff", "woff", "type_file.otf", "opentype"), "fonts/type_file.eot", "postscriptname")
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
// Import WebFontSpecimen SASS
|
|
31
|
+
// - Leave this below your font settings
|
|
32
|
+
@import wfs/base.sass
|
metadata
ADDED
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
--- !ruby/object:Gem::Specification
|
|
2
|
+
name: compass-webfontspecimen-plugin
|
|
3
|
+
version: !ruby/object:Gem::Version
|
|
4
|
+
version: "0.1"
|
|
5
|
+
platform: ruby
|
|
6
|
+
authors:
|
|
7
|
+
- Eric Meyer
|
|
8
|
+
autorequire:
|
|
9
|
+
bindir: bin
|
|
10
|
+
cert_chain: []
|
|
11
|
+
|
|
12
|
+
date: 2009-11-24 00:00:00 -07:00
|
|
13
|
+
default_executable:
|
|
14
|
+
dependencies:
|
|
15
|
+
- !ruby/object:Gem::Dependency
|
|
16
|
+
name: compass
|
|
17
|
+
type: :runtime
|
|
18
|
+
version_requirement:
|
|
19
|
+
version_requirements: !ruby/object:Gem::Requirement
|
|
20
|
+
requirements:
|
|
21
|
+
- - ">="
|
|
22
|
+
- !ruby/object:Gem::Version
|
|
23
|
+
version: "0"
|
|
24
|
+
version:
|
|
25
|
+
- !ruby/object:Gem::Dependency
|
|
26
|
+
name: echoe
|
|
27
|
+
type: :development
|
|
28
|
+
version_requirement:
|
|
29
|
+
version_requirements: !ruby/object:Gem::Requirement
|
|
30
|
+
requirements:
|
|
31
|
+
- - ">="
|
|
32
|
+
- !ruby/object:Gem::Version
|
|
33
|
+
version: "0"
|
|
34
|
+
version:
|
|
35
|
+
description: An adaptation of Tim Brown's Web Font Specimen for Compass.
|
|
36
|
+
email: eric@oddbird.net
|
|
37
|
+
executables: []
|
|
38
|
+
|
|
39
|
+
extensions: []
|
|
40
|
+
|
|
41
|
+
extra_rdoc_files:
|
|
42
|
+
- lib/wfs/compass_plugin.rb
|
|
43
|
+
- lib/webfontspecimen.rb
|
|
44
|
+
- README.mkdn
|
|
45
|
+
files:
|
|
46
|
+
- lib/wfs/compass_plugin.rb
|
|
47
|
+
- lib/wfs/sass_extensions.rb
|
|
48
|
+
- lib/webfontspecimen.rb
|
|
49
|
+
- Manifest
|
|
50
|
+
- Rakefile
|
|
51
|
+
- README.mkdn
|
|
52
|
+
- sass/wfs/_font_face.sass
|
|
53
|
+
- sass/wfs/_960.sass
|
|
54
|
+
- sass/wfs/_base.sass
|
|
55
|
+
- templates/project/wfs.sass
|
|
56
|
+
- templates/project/wfs.html
|
|
57
|
+
- templates/project/manifest.rb
|
|
58
|
+
- VERSION
|
|
59
|
+
- LICENSE.txt
|
|
60
|
+
- compass-webfontspecimen-plugin.gemspec
|
|
61
|
+
has_rdoc: true
|
|
62
|
+
homepage: http://github.com/ericam/compass-webfontspecimen-plugin
|
|
63
|
+
licenses: []
|
|
64
|
+
|
|
65
|
+
post_install_message:
|
|
66
|
+
rdoc_options:
|
|
67
|
+
- --line-numbers
|
|
68
|
+
- --inline-source
|
|
69
|
+
- --title
|
|
70
|
+
- Compass-webfontspecimen-plugin
|
|
71
|
+
- --main
|
|
72
|
+
- README.mkdn
|
|
73
|
+
require_paths:
|
|
74
|
+
- lib
|
|
75
|
+
required_ruby_version: !ruby/object:Gem::Requirement
|
|
76
|
+
requirements:
|
|
77
|
+
- - ">="
|
|
78
|
+
- !ruby/object:Gem::Version
|
|
79
|
+
version: "0"
|
|
80
|
+
version:
|
|
81
|
+
required_rubygems_version: !ruby/object:Gem::Requirement
|
|
82
|
+
requirements:
|
|
83
|
+
- - ">="
|
|
84
|
+
- !ruby/object:Gem::Version
|
|
85
|
+
version: "1.2"
|
|
86
|
+
version:
|
|
87
|
+
requirements: []
|
|
88
|
+
|
|
89
|
+
rubyforge_project:
|
|
90
|
+
rubygems_version: 1.3.5
|
|
91
|
+
signing_key:
|
|
92
|
+
specification_version: 3
|
|
93
|
+
summary: A Compass plugin for working with web fonts.
|
|
94
|
+
test_files: []
|
|
95
|
+
|