fittext 0.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- data/README.md +64 -0
- data/lib/fittext.rb +3 -0
- data/stylesheets/_fittext.sass +13 -0
- metadata +63 -0
data/README.md
ADDED
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
# [Fittext](http://www.bookcasey.com/fittext)
|
|
2
|
+
|
|
3
|
+
Compass extenstion / Sass mixin for inflating web type by generating media queries with progressively larger font sizes.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
From the command line:
|
|
8
|
+
|
|
9
|
+
gem install fittext
|
|
10
|
+
|
|
11
|
+
(depending on your ruby setup you may need to run `sudo gem install fittext`)
|
|
12
|
+
|
|
13
|
+
Installing into your project:
|
|
14
|
+
|
|
15
|
+
# Edit config.rb and add:
|
|
16
|
+
require "fittext"
|
|
17
|
+
|
|
18
|
+
# Import the extension into your sass or scss file
|
|
19
|
+
@import "fittext"
|
|
20
|
+
|
|
21
|
+
## Arguments
|
|
22
|
+
|
|
23
|
+
@include fittext($min-media, $max-media, $min-font-size, $max-font-size, $media-increment, $font-increment, $ratio, $round)
|
|
24
|
+
|
|
25
|
+
### `$min-media`
|
|
26
|
+
|
|
27
|
+
The smallest, and first media query generated
|
|
28
|
+
|
|
29
|
+
### `$max-media`
|
|
30
|
+
|
|
31
|
+
Largest, and final media query generated (unless `$max-font-size` is reached first)
|
|
32
|
+
|
|
33
|
+
### `$min-font-size` and `$max-font-size`
|
|
34
|
+
|
|
35
|
+
`$min-font-size` sets font size for the first media query, `$max-font-size` for the max.
|
|
36
|
+
|
|
37
|
+
### `$media-increment`
|
|
38
|
+
|
|
39
|
+
Set increase between media queries. `$media-increment: 150px` would generate:
|
|
40
|
+
|
|
41
|
+
@media screen and (min-width: 300px) { ... }
|
|
42
|
+
@media screen and (min-width: 450px) { ... }
|
|
43
|
+
@media screen and (min-width: 600px) { ... }
|
|
44
|
+
|
|
45
|
+
### `$font-increment`
|
|
46
|
+
|
|
47
|
+
Sets increase amount of font size for each media queries.
|
|
48
|
+
|
|
49
|
+
### `$ratio`
|
|
50
|
+
|
|
51
|
+
An extra value to get font sizes to increase non-linearly. Default `1`.
|
|
52
|
+
|
|
53
|
+
### `$round`
|
|
54
|
+
|
|
55
|
+
Boolean. Rounds font size with `ceil()`. Default `false`.
|
|
56
|
+
|
|
57
|
+
## Usage
|
|
58
|
+
|
|
59
|
+
h1
|
|
60
|
+
font-size: 6em // For browsers that don't support media queries.
|
|
61
|
+
@include fittext($min-media: 200px, $max-media: 1400px, $min-font-size: 5em, $max-font-size: 50em, $media-increment: 100, $font-increment: 1.5, $ratio: 1, $round: false)
|
|
62
|
+
|
|
63
|
+
|
|
64
|
+
|
data/lib/fittext.rb
ADDED
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
@import compass
|
|
2
|
+
|
|
3
|
+
=fittext($min-media: 200px, $max-media: 1400px, $min-font-size: 5em, $max-font-size: 50em, $media-increment: 100, $font-increment: 1.5, $ratio: 1, $round: false)
|
|
4
|
+
$font-size: $min-font-size
|
|
5
|
+
$media: $min-media
|
|
6
|
+
@while ($media <= $max-media) and ($font-size <= $max-font-size)
|
|
7
|
+
@media screen and (min-width: $media)
|
|
8
|
+
font-size: $font-size
|
|
9
|
+
$font-size: if($round, ceil(font-sizer($font-size, $font-increment, $ratio)), font-sizer($font-size, $font-increment, $ratio))
|
|
10
|
+
$media: $media + $media-increment
|
|
11
|
+
|
|
12
|
+
@function font-sizer($fs, $fi, $ra)
|
|
13
|
+
@return ($fs + $fi) * $ra
|
metadata
ADDED
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
--- !ruby/object:Gem::Specification
|
|
2
|
+
name: fittext
|
|
3
|
+
version: !ruby/object:Gem::Version
|
|
4
|
+
version: 0.0.5
|
|
5
|
+
prerelease:
|
|
6
|
+
platform: ruby
|
|
7
|
+
authors:
|
|
8
|
+
- Casey Olson
|
|
9
|
+
autorequire:
|
|
10
|
+
bindir: bin
|
|
11
|
+
cert_chain: []
|
|
12
|
+
date: 2012-11-30 00:00:00.000000000 Z
|
|
13
|
+
dependencies:
|
|
14
|
+
- !ruby/object:Gem::Dependency
|
|
15
|
+
name: compass
|
|
16
|
+
requirement: !ruby/object:Gem::Requirement
|
|
17
|
+
none: false
|
|
18
|
+
requirements:
|
|
19
|
+
- - ! '>='
|
|
20
|
+
- !ruby/object:Gem::Version
|
|
21
|
+
version: 0.10.0.rc3
|
|
22
|
+
type: :runtime
|
|
23
|
+
prerelease: false
|
|
24
|
+
version_requirements: !ruby/object:Gem::Requirement
|
|
25
|
+
none: false
|
|
26
|
+
requirements:
|
|
27
|
+
- - ! '>='
|
|
28
|
+
- !ruby/object:Gem::Version
|
|
29
|
+
version: 0.10.0.rc3
|
|
30
|
+
description: Compass extension for inflating type with media queries.
|
|
31
|
+
email: casey.m.olson@gmail.com
|
|
32
|
+
executables: []
|
|
33
|
+
extensions: []
|
|
34
|
+
extra_rdoc_files: []
|
|
35
|
+
files:
|
|
36
|
+
- README.md
|
|
37
|
+
- lib/fittext.rb
|
|
38
|
+
- stylesheets/_fittext.sass
|
|
39
|
+
homepage: http://www.bookcasey.com/fittext/
|
|
40
|
+
licenses: []
|
|
41
|
+
post_install_message:
|
|
42
|
+
rdoc_options: []
|
|
43
|
+
require_paths:
|
|
44
|
+
- lib
|
|
45
|
+
required_ruby_version: !ruby/object:Gem::Requirement
|
|
46
|
+
none: false
|
|
47
|
+
requirements:
|
|
48
|
+
- - ! '>='
|
|
49
|
+
- !ruby/object:Gem::Version
|
|
50
|
+
version: '0'
|
|
51
|
+
required_rubygems_version: !ruby/object:Gem::Requirement
|
|
52
|
+
none: false
|
|
53
|
+
requirements:
|
|
54
|
+
- - ! '>='
|
|
55
|
+
- !ruby/object:Gem::Version
|
|
56
|
+
version: '0'
|
|
57
|
+
requirements: []
|
|
58
|
+
rubyforge_project:
|
|
59
|
+
rubygems_version: 1.8.24
|
|
60
|
+
signing_key:
|
|
61
|
+
specification_version: 3
|
|
62
|
+
summary: Compass extension for inflating type with media queries.
|
|
63
|
+
test_files: []
|