Skip to content

Commit 3096e62

Browse files
joaocunhajoaocunha
committed
Merge pull request #9 from joaocunha/HouseKeeping
House keeping
2 parents 1e407d6 + 09d6fdd commit 3096e62

File tree

11 files changed

+732
-869
lines changed

11 files changed

+732
-869
lines changed

‎.editorconfig

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
# EditorConfig
2+
# http://editorconfig.org
3+
4+
root = true
5+
6+
[*]
7+
charset = utf-8
8+
end_of_line = lf
9+
indent_size = 2
10+
indent_style = tabs
11+
insert_final_newline = true
12+
trim_trailing_whitespace = true
13+
14+
[*.md]
15+
trim_trailing_whitespace = false

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
11
*.sublime*
2+
.DS_Store

‎README.md

Lines changed: 35 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -13,31 +13,42 @@ vUnit is a vanilla JS microlib (~600 bytes after gzip) that allows you to size e
1313
**Second:** add the script to the `<head>` tag and instantiate `vUnit` passing a `CSSMap` object:
1414
```html
1515
<head>
16-
<script src="vunit.js"></script>
17-
<script>
18-
new vUnit({
19-
CSSMap: {
20-
// The selector (VUnit will create rules ranging from .selector1 to .selector100)
21-
'.vh_height': {
22-
// The CSS property (any CSS property that accepts px as units)
23-
property: 'height',
24-
// What to base the value on (vh, vw, vmin or vmax)
25-
reference: 'vh'
26-
},
27-
// Wanted to have a font-size based on the viewport width? You got it.
28-
'.vw_font-size': {
29-
property: 'font-size',
30-
reference: 'vw'
31-
},
32-
// vmin and vmax can be used as well.
33-
'.vmin_margin-top': {
34-
property: 'margin-top',
35-
reference: 'vmin'
36-
}
37-
}
38-
}).init(); // call the public init() method
39-
</script>
16+
<!-- Add vUnit.js to the head to avoid FOUC -->
17+
<script src="path/to/vunit.js"></script>
18+
19+
<!-- Instantiate vUnit.js passing a CSSMap with properties you want to play with -->
20+
<script>
21+
new vUnit({
22+
CSSMap: {
23+
// The selector (VUnit will create rules ranging from .selector1 to .selector100)
24+
'.vh_height': {
25+
// The CSS property (any CSS property that accepts px as units)
26+
property: 'height',
27+
// What to base the value on (vh, vw, vmin or vmax)
28+
reference: 'vh'
29+
},
30+
// Wanted to have a font-size based on the viewport width? You got it.
31+
'.vw_font-size': {
32+
property: 'font-size',
33+
reference: 'vw'
34+
},
35+
// vmin and vmax can be used as well.
36+
'.vmin_margin-top': {
37+
property: 'margin-top',
38+
reference: 'vmin'
39+
}
40+
},
41+
onResize: function() {
42+
console.log('A screen resize just happened, yo.');
43+
}
44+
}).init(); // call the public init() method
45+
</script>
4046
</head>
47+
<body>
48+
<h1 class="vw_font-size15">This title font-size is 15% of the viewport width.</h1>
49+
<p class="vh_height50">This p's height is 50% of the viewport height.</p>
50+
<p class="vmin_margin-top5">This p has some margin-top<p>
51+
</body>
4152
```
4253

4354
**Third:** Add the generated classes to your HTML elements:

‎bower.json

Lines changed: 25 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,27 @@
11
{
2-
"name": "vunit",
3-
"description": "A vanilla JS alternative to vh/vw and vmin/vmax CSS units.",
4-
"license": "MIT",
5-
"version": "v0.1.0",
6-
"main": "vunit.js",
7-
"author": "João Cunha <[email protected]> (http://twitter.com/joaocunha)",
8-
"homepage": "http://joaocunha.github.io/vunit/",
9-
"keywords": [
10-
"js",
11-
"viewport",
12-
"css",
13-
"vh",
14-
"vw",
15-
"vmin",
16-
"vmax"
17-
],
18-
"ignore": [
19-
"*.md",
20-
"example"
21-
]
2+
"name": "vunit",
3+
"description": "A vanilla JS alternative to vh/vw and vmin/vmax CSS units.",
4+
"license": "MIT",
5+
"main": "src/vunit.js",
6+
"author": "João Cunha <[email protected]> (http://twitter.com/joaocunha)",
7+
"homepage": "http://joaocunha.github.io/vunit/",
8+
"moduleType": "globals",
9+
"keywords": [
10+
"js",
11+
"javascript",
12+
"viewport",
13+
"css",
14+
"vh",
15+
"vw",
16+
"vmin",
17+
"vmax"
18+
],
19+
"ignore": [
20+
"*.md",
21+
"example"
22+
],
23+
"repository": {
24+
"type": "git",
25+
"url": "[email protected]:joaocunha/vunit.git"
26+
}
2227
}

‎dist/vunit-0.2.0.min.js

Lines changed: 12 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)