Skip to content

Commit d353328

Browse files
author
Nathan Ford
committed
First commit
0 parents  commit d353328

25 files changed

+10043
-0
lines changed

‎.DS_Store

6 KB
Binary file not shown.

‎README.md

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
Typo.js
2+
=======
3+
4+
Typo.js adds new type properties to your CSS, giving you the control you need for type on the web. You can write these properties in your CSS and they will work like any other property.
5+
6+
View `demo.html` to see these new properties in action.
7+
8+
## Properties
9+
10+
### Kerning Pairs
11+
Adjust the space between specific glyphs with a clear syntax. Just type in the two glyphs you want to kern, then the amount space you want.
12+
13+
#### Properties
14+
`kerning-pairs` accepts a comma separated list of two glyphs, then the distance you want between them. Accepts positive or negative distances.
15+
```CSS
16+
kerning-pairs: az 0.02em;
17+
```
18+
_Values:_ {Any glyph}{Any glyph} {Any distance}{Any CSS unit}
19+
20+
#### Example CSS
21+
```CSS
22+
h1 {
23+
font-size: 3em;
24+
line-height: 1.2;
25+
kerning-pairs: az 0.02em,
26+
zy 0.01em,
27+
th 0.01em,
28+
ov -0.02em;
29+
}
30+
```
31+
32+
### Rag Adjust
33+
Set rules for where you want your lines to break in a paragraph.
34+
35+
#### Properties
36+
`rag-adjust` accepts a comma separated list of two glyphs, then the distance you want between them. Accepts positive or negative distances.
37+
```CSS
38+
rag-adjust: small-words;
39+
```
40+
_Values:_
41+
* `emphasis` – Text of three or less words in bold or italics does not break across lines.
42+
* `small-words` – Breaks lines before words of three or less characters.
43+
* `prepositions` – Breaks lines before prepositions.
44+
* `dashes` – Breaks lines before hyphens and dashes.
45+
* `all` – Breaks lines before all of the above.
46+
47+
48+
#### Example CSS
49+
```CSS
50+
p, li, h3, dd {
51+
max-width: 35em;
52+
rag-adjust: small-words;
53+
}
54+
```
55+
56+
### Widow Adjust
57+
Set rules for how you want to adjust styles to eliminate widows – or any grouping of less than 14 characters on the last line of a paragraph – in your text.
58+
59+
#### Properties
60+
`widow-adjust` accepts the style property you want to use to fix your paragraph.
61+
```CSS
62+
rag-adjust: padding-right;
63+
```
64+
_Values:_
65+
* `padding-right` – Increases `padding-right` until the widow is fixed. (Using `box-sizing: border-box;`)
66+
* `padding-left` – Increases `padding-left` until the widow is fixed. (Using `box-sizing: border-box;`)
67+
* `word-spacing` – Removes `word-spacing` until the widow is fixed.
68+
* `nbsp` – Adds a ` ` character between the last few words of the paragraph.
69+
70+
71+
#### Example CSS
72+
```CSS
73+
p, li, h3, dd {
74+
max-width: 35em;
75+
widow-adjust: padding-right;
76+
}
77+
```
78+
79+
### Min/max font-size
80+
Set a minimum and maximum font-size for text when using a viewport unit for font-size.
81+
82+
#### Properties
83+
`min-font-size` and `max-font-size` accepts any `font-size` value and CSS unit. Does not accept viewport units.
84+
```CSS
85+
min-font-size: 20px;
86+
```
87+
_Values:_ {Any value}{Any css unit}
88+
89+
#### Example CSS
90+
```CSS
91+
h1 {
92+
font-size: 3em;
93+
font-size: 4vw;
94+
max-font-size: 50px;
95+
min-font-size: 30px;
96+
}
97+
```
98+
99+
## Issues
100+
101+
Typo.js only works within `style` tags on a page. For now. You can try using your external stylesheets by changing an option in the `typo.js` file. Change:
102+
103+
```JS
104+
stylefill.options({
105+
106+
externalCSS : false
107+
108+
});
109+
```
110+
111+
To:
112+
```JS
113+
stylefill.options({
114+
115+
externalCSS : true
116+
117+
});
118+
```
119+
120+
_Note:_ This will cause the browser to download your external CSS files twice. Once, as per usual, and again to read the `typo.js` property values.

‎css/animations.css

Lines changed: 144 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,144 @@
1+
/*
2+
3+
Gridset CSS
4+
5+
Developed by Mark Boulton Design
6+
Web site: http://markboultondesign.com
7+
Twitter: http://twitter.com/markboultondsg
8+
Author: Nathan Ford
9+
10+
General transitions & animations */
11+
12+
#appheader a:hover, a, .lock, .other, .gridpreviewwidth p {
13+
-webkit-transition: all 0.1s ease-out;
14+
-moz-transition: all 0.1s ease-out;
15+
-o-transition: all 0.1s ease-out;
16+
-ms-transition: all 0.1s ease-out;
17+
transition: all 0.1s ease-out;
18+
}
19+
20+
.gridmeta, .colbar {
21+
-webkit-transition: -moz-transform 1s ease-in-out;
22+
-moz-transition: transform 1s ease-in-out;
23+
-o-transition: transform 1s ease-in-out;
24+
-ms-transition: transform 1s ease-in-out;
25+
transition: -moz-transform 1s ease-in-out;
26+
}
27+
28+
.preview > div, .nestedgroup {
29+
-webkit-transition: background-color 0.3s ease-out;
30+
-moz-transition: background-color 0.3s ease-out;
31+
-o-transition: background-color 0.3s ease-out;
32+
-ms-transition: background-color 0.3s ease-out;
33+
transition: background-color 0.3s ease-out;
34+
}
35+
36+
@-moz-keyframes alerting {
37+
0%, 70% {
38+
top: -10px;
39+
opacity: 0;
40+
}
41+
100% {
42+
top: 0;
43+
opacity: 1;
44+
}
45+
}
46+
@-webkit-keyframes alerting {
47+
0%, 70% {
48+
top: -10px;
49+
opacity: 0;
50+
}
51+
100% {
52+
top: 0;
53+
opacity: 1;
54+
}
55+
}
56+
57+
.alert strong, .coltoolbar > div {
58+
position: relative;
59+
-moz-animation-name: alerting;
60+
-moz-animation-duration: 0.8s;
61+
-moz-animation-iteration-count: 1;
62+
-moz-animation-timing-function: ease-out;
63+
-webkit-animation-name: alerting;
64+
-webkit-animation-duration: 0.8s;
65+
-webkit-animation-iteration-count: 1;
66+
-webkit-animation-timing-function: ease-out;
67+
}
68+
69+
@-moz-keyframes toolbarup {
70+
0% {
71+
top: 0;
72+
}
73+
100% {
74+
top: -100%;
75+
}
76+
}
77+
78+
@-webkit-keyframes toolbarup {
79+
0% {
80+
top: 0;
81+
}
82+
100% {
83+
top: -100%;
84+
}
85+
}
86+
87+
@-moz-keyframes toolbardown {
88+
0% {
89+
top: -100%;
90+
}
91+
100% {
92+
top: 0;
93+
}
94+
}
95+
96+
@-webkit-keyframes toolbardown {
97+
0% {
98+
top: -100%;
99+
}
100+
100% {
101+
top: 0;
102+
}
103+
}
104+
105+
.coltoolbar > div, .gridtoolbar > div {
106+
-moz-animation-name: toolbarup;
107+
-moz-animation-duration: 0.2s;
108+
-moz-animation-timing-function: ease-in;
109+
-webkit-animation-name: toolbarup;
110+
-webkit-animation-duration: 0.2s;
111+
-webkit-animation-timing-function: ease-in;
112+
}
113+
114+
.gridtoolbar > div {
115+
-moz-animation-name: toolbardown;
116+
-webkit-animation-name: toolbardown;
117+
}
118+
119+
@-moz-keyframes updating {
120+
0%, 30% {
121+
background-color: rgba(255,236,0, 0.2);
122+
}
123+
100% {
124+
background-color: rgba(255,255,255,1);
125+
}
126+
}
127+
128+
@-webkit-keyframes updating {
129+
0%, 30% {
130+
background-color: rgba(255,236,0, 0.2);
131+
}
132+
100% {
133+
background-color: rgba(255,255,255,1);
134+
}
135+
}
136+
137+
.update {
138+
-moz-animation-name: updating;
139+
-moz-animation-duration: 0.7s;
140+
-moz-animation-timing-function: ease-out;
141+
-webkit-animation-name: updating;
142+
-webkit-animation-duration: 0.7s;
143+
-webkit-animation-timing-function: ease-out;
144+
}

‎css/intercom.css

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
#Intercom {
2+
display: block;
3+
text-decoration: none;
4+
position: fixed;
5+
padding: 0.5em;
6+
bottom: 0;
7+
right: 30px;
8+
color: #fff;
9+
background: #333;
10+
z-index: 10000;
11+
}

‎css/print.css

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
/*
2+
3+
Gridset Print CSS
4+
5+
Developed by Mark Boulton Design
6+
Web site: http://markboultondesign.com
7+
Twitter: http://twitter.com/markboultondsg
8+
Author: Nathan Ford
9+
10+
Print styles */
11+
12+
body {
13+
background: #fff !important;
14+
}
15+
16+
* {
17+
color: #000 !important;
18+
-moz-box-shadow: none !important;
19+
-webkit-box-shadow: none !important;
20+
box-shadow: none !important;
21+
}
22+
23+
#logo {
24+
text-align: left;
25+
margin: 0 auto;
26+
position: relative;
27+
padding: 10px 0 20px;
28+
border-bottom: 1px solid #ccc !important;
29+
font-size: 18px;
30+
font-weight: 400;
31+
}
32+
33+
#logo em {
34+
float: right;
35+
}
36+
37+
.cheatgrid, #logo {
38+
max-width: 900px !important;
39+
}
40+
41+
.cheatgrid {
42+
border: none !important;
43+
margin-top: 10px !important;
44+
margin-top: 1rem !important;
45+
}
46+
47+
.gridoverlay, .gridoverlay * {
48+
border-color: #ccc !important;
49+
color: #ccc !important;
50+
}
51+
52+
.wrapper {
53+
overflow: hidden;
54+
}
55+
56+
.cheatwrap {
57+
border-bottom: 1px solid #ccc;
58+
}
59+
60+
.row {
61+
page-break-inside: avoid !important;
62+
}
63+
64+
.row, .nestedgroup {
65+
background: none !important;
66+
}
67+
68+
.row {
69+
border-top: none;
70+
border-bottom: none;
71+
margin-bottom: 0;
72+
}
73+
74+
.row:last-child {
75+
margin-bottom: 0;
76+
}
77+
78+
.nestedelements .row:last-child {
79+
border-bottom: 1px solid #ccc;
80+
}
81+
82+
.nestedgroup .cheatgutter {
83+
margin-top: -5px;
84+
background: #fff;
85+
}
86+
87+
.nestedgroup.open .nestedelements {
88+
border-bottom: 15px solid #fff !important;
89+
}
90+
91+
.cheatgutter + .row {
92+
border-top: 1px solid #ccc !important;
93+
}
94+
95+
.box, pre {
96+
background: #fff !important;
97+
border-color: #000 !important;
98+
}
99+
100+
.box {
101+
border-top: 1px solid #000 !important;
102+
border-bottom: 1px solid #000 !important;
103+
margin-bottom: 0 !important;
104+
margin-top: -1px !important;
105+
page-break-inside: avoid !important;
106+
}
107+
108+
.box pre {
109+
padding: 4px !important;
110+
page-break-inside: avoid !important;
111+
}
112+
113+
.nestactions {
114+
display: none !important;
115+
}

0 commit comments

Comments
 (0)