Compare commits
541 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
bfdc2c5ccd | ||
|
|
40080b5689 | ||
|
|
9f13695d21 | ||
|
|
7bff68fa57 | ||
|
|
d22220590b | ||
|
|
f91a9253d3 | ||
|
|
a0aa8370a6 | ||
|
|
826f5f05d8 | ||
|
|
14d3756b42 | ||
|
|
0be93d5ffc | ||
|
|
1dcd1e524e | ||
|
|
6f0eaec0ba | ||
|
|
bad87b9f54 | ||
|
|
83ee10314c | ||
|
|
4d593d15cb | ||
|
|
a9a271c999 | ||
|
|
026c50c1f3 | ||
|
|
0ab739989e | ||
|
|
67b8cd63f2 | ||
|
|
a0fd4b4b6b | ||
|
|
0cb11dc50a | ||
|
|
ac39d02090 | ||
|
|
a05250d121 | ||
|
|
89b15a6506 | ||
|
|
57b3983500 | ||
|
|
9bd483882f | ||
|
|
14d990e270 | ||
|
|
0dd2a66702 | ||
|
|
bc2710e047 | ||
|
|
efa3db1cd0 | ||
|
|
fb6cb8d198 | ||
|
|
487c64fa78 | ||
|
|
e7fe855a44 | ||
|
|
957f9f3f66 | ||
|
|
76bafcf5c5 | ||
|
|
8b35e707b7 | ||
|
|
591b2f6194 | ||
|
|
5505ef0133 | ||
|
|
907918637c | ||
|
|
2ad7077517 | ||
|
|
9888a8f5b4 | ||
|
|
e0114f377e | ||
|
|
220937b1ac | ||
|
|
f86189a254 | ||
|
|
024b8a05ee | ||
|
|
6f21d78a21 | ||
|
|
29fd4124f4 | ||
|
|
9d6176a26c | ||
|
|
abc64efcb7 | ||
|
|
f888d9611b | ||
|
|
4ded8b5ce0 | ||
|
|
2ea87deb35 | ||
|
|
41b63975e5 | ||
|
|
f14024b9b3 | ||
|
|
6d22bdb02b | ||
|
|
5425efa538 | ||
|
|
3937c41d91 | ||
|
|
754268a347 | ||
|
|
fea7f22aef | ||
|
|
76baba6a16 | ||
|
|
f1ed892389 | ||
|
|
dff0e5ea33 | ||
|
|
2f9d2a41fc | ||
|
|
a2356c1cbf | ||
|
|
5b894fbc5e | ||
|
|
4ebe939594 | ||
|
|
b0ce6c4b77 | ||
|
|
98c8f99b38 | ||
|
|
9c98cfaffb | ||
|
|
b0aad4fd9c | ||
|
|
7eb61d80bd | ||
|
|
5400e04fb2 | ||
|
|
88b3eefff6 | ||
|
|
71b062d38a | ||
|
|
274cd56646 | ||
|
|
a4200355e9 | ||
|
|
58a2ba81d2 | ||
|
|
a90685e01d | ||
|
|
59d0ce0e87 | ||
|
|
b840bebeaf | ||
|
|
a7fd7c0e96 | ||
|
|
908c6b6344 | ||
|
|
a1f549f9f6 | ||
|
|
c7081f3700 | ||
|
|
3bc2193384 | ||
|
|
47004043d4 | ||
|
|
76aa339a23 | ||
|
|
e5e11481d2 | ||
|
|
b5d6e7b161 | ||
|
|
4c52f6e669 | ||
|
|
a2bf312950 | ||
|
|
55d0985e6f | ||
|
|
296d301e27 | ||
|
|
0ffd0cb79c | ||
|
|
67ffc91d03 | ||
|
|
5f4d2d8e08 | ||
|
|
00419696c2 | ||
|
|
b22de5dcb2 | ||
|
|
2dfb90309f | ||
|
|
1dc011fe7e | ||
|
|
72823a97b6 | ||
|
|
31047ecc30 | ||
|
|
7f456c96f2 | ||
|
|
10fb130e76 | ||
|
|
d3be5f3730 | ||
|
|
7bad82c97b | ||
|
|
03ddc0d696 | ||
|
|
959ee8229d | ||
|
|
daece9bdc0 | ||
|
|
800a806f2b | ||
|
|
952f0352c3 | ||
|
|
8c91bb4a28 | ||
|
|
77c09009f6 | ||
|
|
4b089a3a76 | ||
|
|
340b012a1f | ||
|
|
438b8a7eef | ||
|
|
181c98ca75 | ||
|
|
97b04f4f4e | ||
|
|
7ac0465aa1 | ||
|
|
e8b9a8be39 | ||
|
|
3b215df3ec | ||
|
|
7df016247c | ||
|
|
fa840f07ef | ||
|
|
0c8b71eb88 | ||
|
|
1cf48987f5 | ||
|
|
a6a9094eba | ||
|
|
9fb12e846a | ||
|
|
50e4ffa3cf | ||
|
|
8dd98e8fc1 | ||
|
|
fc05bc82ab | ||
|
|
85d79ed6cc | ||
|
|
fee2238978 | ||
|
|
a91fea4cd6 | ||
|
|
bf141af507 | ||
|
|
c0665f0989 | ||
|
|
dd6ec22ea5 | ||
|
|
2de99b2ba3 | ||
|
|
d35a8e9020 | ||
|
|
7463646b48 | ||
|
|
0d9f00826a | ||
|
|
6ee34e1ced | ||
|
|
907838737b | ||
|
|
1c93f0a056 | ||
|
|
0c32a937e0 | ||
|
|
735b9ad706 | ||
|
|
f4d731e23c | ||
|
|
9581cf3a81 | ||
|
|
c7057bef0c | ||
|
|
4f6a87f985 | ||
|
|
29af44ef9c | ||
|
|
eee759bfe1 | ||
|
|
57342272e6 | ||
|
|
2431333b63 | ||
|
|
422537b96c | ||
|
|
0a40054b7e | ||
|
|
b07c91dad6 | ||
|
|
57639ee786 | ||
|
|
356e141ec9 | ||
|
|
c8165a6da0 | ||
|
|
c0de8e873a | ||
|
|
2a6bb8d219 | ||
|
|
b4bbee5468 | ||
|
|
6443483dd2 | ||
|
|
192d7fed39 | ||
|
|
e7465be638 | ||
|
|
3575a69db6 | ||
|
|
3be7fe5c01 | ||
|
|
78c84ce701 | ||
|
|
ad26878202 | ||
|
|
60a8ff0336 | ||
|
|
f61c062ff8 | ||
|
|
4af329eedb | ||
|
|
0d5c32fb8b | ||
|
|
db639fd0ec | ||
|
|
001a6c909a | ||
|
|
2fcde1ef33 | ||
|
|
330b60c212 | ||
|
|
c97c23c06e | ||
|
|
0dab796231 | ||
|
|
45798ee7f8 | ||
|
|
598ac20128 | ||
|
|
10f58216b0 | ||
|
|
be023b8e2d | ||
|
|
7275f79fbc | ||
|
|
91dc924163 | ||
|
|
078a37ae38 | ||
|
|
1318b71cdf | ||
|
|
45a3adcb2e | ||
|
|
1d0d78509d | ||
|
|
f6efcf0783 | ||
|
|
98fc61b9d1 | ||
|
|
8d901e6fb8 | ||
|
|
f1503cb6c3 | ||
|
|
eba30f07ac | ||
|
|
d2740f3c6b | ||
|
|
3c2aac8001 | ||
|
|
61015dbbea | ||
|
|
918c88e372 | ||
|
|
345925f043 | ||
|
|
d7976c3f75 | ||
|
|
ad27d2e6b2 | ||
|
|
6f50688c1c | ||
|
|
697fa65431 | ||
|
|
695e8d9f82 | ||
|
|
c3d52666d0 | ||
|
|
f2d9182155 | ||
|
|
f3a94f5f6e | ||
|
|
768a15235f | ||
|
|
c9ac4325bb | ||
|
|
9d127a2c82 | ||
|
|
2b69bde024 | ||
|
|
80ee26d734 | ||
|
|
4b07bb3f8b | ||
|
|
c2abc3f6e0 | ||
|
|
3d4c3da5d9 | ||
|
|
f3ecc0c67f | ||
|
|
1cac1c9ecc | ||
|
|
f8ee8fec3f | ||
|
|
d5e0625312 | ||
|
|
c9a5fb4d70 | ||
|
|
7aa92ea5f6 | ||
|
|
d3e9cbfcec | ||
|
|
66d5b120d6 | ||
|
|
32c0b2b160 | ||
|
|
1c4fcf3214 | ||
|
|
712568f229 | ||
|
|
215bebe5e5 | ||
|
|
f134545b95 | ||
|
|
3e3b770b0d | ||
|
|
a8fabc504b | ||
|
|
ed6ba6d8ba | ||
|
|
c35f8d3c2e | ||
|
|
6cd8083b15 | ||
|
|
75d6ea62a0 | ||
|
|
59911a536d | ||
|
|
e830ce22b5 | ||
|
|
d352b37ac1 | ||
|
|
77684b1638 | ||
|
|
029093fdc4 | ||
|
|
a3baca2367 | ||
|
|
93c3ec4480 | ||
|
|
a44c533d55 | ||
|
|
176aa951d5 | ||
|
|
2a09bdf3e3 | ||
|
|
9c03754490 | ||
|
|
927df9df01 | ||
|
|
77d43a3d5d | ||
|
|
fccfbbbbdc | ||
|
|
268611e33a | ||
|
|
287f12229e | ||
|
|
954eef1b1e | ||
|
|
641586aaca | ||
|
|
3928548dc4 | ||
|
|
4b779d3ed9 | ||
|
|
c73ae71db4 | ||
|
|
2bf27eb108 | ||
|
|
9318c6321a | ||
|
|
da7bf0d530 | ||
|
|
c3a72ff882 | ||
|
|
8ef199adf6 | ||
|
|
ef48601262 | ||
|
|
c3d967ab25 | ||
|
|
3c3c5e6460 | ||
|
|
a99d8563dd | ||
|
|
973b8453de | ||
|
|
4fca586fae | ||
|
|
8daaa56023 | ||
|
|
5027eeaab2 | ||
|
|
ff27f8c563 | ||
|
|
8935453014 | ||
|
|
1c5be4d307 | ||
|
|
0443e50892 | ||
|
|
0efb9fb4df | ||
|
|
296b0bbf25 | ||
|
|
3220cf1d63 | ||
|
|
d2b86f78a4 | ||
|
|
5e0b0d642b | ||
|
|
8c4b71e6c6 | ||
|
|
a82c61fb3e | ||
|
|
261f8dd398 | ||
|
|
d916a72025 | ||
|
|
c0ea65101a | ||
|
|
11262ec742 | ||
|
|
2d443d853f | ||
|
|
f067d5eec5 | ||
|
|
2e8a977d2c | ||
|
|
e12fc689a5 | ||
|
|
41b9f1a36a | ||
|
|
dcc5958a39 | ||
|
|
d01c26fd13 | ||
|
|
861c359e40 | ||
|
|
e67e9cc7c1 | ||
|
|
06b4df40e2 | ||
|
|
ee0de7541f | ||
|
|
7997c1b9a1 | ||
|
|
dea7690774 | ||
|
|
f639653d3d | ||
|
|
106bb43c37 | ||
|
|
4d7ba31ada | ||
|
|
80530d6b46 | ||
|
|
f73bb1f614 | ||
|
|
ab0a9ea391 | ||
|
|
cacfa08050 | ||
|
|
e70ee31d2b | ||
|
|
185b730edd | ||
|
|
3c216951d4 | ||
|
|
f5d58728e1 | ||
|
|
4e5f438e1e | ||
|
|
a20a3c76d5 | ||
|
|
76d3021d19 | ||
|
|
0a04171137 | ||
|
|
3da500d5e5 | ||
|
|
1c4df2aa07 | ||
|
|
a557ea0513 | ||
|
|
57be193031 | ||
|
|
34c7fbde74 | ||
|
|
f4a2cbfcad | ||
|
|
df2306766e | ||
|
|
15b5cb1b5c | ||
|
|
d592953e7a | ||
|
|
49e4569d02 | ||
|
|
24420747fd | ||
|
|
ec49630374 | ||
|
|
9fab0f9990 | ||
|
|
73ea9a5e68 | ||
|
|
fbffd2322d | ||
|
|
ca1ced9654 | ||
|
|
f1a8e914be | ||
|
|
94c3540ce6 | ||
|
|
96d7c99762 | ||
|
|
e039cf4275 | ||
|
|
87274cb181 | ||
|
|
3f91469e7f | ||
|
|
5e090e0db5 | ||
|
|
dc752d7952 | ||
|
|
8565264a4d | ||
|
|
782aefab7e | ||
|
|
6d10fc8cce | ||
|
|
f07a80011b | ||
|
|
18d3a9dd9e | ||
|
|
b96191e590 | ||
|
|
afaed48700 | ||
|
|
b7208f1e01 | ||
|
|
13f17a737a | ||
|
|
fdbff109c9 | ||
|
|
72cdf1e96c | ||
|
|
f033325bac | ||
|
|
d144341003 | ||
|
|
71ca9fb7a0 | ||
|
|
23f5e084e5 | ||
|
|
da9528e568 | ||
|
|
ab6b2fc4aa | ||
|
|
ab05d000f8 | ||
|
|
8a68443746 | ||
|
|
cd981e52f7 | ||
|
|
2cf1ef7cea | ||
|
|
5bc2a985c7 | ||
|
|
21c614849a | ||
|
|
01624d71f5 | ||
|
|
be4484add0 | ||
|
|
ce7c3c5c15 | ||
|
|
ff37dba6bf | ||
|
|
8fc26501f4 | ||
|
|
9ec546569b | ||
|
|
02713eedd2 | ||
|
|
8f743702f6 | ||
|
|
48d49e96d6 | ||
|
|
deec362213 | ||
|
|
713abf57a9 | ||
|
|
f27c2b7372 | ||
|
|
52f17087f9 | ||
|
|
7a22a33d40 | ||
|
|
0adda79fee | ||
|
|
d94e506189 | ||
|
|
fa7527fb26 | ||
|
|
2a8e5828af | ||
|
|
6cfbc95cd6 | ||
|
|
a7a4d0685c | ||
|
|
c8b0431c7d | ||
|
|
1b0f042e06 | ||
|
|
a10460934d | ||
|
|
b83ce3b1b4 | ||
|
|
c01aa0474d | ||
|
|
2f966781d8 | ||
|
|
b4587434f8 | ||
|
|
522fa645c3 | ||
|
|
19c03c4bf0 | ||
|
|
7dae637800 | ||
|
|
922df45999 | ||
|
|
aa9bcbeb5b | ||
|
|
c3358e2399 | ||
|
|
3a7de0b41a | ||
|
|
964c929ef0 | ||
|
|
e9a471bc3f | ||
|
|
29315016dc | ||
|
|
90f99e1587 | ||
|
|
fb9166461b | ||
|
|
21702c4198 | ||
|
|
7bc8241f51 | ||
|
|
a2b3d06e8b | ||
|
|
081f8aa0de | ||
|
|
1987e5a1ee | ||
|
|
46446727b2 | ||
|
|
3d5d852697 | ||
|
|
052ecc4b29 | ||
|
|
dac15682b3 | ||
|
|
8c08445487 | ||
|
|
d141f70910 | ||
|
|
e9f6a9890c | ||
|
|
e85301270f | ||
|
|
0615b940c3 | ||
|
|
551dd5c5d6 | ||
|
|
25c1073d13 | ||
|
|
7b04f32d5a | ||
|
|
750bf0e093 | ||
|
|
dc00673b7c | ||
|
|
5bed678da0 | ||
|
|
578f377849 | ||
|
|
e1b163041e | ||
|
|
4ac3ffef5c | ||
|
|
6be0119cd2 | ||
|
|
e6c64a238d | ||
|
|
b378ce239d | ||
|
|
2c079ae144 | ||
|
|
2dd1153cfc | ||
|
|
bfeac11c9a | ||
|
|
bb7b3577b1 | ||
|
|
d20a342c95 | ||
|
|
0dcd9d120e | ||
|
|
cb0bb16eb7 | ||
|
|
dd420ef187 | ||
|
|
1c6485adb9 | ||
|
|
d4467ad7f2 | ||
|
|
5735ee396d | ||
|
|
0b60046431 | ||
|
|
07ee69683c | ||
|
|
19c8065b6a | ||
|
|
6f5ed6f921 | ||
|
|
6415ccd9b0 | ||
|
|
39a1801a88 | ||
|
|
dfca687243 | ||
|
|
42f16dfaa1 | ||
|
|
a36b296b89 | ||
|
|
68197bc42d | ||
|
|
adecc5da03 | ||
|
|
fac03ef28f | ||
|
|
38c7a90cbf | ||
|
|
7b0ba6b083 | ||
|
|
28f922ff3c | ||
|
|
445037ccf4 | ||
|
|
920e52a5d4 | ||
|
|
456211dc54 | ||
|
|
e52927a03e | ||
|
|
596d9a9dcc | ||
|
|
50b46d6fa2 | ||
|
|
1d96e32876 | ||
|
|
8e90c33cef | ||
|
|
66b137083f | ||
|
|
02bdaea124 | ||
|
|
5ed4dadf5c | ||
|
|
1c30c5a660 | ||
|
|
d590b0efe9 | ||
|
|
f23340ed9b | ||
|
|
3ce6e98cde | ||
|
|
703d0b8651 | ||
|
|
1e3be1842b | ||
|
|
cc265d4511 | ||
|
|
889e377b2d | ||
|
|
d3969484ff | ||
|
|
5370479476 | ||
|
|
83f4f28186 | ||
|
|
288f9922c0 | ||
|
|
2a60c6b3d1 | ||
|
|
49089be067 | ||
|
|
ca30a53977 | ||
|
|
7aa306c0b3 | ||
|
|
0c52750ea6 | ||
|
|
cbde32f684 | ||
|
|
4505fa12b1 | ||
|
|
5a2585f42c | ||
|
|
d2d5fd1eac | ||
|
|
d242bd27cd | ||
|
|
7a2f9dcf8b | ||
|
|
6bfd7948c6 | ||
|
|
3942ee1775 | ||
|
|
e53c1df9cf | ||
|
|
d055e4e6c1 | ||
|
|
4934c5defd | ||
|
|
b2b24c351e | ||
|
|
c20eb1a6fa | ||
|
|
09dc03ae17 | ||
|
|
6e1417b857 | ||
|
|
509648b8a5 | ||
|
|
e1e53cf83c | ||
|
|
1ab8d64169 | ||
|
|
e49353b05f | ||
|
|
a95f300ac8 | ||
|
|
1d320b59a3 | ||
|
|
eb2dc2fe90 | ||
|
|
1b581aff02 | ||
|
|
c264d91c6c | ||
|
|
02bf76cd16 | ||
|
|
3606c8345f | ||
|
|
cfae00adab | ||
|
|
5469e272a4 | ||
|
|
21e77285e2 | ||
|
|
b0db5d5eb6 | ||
|
|
060ac246fd | ||
|
|
339b6c96ad | ||
|
|
086280e6fd | ||
|
|
ce64453057 | ||
|
|
00ee25c1be | ||
|
|
6c1c1db5a2 | ||
|
|
263af0b468 | ||
|
|
4026f03249 | ||
|
|
258cbef93c | ||
|
|
9cb7e46f32 | ||
|
|
863de294e8 | ||
|
|
7912513084 | ||
|
|
1c55518def | ||
|
|
9cf989542c | ||
|
|
9ced71e8ef | ||
|
|
e2fff6fe07 | ||
|
|
923b0f3adc | ||
|
|
767dc09916 | ||
|
|
efe88dfbf2 | ||
|
|
1ec581885a | ||
|
|
aa0396eae7 | ||
|
|
758eab9f35 | ||
|
|
c448cc03e7 | ||
|
|
db1574059d | ||
|
|
ca4bf4793d | ||
|
|
1aad336ef7 | ||
|
|
1929462a39 | ||
|
|
5bbd604930 | ||
|
|
b0ddd13910 | ||
|
|
fe6c2f56ec | ||
|
|
f8f347e392 | ||
|
|
080026e4f4 | ||
|
|
9434b5bc79 | ||
|
|
a2240384c7 |
22
.editorconfig
Normal file
@@ -0,0 +1,22 @@
|
||||
# For more information about the properties used in
|
||||
# this file, please see the EditorConfig documentation:
|
||||
# http://editorconfig.org/
|
||||
|
||||
root = true
|
||||
|
||||
[*]
|
||||
charset = utf-8
|
||||
end_of_line = lf
|
||||
indent_size = 4
|
||||
indent_style = space
|
||||
insert_final_newline = true
|
||||
trim_trailing_whitespace = true
|
||||
|
||||
[*.md]
|
||||
trim_trailing_whitespace = false
|
||||
|
||||
[{.travis.yml,package.json}]
|
||||
# The indent size used in the `package.json` file cannot be changed
|
||||
# https://github.com/npm/npm/pull/3180#issuecomment-16336516
|
||||
indent_size = 2
|
||||
indent_style = space
|
||||
29
.gitattributes
vendored
@@ -1 +1,28 @@
|
||||
* text=auto
|
||||
# Automatically normalize line endings for all text-based files
|
||||
# https://git-scm.com/docs/gitattributes#_end_of_line_conversion
|
||||
|
||||
* text=auto
|
||||
|
||||
# - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
|
||||
|
||||
# For the following file types, normalize line endings to LF on
|
||||
# checkin and prevent conversion to CRLF when they are checked out
|
||||
# (this is required in order to prevent newline related issues like,
|
||||
# for example, after the build script is run)
|
||||
|
||||
.* text eol=lf
|
||||
*.css text eol=lf
|
||||
*.html text eol=lf
|
||||
*.js text eol=lf
|
||||
*.json text eol=lf
|
||||
*.md text eol=lf
|
||||
*.sh text eol=lf
|
||||
*.txt text eol=lf
|
||||
*.xml text eol=lf
|
||||
|
||||
# - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
|
||||
|
||||
# Exclude the `.htaccess` file from GitHub's language statistics
|
||||
# https://github.com/github/linguist#using-gitattributes
|
||||
|
||||
dist/.htaccess linguist-vendored
|
||||
|
||||
154
.github/CONTRIBUTING.md
vendored
Normal file
@@ -0,0 +1,154 @@
|
||||
# Contributing to HTML5 Boilerplate
|
||||
|
||||
♥ [HTML5 Boilerplate](https://html5boilerplate.com/) and want to get involved?
|
||||
Thanks! We're actively looking for folks interested in helping out and there
|
||||
are plenty of ways you can help!
|
||||
|
||||
Please take a moment to review this document in order to make the contribution
|
||||
process easy and effective for everyone involved.
|
||||
|
||||
Following these guidelines helps to communicate that you respect the time of
|
||||
the developers managing and developing this open source project. In return,
|
||||
they should reciprocate that respect in addressing your issue or assessing
|
||||
patches and features.
|
||||
|
||||
|
||||
## Using the issue tracker
|
||||
|
||||
The [issue tracker](https://github.com/h5bp/html5-boilerplate/issues) is
|
||||
the preferred channel for [bug reports](#bugs), [features requests](#features)
|
||||
and [submitting pull requests](#pull-requests), but please respect the following
|
||||
restrictions:
|
||||
|
||||
* Please **do not** use the issue tracker for personal support requests (use
|
||||
[Stack Overflow](https://stackoverflow.com/questions/tagged/html5boilerplate)).
|
||||
|
||||
* Please **do not** derail or troll issues. Keep the discussion on topic and
|
||||
respect the opinions of others.
|
||||
|
||||
* Please **do not** open issues or pull requests regarding the code in
|
||||
[`.htaccess`](https://github.com/h5bp/server-configs-apache),
|
||||
[`jQuery`](https://github.com/jquery/jquery/),
|
||||
[`Modernizr`](https://github.com/Modernizr/Modernizr) or
|
||||
[`Normalize.css`](https://github.com/necolas/normalize.css) (open them in
|
||||
their respective repositories).
|
||||
|
||||
|
||||
<a name="bugs"></a>
|
||||
## Bug reports
|
||||
|
||||
A bug is a _demonstrable problem_ that is caused by the code in the repository.
|
||||
Good bug reports are extremely helpful - thank you!
|
||||
|
||||
Guidelines for bug reports:
|
||||
|
||||
1. **Use the GitHub issue search** — check if the issue has already been
|
||||
reported.
|
||||
|
||||
2. **Check if the issue has been fixed** — try to reproduce it using the
|
||||
latest `master` or development branch in the repository.
|
||||
|
||||
3. **Isolate the problem** — ideally create a [reduced test
|
||||
case](https://css-tricks.com/reduced-test-cases/) and a live example.
|
||||
|
||||
A good bug report shouldn't leave others needing to chase you up for more
|
||||
information. Please try to be as detailed as possible in your report. What is
|
||||
your environment? What steps will reproduce the issue? What browser(s) and OS
|
||||
experience the problem? What would you expect to be the outcome? All these
|
||||
details will help people to fix any potential bugs.
|
||||
|
||||
Example:
|
||||
|
||||
> Short and descriptive example bug report title
|
||||
>
|
||||
> A summary of the issue and the browser/OS environment in which it occurs. If
|
||||
> suitable, include the steps required to reproduce the bug.
|
||||
>
|
||||
> 1. This is the first step
|
||||
> 2. This is the second step
|
||||
> 3. Further steps, etc.
|
||||
>
|
||||
> `<url>` - a link to the reduced test case
|
||||
>
|
||||
> Any other information you want to share that is relevant to the issue being
|
||||
> reported. This might include the lines of code that you have identified as
|
||||
> causing the bug, and potential solutions (and your opinions on their
|
||||
> merits).
|
||||
|
||||
|
||||
<a name="features"></a>
|
||||
## Feature requests
|
||||
|
||||
Feature requests are welcome. But take a moment to find out whether your idea
|
||||
fits with the scope and aims of the project. It's up to *you* to make a strong
|
||||
case to convince the project's developers of the merits of this feature. Please
|
||||
provide as much detail and context as possible.
|
||||
|
||||
|
||||
<a name="pull-requests"></a>
|
||||
## Pull requests
|
||||
|
||||
Good pull requests - patches, improvements, new features - are a fantastic
|
||||
help. They should remain focused in scope and avoid containing unrelated
|
||||
commits.
|
||||
|
||||
**Please ask first** before embarking on any significant pull request (e.g.
|
||||
implementing features, refactoring code, porting to a different language),
|
||||
otherwise you risk spending a lot of time working on something that the
|
||||
project's developers might not want to merge into the project.
|
||||
|
||||
Please adhere to the coding conventions used throughout a project (indentation,
|
||||
accurate comments, etc.) and any other requirements (such as test coverage).
|
||||
|
||||
Adhering to the following process is the best way to get your work
|
||||
included in the project:
|
||||
|
||||
1. [Fork](https://help.github.com/articles/fork-a-repo/) the project, clone your
|
||||
fork, and configure the remotes:
|
||||
|
||||
```bash
|
||||
# Clone your fork of the repo into the current directory
|
||||
git clone https://github.com/<your-username>/html5-boilerplate.git
|
||||
# Navigate to the newly cloned directory
|
||||
cd html5-boilerplate
|
||||
# Assign the original repo to a remote called "upstream"
|
||||
git remote add upstream https://github.com/h5bp/html5-boilerplate.git
|
||||
```
|
||||
|
||||
2. If you cloned a while ago, get the latest changes from upstream:
|
||||
|
||||
```bash
|
||||
git checkout master
|
||||
git pull upstream master
|
||||
```
|
||||
|
||||
3. Create a new topic branch (off the main project development branch) to
|
||||
contain your feature, change, or fix:
|
||||
|
||||
```bash
|
||||
git checkout -b <topic-branch-name>
|
||||
```
|
||||
|
||||
4. Commit your changes in logical chunks. Please adhere to these [git commit
|
||||
message guidelines](http://tbaggery.com/2008/04/19/a-note-about-git-commit-messages.html)
|
||||
or your code is unlikely be merged into the main project. Use Git's
|
||||
[interactive rebase](https://help.github.com/articles/about-git-rebase/)
|
||||
feature to tidy up your commits before making them public.
|
||||
|
||||
5. Locally merge (or rebase) the upstream development branch into your topic branch:
|
||||
|
||||
```bash
|
||||
git pull [--rebase] upstream master
|
||||
```
|
||||
|
||||
6. Push your topic branch up to your fork:
|
||||
|
||||
```bash
|
||||
git push origin <topic-branch-name>
|
||||
```
|
||||
|
||||
7. [Open a Pull Request](https://help.github.com/articles/using-pull-requests/)
|
||||
with a clear title and description.
|
||||
|
||||
**IMPORTANT**: By submitting a patch, you agree to allow the project
|
||||
owners to license your work under the terms of the [MIT License](LICENSE.txt).
|
||||
74
.github/ISSUE_TEMPLATE.md
vendored
Normal file
@@ -0,0 +1,74 @@
|
||||
**I'm submitting a ...**
|
||||
<!-- (check one with "x") -->
|
||||
- [ ] bug report
|
||||
- [ ] feature request
|
||||
- [ ] other (Please do not submit support requests here (below))
|
||||
|
||||
## Notes:
|
||||
|
||||
* Please **do not** use the issue tracker for personal support requests (use
|
||||
[Stack Overflow](https://stackoverflow.com/questions/tagged/html5boilerplate)).
|
||||
|
||||
* Please **do not** derail or troll issues. Keep the discussion on topic and
|
||||
respect the opinions of others.
|
||||
|
||||
* Please **do not** open issues or pull requests regarding the code in
|
||||
[`.htaccess`](https://github.com/h5bp/server-configs-apache),
|
||||
[`jQuery`](https://github.com/jquery/jquery/),
|
||||
[`Modernizr`](https://github.com/Modernizr/Modernizr) or
|
||||
[`Normalize.css`](https://github.com/necolas/normalize.css) (open them in
|
||||
their respective repositories).
|
||||
|
||||
## Bug reports
|
||||
|
||||
A bug is a _demonstrable problem_ that is caused by the code in the repository.
|
||||
Good bug reports are extremely helpful - thank you!
|
||||
|
||||
Guidelines for bug reports:
|
||||
|
||||
1. **Use the GitHub issue search** — check if the issue has already been
|
||||
reported.
|
||||
|
||||
We have a long history of sometimes _very_ detailed discussion of every line of code
|
||||
in the project. We want discussion, so it might still warrant an issue. It
|
||||
just helps to get the (sometimes extensive) context.
|
||||
|
||||
2. **Check if the issue has been fixed** — try to reproduce it using the
|
||||
latest `master` or development branch in the repository.
|
||||
|
||||
3. **Isolate the problem** — ideally create a [reduced test
|
||||
case](https://css-tricks.com/reduced-test-cases/) and a live example.
|
||||
|
||||
A good bug report shouldn't leave others needing to chase you up for more
|
||||
information. Please try to be as detailed as possible in your report. What is
|
||||
your environment? What steps will reproduce the issue? What browser(s) and OS
|
||||
experience the problem? What would you expect to be the outcome? All these
|
||||
details will help people to fix any potential bugs.
|
||||
|
||||
Example:
|
||||
|
||||
> Short and descriptive example bug report title
|
||||
>
|
||||
> A summary of the issue and the browser/OS environment in which it occurs. If
|
||||
> suitable, include the steps required to reproduce the bug.
|
||||
>
|
||||
> 1. This is the first step
|
||||
> 2. This is the second step
|
||||
> 3. Further steps, etc.
|
||||
>
|
||||
> `<url>` - a link to the reduced test case
|
||||
>
|
||||
> Any other information you want to share that is relevant to the issue being
|
||||
> reported. This might include the lines of code that you have identified as
|
||||
> causing the bug, and potential solutions (and your opinions on their
|
||||
> merits).
|
||||
|
||||
|
||||
## Feature requests
|
||||
|
||||
Feature requests are welcome. But take a moment to find out whether your idea
|
||||
fits with the scope and aims of the project. It's up to *you* to make a strong
|
||||
case to convince the project's developers of the merits of this feature. Please
|
||||
provide as much detail and context as possible.
|
||||
|
||||
|
||||
18
.github/PULL_REQUEST_TEMPLATE.md
vendored
Normal file
@@ -0,0 +1,18 @@
|
||||
## Types of changes
|
||||
<!--- What types of changes does your code introduce? Put an `x` in all the boxes that apply: -->
|
||||
- [ ] Bug fix (non-breaking change which fixes an issue)
|
||||
- [ ] New feature (non-breaking change which adds functionality)
|
||||
- [ ] Breaking change (fix or feature that would cause existing functionality to change)
|
||||
|
||||
## Checklist:
|
||||
<!--- Go over all the following points, and put an `x` in all the boxes that apply. -->
|
||||
<!--- If you're unsure about any of these, don't hesitate to ask. We're here to help! -->
|
||||
- [ ] My code follows the code style of this project.
|
||||
- [ ] My change requires a change to the documentation.
|
||||
- [ ] I have updated the documentation accordingly.
|
||||
- [ ] I have read the **CONTRIBUTING** document.
|
||||
- [ ] I have added tests to cover my changes.
|
||||
- [ ] All new and existing tests passed.
|
||||
|
||||
|
||||
|
||||
10
.github/SUPPORT.md
vendored
Normal file
@@ -0,0 +1,10 @@
|
||||
# Support
|
||||
|
||||
For personal support requests with HTML5 Boilerplate please use Stack Overflow
|
||||
([`html5boilerplate`](https://stackoverflow.com/questions/tagged/html5boilerplate) tag).
|
||||
|
||||
Please check the respective repository/website for support regarding the code in
|
||||
[`.htaccess`](https://github.com/h5bp/server-configs-apache),
|
||||
[`jQuery`](https://jquery.org/support/),
|
||||
[`Modernizr`](https://modernizr.com/) or
|
||||
[`Normalize.css`](https://github.com/necolas/normalize.css).
|
||||
45
.gitignore
vendored
@@ -1,43 +1,2 @@
|
||||
# Numerous always-ignore extensions
|
||||
*.diff
|
||||
*.err
|
||||
*.orig
|
||||
*.log
|
||||
*.rej
|
||||
*.swo
|
||||
*.swp
|
||||
*.vi
|
||||
*~
|
||||
*.sass-cache
|
||||
|
||||
# OS or Editor folders
|
||||
.DS_Store
|
||||
Thumbs.db
|
||||
.cache
|
||||
.project
|
||||
.settings
|
||||
.tmproj
|
||||
*.esproj
|
||||
nbproject
|
||||
*.sublime-project
|
||||
*.sublime-workspace
|
||||
|
||||
# Dreamweaver added files
|
||||
_notes
|
||||
dwsync.xml
|
||||
|
||||
# Komodo
|
||||
*.komodoproject
|
||||
.komodotools
|
||||
|
||||
# Folders to ignore
|
||||
.hg
|
||||
.svn
|
||||
.CVS
|
||||
intermediate
|
||||
publish
|
||||
.idea
|
||||
|
||||
# build script local files
|
||||
build/buildinfo.properties
|
||||
build/config/buildinfo.properties
|
||||
archive
|
||||
node_modules
|
||||
|
||||
536
.htaccess
@@ -1,536 +0,0 @@
|
||||
# Apache configuration file
|
||||
# httpd.apache.org/docs/2.2/mod/quickreference.html
|
||||
|
||||
# Note .htaccess files are an overhead, this logic should be in your Apache config if possible
|
||||
# httpd.apache.org/docs/2.2/howto/htaccess.html
|
||||
|
||||
# Techniques in here adapted from all over, including:
|
||||
# Kroc Camen: camendesign.com/.htaccess
|
||||
# perishablepress.com/press/2006/01/10/stupid-htaccess-tricks/
|
||||
# Sample .htaccess file of CMS MODx: modxcms.com
|
||||
|
||||
|
||||
###
|
||||
### If you run a webserver other than Apache, consider:
|
||||
### github.com/h5bp/server-configs
|
||||
###
|
||||
|
||||
|
||||
|
||||
# ----------------------------------------------------------------------
|
||||
# Better website experience for IE users
|
||||
# ----------------------------------------------------------------------
|
||||
|
||||
# Force the latest IE version, in various cases when it may fall back to IE7 mode
|
||||
# github.com/rails/rails/commit/123eb25#commitcomment-118920
|
||||
# Use ChromeFrame if it's installed for a better experience for the poor IE folk
|
||||
|
||||
<IfModule mod_headers.c>
|
||||
Header set X-UA-Compatible "IE=Edge,chrome=1"
|
||||
# mod_headers can't match by content-type, but we don't want to send this header on *everything*...
|
||||
<FilesMatch "\.(js|css|gif|png|jpe?g|pdf|xml|oga|ogg|m4a|ogv|mp4|m4v|webm|svg|svgz|eot|ttf|otf|woff|ico|webp|appcache|manifest|htc|crx|oex|xpi|safariextz|vcf)$" >
|
||||
Header unset X-UA-Compatible
|
||||
</FilesMatch>
|
||||
</IfModule>
|
||||
|
||||
|
||||
# ----------------------------------------------------------------------
|
||||
# Cross-domain AJAX requests
|
||||
# ----------------------------------------------------------------------
|
||||
|
||||
# Serve cross-domain Ajax requests, disabled by default.
|
||||
# enable-cors.org
|
||||
# code.google.com/p/html5security/wiki/CrossOriginRequestSecurity
|
||||
|
||||
# <IfModule mod_headers.c>
|
||||
# Header set Access-Control-Allow-Origin "*"
|
||||
# </IfModule>
|
||||
|
||||
|
||||
# ----------------------------------------------------------------------
|
||||
# CORS-enabled images (@crossorigin)
|
||||
# ----------------------------------------------------------------------
|
||||
|
||||
# Send CORS headers if browsers request them; enabled by default for images.
|
||||
# developer.mozilla.org/en/CORS_Enabled_Image
|
||||
# blog.chromium.org/2011/07/using-cross-domain-images-in-webgl-and.html
|
||||
# hacks.mozilla.org/2011/11/using-cors-to-load-webgl-textures-from-cross-domain-images/
|
||||
# wiki.mozilla.org/Security/Reviews/crossoriginAttribute
|
||||
|
||||
<IfModule mod_setenvif.c>
|
||||
<IfModule mod_headers.c>
|
||||
# mod_headers, y u no match by Content-Type?!
|
||||
<FilesMatch "\.(gif|png|jpe?g|svg|svgz|ico|webp)$">
|
||||
SetEnvIf Origin ":" IS_CORS
|
||||
Header set Access-Control-Allow-Origin "*" env=IS_CORS
|
||||
</FilesMatch>
|
||||
</IfModule>
|
||||
</IfModule>
|
||||
|
||||
|
||||
# ----------------------------------------------------------------------
|
||||
# Webfont access
|
||||
# ----------------------------------------------------------------------
|
||||
|
||||
# Allow access from all domains for webfonts.
|
||||
# Alternatively you could only whitelist your
|
||||
# subdomains like "subdomain.example.com".
|
||||
|
||||
<IfModule mod_headers.c>
|
||||
<FilesMatch "\.(ttf|ttc|otf|eot|woff|font.css)$">
|
||||
Header set Access-Control-Allow-Origin "*"
|
||||
</FilesMatch>
|
||||
</IfModule>
|
||||
|
||||
|
||||
|
||||
# ----------------------------------------------------------------------
|
||||
# Proper MIME type for all files
|
||||
# ----------------------------------------------------------------------
|
||||
|
||||
|
||||
# JavaScript
|
||||
# Normalize to standard type (it's sniffed in IE anyways)
|
||||
# tools.ietf.org/html/rfc4329#section-7.2
|
||||
AddType application/javascript js
|
||||
|
||||
# Audio
|
||||
AddType audio/ogg oga ogg
|
||||
AddType audio/mp4 m4a
|
||||
|
||||
# Video
|
||||
AddType video/ogg ogv
|
||||
AddType video/mp4 mp4 m4v
|
||||
AddType video/webm webm
|
||||
|
||||
# SVG
|
||||
# Required for svg webfonts on iPad
|
||||
# twitter.com/FontSquirrel/status/14855840545
|
||||
AddType image/svg+xml svg svgz
|
||||
AddEncoding gzip svgz
|
||||
|
||||
# Webfonts
|
||||
AddType application/vnd.ms-fontobject eot
|
||||
AddType application/x-font-ttf ttf ttc
|
||||
AddType font/opentype otf
|
||||
AddType application/x-font-woff woff
|
||||
|
||||
# Assorted types
|
||||
AddType image/x-icon ico
|
||||
AddType image/webp webp
|
||||
AddType text/cache-manifest appcache manifest
|
||||
AddType text/x-component htc
|
||||
AddType application/x-chrome-extension crx
|
||||
AddType application/x-opera-extension oex
|
||||
AddType application/x-xpinstall xpi
|
||||
AddType application/octet-stream safariextz
|
||||
AddType application/x-web-app-manifest+json webapp
|
||||
AddType text/x-vcard vcf
|
||||
|
||||
|
||||
|
||||
# ----------------------------------------------------------------------
|
||||
# Allow concatenation from within specific js and css files
|
||||
# ----------------------------------------------------------------------
|
||||
|
||||
# e.g. Inside of script.combined.js you could have
|
||||
# <!--#include file="libs/jquery-1.5.0.min.js" -->
|
||||
# <!--#include file="plugins/jquery.idletimer.js" -->
|
||||
# and they would be included into this single file.
|
||||
|
||||
# This is not in use in the boilerplate as it stands. You may
|
||||
# choose to name your files in this way for this advantage or
|
||||
# concatenate and minify them manually.
|
||||
# Disabled by default.
|
||||
|
||||
#<FilesMatch "\.combined\.js$">
|
||||
# Options +Includes
|
||||
# AddOutputFilterByType INCLUDES application/javascript application/json
|
||||
# SetOutputFilter INCLUDES
|
||||
#</FilesMatch>
|
||||
#<FilesMatch "\.combined\.css$">
|
||||
# Options +Includes
|
||||
# AddOutputFilterByType INCLUDES text/css
|
||||
# SetOutputFilter INCLUDES
|
||||
#</FilesMatch>
|
||||
|
||||
|
||||
# ----------------------------------------------------------------------
|
||||
# Gzip compression
|
||||
# ----------------------------------------------------------------------
|
||||
|
||||
<IfModule mod_deflate.c>
|
||||
|
||||
# Force deflate for mangled headers developer.yahoo.com/blogs/ydn/posts/2010/12/pushing-beyond-gzipping/
|
||||
<IfModule mod_setenvif.c>
|
||||
<IfModule mod_headers.c>
|
||||
SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s*,?\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding
|
||||
RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE_Accept-Encoding
|
||||
</IfModule>
|
||||
</IfModule>
|
||||
|
||||
# HTML, TXT, CSS, JavaScript, JSON, XML, HTC:
|
||||
<IfModule filter_module>
|
||||
FilterDeclare COMPRESS
|
||||
FilterProvider COMPRESS DEFLATE resp=Content-Type $text/html
|
||||
FilterProvider COMPRESS DEFLATE resp=Content-Type $text/css
|
||||
FilterProvider COMPRESS DEFLATE resp=Content-Type $text/plain
|
||||
FilterProvider COMPRESS DEFLATE resp=Content-Type $text/xml
|
||||
FilterProvider COMPRESS DEFLATE resp=Content-Type $text/x-component
|
||||
FilterProvider COMPRESS DEFLATE resp=Content-Type $application/javascript
|
||||
FilterProvider COMPRESS DEFLATE resp=Content-Type $application/json
|
||||
FilterProvider COMPRESS DEFLATE resp=Content-Type $application/xml
|
||||
FilterProvider COMPRESS DEFLATE resp=Content-Type $application/xhtml+xml
|
||||
FilterProvider COMPRESS DEFLATE resp=Content-Type $application/rss+xml
|
||||
FilterProvider COMPRESS DEFLATE resp=Content-Type $application/atom+xml
|
||||
FilterProvider COMPRESS DEFLATE resp=Content-Type $application/vnd.ms-fontobject
|
||||
FilterProvider COMPRESS DEFLATE resp=Content-Type $image/svg+xml
|
||||
FilterProvider COMPRESS DEFLATE resp=Content-Type $image/x-icon
|
||||
FilterProvider COMPRESS DEFLATE resp=Content-Type $application/x-font-ttf
|
||||
FilterProvider COMPRESS DEFLATE resp=Content-Type $font/opentype
|
||||
FilterChain COMPRESS
|
||||
FilterProtocol COMPRESS DEFLATE change=yes;byteranges=no
|
||||
</IfModule>
|
||||
|
||||
<IfModule !mod_filter.c>
|
||||
# Legacy versions of Apache
|
||||
AddOutputFilterByType DEFLATE text/html text/plain text/css application/json
|
||||
AddOutputFilterByType DEFLATE application/javascript
|
||||
AddOutputFilterByType DEFLATE text/xml application/xml text/x-component
|
||||
AddOutputFilterByType DEFLATE application/xhtml+xml application/rss+xml application/atom+xml
|
||||
AddOutputFilterByType DEFLATE image/x-icon image/svg+xml application/vnd.ms-fontobject application/x-font-ttf font/opentype
|
||||
</IfModule>
|
||||
|
||||
</IfModule>
|
||||
|
||||
|
||||
# ----------------------------------------------------------------------
|
||||
# Expires headers (for better cache control)
|
||||
# ----------------------------------------------------------------------
|
||||
|
||||
# These are pretty far-future expires headers.
|
||||
# They assume you control versioning with cachebusting query params like
|
||||
# <script src="application.js?20100608">
|
||||
# Additionally, consider that outdated proxies may miscache
|
||||
# www.stevesouders.com/blog/2008/08/23/revving-filenames-dont-use-querystring/
|
||||
|
||||
# If you don't use filenames to version, lower the CSS and JS to something like
|
||||
# "access plus 1 week" or so.
|
||||
|
||||
<IfModule mod_expires.c>
|
||||
ExpiresActive on
|
||||
|
||||
# Perhaps better to whitelist expires rules? Perhaps.
|
||||
ExpiresDefault "access plus 1 month"
|
||||
|
||||
# cache.appcache needs re-requests in FF 3.6 (thanks Remy ~Introducing HTML5)
|
||||
ExpiresByType text/cache-manifest "access plus 0 seconds"
|
||||
|
||||
# Your document html
|
||||
ExpiresByType text/html "access plus 0 seconds"
|
||||
|
||||
# Data
|
||||
ExpiresByType text/xml "access plus 0 seconds"
|
||||
ExpiresByType application/xml "access plus 0 seconds"
|
||||
ExpiresByType application/json "access plus 0 seconds"
|
||||
|
||||
# Feed
|
||||
ExpiresByType application/rss+xml "access plus 1 hour"
|
||||
ExpiresByType application/atom+xml "access plus 1 hour"
|
||||
|
||||
# Favicon (cannot be renamed)
|
||||
ExpiresByType image/x-icon "access plus 1 week"
|
||||
|
||||
# Media: images, video, audio
|
||||
ExpiresByType image/gif "access plus 1 month"
|
||||
ExpiresByType image/png "access plus 1 month"
|
||||
ExpiresByType image/jpg "access plus 1 month"
|
||||
ExpiresByType image/jpeg "access plus 1 month"
|
||||
ExpiresByType video/ogg "access plus 1 month"
|
||||
ExpiresByType audio/ogg "access plus 1 month"
|
||||
ExpiresByType video/mp4 "access plus 1 month"
|
||||
ExpiresByType video/webm "access plus 1 month"
|
||||
|
||||
# HTC files (css3pie)
|
||||
ExpiresByType text/x-component "access plus 1 month"
|
||||
|
||||
# Webfonts
|
||||
ExpiresByType application/x-font-ttf "access plus 1 month"
|
||||
ExpiresByType font/opentype "access plus 1 month"
|
||||
ExpiresByType application/x-font-woff "access plus 1 month"
|
||||
ExpiresByType image/svg+xml "access plus 1 month"
|
||||
ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
|
||||
|
||||
# CSS and JavaScript
|
||||
ExpiresByType text/css "access plus 1 year"
|
||||
ExpiresByType application/javascript "access plus 1 year"
|
||||
|
||||
</IfModule>
|
||||
|
||||
|
||||
|
||||
# ----------------------------------------------------------------------
|
||||
# ETag removal
|
||||
# ----------------------------------------------------------------------
|
||||
|
||||
# FileETag None is not enough for every server.
|
||||
<IfModule mod_headers.c>
|
||||
Header unset ETag
|
||||
</IfModule>
|
||||
|
||||
# Since we're sending far-future expires, we don't need ETags for
|
||||
# static content.
|
||||
# developer.yahoo.com/performance/rules.html#etags
|
||||
FileETag None
|
||||
|
||||
|
||||
|
||||
# ----------------------------------------------------------------------
|
||||
# Stop screen flicker in IE on CSS rollovers
|
||||
# ----------------------------------------------------------------------
|
||||
|
||||
# The following directives stop screen flicker in IE on CSS rollovers - in
|
||||
# combination with the "ExpiresByType" rules for images (see above). If
|
||||
# needed, un-comment the following rules.
|
||||
|
||||
# BrowserMatch "MSIE" brokenvary=1
|
||||
# BrowserMatch "Mozilla/4.[0-9]{2}" brokenvary=1
|
||||
# BrowserMatch "Opera" !brokenvary
|
||||
# SetEnvIf brokenvary 1 force-no-vary
|
||||
|
||||
|
||||
|
||||
# ----------------------------------------------------------------------
|
||||
# Cookie setting from iframes
|
||||
# ----------------------------------------------------------------------
|
||||
|
||||
# Allow cookies to be set from iframes (for IE only)
|
||||
# If needed, uncomment and specify a path or regex in the Location directive
|
||||
|
||||
# <IfModule mod_headers.c>
|
||||
# <Location />
|
||||
# Header set P3P "policyref=\"/w3c/p3p.xml\", CP=\"IDC DSP COR ADM DEVi TAIi PSA PSD IVAi IVDi CONi HIS OUR IND CNT\""
|
||||
# </Location>
|
||||
# </IfModule>
|
||||
|
||||
|
||||
|
||||
# ----------------------------------------------------------------------
|
||||
# Start rewrite engine
|
||||
# ----------------------------------------------------------------------
|
||||
|
||||
# Turning on the rewrite engine is necessary for the following rules and features.
|
||||
# FollowSymLinks must be enabled for this to work.
|
||||
|
||||
<IfModule mod_rewrite.c>
|
||||
Options +FollowSymlinks
|
||||
RewriteEngine On
|
||||
</IfModule>
|
||||
|
||||
|
||||
|
||||
# ----------------------------------------------------------------------
|
||||
# Suppress or force the "www." at the beginning of URLs
|
||||
# ----------------------------------------------------------------------
|
||||
|
||||
# The same content should never be available under two different URLs - especially not with and
|
||||
# without "www." at the beginning, since this can cause SEO problems (duplicate content).
|
||||
# That's why you should choose one of the alternatives and redirect the other one.
|
||||
|
||||
# By default option 1 (no "www.") is activated. Remember: Shorter URLs are sexier.
|
||||
# no-www.org/faq.php?q=class_b
|
||||
|
||||
# If you rather want to use option 2, just comment out all option 1 lines
|
||||
# and uncomment option 2.
|
||||
# IMPORTANT: NEVER USE BOTH RULES AT THE SAME TIME!
|
||||
|
||||
# ----------------------------------------------------------------------
|
||||
|
||||
# Option 1:
|
||||
# Rewrite "www.example.com -> example.com"
|
||||
|
||||
<IfModule mod_rewrite.c>
|
||||
RewriteCond %{HTTPS} !=on
|
||||
RewriteCond %{HTTP_HOST} ^www\.(.+)$ [NC]
|
||||
RewriteRule ^ http://%1%{REQUEST_URI} [R=301,L]
|
||||
</IfModule>
|
||||
|
||||
# ----------------------------------------------------------------------
|
||||
|
||||
# Option 2:
|
||||
# To rewrite "example.com -> www.example.com" uncomment the following lines.
|
||||
# Be aware that the following rule might not be a good idea if you
|
||||
# use "real" subdomains for certain parts of your website.
|
||||
|
||||
# <IfModule mod_rewrite.c>
|
||||
# RewriteCond %{HTTPS} !=on
|
||||
# RewriteCond %{HTTP_HOST} !^www\..+$ [NC]
|
||||
# RewriteRule ^ http://www.%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
|
||||
# </IfModule>
|
||||
|
||||
|
||||
|
||||
# ----------------------------------------------------------------------
|
||||
# Built-in filename-based cache busting
|
||||
# ----------------------------------------------------------------------
|
||||
|
||||
# If you're not using the build script to manage your filename version revving,
|
||||
# you might want to consider enabling this, which will route requests for
|
||||
# /css/style.20110203.css to /css/style.css
|
||||
|
||||
# To understand why this is important and a better idea than all.css?v1231,
|
||||
# read: github.com/h5bp/html5-boilerplate/wiki/Version-Control-with-Cachebusting
|
||||
|
||||
# Uncomment to enable.
|
||||
# <IfModule mod_rewrite.c>
|
||||
# RewriteCond %{REQUEST_FILENAME} !-f
|
||||
# RewriteCond %{REQUEST_FILENAME} !-d
|
||||
# RewriteRule ^(.+)\.(\d+)\.(js|css|png|jpg|gif)$ $1.$3 [L]
|
||||
# </IfModule>
|
||||
|
||||
|
||||
|
||||
# ----------------------------------------------------------------------
|
||||
# Prevent SSL cert warnings
|
||||
# ----------------------------------------------------------------------
|
||||
|
||||
# Rewrite secure requests properly to prevent SSL cert warnings, e.g. prevent
|
||||
# https://www.example.com when your cert only allows https://secure.example.com
|
||||
# Uncomment the following lines to use this feature.
|
||||
|
||||
# <IfModule mod_rewrite.c>
|
||||
# RewriteCond %{SERVER_PORT} !^443
|
||||
# RewriteRule ^ https://example-domain-please-change-me.com%{REQUEST_URI} [R=301,L]
|
||||
# </IfModule>
|
||||
|
||||
|
||||
|
||||
# ----------------------------------------------------------------------
|
||||
# Prevent 404 errors for non-existing redirected folders
|
||||
# ----------------------------------------------------------------------
|
||||
|
||||
# without -MultiViews, Apache will give a 404 for a rewrite if a folder of the same name does not exist
|
||||
# e.g. /blog/hello : webmasterworld.com/apache/3808792.htm
|
||||
|
||||
Options -MultiViews
|
||||
|
||||
|
||||
|
||||
# ----------------------------------------------------------------------
|
||||
# Custom 404 page
|
||||
# ----------------------------------------------------------------------
|
||||
|
||||
# You can add custom pages to handle 500 or 403 pretty easily, if you like.
|
||||
ErrorDocument 404 /404.html
|
||||
|
||||
|
||||
|
||||
# ----------------------------------------------------------------------
|
||||
# UTF-8 encoding
|
||||
# ----------------------------------------------------------------------
|
||||
|
||||
# Use UTF-8 encoding for anything served text/plain or text/html
|
||||
AddDefaultCharset utf-8
|
||||
|
||||
# Force UTF-8 for a number of file formats
|
||||
AddCharset utf-8 .css .js .xml .json .rss .atom
|
||||
|
||||
|
||||
|
||||
# ----------------------------------------------------------------------
|
||||
# A little more security
|
||||
# ----------------------------------------------------------------------
|
||||
|
||||
|
||||
# Do we want to advertise the exact version number of Apache we're running?
|
||||
# Probably not.
|
||||
## This can only be enabled if used in httpd.conf - It will not work in .htaccess
|
||||
# ServerTokens Prod
|
||||
|
||||
|
||||
# "-Indexes" will have Apache block users from browsing folders without a default document
|
||||
# Usually you should leave this activated, because you shouldn't allow everybody to surf through
|
||||
# every folder on your server (which includes rather private places like CMS system folders).
|
||||
<IfModule mod_autoindex.c>
|
||||
Options -Indexes
|
||||
</IfModule>
|
||||
|
||||
|
||||
# Block access to "hidden" directories whose names begin with a period. This
|
||||
# includes directories used by version control systems such as Subversion or Git.
|
||||
<IfModule mod_rewrite.c>
|
||||
RewriteCond %{SCRIPT_FILENAME} -d
|
||||
RewriteCond %{SCRIPT_FILENAME} -f
|
||||
RewriteRule "(^|/)\." - [F]
|
||||
</IfModule>
|
||||
|
||||
|
||||
# Block access to backup and source files
|
||||
# This files may be left by some text/html editors and
|
||||
# pose a great security danger, when someone can access them
|
||||
<FilesMatch "(\.(bak|config|sql|fla|psd|ini|log|sh|inc|swp|dist)|~)$">
|
||||
Order allow,deny
|
||||
Deny from all
|
||||
Satisfy All
|
||||
</FilesMatch>
|
||||
|
||||
|
||||
# If your server is not already configured as such, the following directive
|
||||
# should be uncommented in order to set PHP's register_globals option to OFF.
|
||||
# This closes a major security hole that is abused by most XSS (cross-site
|
||||
# scripting) attacks. For more information: http://php.net/register_globals
|
||||
#
|
||||
# IF REGISTER_GLOBALS DIRECTIVE CAUSES 500 INTERNAL SERVER ERRORS :
|
||||
#
|
||||
# Your server does not allow PHP directives to be set via .htaccess. In that
|
||||
# case you must make this change in your php.ini file instead. If you are
|
||||
# using a commercial web host, contact the administrators for assistance in
|
||||
# doing this. Not all servers allow local php.ini files, and they should
|
||||
# include all PHP configurations (not just this one), or you will effectively
|
||||
# reset everything to PHP defaults. Consult www.php.net for more detailed
|
||||
# information about setting PHP directives.
|
||||
|
||||
# php_flag register_globals Off
|
||||
|
||||
# Rename session cookie to something else, than PHPSESSID
|
||||
# php_value session.name sid
|
||||
|
||||
# Do not show you are using PHP
|
||||
# Note: Move this line to php.ini since it won't work in .htaccess
|
||||
# php_flag expose_php Off
|
||||
|
||||
# Level of log detail - log all errors
|
||||
# php_value error_reporting -1
|
||||
|
||||
# Write errors to log file
|
||||
# php_flag log_errors On
|
||||
|
||||
# Do not display errors in browser (production - Off, development - On)
|
||||
# php_flag display_errors Off
|
||||
|
||||
# Do not display startup errors (production - Off, development - On)
|
||||
# php_flag display_startup_errors Off
|
||||
|
||||
# Format errors in plain text
|
||||
# Note: Leave this setting 'On' for xdebug's var_dump() output
|
||||
# php_flag html_errors Off
|
||||
|
||||
# Show multiple occurrence of error
|
||||
# php_flag ignore_repeated_errors Off
|
||||
|
||||
# Show same errors from different sources
|
||||
# php_flag ignore_repeated_source Off
|
||||
|
||||
# Size limit for error messages
|
||||
# php_value log_errors_max_len 1024
|
||||
|
||||
# Don't precede error with string (doesn't accept empty string, use whitespace if you need)
|
||||
# php_value error_prepend_string " "
|
||||
|
||||
# Don't prepend to error (doesn't accept empty string, use whitespace if you need)
|
||||
# php_value error_append_string " "
|
||||
|
||||
# Increase cookie security
|
||||
<IfModule php5_module>
|
||||
php_value session.cookie_httponly true
|
||||
</IfModule>
|
||||
68
.jscsrc
Normal file
@@ -0,0 +1,68 @@
|
||||
{
|
||||
"disallowEmptyBlocks": true,
|
||||
"disallowKeywords": [
|
||||
"with"
|
||||
],
|
||||
"disallowMixedSpacesAndTabs": true,
|
||||
"disallowMultipleLineStrings": true,
|
||||
"disallowMultipleVarDecl": true,
|
||||
"disallowSpaceAfterPrefixUnaryOperators": [
|
||||
"!",
|
||||
"+",
|
||||
"++",
|
||||
"-",
|
||||
"--",
|
||||
"~"
|
||||
],
|
||||
"disallowSpaceBeforeBinaryOperators": [
|
||||
","
|
||||
],
|
||||
"disallowSpaceBeforePostfixUnaryOperators": true,
|
||||
"disallowSpacesInNamedFunctionExpression": {
|
||||
"beforeOpeningRoundBrace": true
|
||||
},
|
||||
"disallowSpacesInsideArrayBrackets": true,
|
||||
"disallowSpacesInsideParentheses": true,
|
||||
"disallowTrailingComma": true,
|
||||
"disallowTrailingWhitespace": true,
|
||||
"requireCamelCaseOrUpperCaseIdentifiers": true,
|
||||
"requireCapitalizedConstructors": true,
|
||||
"requireCommaBeforeLineBreak": true,
|
||||
"requireCurlyBraces": true,
|
||||
"requireDotNotation": true,
|
||||
"requireLineFeedAtFileEnd": true,
|
||||
"requireParenthesesAroundIIFE": true,
|
||||
"requireSpaceAfterBinaryOperators": true,
|
||||
"requireSpaceAfterKeywords": [
|
||||
"catch",
|
||||
"do",
|
||||
"else",
|
||||
"for",
|
||||
"if",
|
||||
"return",
|
||||
"switch",
|
||||
"try",
|
||||
"while"
|
||||
],
|
||||
"requireSpaceAfterLineComment": true,
|
||||
"requireSpaceBeforeBinaryOperators": true,
|
||||
"requireSpaceBeforeBlockStatements": true,
|
||||
"requireSpacesInAnonymousFunctionExpression": {
|
||||
"beforeOpeningCurlyBrace": true
|
||||
},
|
||||
"requireSpacesInConditionalExpression": true,
|
||||
"requireSpacesInFunctionDeclaration": {
|
||||
"beforeOpeningCurlyBrace": true
|
||||
},
|
||||
"requireSpacesInFunctionExpression": {
|
||||
"beforeOpeningCurlyBrace": true
|
||||
},
|
||||
"requireSpacesInNamedFunctionExpression": {
|
||||
"beforeOpeningCurlyBrace": true
|
||||
},
|
||||
"requireSpacesInsideObjectBrackets": "allButNested",
|
||||
"validateIndentation": 4,
|
||||
"validateLineBreaks": "LF",
|
||||
"validateParameterSeparator": ", ",
|
||||
"validateQuoteMarks": "'"
|
||||
}
|
||||
32
.jshintrc
Normal file
@@ -0,0 +1,32 @@
|
||||
{
|
||||
|
||||
// Enforcing options
|
||||
// http://jshint.com/docs/options/#enforcing-options
|
||||
|
||||
"bitwise": true,
|
||||
"eqeqeq": true,
|
||||
"forin": true,
|
||||
"latedef": true,
|
||||
"noarg": true,
|
||||
"nonbsp": true,
|
||||
"nonew": true,
|
||||
"undef": true,
|
||||
"unused": true,
|
||||
|
||||
// - - - - - - - - - - - - - - - - - - - - - - - - - - -
|
||||
|
||||
// Relaxing options
|
||||
// http://jshint.com/docs/options/#relaxing-options
|
||||
|
||||
"esnext": true,
|
||||
|
||||
// - - - - - - - - - - - - - - - - - - - - - - - - - - -
|
||||
|
||||
// Environments
|
||||
// http://jshint.com/docs/options/#environments
|
||||
|
||||
"browser": true,
|
||||
"jquery": true,
|
||||
"node": true
|
||||
|
||||
}
|
||||
32
.travis.yml
Normal file
@@ -0,0 +1,32 @@
|
||||
# For more information about the configurations used
|
||||
# in this file, please see the Travis CI documentation:
|
||||
# https://docs.travis-ci.com
|
||||
|
||||
after_success:
|
||||
- |
|
||||
|
||||
# Automatically update the content from the `dist/` directory
|
||||
|
||||
$(npm bin)/travis-after-all \
|
||||
&& $(npm bin)/set-up-ssh -k "$encrypted_7289798db853_key" \
|
||||
-iv "$encrypted_7289798db853_iv" \
|
||||
--path-encrypted-key ".travis/github_deploy_key.enc" \
|
||||
&& $(npm bin)/commit-changes --branch "master" \
|
||||
--commands "npm run build" \
|
||||
--commit-message "Update content from the \`dist\` directory [skip ci]"
|
||||
|
||||
env:
|
||||
global:
|
||||
- secure: "uZ0R71TG9AR+kbfM9rwa8PPNr3f9E0C4OuA0s6g0Gq15bBcpVxPvus0/eJdW+O2NSzZE1GbzS//hBiP+chK/8X4DyNIRutlGk5RYdnTTFEaZo9jp0BvlvprUYlGgpprR/531zQ9ahkc0STwVvzurGzlcF4NNMiISAJJ1IdQZABc="
|
||||
|
||||
git:
|
||||
depth: 10
|
||||
|
||||
language: node_js
|
||||
|
||||
node_js:
|
||||
- 4
|
||||
- 6
|
||||
- 7
|
||||
|
||||
sudo: false
|
||||
BIN
.travis/github_deploy_key.enc
Normal file
44
404.html
@@ -1,44 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Page Not Found :(</title>
|
||||
<style>
|
||||
::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
|
||||
::selection { background: #fe57a1; color: #fff; text-shadow: none; }
|
||||
html { padding: 30px 10px; font-size: 20px; line-height: 1.4; color: #737373; background: #f0f0f0; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
|
||||
html, input { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
|
||||
body { max-width: 500px; _width: 500px; padding: 30px 20px 50px; border: 1px solid #b3b3b3; border-radius: 4px; margin: 0 auto; box-shadow: 0 1px 10px #a7a7a7, inset 0 1px 0 #fff; background: #fcfcfc; }
|
||||
h1 { margin: 0 10px; font-size: 50px; text-align: center; }
|
||||
h1 span { color: #bbb; }
|
||||
h3 { margin: 1.5em 0 0.5em; }
|
||||
p { margin: 1em 0; }
|
||||
ul { padding: 0 0 0 40px; margin: 1em 0; }
|
||||
.container { max-width: 380px; _width: 380px; margin: 0 auto; }
|
||||
/* google search */
|
||||
#goog-fixurl ul { list-style: none; padding: 0; margin: 0; }
|
||||
#goog-fixurl form { margin: 0; }
|
||||
#goog-wm-qt, #goog-wm-sb { border: 1px solid #bbb; font-size: 16px; line-height: normal; vertical-align: top; color: #444; border-radius: 2px; }
|
||||
#goog-wm-qt { width: 220px; height: 20px; padding: 5px; margin: 5px 10px 0 0; box-shadow: inset 0 1px 1px #ccc; }
|
||||
#goog-wm-sb { display: inline-block; height: 32px; padding: 0 10px; margin: 5px 0 0; white-space: nowrap; cursor: pointer; background-color: #f5f5f5; background-image: -webkit-linear-gradient(rgba(255,255,255,0), #f1f1f1); background-image: -moz-linear-gradient(rgba(255,255,255,0), #f1f1f1); background-image: -ms-linear-gradient(rgba(255,255,255,0), #f1f1f1); background-image: -o-linear-gradient(rgba(255,255,255,0), #f1f1f1); -webkit-appearance: none; -moz-appearance: none; appearance: none; *overflow: visible; *display: inline; *zoom: 1; }
|
||||
#goog-wm-sb:hover, #goog-wm-sb:focus { border-color: #aaa; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); background-color: #f8f8f8; }
|
||||
#goog-wm-qt:focus, #goog-wm-sb:focus { border-color: #105cb6; outline: 0; color: #222; }
|
||||
input::-moz-focus-inner { padding: 0; border: 0; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>Not found <span>:(</span></h1>
|
||||
<p>Sorry, but the page you were trying to view does not exist.</p>
|
||||
<p>It looks like this was the result of either:</p>
|
||||
<ul>
|
||||
<li>a mistyped address</li>
|
||||
<li>an out-of-date link</li>
|
||||
</ul>
|
||||
<script>
|
||||
var GOOG_FIXURL_LANG = (navigator.language || '').slice(0,2),GOOG_FIXURL_SITE = location.host;
|
||||
</script>
|
||||
<script src="http://linkhelp.clients.google.com/tbproxy/lh/wm/fixurl.js"></script>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
299
CHANGELOG.md
Normal file
@@ -0,0 +1,299 @@
|
||||
### 6.0.0 (August 17, 2017)
|
||||
|
||||
* Fix Bug: .visuallyhidden on macOS VO fixes #1985 ([#1989](https://github.com/h5bp/html5-boilerplate/pull/1989))
|
||||
* Adds web app manifest file ([#1963](https://github.com/h5bp/html5-boilerplate/pull/1963))
|
||||
* Update to jQuery 3.2.1 ([#1942](https://github.com/h5bp/html5-boilerplate/pull/1942))
|
||||
* Improve ::selection documentation which became confusing after c7057be ([#1955](https://github.com/h5bp/html5-boilerplate/pull/1955))
|
||||
* refactor(html): update browsehappy to https instead of http ([#1952](https://github.com/h5bp/html5-boilerplate/pull/1952))
|
||||
* Fix links to CONTRIBUTING.md ([#1951](https://github.com/h5bp/html5-boilerplate/pull/1951))
|
||||
* Adds .github folder and contents Fixes ([#1948](https://github.com/h5bp/html5-boilerplate/pull/1948))
|
||||
* Modernizr 3, modernizr.config and ([#1940](https://github.com/h5bp/html5-boilerplate/pull/1940))
|
||||
* Housekeeping by @coliff (#1968 #1969 #1965 #1964 #1958 #1957 #1956)
|
||||
* Update .gitattributes for Web Projects ([#1935](https://github.com/h5bp/html5-boilerplate/pull/1935))
|
||||
* Add the link for useful .gitignore templates ([#1936](https://github.com/h5bp/html5-boilerplate/pull/1936))
|
||||
* Node plumbing updated ([#1925](https://github.com/h5bp/html5-boilerplate/pull/1925)) ([#1928](https://github.com/h5bp/html5-boilerplate/pull/1928)) ([#1931](https://github.com/h5bp/html5-boilerplate/pull/1931))
|
||||
* Use es2015 syntax in mocha tests ([#1788](https://github.com/h5bp/html5-boilerplate/pull/1788))
|
||||
* Scope :first-letter selector for print styles ([#1904](https://github.com/h5bp/html5-boilerplate/pull/1904))
|
||||
* Add SRI Hash for jQuery ([#1904](https://github.com/h5bp/html5-boilerplate/pull/1904))
|
||||
* Update .jshintrc ([#1903](https://github.com/h5bp/html5-boilerplate/pull/1903))
|
||||
* Improve accessibility with visuallyhidden content ([#1900](https://github.com/h5bp/html5-boilerplate/pull/1900))
|
||||
* Tell users that IE 8 and 9 are outdated
|
||||
([#1747](https://github.com/h5bp/html5-boilerplate/issues/1747)).
|
||||
* Removed IE8 Support (upgrades jQuery and normalize.css to latest)
|
||||
([#1524](https://github.com/h5bp/html5-boilerplate/issues/1524)).
|
||||
* Fix print styles for Internet Explorer 11
|
||||
([#1799](https://github.com/h5bp/html5-boilerplate/issues/1799)).
|
||||
* Update doc links to https
|
||||
([#1889](https://github.com/h5bp/html5-boilerplate/issues/1889)).
|
||||
* Delete crossdomain.xml
|
||||
([#1881](https://github.com/h5bp/html5-boilerplate/issues/1881)).
|
||||
* Adds pre-wrap to PRE
|
||||
([#1742](https://github.com/h5bp/html5-boilerplate/issues/1742)).
|
||||
* Change license format to SPDX format
|
||||
([#1814](https://github.com/h5bp/html5-boilerplate/pull/1814)).
|
||||
* Simplify the Google Analytics snippet using `async` & `defer` ([#1660](https://github.com/h5bp/html5-boilerplate/pull/1660#issuecomment-89285678)).
|
||||
|
||||
### 5.3.0 (January 12, 2016)
|
||||
|
||||
* Update jQuery to `v1.12.0`.
|
||||
* Fetch `jQuery` from jQuery's CDN instead of Google's
|
||||
([#1737](https://github.com/h5bp/html5-boilerplate/issues/1737),
|
||||
[#1739](https://github.com/h5bp/html5-boilerplate/issues/1739)).
|
||||
* Change print color for `:first-letter` and `:first-line`
|
||||
pseudo-elements
|
||||
([#1715](https://github.com/h5bp/html5-boilerplate/pull/1715)).
|
||||
|
||||
### 5.2.0 (May 1, 2015)
|
||||
|
||||
* Update jQuery to `v1.11.3`
|
||||
([#1699](https://github.com/h5bp/html5-boilerplate/issues/1699)).
|
||||
* Deprecate protocol-relative URLs
|
||||
([#1694](https://github.com/h5bp/html5-boilerplate/issues/1694)).
|
||||
* Update high resolution media query
|
||||
([#1474](https://github.com/h5bp/html5-boilerplate/issues/1474)).
|
||||
* Update Apache Server Configs to `v2.14.0`.
|
||||
|
||||
### 5.1.0 (April 1, 2015)
|
||||
|
||||
* Update Normalize.css to `v3.0.3`.
|
||||
* Use `https://` in the Google Universal Analytics snippet
|
||||
([eee759b](https://github.com/h5bp/html5-boilerplate/commit/eee759bfe175e850bbc8e4ad0682ec4fe4bd05d6)).
|
||||
* Remove the `visibility: hidden` declaration from `.hidden`
|
||||
([#1663](https://github.com/h5bp/html5-boilerplate/issues/1663)).
|
||||
* Use `<meta http-equiv="x-ua-compatible" content="ie=edge">`<br>
|
||||
instead of `<meta http-equiv="X-UA-Compatible" content="IE=edge">`
|
||||
([#1656](https://github.com/h5bp/html5-boilerplate/issues/1656)).
|
||||
* Update Apache Server Configs to `v2.13.0`.
|
||||
|
||||
### 5.0.0 (February 1, 2015)
|
||||
|
||||
* Update to jQuery 1.11.2.
|
||||
* Update Apache Server Configs to v2.11.0.
|
||||
* Rename Apple touch icon to `apple-touch-icon.png` and add
|
||||
`<link>` in `index.html`
|
||||
([#1622](https://github.com/h5bp/html5-boilerplate/issues/1622)).
|
||||
* Add vertical centering for `iframe`
|
||||
([#1613](https://github.com/h5bp/html5-boilerplate/issues/1613)).
|
||||
* Change the outdated browser prompt classname to `browserupgrade`
|
||||
([#1608](https://github.com/h5bp/html5-boilerplate/issues/1608)).
|
||||
* Update to Normalize.css 3.0.2.
|
||||
([#1050](https://github.com/h5bp/html5-boilerplate/issues/1050)).
|
||||
* Update `apple-touch-icon-precomposed.png` and the _"Apple touch
|
||||
icons"_ related documentation
|
||||
([#1599](https://github.com/h5bp/html5-boilerplate/pull/1599)).
|
||||
* Add pseudo-elements to universal selector in print media query
|
||||
([#1585](https://github.com/h5bp/html5-boilerplate/pull/1585)).
|
||||
* Update to Modernizr 2.8.3.
|
||||
* Remove need to readjust margins in `404.html`
|
||||
([#1567](https://github.com/h5bp/html5-boilerplate/pull/1567)).
|
||||
* Add `/.editorconfig` file
|
||||
([#1561](https://github.com/h5bp/html5-boilerplate/issues/1561),
|
||||
[#1564](https://github.com/h5bp/html5-boilerplate/issues/1564)).
|
||||
* Add `auto` to the Google Universal Analytics tracker create method
|
||||
([#1562](https://github.com/h5bp/html5-boilerplate/issues/1562)).
|
||||
* Add `timeline` and `timelineEnd` to the list of `console` methods
|
||||
([#1559](https://github.com/h5bp/html5-boilerplate/issues/1559)).
|
||||
* Add `lang=""` to `<html>`
|
||||
([#1542](https://github.com/h5bp/html5-boilerplate/issues/1542)).
|
||||
* Use `<!doctype html>` instead of `<!DOCTYPE html>`
|
||||
([#1522](https://github.com/h5bp/html5-boilerplate/issues/1522)).
|
||||
* Add `/browserconfig.xml` file and tile images
|
||||
([#1481](https://github.com/h5bp/html5-boilerplate/issues/1481)).
|
||||
* Add `Disallow:` to `robots.txt`
|
||||
([#1487](https://github.com/h5bp/html5-boilerplate/issues/1487)).
|
||||
* Remove default foreground color from form elements
|
||||
([#1390](https://github.com/h5bp/html5-boilerplate/issues/1390)).
|
||||
* Remove default margin from print styles
|
||||
([#1477](https://github.com/h5bp/html5-boilerplate/issues/1477)).
|
||||
* Remove image replacement helper class `.ir`
|
||||
([#1472](https://github.com/h5bp/html5-boilerplate/issues/1472),
|
||||
[#1475](https://github.com/h5bp/html5-boilerplate/issues/1475)).
|
||||
* Add vertical centering for `svg`
|
||||
([#1453](https://github.com/h5bp/html5-boilerplate/issues/1453)).
|
||||
* Redesign 404 page
|
||||
([#1443](https://github.com/h5bp/html5-boilerplate/pull/1443)).
|
||||
* Remove IE 6/7 hacks from `main.css`
|
||||
([#1050](https://github.com/h5bp/html5-boilerplate/issues/1050)).
|
||||
* Remove IE conditional classes
|
||||
([#1187](https://github.com/h5bp/html5-boilerplate/issues/1187),
|
||||
[#1290](https://github.com/h5bp/html5-boilerplate/issues/1290)).
|
||||
|
||||
### 4.3.0 (September 10, 2013)
|
||||
|
||||
* Use one `apple-touch-icon` instead of six
|
||||
([#1367](https://github.com/h5bp/html5-boilerplate/issues/1367)).
|
||||
* Move font-related declarations from `body` to `html`
|
||||
([#1411](https://github.com/h5bp/html5-boilerplate/issues/1411)).
|
||||
* Update to Apache Server Configs 1.1.0.
|
||||
* Add `initial-scale=1` to the viewport `meta`
|
||||
([#1398](https://github.com/h5bp/html5-boilerplate/pull/1398)).
|
||||
* Vertical centering for audio-, canvas- and video-tags
|
||||
([#1326](https://github.com/h5bp/html5-boilerplate/issues/1326)).
|
||||
* Remove Google Chrome Frame related code
|
||||
([#1379](https://github.com/h5bp/html5-boilerplate/pull/1379),
|
||||
[#1396](https://github.com/h5bp/html5-boilerplate/pull/1396)).
|
||||
* Update to Google Universal Analytics
|
||||
([#1347](https://github.com/h5bp/html5-boilerplate/issues/1347)).
|
||||
* Update to jQuery 1.10.2.
|
||||
* Update to Normalize.css 1.1.3.
|
||||
|
||||
### 4.2.0 (April 8, 2013)
|
||||
|
||||
* Remove Google Analytics protocol check
|
||||
([#1319](https://github.com/h5bp/html5-boilerplate/pull/1319)).
|
||||
* Update to Normalize.css 1.1.1.
|
||||
* Update Apache configurations to include the latest changes in the
|
||||
canonical [`.htaccess`](https://github.com/h5bp/server-configs-apache)
|
||||
file.
|
||||
* Use a protocol relative URL for the 404 template script.
|
||||
* Update to jQuery 1.9.1.
|
||||
|
||||
### 4.1.0 (January 21, 2013)
|
||||
|
||||
* Update to Normalize.css 1.1.0.
|
||||
* Update to jQuery 1.9.0.
|
||||
|
||||
### 4.0.3 (January 12, 2013)
|
||||
|
||||
* Use 32x32 favicon.ico
|
||||
([#1286](https://github.com/h5bp/html5-boilerplate/pull/1286)).
|
||||
* Remove named function expression in plugins.js
|
||||
([#1280](https://github.com/h5bp/html5-boilerplate/pull/1280)).
|
||||
* Adjust CSS image-replacement code
|
||||
([#1239](https://github.com/h5bp/html5-boilerplate/issues/1239)).
|
||||
* Update HiDPI example media query
|
||||
([#1127](https://github.com/h5bp/html5-boilerplate/issues/1127)).
|
||||
|
||||
### 4.0.2 (December 9, 2012)
|
||||
|
||||
* Update placeholder icons.
|
||||
* Update to Normalize.css 1.0.2.
|
||||
* Update to jQuery 1.8.3.
|
||||
|
||||
### 4.0.1 (October 20, 2012)
|
||||
|
||||
* Further improvements to `console` method stubbing
|
||||
([#1206](https://github.com/h5bp/html5-boilerplate/issues/1206),
|
||||
[#1229](https://github.com/h5bp/html5-boilerplate/pull/1229)).
|
||||
* Update to jQuery 1.8.2.
|
||||
* Update to Modernizr 2.6.2.
|
||||
* Minor additions to the documentation.
|
||||
|
||||
### 4.0.0 (August 28, 2012)
|
||||
|
||||
* Improve the Apache compression configuration
|
||||
([#1012](https://github.com/h5bp/html5-boilerplate/issues/1012),
|
||||
[#1173](https://github.com/h5bp/html5-boilerplate/issues/1173)).
|
||||
* Add a HiDPI example media query
|
||||
([#1127](https://github.com/h5bp/html5-boilerplate/issues/1127)).
|
||||
* Add bundled docs
|
||||
([#1154](https://github.com/h5bp/html5-boilerplate/issues/1154)).
|
||||
* Add MIT license
|
||||
([#1139](https://github.com/h5bp/html5-boilerplate/issues/1139)).
|
||||
* Update to Normalize.css 1.0.1.
|
||||
* Separate Normalize.css from the rest of the CSS
|
||||
([#1160](https://github.com/h5bp/html5-boilerplate/issues/1160)).
|
||||
* Improve `console.log` protection
|
||||
([#1107](https://github.com/h5bp/html5-boilerplate/issues/1107)).
|
||||
* Replace hot pink text selection color with a neutral color.
|
||||
* Change image replacement technique
|
||||
([#1149](https://github.com/h5bp/html5-boilerplate/issues/1149)).
|
||||
* Code format and consistency changes
|
||||
([#1112](https://github.com/h5bp/html5-boilerplate/issues/1112)).
|
||||
* Rename CSS file and rename JS files and subdirectories.
|
||||
* Update to jQuery 1.8
|
||||
([#1161](https://github.com/h5bp/html5-boilerplate/issues/1161)).
|
||||
* Update to Modernizr 2.6.1
|
||||
([#1086](https://github.com/h5bp/html5-boilerplate/issues/1086)).
|
||||
* Remove uncompressed jQuery
|
||||
([#1153](https://github.com/h5bp/html5-boilerplate/issues/1153)).
|
||||
* Remove superfluous inline comments
|
||||
([#1150](https://github.com/h5bp/html5-boilerplate/issues/1150)).
|
||||
|
||||
### 3.0.2 (February 19, 2012)
|
||||
|
||||
* Update to Modernizr 2.5.3.
|
||||
|
||||
### 3.0.1 (February 08, 2012).
|
||||
|
||||
* Update to Modernizr 2.5.2 (includes html5shiv 3.3).
|
||||
|
||||
### 3.0.0 (February 06, 2012)
|
||||
|
||||
* Improvements to `.htaccess`.
|
||||
* Improve 404 design.
|
||||
* Simplify JS folder structure.
|
||||
* Change `html` IE class names changed to target ranges rather than
|
||||
specific versions of IE.
|
||||
* Update CSS to include latest normalize.css changes and better
|
||||
typographic defaults
|
||||
([#825](https://github.com/h5bp/html5-boilerplate/issues/825)).
|
||||
* Update to Modernizr 2.5 (includes yepnope 1.5 and html5shiv 3.2).
|
||||
* Update to jQuery 1.7.1.
|
||||
* Revert to async snippet for the Google Analytics script.
|
||||
* Remove the ant build script
|
||||
([#826](https://github.com/h5bp/html5-boilerplate/issues/826)).
|
||||
* Remove Respond.js
|
||||
([#816](https://github.com/h5bp/html5-boilerplate/issues/816)).
|
||||
* Remove the `demo/` directory
|
||||
([#808](https://github.com/h5bp/html5-boilerplate/issues/808)).
|
||||
* Remove the `test/` directory
|
||||
([#808](https://github.com/h5bp/html5-boilerplate/issues/808)).
|
||||
* Remove Google Chrome Frame script for IE6 users; replace with links
|
||||
to Chrome Frame and options for alternative browsers.
|
||||
* Remove `initial-scale=1` from the viewport `meta`
|
||||
([#824](https://github.com/h5bp/html5-boilerplate/issues/824)).
|
||||
* Remove `defer` from all scripts to avoid legacy IE bugs.
|
||||
* Remove explicit Site Speed tracking for Google Analytics. It's now
|
||||
enabled by default.
|
||||
|
||||
### 2.0.0 (August 10, 2011)
|
||||
|
||||
* Change starting CSS to be based on normalize.css instead of reset.css
|
||||
([#500](https://github.com/h5bp/html5-boilerplate/issues/500)).
|
||||
* Add Respond.js media query polyfill.
|
||||
* Add Google Chrome Frame script prompt for IE6 users.
|
||||
* Simplify the `html` conditional comments for modern browsers and add
|
||||
an `oldie` class.
|
||||
* Update clearfix to use "micro clearfix".
|
||||
* Add placeholder CSS MQs for mobile-first approach.
|
||||
* Add `textarea { resize: vertical; }` to only allow vertical resizing.
|
||||
* Add `img { max-width: 100%; }` to the print styles; prevents images
|
||||
being truncated.
|
||||
* Add Site Speed tracking for Google Analytics.
|
||||
* Update to jQuery 1.6.2 (and use minified by default).
|
||||
* Update to Modernizr 2.0 Complete, Production minified (includes
|
||||
yepnope, html5shiv, and Respond.js).
|
||||
* Use `Modernizr.load()` to load the Google Analytics script.
|
||||
* Much faster build process.
|
||||
* Add build script options for CSSLint, JSLint, JSHint tools.
|
||||
* Build script now compresses all images in subfolders.
|
||||
* Build script now versions files by SHA hash.
|
||||
* Many `.htaccess` improvements including: disable directory browsing,
|
||||
improved support for all versions of Apache, more robust and extensive
|
||||
HTTP compression rules.
|
||||
* Remove `handheld.css` as it has very poor device support.
|
||||
* Remove touch-icon `link` elements from the HTML and include improved
|
||||
touch-icon support.
|
||||
* Remove the cache-busting query paramaters from files references in
|
||||
the HTML.
|
||||
* Remove IE6 PNGFix.
|
||||
|
||||
### 1.0.0 (March 21, 2011)
|
||||
|
||||
* Rewrite build script to make it more customizable and flexible.
|
||||
* Add a humans.txt.
|
||||
* Numerous `.htaccess` improvements (including inline documentation).
|
||||
* Move the alternative server configurations to the H5BP server configs
|
||||
repo.
|
||||
* Use a protocol-relative url to reference jQuery and prevent mixed
|
||||
content warnings.
|
||||
* Optimize the Google Analytics snippet.
|
||||
* Use Eric Meyer's recent CSS reset update and the HTML5 Doctor reset.
|
||||
* More robust `sub`/`sup` CSS styles.
|
||||
* Add keyboard `.focusable` helper class that extends `.visuallyhidden`.
|
||||
* Print styles no longer print hash or JavaScript links.
|
||||
* Add a print reset for IE's proprietary filters.
|
||||
* Remove IE9-specific conditional class on the `html` element.
|
||||
* Remove margins from lists within `nav` elements.
|
||||
* Remove YUI profiling.
|
||||
19
LICENSE.txt
Normal file
@@ -0,0 +1,19 @@
|
||||
Copyright (c) HTML5 Boilerplate
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy of
|
||||
this software and associated documentation files (the "Software"), to deal in
|
||||
the Software without restriction, including without limitation the rights to
|
||||
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
|
||||
of the Software, and to permit persons to whom the Software is furnished to do
|
||||
so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
91
README.md
Normal file
@@ -0,0 +1,91 @@
|
||||
# [HTML5 Boilerplate](https://html5boilerplate.com/)
|
||||
|
||||
[](https://travis-ci.org/h5bp/html5-boilerplate)
|
||||
[](https://david-dm.org/h5bp/html5-boilerplate#info=devDependencies)
|
||||
|
||||
HTML5 Boilerplate is a professional front-end template for building
|
||||
fast, robust, and adaptable web apps or sites.
|
||||
|
||||
This project is the product of years of iterative development and
|
||||
community knowledge. It does not impose a specific development
|
||||
philosophy or framework, so you're free to architect your code in the
|
||||
way that you want.
|
||||
|
||||
* Homepage: [https://html5boilerplate.com/](https://html5boilerplate.com/)
|
||||
* Source: [https://github.com/h5bp/html5-boilerplate](https://github.com/h5bp/html5-boilerplate)
|
||||
* Twitter: [@h5bp](https://twitter.com/h5bp)
|
||||
|
||||
|
||||
## Quick start
|
||||
|
||||
Choose one of the following options:
|
||||
|
||||
1. Download the latest stable release from
|
||||
[html5boilerplate.com](https://html5boilerplate.com/).
|
||||
2. Clone the git repo — `git clone
|
||||
https://github.com/h5bp/html5-boilerplate.git` - and checkout the
|
||||
[tagged release](https://github.com/h5bp/html5-boilerplate/releases)
|
||||
you'd like to use.
|
||||
|
||||
|
||||
## Features
|
||||
|
||||
* HTML5 ready. Use the new elements with confidence.
|
||||
* Designed with progressive enhancement in mind.
|
||||
* Includes:
|
||||
* [`Normalize.css`](https://necolas.github.com/normalize.css/)
|
||||
for CSS normalizations and common bug fixes
|
||||
* [`jQuery`](https://jquery.com/) via CDN with [SRI Hash](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity) and a local fallback
|
||||
* A custom build of [`Modernizr`](https://modernizr.com/) for feature
|
||||
detection
|
||||
* [`Apache Server Configs`](https://github.com/h5bp/server-configs-apache)
|
||||
that, among other, improve the web site's performance and security
|
||||
* Placeholder CSS Media Queries.
|
||||
* Useful CSS helper classes.
|
||||
* Default print styles, performance optimized.
|
||||
* An optimized version of the Google Universal Analytics snippet.
|
||||
* Protection against any stray `console` statements causing JavaScript
|
||||
errors in older browsers.
|
||||
* "Delete-key friendly." Easy to strip out parts you don't need.
|
||||
* Extensive inline and accompanying documentation.
|
||||
|
||||
|
||||
## Browser support
|
||||
|
||||
* Chrome *(latest 2)*
|
||||
* Edge *(latest 2)*
|
||||
* Firefox *(latest 2)*
|
||||
* Internet Explorer 9+
|
||||
* Opera *(latest 2)*
|
||||
* Safari *(latest 2)*
|
||||
|
||||
*This doesn't mean that HTML5 Boilerplate cannot be used in older browsers,
|
||||
just that we'll ensure compatibility with the ones mentioned above.*
|
||||
|
||||
If you need legacy browser support you
|
||||
can use [HTML5 Boilerplate v4](https://github.com/h5bp/html5-boilerplate/tree/v4) (IE 6+, Firefox 3.6+, Safari 4+),
|
||||
or [HTML5 Boilerplate v5](https://github.com/h5bp/html5-boilerplate/tree/v5.0.0) (IE8+). They are no longer actively developed.
|
||||
|
||||
|
||||
## Documentation
|
||||
|
||||
Take a look at the [documentation table of contents](dist/doc/TOC.md).
|
||||
This documentation is bundled with the project which makes it
|
||||
available for offline reading and provides a useful starting point for
|
||||
any documentation you want to write about your project.
|
||||
|
||||
|
||||
## Contributing
|
||||
|
||||
Hundreds of developers have helped to make the HTML5 Boilerplate. Anyone is welcome to [contribute](.github/CONTRIBUTING.md),
|
||||
however, if you decide to get involved, please take a moment to review
|
||||
the [guidelines](.github/CONTRIBUTING.md):
|
||||
|
||||
* [Bug reports](.github/CONTRIBUTING.md#bugs)
|
||||
* [Feature requests](.github/CONTRIBUTING.md#features)
|
||||
* [Pull requests](.github/CONTRIBUTING.md#pull-requests)
|
||||
|
||||
|
||||
## License
|
||||
|
||||
The code is available under the [MIT license](LICENSE.txt).
|
||||
|
Before Width: | Height: | Size: 1.0 KiB |
|
Before Width: | Height: | Size: 640 B |
|
Before Width: | Height: | Size: 747 B |
|
Before Width: | Height: | Size: 640 B |
|
Before Width: | Height: | Size: 640 B |
@@ -1,25 +0,0 @@
|
||||
<?xml version="1.0"?>
|
||||
<!DOCTYPE cross-domain-policy SYSTEM "http://www.adobe.com/xml/dtds/cross-domain-policy.dtd">
|
||||
<cross-domain-policy>
|
||||
|
||||
|
||||
<!-- Read this: www.adobe.com/devnet/articles/crossdomain_policy_file_spec.html -->
|
||||
|
||||
<!-- Most restrictive policy: -->
|
||||
<site-control permitted-cross-domain-policies="none"/>
|
||||
|
||||
|
||||
|
||||
<!-- Least restrictive policy: -->
|
||||
<!--
|
||||
<site-control permitted-cross-domain-policies="all"/>
|
||||
<allow-access-from domain="*" to-ports="*" secure="false"/>
|
||||
<allow-http-request-headers-from domain="*" headers="*" secure="false"/>
|
||||
-->
|
||||
<!--
|
||||
If you host a crossdomain.xml file with allow-access-from domain="*"
|
||||
and don’t understand all of the points described here, you probably
|
||||
have a nasty security vulnerability. ~ simon willison
|
||||
-->
|
||||
|
||||
</cross-domain-policy>
|
||||
293
css/style.css
@@ -1,293 +0,0 @@
|
||||
/*
|
||||
* HTML5 Boilerplate
|
||||
*
|
||||
* What follows is the result of much research on cross-browser styling.
|
||||
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
|
||||
* Kroc Camen, and the H5BP dev community and team.
|
||||
*
|
||||
* Detailed information about this CSS: h5bp.com/css
|
||||
*
|
||||
* ==|== normalize ==========================================================
|
||||
*/
|
||||
|
||||
|
||||
/* =============================================================================
|
||||
HTML5 display definitions
|
||||
========================================================================== */
|
||||
|
||||
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
|
||||
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
|
||||
audio:not([controls]) { display: none; }
|
||||
[hidden] { display: none; }
|
||||
|
||||
|
||||
/* =============================================================================
|
||||
Base
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
|
||||
* 2. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g
|
||||
*/
|
||||
|
||||
html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
|
||||
|
||||
html, button, input, select, textarea { font-family: sans-serif; color: #222; }
|
||||
|
||||
body { margin: 0; font-size: 1em; line-height: 1.4; }
|
||||
|
||||
/*
|
||||
* Remove text-shadow in selection highlight: h5bp.com/i
|
||||
* These selection declarations have to be separate
|
||||
* Also: hot pink! (or customize the background color to match your design)
|
||||
*/
|
||||
|
||||
::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
|
||||
::selection { background: #fe57a1; color: #fff; text-shadow: none; }
|
||||
|
||||
|
||||
/* =============================================================================
|
||||
Links
|
||||
========================================================================== */
|
||||
|
||||
a { color: #00e; }
|
||||
a:visited { color: #551a8b; }
|
||||
a:hover { color: #06e; }
|
||||
a:focus { outline: thin dotted; }
|
||||
|
||||
/* Improve readability when focused and hovered in all browsers: h5bp.com/h */
|
||||
a:hover, a:active { outline: 0; }
|
||||
|
||||
|
||||
/* =============================================================================
|
||||
Typography
|
||||
========================================================================== */
|
||||
|
||||
abbr[title] { border-bottom: 1px dotted; }
|
||||
|
||||
b, strong { font-weight: bold; }
|
||||
|
||||
blockquote { margin: 1em 40px; }
|
||||
|
||||
dfn { font-style: italic; }
|
||||
|
||||
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
|
||||
|
||||
ins { background: #ff9; color: #000; text-decoration: none; }
|
||||
|
||||
mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
|
||||
|
||||
/* Redeclare monospace font family: h5bp.com/j */
|
||||
pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }
|
||||
|
||||
/* Improve readability of pre-formatted text in all browsers */
|
||||
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
|
||||
|
||||
q { quotes: none; }
|
||||
q:before, q:after { content: ""; content: none; }
|
||||
|
||||
small { font-size: 85%; }
|
||||
|
||||
/* Position subscript and superscript content without affecting line-height: h5bp.com/k */
|
||||
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
|
||||
sup { top: -0.5em; }
|
||||
sub { bottom: -0.25em; }
|
||||
|
||||
|
||||
/* =============================================================================
|
||||
Lists
|
||||
========================================================================== */
|
||||
|
||||
ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
|
||||
dd { margin: 0 0 0 40px; }
|
||||
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }
|
||||
|
||||
|
||||
/* =============================================================================
|
||||
Embedded content
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* 1. Improve image quality when scaled in IE7: h5bp.com/d
|
||||
* 2. Remove the gap between images and borders on image containers: h5bp.com/i/440
|
||||
*/
|
||||
|
||||
img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
|
||||
|
||||
/*
|
||||
* Correct overflow not hidden in IE9
|
||||
*/
|
||||
|
||||
svg:not(:root) { overflow: hidden; }
|
||||
|
||||
|
||||
/* =============================================================================
|
||||
Figures
|
||||
========================================================================== */
|
||||
|
||||
figure { margin: 0; }
|
||||
|
||||
|
||||
/* =============================================================================
|
||||
Forms
|
||||
========================================================================== */
|
||||
|
||||
form { margin: 0; }
|
||||
fieldset { border: 0; margin: 0; padding: 0; }
|
||||
|
||||
/* Indicate that 'label' will shift focus to the associated form element */
|
||||
label { cursor: pointer; }
|
||||
|
||||
/*
|
||||
* 1. Correct color not inheriting in IE6/7/8/9
|
||||
* 2. Correct alignment displayed oddly in IE6/7
|
||||
*/
|
||||
|
||||
legend { border: 0; *margin-left: -7px; padding: 0; white-space: normal; }
|
||||
|
||||
/*
|
||||
* 1. Correct font-size not inheriting in all browsers
|
||||
* 2. Remove margins in FF3/4 S5 Chrome
|
||||
* 3. Define consistent vertical alignment display in all browsers
|
||||
*/
|
||||
|
||||
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
|
||||
|
||||
/*
|
||||
* 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet)
|
||||
*/
|
||||
|
||||
button, input { line-height: normal; }
|
||||
|
||||
/*
|
||||
* 1. Display hand cursor for clickable form elements
|
||||
* 2. Allow styling of clickable form elements in iOS
|
||||
* 3. Correct inner spacing displayed oddly in IE7 (doesn't effect IE6)
|
||||
*/
|
||||
|
||||
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; }
|
||||
|
||||
/*
|
||||
* Re-set default cursor for disabled elements
|
||||
*/
|
||||
|
||||
button[disabled], input[disabled] { cursor: default; }
|
||||
|
||||
/*
|
||||
* Consistent box sizing and appearance
|
||||
*/
|
||||
|
||||
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; *width: 13px; *height: 13px; }
|
||||
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
|
||||
input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
|
||||
|
||||
/*
|
||||
* Remove inner padding and border in FF3/4: h5bp.com/l
|
||||
*/
|
||||
|
||||
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
|
||||
|
||||
/*
|
||||
* 1. Remove default vertical scrollbar in IE6/7/8/9
|
||||
* 2. Allow only vertical resizing
|
||||
*/
|
||||
|
||||
textarea { overflow: auto; vertical-align: top; resize: vertical; }
|
||||
|
||||
/* Colors for form validity */
|
||||
input:valid, textarea:valid { }
|
||||
input:invalid, textarea:invalid { background-color: #f0dddd; }
|
||||
|
||||
|
||||
/* =============================================================================
|
||||
Tables
|
||||
========================================================================== */
|
||||
|
||||
table { border-collapse: collapse; border-spacing: 0; }
|
||||
td { vertical-align: top; }
|
||||
|
||||
|
||||
/* =============================================================================
|
||||
Chrome Frame Prompt
|
||||
========================================================================== */
|
||||
|
||||
.chromeframe { margin: 0.2em 0; background: #ccc; color: black; padding: 0.2em 0; }
|
||||
|
||||
|
||||
/* ==|== primary styles =====================================================
|
||||
Author:
|
||||
========================================================================== */
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* ==|== media queries ======================================================
|
||||
EXAMPLE Media Query for Responsive Design.
|
||||
This example overrides the primary ('mobile first') styles
|
||||
Modify as content requires.
|
||||
========================================================================== */
|
||||
|
||||
@media only screen and (min-width: 35em) {
|
||||
/* Style adjustments for viewports that meet the condition */
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* ==|== non-semantic helper classes ========================================
|
||||
Please define your styles before this section.
|
||||
========================================================================== */
|
||||
|
||||
/* For image replacement */
|
||||
.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; *line-height: 0; }
|
||||
.ir br { display: none; }
|
||||
|
||||
/* Hide from both screenreaders and browsers: h5bp.com/u */
|
||||
.hidden { display: none !important; visibility: hidden; }
|
||||
|
||||
/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
|
||||
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
|
||||
|
||||
/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
|
||||
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
|
||||
|
||||
/* Hide visually and from screenreaders, but maintain layout */
|
||||
.invisible { visibility: hidden; }
|
||||
|
||||
/* Contain floats: h5bp.com/q */
|
||||
.clearfix:before, .clearfix:after { content: ""; display: table; }
|
||||
.clearfix:after { clear: both; }
|
||||
.clearfix { *zoom: 1; }
|
||||
|
||||
|
||||
|
||||
/* ==|== print styles =======================================================
|
||||
Print styles.
|
||||
Inlined to avoid required HTTP connection: h5bp.com/r
|
||||
========================================================================== */
|
||||
|
||||
@media print {
|
||||
* { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
|
||||
a, a:visited { text-decoration: underline; }
|
||||
a[href]:after { content: " (" attr(href) ")"; }
|
||||
abbr[title]:after { content: " (" attr(title) ")"; }
|
||||
.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */
|
||||
pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
|
||||
thead { display: table-header-group; } /* h5bp.com/t */
|
||||
tr, img { page-break-inside: avoid; }
|
||||
img { max-width: 100% !important; }
|
||||
@page { margin: 0.5cm; }
|
||||
p, h2, h3 { orphans: 3; widows: 3; }
|
||||
h2, h3 { page-break-after: avoid; }
|
||||
}
|
||||
13
dist/.editorconfig
vendored
Normal file
@@ -0,0 +1,13 @@
|
||||
# editorconfig.org
|
||||
|
||||
root = true
|
||||
|
||||
[*]
|
||||
charset = utf-8
|
||||
indent_size = 4
|
||||
indent_style = space
|
||||
insert_final_newline = true
|
||||
trim_trailing_whitespace = true
|
||||
|
||||
[*.md]
|
||||
trim_trailing_whitespace = false
|
||||
192
dist/.gitattributes
vendored
Normal file
@@ -0,0 +1,192 @@
|
||||
## GITATTRIBUTES FOR WEB PROJECTS
|
||||
#
|
||||
# These settings are for any web project.
|
||||
#
|
||||
# Details per file setting:
|
||||
# text These files should be normalized (i.e. convert CRLF to LF).
|
||||
# binary These files are binary and should be left untouched.
|
||||
#
|
||||
# Note that binary is a macro for -text -diff.
|
||||
######################################################################
|
||||
|
||||
## AUTO-DETECT
|
||||
## Handle line endings automatically for files detected as
|
||||
## text and leave all files detected as binary untouched.
|
||||
## This will handle all files NOT defined below.
|
||||
* text=auto
|
||||
|
||||
## SOURCE CODE
|
||||
*.bat text eol=crlf
|
||||
*.coffee text
|
||||
*.css text
|
||||
*.htm text
|
||||
*.html text
|
||||
*.inc text
|
||||
*.ini text
|
||||
*.js text
|
||||
*.json text
|
||||
*.jsx text
|
||||
*.less text
|
||||
*.od text
|
||||
*.onlydata text
|
||||
*.php text
|
||||
*.pl text
|
||||
*.py text
|
||||
*.rb text
|
||||
*.sass text
|
||||
*.scm text
|
||||
*.scss text
|
||||
*.sh text eol=lf
|
||||
*.sql text
|
||||
*.styl text
|
||||
*.tag text
|
||||
*.ts text
|
||||
*.tsx text
|
||||
*.xml text
|
||||
*.xhtml text
|
||||
|
||||
## DOCKER
|
||||
*.dockerignore text
|
||||
Dockerfile text
|
||||
|
||||
## DOCUMENTATION
|
||||
*.markdown text
|
||||
*.md text
|
||||
*.mdwn text
|
||||
*.mdown text
|
||||
*.mkd text
|
||||
*.mkdn text
|
||||
*.mdtxt text
|
||||
*.mdtext text
|
||||
*.txt text
|
||||
AUTHORS text
|
||||
CHANGELOG text
|
||||
CHANGES text
|
||||
CONTRIBUTING text
|
||||
COPYING text
|
||||
copyright text
|
||||
*COPYRIGHT* text
|
||||
INSTALL text
|
||||
license text
|
||||
LICENSE text
|
||||
NEWS text
|
||||
readme text
|
||||
*README* text
|
||||
TODO text
|
||||
|
||||
## TEMPLATES
|
||||
*.dot text
|
||||
*.ejs text
|
||||
*.haml text
|
||||
*.handlebars text
|
||||
*.hbs text
|
||||
*.hbt text
|
||||
*.jade text
|
||||
*.latte text
|
||||
*.mustache text
|
||||
*.njk text
|
||||
*.phtml text
|
||||
*.tmpl text
|
||||
*.tpl text
|
||||
*.twig text
|
||||
|
||||
## LINTERS
|
||||
.csslintrc text
|
||||
.eslintrc text
|
||||
.htmlhintrc text
|
||||
.jscsrc text
|
||||
.jshintrc text
|
||||
.jshintignore text
|
||||
.stylelintrc text
|
||||
|
||||
## CONFIGS
|
||||
*.bowerrc text
|
||||
*.cnf text
|
||||
*.conf text
|
||||
*.config text
|
||||
.browserslistrc text
|
||||
.editorconfig text
|
||||
.gitattributes text
|
||||
.gitconfig text
|
||||
.gitignore text
|
||||
.htaccess text
|
||||
*.npmignore text
|
||||
*.yaml text
|
||||
*.yml text
|
||||
browserslist text
|
||||
Makefile text
|
||||
makefile text
|
||||
|
||||
## HEROKU
|
||||
Procfile text
|
||||
.slugignore text
|
||||
|
||||
## GRAPHICS
|
||||
*.ai binary
|
||||
*.bmp binary
|
||||
*.eps binary
|
||||
*.gif binary
|
||||
*.ico binary
|
||||
*.jng binary
|
||||
*.jp2 binary
|
||||
*.jpg binary
|
||||
*.jpeg binary
|
||||
*.jpx binary
|
||||
*.jxr binary
|
||||
*.pdf binary
|
||||
*.png binary
|
||||
*.psb binary
|
||||
*.psd binary
|
||||
*.svg text
|
||||
*.svgz binary
|
||||
*.tif binary
|
||||
*.tiff binary
|
||||
*.wbmp binary
|
||||
*.webp binary
|
||||
|
||||
## AUDIO
|
||||
*.kar binary
|
||||
*.m4a binary
|
||||
*.mid binary
|
||||
*.midi binary
|
||||
*.mp3 binary
|
||||
*.ogg binary
|
||||
*.ra binary
|
||||
|
||||
## VIDEO
|
||||
*.3gpp binary
|
||||
*.3gp binary
|
||||
*.as binary
|
||||
*.asf binary
|
||||
*.asx binary
|
||||
*.fla binary
|
||||
*.flv binary
|
||||
*.m4v binary
|
||||
*.mng binary
|
||||
*.mov binary
|
||||
*.mp4 binary
|
||||
*.mpeg binary
|
||||
*.mpg binary
|
||||
*.ogv binary
|
||||
*.swc binary
|
||||
*.swf binary
|
||||
*.webm binary
|
||||
|
||||
## ARCHIVES
|
||||
*.7z binary
|
||||
*.gz binary
|
||||
*.jar binary
|
||||
*.rar binary
|
||||
*.tar binary
|
||||
*.zip binary
|
||||
|
||||
## FONTS
|
||||
*.ttf binary
|
||||
*.eot binary
|
||||
*.otf binary
|
||||
*.woff binary
|
||||
*.woff2 binary
|
||||
|
||||
## EXECUTABLES
|
||||
*.exe binary
|
||||
*.pyc binary
|
||||
3
dist/.gitignore
vendored
Normal file
@@ -0,0 +1,3 @@
|
||||
# Include your project-specific ignores in this file
|
||||
# Read about how to use .gitignore: https://help.github.com/articles/ignoring-files
|
||||
# Useful .gitignore templates: https://github.com/github/gitignore
|
||||
984
dist/.htaccess
vendored
Normal file
@@ -0,0 +1,984 @@
|
||||
# Apache Server Configs v2.14.0 | MIT License
|
||||
# https://github.com/h5bp/server-configs-apache
|
||||
|
||||
# (!) Using `.htaccess` files slows down Apache, therefore, if you have
|
||||
# access to the main server configuration file (which is usually called
|
||||
# `httpd.conf`), you should add this logic there.
|
||||
#
|
||||
# https://httpd.apache.org/docs/current/howto/htaccess.html.
|
||||
|
||||
# ######################################################################
|
||||
# # CROSS-ORIGIN #
|
||||
# ######################################################################
|
||||
|
||||
# ----------------------------------------------------------------------
|
||||
# | Cross-origin requests |
|
||||
# ----------------------------------------------------------------------
|
||||
|
||||
# Allow cross-origin requests.
|
||||
#
|
||||
# https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS
|
||||
# http://enable-cors.org/
|
||||
# http://www.w3.org/TR/cors/
|
||||
|
||||
# <IfModule mod_headers.c>
|
||||
# Header set Access-Control-Allow-Origin "*"
|
||||
# </IfModule>
|
||||
|
||||
# ----------------------------------------------------------------------
|
||||
# | Cross-origin images |
|
||||
# ----------------------------------------------------------------------
|
||||
|
||||
# Send the CORS header for images when browsers request it.
|
||||
#
|
||||
# https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image
|
||||
# https://blog.chromium.org/2011/07/using-cross-domain-images-in-webgl-and.html
|
||||
|
||||
<IfModule mod_setenvif.c>
|
||||
<IfModule mod_headers.c>
|
||||
<FilesMatch "\.(bmp|cur|gif|ico|jpe?g|png|svgz?|webp)$">
|
||||
SetEnvIf Origin ":" IS_CORS
|
||||
Header set Access-Control-Allow-Origin "*" env=IS_CORS
|
||||
</FilesMatch>
|
||||
</IfModule>
|
||||
</IfModule>
|
||||
|
||||
# ----------------------------------------------------------------------
|
||||
# | Cross-origin web fonts |
|
||||
# ----------------------------------------------------------------------
|
||||
|
||||
# Allow cross-origin access to web fonts.
|
||||
|
||||
<IfModule mod_headers.c>
|
||||
<FilesMatch "\.(eot|otf|tt[cf]|woff2?)$">
|
||||
Header set Access-Control-Allow-Origin "*"
|
||||
</FilesMatch>
|
||||
</IfModule>
|
||||
|
||||
# ----------------------------------------------------------------------
|
||||
# | Cross-origin resource timing |
|
||||
# ----------------------------------------------------------------------
|
||||
|
||||
# Allow cross-origin access to the timing information for all resources.
|
||||
#
|
||||
# If a resource isn't served with a `Timing-Allow-Origin` header that
|
||||
# would allow its timing information to be shared with the document,
|
||||
# some of the attributes of the `PerformanceResourceTiming` object will
|
||||
# be set to zero.
|
||||
#
|
||||
# http://www.w3.org/TR/resource-timing/
|
||||
# http://www.stevesouders.com/blog/2014/08/21/resource-timing-practical-tips/
|
||||
|
||||
# <IfModule mod_headers.c>
|
||||
# Header set Timing-Allow-Origin: "*"
|
||||
# </IfModule>
|
||||
|
||||
|
||||
# ######################################################################
|
||||
# # ERRORS #
|
||||
# ######################################################################
|
||||
|
||||
# ----------------------------------------------------------------------
|
||||
# | Custom error messages/pages |
|
||||
# ----------------------------------------------------------------------
|
||||
|
||||
# Customize what Apache returns to the client in case of an error.
|
||||
# https://httpd.apache.org/docs/current/mod/core.html#errordocument
|
||||
|
||||
ErrorDocument 404 /404.html
|
||||
|
||||
# ----------------------------------------------------------------------
|
||||
# | Error prevention |
|
||||
# ----------------------------------------------------------------------
|
||||
|
||||
# Disable the pattern matching based on filenames.
|
||||
#
|
||||
# This setting prevents Apache from returning a 404 error as the result
|
||||
# of a rewrite when the directory with the same name does not exist.
|
||||
#
|
||||
# https://httpd.apache.org/docs/current/content-negotiation.html#multiviews
|
||||
|
||||
Options -MultiViews
|
||||
|
||||
|
||||
# ######################################################################
|
||||
# # INTERNET EXPLORER #
|
||||
# ######################################################################
|
||||
|
||||
# ----------------------------------------------------------------------
|
||||
# | Document modes |
|
||||
# ----------------------------------------------------------------------
|
||||
|
||||
# Force Internet Explorer 8/9/10 to render pages in the highest mode
|
||||
# available in the various cases when it may not.
|
||||
#
|
||||
# https://hsivonen.fi/doctype/#ie8
|
||||
#
|
||||
# (!) Starting with Internet Explorer 11, document modes are deprecated.
|
||||
# If your business still relies on older web apps and services that were
|
||||
# designed for older versions of Internet Explorer, you might want to
|
||||
# consider enabling `Enterprise Mode` throughout your company.
|
||||
#
|
||||
# https://msdn.microsoft.com/en-us/library/ie/bg182625.aspx#docmode
|
||||
# http://blogs.msdn.com/b/ie/archive/2014/04/02/stay-up-to-date-with-enterprise-mode-for-internet-explorer-11.aspx
|
||||
|
||||
<IfModule mod_headers.c>
|
||||
|
||||
Header set X-UA-Compatible "IE=edge"
|
||||
|
||||
# `mod_headers` cannot match based on the content-type, however,
|
||||
# the `X-UA-Compatible` response header should be send only for
|
||||
# HTML documents and not for the other resources.
|
||||
|
||||
<FilesMatch "\.(appcache|atom|bbaw|bmp|crx|css|cur|eot|f4[abpv]|flv|geojson|gif|htc|ico|jpe?g|js|json(ld)?|m4[av]|manifest|map|mp4|oex|og[agv]|opus|otf|pdf|png|rdf|rss|safariextz|svgz?|swf|topojson|tt[cf]|txt|vcard|vcf|vtt|webapp|web[mp]|webmanifest|woff2?|xloc|xml|xpi)$">
|
||||
Header unset X-UA-Compatible
|
||||
</FilesMatch>
|
||||
|
||||
</IfModule>
|
||||
|
||||
# ----------------------------------------------------------------------
|
||||
# | Iframes cookies |
|
||||
# ----------------------------------------------------------------------
|
||||
|
||||
# Allow cookies to be set from iframes in Internet Explorer.
|
||||
#
|
||||
# https://msdn.microsoft.com/en-us/library/ms537343.aspx
|
||||
# http://www.w3.org/TR/2000/CR-P3P-20001215/
|
||||
|
||||
# <IfModule mod_headers.c>
|
||||
# Header set P3P "policyref=\"/w3c/p3p.xml\", CP=\"IDC DSP COR ADM DEVi TAIi PSA PSD IVAi IVDi CONi HIS OUR IND CNT\""
|
||||
# </IfModule>
|
||||
|
||||
|
||||
# ######################################################################
|
||||
# # MEDIA TYPES AND CHARACTER ENCODINGS #
|
||||
# ######################################################################
|
||||
|
||||
# ----------------------------------------------------------------------
|
||||
# | Media types |
|
||||
# ----------------------------------------------------------------------
|
||||
|
||||
# Serve resources with the proper media types (f.k.a. MIME types).
|
||||
#
|
||||
# https://www.iana.org/assignments/media-types/media-types.xhtml
|
||||
# https://httpd.apache.org/docs/current/mod/mod_mime.html#addtype
|
||||
|
||||
<IfModule mod_mime.c>
|
||||
|
||||
# Data interchange
|
||||
|
||||
AddType application/atom+xml atom
|
||||
AddType application/json json map topojson
|
||||
AddType application/ld+json jsonld
|
||||
AddType application/rss+xml rss
|
||||
AddType application/vnd.geo+json geojson
|
||||
AddType application/xml rdf xml
|
||||
|
||||
|
||||
# JavaScript
|
||||
|
||||
# Normalize to standard type.
|
||||
# https://tools.ietf.org/html/rfc4329#section-7.2
|
||||
|
||||
AddType application/javascript js
|
||||
|
||||
|
||||
# Manifest files
|
||||
|
||||
AddType application/manifest+json webmanifest
|
||||
AddType application/x-web-app-manifest+json webapp
|
||||
AddType text/cache-manifest appcache
|
||||
|
||||
|
||||
# Media files
|
||||
|
||||
AddType audio/mp4 f4a f4b m4a
|
||||
AddType audio/ogg oga ogg opus
|
||||
AddType image/bmp bmp
|
||||
AddType image/svg+xml svg svgz
|
||||
AddType image/webp webp
|
||||
AddType video/mp4 f4v f4p m4v mp4
|
||||
AddType video/ogg ogv
|
||||
AddType video/webm webm
|
||||
AddType video/x-flv flv
|
||||
|
||||
# Serving `.ico` image files with a different media type
|
||||
# prevents Internet Explorer from displaying then as images:
|
||||
# https://github.com/h5bp/html5-boilerplate/commit/37b5fec090d00f38de64b591bcddcb205aadf8ee
|
||||
|
||||
AddType image/x-icon cur ico
|
||||
|
||||
|
||||
# Web fonts
|
||||
|
||||
AddType application/font-woff woff
|
||||
AddType application/font-woff2 woff2
|
||||
AddType application/vnd.ms-fontobject eot
|
||||
|
||||
# Browsers usually ignore the font media types and simply sniff
|
||||
# the bytes to figure out the font type.
|
||||
# https://mimesniff.spec.whatwg.org/#matching-a-font-type-pattern
|
||||
#
|
||||
# However, Blink and WebKit based browsers will show a warning
|
||||
# in the console if the following font types are served with any
|
||||
# other media types.
|
||||
|
||||
AddType application/x-font-ttf ttc ttf
|
||||
AddType font/opentype otf
|
||||
|
||||
|
||||
# Other
|
||||
|
||||
AddType application/octet-stream safariextz
|
||||
AddType application/x-bb-appworld bbaw
|
||||
AddType application/x-chrome-extension crx
|
||||
AddType application/x-opera-extension oex
|
||||
AddType application/x-xpinstall xpi
|
||||
AddType text/vcard vcard vcf
|
||||
AddType text/vnd.rim.location.xloc xloc
|
||||
AddType text/vtt vtt
|
||||
AddType text/x-component htc
|
||||
|
||||
</IfModule>
|
||||
|
||||
# ----------------------------------------------------------------------
|
||||
# | Character encodings |
|
||||
# ----------------------------------------------------------------------
|
||||
|
||||
# Serve all resources labeled as `text/html` or `text/plain`
|
||||
# with the media type `charset` parameter set to `UTF-8`.
|
||||
#
|
||||
# https://httpd.apache.org/docs/current/mod/core.html#adddefaultcharset
|
||||
|
||||
AddDefaultCharset utf-8
|
||||
|
||||
# - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
|
||||
|
||||
# Serve the following file types with the media type `charset`
|
||||
# parameter set to `UTF-8`.
|
||||
#
|
||||
# https://httpd.apache.org/docs/current/mod/mod_mime.html#addcharset
|
||||
|
||||
<IfModule mod_mime.c>
|
||||
AddCharset utf-8 .atom \
|
||||
.bbaw \
|
||||
.css \
|
||||
.geojson \
|
||||
.js \
|
||||
.json \
|
||||
.jsonld \
|
||||
.manifest \
|
||||
.rdf \
|
||||
.rss \
|
||||
.topojson \
|
||||
.vtt \
|
||||
.webapp \
|
||||
.webmanifest \
|
||||
.xloc \
|
||||
.xml
|
||||
</IfModule>
|
||||
|
||||
|
||||
# ######################################################################
|
||||
# # REWRITES #
|
||||
# ######################################################################
|
||||
|
||||
# ----------------------------------------------------------------------
|
||||
# | Rewrite engine |
|
||||
# ----------------------------------------------------------------------
|
||||
|
||||
# (1) Turn on the rewrite engine (this is necessary in order for
|
||||
# the `RewriteRule` directives to work).
|
||||
#
|
||||
# https://httpd.apache.org/docs/current/mod/mod_rewrite.html#RewriteEngine
|
||||
#
|
||||
# (2) Enable the `FollowSymLinks` option if it isn't already.
|
||||
#
|
||||
# https://httpd.apache.org/docs/current/mod/core.html#options
|
||||
#
|
||||
# (3) If your web host doesn't allow the `FollowSymlinks` option,
|
||||
# you need to comment it out or remove it, and then uncomment
|
||||
# the `Options +SymLinksIfOwnerMatch` line (4), but be aware
|
||||
# of the performance impact.
|
||||
#
|
||||
# https://httpd.apache.org/docs/current/misc/perf-tuning.html#symlinks
|
||||
#
|
||||
# (4) Some cloud hosting services will require you set `RewriteBase`.
|
||||
#
|
||||
# https://www.rackspace.com/knowledge_center/frequently-asked-question/why-is-modrewrite-not-working-on-my-site
|
||||
# https://httpd.apache.org/docs/current/mod/mod_rewrite.html#rewritebase
|
||||
#
|
||||
# (5) Depending on how your server is set up, you may also need to
|
||||
# use the `RewriteOptions` directive to enable some options for
|
||||
# the rewrite engine.
|
||||
#
|
||||
# https://httpd.apache.org/docs/current/mod/mod_rewrite.html#rewriteoptions
|
||||
#
|
||||
# (6) Set %{ENV:PROTO} variable, to allow rewrites to redirect with the
|
||||
# appropriate schema automatically (http or https).
|
||||
|
||||
<IfModule mod_rewrite.c>
|
||||
|
||||
# (1)
|
||||
RewriteEngine On
|
||||
|
||||
# (2)
|
||||
Options +FollowSymlinks
|
||||
|
||||
# (3)
|
||||
# Options +SymLinksIfOwnerMatch
|
||||
|
||||
# (4)
|
||||
# RewriteBase /
|
||||
|
||||
# (5)
|
||||
# RewriteOptions <options>
|
||||
|
||||
# (6)
|
||||
RewriteCond %{HTTPS} =on
|
||||
RewriteRule ^ - [env=proto:https]
|
||||
RewriteCond %{HTTPS} !=on
|
||||
RewriteRule ^ - [env=proto:http]
|
||||
|
||||
</IfModule>
|
||||
|
||||
# ----------------------------------------------------------------------
|
||||
# | Forcing `https://` |
|
||||
# ----------------------------------------------------------------------
|
||||
|
||||
# Redirect from the `http://` to the `https://` version of the URL.
|
||||
# https://wiki.apache.org/httpd/RewriteHTTPToHTTPS
|
||||
|
||||
# <IfModule mod_rewrite.c>
|
||||
# RewriteEngine On
|
||||
# RewriteCond %{HTTPS} !=on
|
||||
# RewriteRule ^(.*)$ https://%{HTTP_HOST}/$1 [R=301,L]
|
||||
# </IfModule>
|
||||
|
||||
# ----------------------------------------------------------------------
|
||||
# | Suppressing / Forcing the `www.` at the beginning of URLs |
|
||||
# ----------------------------------------------------------------------
|
||||
|
||||
# The same content should never be available under two different
|
||||
# URLs, especially not with and without `www.` at the beginning.
|
||||
# This can cause SEO problems (duplicate content), and therefore,
|
||||
# you should choose one of the alternatives and redirect the other
|
||||
# one.
|
||||
#
|
||||
# By default `Option 1` (no `www.`) is activated.
|
||||
# http://no-www.org/faq.php?q=class_b
|
||||
#
|
||||
# If you would prefer to use `Option 2`, just comment out all the
|
||||
# lines from `Option 1` and uncomment the ones from `Option 2`.
|
||||
#
|
||||
# (!) NEVER USE BOTH RULES AT THE SAME TIME!
|
||||
|
||||
# - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
|
||||
|
||||
# Option 1: rewrite www.example.com → example.com
|
||||
|
||||
<IfModule mod_rewrite.c>
|
||||
RewriteEngine On
|
||||
RewriteCond %{HTTPS} !=on
|
||||
RewriteCond %{HTTP_HOST} ^www\.(.+)$ [NC]
|
||||
RewriteRule ^ %{ENV:PROTO}://%1%{REQUEST_URI} [R=301,L]
|
||||
</IfModule>
|
||||
|
||||
# - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
|
||||
|
||||
# Option 2: rewrite example.com → www.example.com
|
||||
#
|
||||
# Be aware that the following might not be a good idea if you use "real"
|
||||
# subdomains for certain parts of your website.
|
||||
|
||||
# <IfModule mod_rewrite.c>
|
||||
# RewriteEngine On
|
||||
# RewriteCond %{HTTPS} !=on
|
||||
# RewriteCond %{HTTP_HOST} !^www\. [NC]
|
||||
# RewriteCond %{SERVER_ADDR} !=127.0.0.1
|
||||
# RewriteCond %{SERVER_ADDR} !=::1
|
||||
# RewriteRule ^ %{ENV:PROTO}://www.%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
|
||||
# </IfModule>
|
||||
|
||||
|
||||
# ######################################################################
|
||||
# # SECURITY #
|
||||
# ######################################################################
|
||||
|
||||
# ----------------------------------------------------------------------
|
||||
# | Clickjacking |
|
||||
# ----------------------------------------------------------------------
|
||||
|
||||
# Protect website against clickjacking.
|
||||
#
|
||||
# The example below sends the `X-Frame-Options` response header with
|
||||
# the value `DENY`, informing browsers not to display the content of
|
||||
# the web page in any frame.
|
||||
#
|
||||
# This might not be the best setting for everyone. You should read
|
||||
# about the other two possible values the `X-Frame-Options` header
|
||||
# field can have: `SAMEORIGIN` and `ALLOW-FROM`.
|
||||
# https://tools.ietf.org/html/rfc7034#section-2.1.
|
||||
#
|
||||
# Keep in mind that while you could send the `X-Frame-Options` header
|
||||
# for all of your website’s pages, this has the potential downside that
|
||||
# it forbids even non-malicious framing of your content (e.g.: when
|
||||
# users visit your website using a Google Image Search results page).
|
||||
#
|
||||
# Nonetheless, you should ensure that you send the `X-Frame-Options`
|
||||
# header for all pages that allow a user to make a state changing
|
||||
# operation (e.g: pages that contain one-click purchase links, checkout
|
||||
# or bank-transfer confirmation pages, pages that make permanent
|
||||
# configuration changes, etc.).
|
||||
#
|
||||
# Sending the `X-Frame-Options` header can also protect your website
|
||||
# against more than just clickjacking attacks:
|
||||
# https://cure53.de/xfo-clickjacking.pdf.
|
||||
#
|
||||
# https://tools.ietf.org/html/rfc7034
|
||||
# http://blogs.msdn.com/b/ieinternals/archive/2010/03/30/combating-clickjacking-with-x-frame-options.aspx
|
||||
# https://www.owasp.org/index.php/Clickjacking
|
||||
|
||||
# <IfModule mod_headers.c>
|
||||
|
||||
# Header set X-Frame-Options "DENY"
|
||||
|
||||
# # `mod_headers` cannot match based on the content-type, however,
|
||||
# # the `X-Frame-Options` response header should be send only for
|
||||
# # HTML documents and not for the other resources.
|
||||
|
||||
# <FilesMatch "\.(appcache|atom|bbaw|bmp|crx|css|cur|eot|f4[abpv]|flv|geojson|gif|htc|ico|jpe?g|js|json(ld)?|m4[av]|manifest|map|mp4|oex|og[agv]|opus|otf|pdf|png|rdf|rss|safariextz|svgz?|swf|topojson|tt[cf]|txt|vcard|vcf|vtt|webapp|web[mp]|webmanifest|woff2?|xloc|xml|xpi)$">
|
||||
# Header unset X-Frame-Options
|
||||
# </FilesMatch>
|
||||
|
||||
# </IfModule>
|
||||
|
||||
# ----------------------------------------------------------------------
|
||||
# | Content Security Policy (CSP) |
|
||||
# ----------------------------------------------------------------------
|
||||
|
||||
# Mitigate the risk of cross-site scripting and other content-injection
|
||||
# attacks.
|
||||
#
|
||||
# This can be done by setting a `Content Security Policy` which
|
||||
# whitelists trusted sources of content for your website.
|
||||
#
|
||||
# The example header below allows ONLY scripts that are loaded from
|
||||
# the current website's origin (no inline scripts, no CDN, etc).
|
||||
# That almost certainly won't work as-is for your website!
|
||||
#
|
||||
# To make things easier, you can use an online CSP header generator
|
||||
# such as: http://cspisawesome.com/.
|
||||
#
|
||||
# http://content-security-policy.com/
|
||||
# http://www.html5rocks.com/en/tutorials/security/content-security-policy/
|
||||
# http://www.w3.org/TR/CSP11/).
|
||||
|
||||
# <IfModule mod_headers.c>
|
||||
|
||||
# Header set Content-Security-Policy "script-src 'self'; object-src 'self'"
|
||||
|
||||
# # `mod_headers` cannot match based on the content-type, however,
|
||||
# # the `Content-Security-Policy` response header should be send
|
||||
# # only for HTML documents and not for the other resources.
|
||||
|
||||
# <FilesMatch "\.(appcache|atom|bbaw|bmp|crx|css|cur|eot|f4[abpv]|flv|geojson|gif|htc|ico|jpe?g|js|json(ld)?|m4[av]|manifest|map|mp4|oex|og[agv]|opus|otf|pdf|png|rdf|rss|safariextz|svgz?|swf|topojson|tt[cf]|txt|vcard|vcf|vtt|webapp|web[mp]|webmanifest|woff2?|xloc|xml|xpi)$">
|
||||
# Header unset Content-Security-Policy
|
||||
# </FilesMatch>
|
||||
|
||||
# </IfModule>
|
||||
|
||||
# ----------------------------------------------------------------------
|
||||
# | File access |
|
||||
# ----------------------------------------------------------------------
|
||||
|
||||
# Block access to directories without a default document.
|
||||
#
|
||||
# You should leave the following uncommented, as you shouldn't allow
|
||||
# anyone to surf through every directory on your server (which may
|
||||
# includes rather private places such as the CMS's directories).
|
||||
|
||||
<IfModule mod_autoindex.c>
|
||||
Options -Indexes
|
||||
</IfModule>
|
||||
|
||||
# - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
|
||||
|
||||
# Block access to all hidden files and directories with the exception of
|
||||
# the visible content from within the `/.well-known/` hidden directory.
|
||||
#
|
||||
# These types of files usually contain user preferences or the preserved
|
||||
# state of an utility, and can include rather private places like, for
|
||||
# example, the `.git` or `.svn` directories.
|
||||
#
|
||||
# The `/.well-known/` directory represents the standard (RFC 5785) path
|
||||
# prefix for "well-known locations" (e.g.: `/.well-known/manifest.json`,
|
||||
# `/.well-known/keybase.txt`), and therefore, access to its visible
|
||||
# content should not be blocked.
|
||||
#
|
||||
# https://www.mnot.net/blog/2010/04/07/well-known
|
||||
# https://tools.ietf.org/html/rfc5785
|
||||
|
||||
<IfModule mod_rewrite.c>
|
||||
RewriteEngine On
|
||||
RewriteCond %{REQUEST_URI} "!(^|/)\.well-known/([^./]+./?)+$" [NC]
|
||||
RewriteCond %{SCRIPT_FILENAME} -d [OR]
|
||||
RewriteCond %{SCRIPT_FILENAME} -f
|
||||
RewriteRule "(^|/)\." - [F]
|
||||
</IfModule>
|
||||
|
||||
# - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
|
||||
|
||||
# Block access to files that can expose sensitive information.
|
||||
#
|
||||
# By default, block access to backup and source files that may be
|
||||
# left by some text editors and can pose a security risk when anyone
|
||||
# has access to them.
|
||||
#
|
||||
# http://feross.org/cmsploit/
|
||||
#
|
||||
# (!) Update the `<FilesMatch>` regular expression from below to
|
||||
# include any files that might end up on your production server and
|
||||
# can expose sensitive information about your website. These files may
|
||||
# include: configuration files, files that contain metadata about the
|
||||
# project (e.g.: project dependencies), build scripts, etc..
|
||||
|
||||
<FilesMatch "(^#.*#|\.(bak|conf|dist|fla|in[ci]|log|psd|sh|sql|sw[op])|~)$">
|
||||
|
||||
# Apache < 2.3
|
||||
<IfModule !mod_authz_core.c>
|
||||
Order allow,deny
|
||||
Deny from all
|
||||
Satisfy All
|
||||
</IfModule>
|
||||
|
||||
# Apache ≥ 2.3
|
||||
<IfModule mod_authz_core.c>
|
||||
Require all denied
|
||||
</IfModule>
|
||||
|
||||
</FilesMatch>
|
||||
|
||||
# ----------------------------------------------------------------------
|
||||
# | HTTP Strict Transport Security (HSTS) |
|
||||
# ----------------------------------------------------------------------
|
||||
|
||||
# Force client-side SSL redirection.
|
||||
#
|
||||
# If a user types `example.com` in their browser, even if the server
|
||||
# redirects them to the secure version of the website, that still leaves
|
||||
# a window of opportunity (the initial HTTP connection) for an attacker
|
||||
# to downgrade or redirect the request.
|
||||
#
|
||||
# The following header ensures that browser will ONLY connect to your
|
||||
# server via HTTPS, regardless of what the users type in the browser's
|
||||
# address bar.
|
||||
#
|
||||
# (!) Remove the `includeSubDomains` optional directive if the website's
|
||||
# subdomains are not using HTTPS.
|
||||
#
|
||||
# http://www.html5rocks.com/en/tutorials/security/transport-layer-security/
|
||||
# https://tools.ietf.org/html/draft-ietf-websec-strict-transport-sec-14#section-6.1
|
||||
# http://blogs.msdn.com/b/ieinternals/archive/2014/08/18/hsts-strict-transport-security-attacks-mitigations-deployment-https.aspx
|
||||
|
||||
# <IfModule mod_headers.c>
|
||||
# Header always set Strict-Transport-Security "max-age=16070400; includeSubDomains"
|
||||
# </IfModule>
|
||||
|
||||
# ----------------------------------------------------------------------
|
||||
# | Reducing MIME type security risks |
|
||||
# ----------------------------------------------------------------------
|
||||
|
||||
# Prevent some browsers from MIME-sniffing the response.
|
||||
#
|
||||
# This reduces exposure to drive-by download attacks and cross-origin
|
||||
# data leaks, and should be left uncommented, especially if the server
|
||||
# is serving user-uploaded content or content that could potentially be
|
||||
# treated as executable by the browser.
|
||||
#
|
||||
# http://www.slideshare.net/hasegawayosuke/owasp-hasegawa
|
||||
# http://blogs.msdn.com/b/ie/archive/2008/07/02/ie8-security-part-v-comprehensive-protection.aspx
|
||||
# https://msdn.microsoft.com/en-us/library/ie/gg622941.aspx
|
||||
# https://mimesniff.spec.whatwg.org/
|
||||
|
||||
<IfModule mod_headers.c>
|
||||
Header set X-Content-Type-Options "nosniff"
|
||||
</IfModule>
|
||||
|
||||
# ----------------------------------------------------------------------
|
||||
# | Reflected Cross-Site Scripting (XSS) attacks |
|
||||
# ----------------------------------------------------------------------
|
||||
|
||||
# (1) Try to re-enable the cross-site scripting (XSS) filter built
|
||||
# into most web browsers.
|
||||
#
|
||||
# The filter is usually enabled by default, but in some cases it
|
||||
# may be disabled by the user. However, in Internet Explorer for
|
||||
# example, it can be re-enabled just by sending the
|
||||
# `X-XSS-Protection` header with the value of `1`.
|
||||
#
|
||||
# (2) Prevent web browsers from rendering the web page if a potential
|
||||
# reflected (a.k.a non-persistent) XSS attack is detected by the
|
||||
# filter.
|
||||
#
|
||||
# By default, if the filter is enabled and browsers detect a
|
||||
# reflected XSS attack, they will attempt to block the attack
|
||||
# by making the smallest possible modifications to the returned
|
||||
# web page.
|
||||
#
|
||||
# Unfortunately, in some browsers (e.g.: Internet Explorer),
|
||||
# this default behavior may allow the XSS filter to be exploited,
|
||||
# thereby, it's better to inform browsers to prevent the rendering
|
||||
# of the page altogether, instead of attempting to modify it.
|
||||
#
|
||||
# https://hackademix.net/2009/11/21/ies-xss-filter-creates-xss-vulnerabilities
|
||||
#
|
||||
# (!) Do not rely on the XSS filter to prevent XSS attacks! Ensure that
|
||||
# you are taking all possible measures to prevent XSS attacks, the
|
||||
# most obvious being: validating and sanitizing your website's inputs.
|
||||
#
|
||||
# http://blogs.msdn.com/b/ie/archive/2008/07/02/ie8-security-part-iv-the-xss-filter.aspx
|
||||
# http://blogs.msdn.com/b/ieinternals/archive/2011/01/31/controlling-the-internet-explorer-xss-filter-with-the-x-xss-protection-http-header.aspx
|
||||
# https://www.owasp.org/index.php/Cross-site_Scripting_%28XSS%29
|
||||
|
||||
# <IfModule mod_headers.c>
|
||||
|
||||
# # (1) (2)
|
||||
# Header set X-XSS-Protection "1; mode=block"
|
||||
|
||||
# # `mod_headers` cannot match based on the content-type, however,
|
||||
# # the `X-XSS-Protection` response header should be send only for
|
||||
# # HTML documents and not for the other resources.
|
||||
|
||||
# <FilesMatch "\.(appcache|atom|bbaw|bmp|crx|css|cur|eot|f4[abpv]|flv|geojson|gif|htc|ico|jpe?g|js|json(ld)?|m4[av]|manifest|map|mp4|oex|og[agv]|opus|otf|pdf|png|rdf|rss|safariextz|svgz?|swf|topojson|tt[cf]|txt|vcard|vcf|vtt|webapp|web[mp]|webmanifest|woff2?|xloc|xml|xpi)$">
|
||||
# Header unset X-XSS-Protection
|
||||
# </FilesMatch>
|
||||
|
||||
# </IfModule>
|
||||
|
||||
# ----------------------------------------------------------------------
|
||||
# | Server-side technology information |
|
||||
# ----------------------------------------------------------------------
|
||||
|
||||
# Remove the `X-Powered-By` response header that:
|
||||
#
|
||||
# * is set by some frameworks and server-side languages
|
||||
# (e.g.: ASP.NET, PHP), and its value contains information
|
||||
# about them (e.g.: their name, version number)
|
||||
#
|
||||
# * doesn't provide any value as far as users are concern,
|
||||
# and in some cases, the information provided by it can
|
||||
# be used by attackers
|
||||
#
|
||||
# (!) If you can, you should disable the `X-Powered-By` header from the
|
||||
# language / framework level (e.g.: for PHP, you can do that by setting
|
||||
# `expose_php = off` in `php.ini`)
|
||||
#
|
||||
# https://php.net/manual/en/ini.core.php#ini.expose-php
|
||||
|
||||
<IfModule mod_headers.c>
|
||||
Header unset X-Powered-By
|
||||
</IfModule>
|
||||
|
||||
# ----------------------------------------------------------------------
|
||||
# | Server software information |
|
||||
# ----------------------------------------------------------------------
|
||||
|
||||
# Prevent Apache from adding a trailing footer line containing
|
||||
# information about the server to the server-generated documents
|
||||
# (e.g.: error messages, directory listings, etc.)
|
||||
#
|
||||
# https://httpd.apache.org/docs/current/mod/core.html#serversignature
|
||||
|
||||
ServerSignature Off
|
||||
|
||||
# - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
|
||||
|
||||
# Prevent Apache from sending in the `Server` response header its
|
||||
# exact version number, the description of the generic OS-type or
|
||||
# information about its compiled-in modules.
|
||||
#
|
||||
# (!) The `ServerTokens` directive will only work in the main server
|
||||
# configuration file, so don't try to enable it in the `.htaccess` file!
|
||||
#
|
||||
# https://httpd.apache.org/docs/current/mod/core.html#servertokens
|
||||
|
||||
#ServerTokens Prod
|
||||
|
||||
|
||||
# ######################################################################
|
||||
# # WEB PERFORMANCE #
|
||||
# ######################################################################
|
||||
|
||||
# ----------------------------------------------------------------------
|
||||
# | Compression |
|
||||
# ----------------------------------------------------------------------
|
||||
|
||||
<IfModule mod_deflate.c>
|
||||
|
||||
# Force compression for mangled `Accept-Encoding` request headers
|
||||
# https://developer.yahoo.com/blogs/ydn/pushing-beyond-gzipping-25601.html
|
||||
|
||||
<IfModule mod_setenvif.c>
|
||||
<IfModule mod_headers.c>
|
||||
SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s*,?\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding
|
||||
RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE_Accept-Encoding
|
||||
</IfModule>
|
||||
</IfModule>
|
||||
|
||||
# - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
|
||||
|
||||
# Compress all output labeled with one of the following media types.
|
||||
#
|
||||
# (!) For Apache versions below version 2.3.7 you don't need to
|
||||
# enable `mod_filter` and can remove the `<IfModule mod_filter.c>`
|
||||
# and `</IfModule>` lines as `AddOutputFilterByType` is still in
|
||||
# the core directives.
|
||||
#
|
||||
# https://httpd.apache.org/docs/current/mod/mod_filter.html#addoutputfilterbytype
|
||||
|
||||
<IfModule mod_filter.c>
|
||||
AddOutputFilterByType DEFLATE "application/atom+xml" \
|
||||
"application/javascript" \
|
||||
"application/json" \
|
||||
"application/ld+json" \
|
||||
"application/manifest+json" \
|
||||
"application/rdf+xml" \
|
||||
"application/rss+xml" \
|
||||
"application/schema+json" \
|
||||
"application/vnd.geo+json" \
|
||||
"application/vnd.ms-fontobject" \
|
||||
"application/x-font-ttf" \
|
||||
"application/x-javascript" \
|
||||
"application/x-web-app-manifest+json" \
|
||||
"application/xhtml+xml" \
|
||||
"application/xml" \
|
||||
"font/eot" \
|
||||
"font/opentype" \
|
||||
"image/bmp" \
|
||||
"image/svg+xml" \
|
||||
"image/vnd.microsoft.icon" \
|
||||
"image/x-icon" \
|
||||
"text/cache-manifest" \
|
||||
"text/css" \
|
||||
"text/html" \
|
||||
"text/javascript" \
|
||||
"text/plain" \
|
||||
"text/vcard" \
|
||||
"text/vnd.rim.location.xloc" \
|
||||
"text/vtt" \
|
||||
"text/x-component" \
|
||||
"text/x-cross-domain-policy" \
|
||||
"text/xml"
|
||||
|
||||
</IfModule>
|
||||
|
||||
# - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
|
||||
|
||||
# Map the following filename extensions to the specified
|
||||
# encoding type in order to make Apache serve the file types
|
||||
# with the appropriate `Content-Encoding` response header
|
||||
# (do note that this will NOT make Apache compress them!).
|
||||
#
|
||||
# If these files types would be served without an appropriate
|
||||
# `Content-Enable` response header, client applications (e.g.:
|
||||
# browsers) wouldn't know that they first need to uncompress
|
||||
# the response, and thus, wouldn't be able to understand the
|
||||
# content.
|
||||
#
|
||||
# https://httpd.apache.org/docs/current/mod/mod_mime.html#addencoding
|
||||
|
||||
<IfModule mod_mime.c>
|
||||
AddEncoding gzip svgz
|
||||
</IfModule>
|
||||
|
||||
</IfModule>
|
||||
|
||||
# ----------------------------------------------------------------------
|
||||
# | Content transformation |
|
||||
# ----------------------------------------------------------------------
|
||||
|
||||
# Prevent intermediate caches or proxies (e.g.: such as the ones
|
||||
# used by mobile network providers) from modifying the website's
|
||||
# content.
|
||||
#
|
||||
# https://tools.ietf.org/html/rfc2616#section-14.9.5
|
||||
#
|
||||
# (!) If you are using `mod_pagespeed`, please note that setting
|
||||
# the `Cache-Control: no-transform` response header will prevent
|
||||
# `PageSpeed` from rewriting `HTML` files, and, if the
|
||||
# `ModPagespeedDisableRewriteOnNoTransform` directive isn't set
|
||||
# to `off`, also from rewriting other resources.
|
||||
#
|
||||
# https://developers.google.com/speed/pagespeed/module/configuration#notransform
|
||||
|
||||
# <IfModule mod_headers.c>
|
||||
# Header merge Cache-Control "no-transform"
|
||||
# </IfModule>
|
||||
|
||||
# ----------------------------------------------------------------------
|
||||
# | ETags |
|
||||
# ----------------------------------------------------------------------
|
||||
|
||||
# Remove `ETags` as resources are sent with far-future expires headers.
|
||||
#
|
||||
# https://developer.yahoo.com/performance/rules.html#etags
|
||||
# https://tools.ietf.org/html/rfc7232#section-2.3
|
||||
|
||||
# `FileETag None` doesn't work in all cases.
|
||||
<IfModule mod_headers.c>
|
||||
Header unset ETag
|
||||
</IfModule>
|
||||
|
||||
FileETag None
|
||||
|
||||
# ----------------------------------------------------------------------
|
||||
# | Expires headers |
|
||||
# ----------------------------------------------------------------------
|
||||
|
||||
# Serve resources with far-future expires headers.
|
||||
#
|
||||
# (!) If you don't control versioning with filename-based
|
||||
# cache busting, you should consider lowering the cache times
|
||||
# to something like one week.
|
||||
#
|
||||
# https://httpd.apache.org/docs/current/mod/mod_expires.html
|
||||
|
||||
<IfModule mod_expires.c>
|
||||
|
||||
ExpiresActive on
|
||||
ExpiresDefault "access plus 1 month"
|
||||
|
||||
# CSS
|
||||
|
||||
ExpiresByType text/css "access plus 1 year"
|
||||
|
||||
|
||||
# Data interchange
|
||||
|
||||
ExpiresByType application/atom+xml "access plus 1 hour"
|
||||
ExpiresByType application/rdf+xml "access plus 1 hour"
|
||||
ExpiresByType application/rss+xml "access plus 1 hour"
|
||||
|
||||
ExpiresByType application/json "access plus 0 seconds"
|
||||
ExpiresByType application/ld+json "access plus 0 seconds"
|
||||
ExpiresByType application/schema+json "access plus 0 seconds"
|
||||
ExpiresByType application/vnd.geo+json "access plus 0 seconds"
|
||||
ExpiresByType application/xml "access plus 0 seconds"
|
||||
ExpiresByType text/xml "access plus 0 seconds"
|
||||
|
||||
|
||||
# Favicon (cannot be renamed!) and cursor images
|
||||
|
||||
ExpiresByType image/vnd.microsoft.icon "access plus 1 week"
|
||||
ExpiresByType image/x-icon "access plus 1 week"
|
||||
|
||||
# HTML
|
||||
|
||||
ExpiresByType text/html "access plus 0 seconds"
|
||||
|
||||
|
||||
# JavaScript
|
||||
|
||||
ExpiresByType application/javascript "access plus 1 year"
|
||||
ExpiresByType application/x-javascript "access plus 1 year"
|
||||
ExpiresByType text/javascript "access plus 1 year"
|
||||
|
||||
|
||||
# Manifest files
|
||||
|
||||
ExpiresByType application/manifest+json "access plus 1 week"
|
||||
ExpiresByType application/x-web-app-manifest+json "access plus 0 seconds"
|
||||
ExpiresByType text/cache-manifest "access plus 0 seconds"
|
||||
|
||||
|
||||
# Media files
|
||||
|
||||
ExpiresByType audio/ogg "access plus 1 month"
|
||||
ExpiresByType image/bmp "access plus 1 month"
|
||||
ExpiresByType image/gif "access plus 1 month"
|
||||
ExpiresByType image/jpeg "access plus 1 month"
|
||||
ExpiresByType image/png "access plus 1 month"
|
||||
ExpiresByType image/svg+xml "access plus 1 month"
|
||||
ExpiresByType image/webp "access plus 1 month"
|
||||
ExpiresByType video/mp4 "access plus 1 month"
|
||||
ExpiresByType video/ogg "access plus 1 month"
|
||||
ExpiresByType video/webm "access plus 1 month"
|
||||
|
||||
|
||||
# Web fonts
|
||||
|
||||
# Embedded OpenType (EOT)
|
||||
ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
|
||||
ExpiresByType font/eot "access plus 1 month"
|
||||
|
||||
# OpenType
|
||||
ExpiresByType font/opentype "access plus 1 month"
|
||||
|
||||
# TrueType
|
||||
ExpiresByType application/x-font-ttf "access plus 1 month"
|
||||
|
||||
# Web Open Font Format (WOFF) 1.0
|
||||
ExpiresByType application/font-woff "access plus 1 month"
|
||||
ExpiresByType application/x-font-woff "access plus 1 month"
|
||||
ExpiresByType font/woff "access plus 1 month"
|
||||
|
||||
# Web Open Font Format (WOFF) 2.0
|
||||
ExpiresByType application/font-woff2 "access plus 1 month"
|
||||
|
||||
|
||||
# Other
|
||||
|
||||
ExpiresByType text/x-cross-domain-policy "access plus 1 week"
|
||||
|
||||
</IfModule>
|
||||
|
||||
# ----------------------------------------------------------------------
|
||||
# | File concatenation |
|
||||
# ----------------------------------------------------------------------
|
||||
|
||||
# Allow concatenation from within specific files.
|
||||
#
|
||||
# e.g.:
|
||||
#
|
||||
# If you have the following lines in a file called, for
|
||||
# example, `main.combined.js`:
|
||||
#
|
||||
# <!--#include file="js/jquery.js" -->
|
||||
# <!--#include file="js/jquery.timer.js" -->
|
||||
#
|
||||
# Apache will replace those lines with the content of the
|
||||
# specified files.
|
||||
|
||||
# <IfModule mod_include.c>
|
||||
# <FilesMatch "\.combined\.js$">
|
||||
# Options +Includes
|
||||
# AddOutputFilterByType INCLUDES application/javascript \
|
||||
# application/x-javascript \
|
||||
# text/javascript
|
||||
# SetOutputFilter INCLUDES
|
||||
# </FilesMatch>
|
||||
# <FilesMatch "\.combined\.css$">
|
||||
# Options +Includes
|
||||
# AddOutputFilterByType INCLUDES text/css
|
||||
# SetOutputFilter INCLUDES
|
||||
# </FilesMatch>
|
||||
# </IfModule>
|
||||
|
||||
# ----------------------------------------------------------------------
|
||||
# | Filename-based cache busting |
|
||||
# ----------------------------------------------------------------------
|
||||
|
||||
# If you're not using a build process to manage your filename version
|
||||
# revving, you might want to consider enabling the following directives
|
||||
# to route all requests such as `/style.12345.css` to `/style.css`.
|
||||
#
|
||||
# To understand why this is important and even a better solution than
|
||||
# using something like `*.css?v231`, please see:
|
||||
# http://www.stevesouders.com/blog/2008/08/23/revving-filenames-dont-use-querystring/
|
||||
|
||||
# <IfModule mod_rewrite.c>
|
||||
# RewriteEngine On
|
||||
# RewriteCond %{REQUEST_FILENAME} !-f
|
||||
# RewriteRule ^(.+)\.(\d+)\.(bmp|css|cur|gif|ico|jpe?g|js|png|svgz?|webp|webmanifest)$ $1.$3 [L]
|
||||
# </IfModule>
|
||||
60
dist/404.html
vendored
Normal file
@@ -0,0 +1,60 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Page Not Found</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<style>
|
||||
|
||||
* {
|
||||
line-height: 1.2;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
html {
|
||||
color: #888;
|
||||
display: table;
|
||||
font-family: sans-serif;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
margin: 2em auto;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #555;
|
||||
font-size: 2em;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0 auto;
|
||||
width: 280px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 280px) {
|
||||
|
||||
body, p {
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.5em;
|
||||
margin: 0 0 0.3em;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Page Not Found</h1>
|
||||
<p>Sorry, but the page you were trying to view does not exist.</p>
|
||||
</body>
|
||||
</html>
|
||||
<!-- IE needs 512+ bytes: https://blogs.msdn.microsoft.com/ieinternals/2010/08/18/friendly-http-error-pages/ -->
|
||||
19
dist/LICENSE.txt
vendored
Normal file
@@ -0,0 +1,19 @@
|
||||
Copyright (c) HTML5 Boilerplate
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy of
|
||||
this software and associated documentation files (the "Software"), to deal in
|
||||
the Software without restriction, including without limitation the rights to
|
||||
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
|
||||
of the Software, and to permit persons to whom the Software is furnished to do
|
||||
so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
12
dist/browserconfig.xml
vendored
Normal file
@@ -0,0 +1,12 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Please read: https://msdn.microsoft.com/en-us/library/ie/dn455106.aspx -->
|
||||
<browserconfig>
|
||||
<msapplication>
|
||||
<tile>
|
||||
<square70x70logo src="tile.png"/>
|
||||
<square150x150logo src="tile.png"/>
|
||||
<wide310x150logo src="tile-wide.png"/>
|
||||
<square310x310logo src="tile.png"/>
|
||||
</tile>
|
||||
</msapplication>
|
||||
</browserconfig>
|
||||
290
dist/css/main.css
vendored
Normal file
@@ -0,0 +1,290 @@
|
||||
/*! HTML5 Boilerplate v5.3.0 | MIT License | https://html5boilerplate.com/ */
|
||||
|
||||
/*
|
||||
* What follows is the result of much research on cross-browser styling.
|
||||
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
|
||||
* Kroc Camen, and the H5BP dev community and team.
|
||||
*/
|
||||
|
||||
/* ==========================================================================
|
||||
Base styles: opinionated defaults
|
||||
========================================================================== */
|
||||
|
||||
html {
|
||||
color: #222;
|
||||
font-size: 1em;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/*
|
||||
* Remove text-shadow in selection highlight:
|
||||
* https://twitter.com/miketaylr/status/12228805301
|
||||
*
|
||||
* Vendor-prefixed and regular ::selection selectors cannot be combined:
|
||||
* https://stackoverflow.com/a/16982510/7133471
|
||||
*
|
||||
* Customize the background color to match your design.
|
||||
*/
|
||||
|
||||
::-moz-selection {
|
||||
background: #b3d4fc;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: #b3d4fc;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
/*
|
||||
* A better looking default horizontal rule
|
||||
*/
|
||||
|
||||
hr {
|
||||
display: block;
|
||||
height: 1px;
|
||||
border: 0;
|
||||
border-top: 1px solid #ccc;
|
||||
margin: 1em 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* Remove the gap between audio, canvas, iframes,
|
||||
* images, videos and the bottom of their containers:
|
||||
* https://github.com/h5bp/html5-boilerplate/issues/440
|
||||
*/
|
||||
|
||||
audio,
|
||||
canvas,
|
||||
iframe,
|
||||
img,
|
||||
svg,
|
||||
video {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/*
|
||||
* Remove default fieldset styles.
|
||||
*/
|
||||
|
||||
fieldset {
|
||||
border: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* Allow only vertical resizing of textareas.
|
||||
*/
|
||||
|
||||
textarea {
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Browser Upgrade Prompt
|
||||
========================================================================== */
|
||||
|
||||
.browserupgrade {
|
||||
margin: 0.2em 0;
|
||||
background: #ccc;
|
||||
color: #000;
|
||||
padding: 0.2em 0;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Author's custom styles
|
||||
========================================================================== */
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* ==========================================================================
|
||||
Helper classes
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Hide visually and from screen readers
|
||||
*/
|
||||
|
||||
.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/*
|
||||
* Hide only visually, but have it available for screen readers:
|
||||
* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
|
||||
*
|
||||
* 1. For long content, line feeds are not interpreted as spaces and small width
|
||||
* causes content to wrap 1 word per line:
|
||||
* https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
|
||||
*/
|
||||
|
||||
.visuallyhidden {
|
||||
border: 0;
|
||||
-webkit-clip-path: inset(50%);
|
||||
clip-path: inset(50%);
|
||||
display: inline-block;
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
width: 1px;
|
||||
white-space: nowrap; /* 1 */
|
||||
}
|
||||
|
||||
/*
|
||||
* Extends the .visuallyhidden class to allow the element
|
||||
* to be focusable when navigated to via the keyboard:
|
||||
* https://www.drupal.org/node/897638
|
||||
*/
|
||||
|
||||
.visuallyhidden.focusable:active,
|
||||
.visuallyhidden.focusable:focus {
|
||||
clip: auto;
|
||||
-webkit-clip-path: none;
|
||||
clip-path: none;
|
||||
height: auto;
|
||||
margin: 0;
|
||||
overflow: visible;
|
||||
position: static;
|
||||
width: auto;
|
||||
white-space: inherit;
|
||||
}
|
||||
|
||||
/*
|
||||
* Hide visually and from screen readers, but maintain layout
|
||||
*/
|
||||
|
||||
.invisible {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
/*
|
||||
* Clearfix: contain floats
|
||||
*
|
||||
* For modern browsers
|
||||
* 1. The space content is one way to avoid an Opera bug when the
|
||||
* `contenteditable` attribute is included anywhere else in the document.
|
||||
* Otherwise it causes space to appear at the top and bottom of elements
|
||||
* that receive the `clearfix` class.
|
||||
* 2. The use of `table` rather than `block` is only necessary if using
|
||||
* `:before` to contain the top-margins of child elements.
|
||||
*/
|
||||
|
||||
.clearfix:before,
|
||||
.clearfix:after {
|
||||
content: " "; /* 1 */
|
||||
display: table; /* 2 */
|
||||
}
|
||||
|
||||
.clearfix:after {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
EXAMPLE Media Queries for Responsive Design.
|
||||
These examples override the primary ('mobile first') styles.
|
||||
Modify as content requires.
|
||||
========================================================================== */
|
||||
|
||||
@media only screen and (min-width: 35em) {
|
||||
/* Style adjustments for viewports that meet the condition */
|
||||
}
|
||||
|
||||
@media print,
|
||||
(-webkit-min-device-pixel-ratio: 1.25),
|
||||
(min-resolution: 1.25dppx),
|
||||
(min-resolution: 120dpi) {
|
||||
/* Style adjustments for high resolution devices */
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Print styles.
|
||||
Inlined to avoid the additional HTTP request:
|
||||
http://www.phpied.com/delay-loading-your-print-css/
|
||||
========================================================================== */
|
||||
|
||||
@media print {
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
background: transparent !important;
|
||||
color: #000 !important; /* Black prints faster:
|
||||
http://www.sanbeiji.com/archives/953 */
|
||||
box-shadow: none !important;
|
||||
text-shadow: none !important;
|
||||
}
|
||||
|
||||
a,
|
||||
a:visited {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
a[href]:after {
|
||||
content: " (" attr(href) ")";
|
||||
}
|
||||
|
||||
abbr[title]:after {
|
||||
content: " (" attr(title) ")";
|
||||
}
|
||||
|
||||
/*
|
||||
* Don't show links that are fragment identifiers,
|
||||
* or use the `javascript:` pseudo protocol
|
||||
*/
|
||||
|
||||
a[href^="#"]:after,
|
||||
a[href^="javascript:"]:after {
|
||||
content: "";
|
||||
}
|
||||
|
||||
pre {
|
||||
white-space: pre-wrap !important;
|
||||
}
|
||||
pre,
|
||||
blockquote {
|
||||
border: 1px solid #999;
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
|
||||
/*
|
||||
* Printing Tables:
|
||||
* http://css-discuss.incutio.com/wiki/Printing_Tables
|
||||
*/
|
||||
|
||||
thead {
|
||||
display: table-header-group;
|
||||
}
|
||||
|
||||
tr,
|
||||
img {
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
|
||||
p,
|
||||
h2,
|
||||
h3 {
|
||||
orphans: 3;
|
||||
widows: 3;
|
||||
}
|
||||
|
||||
h2,
|
||||
h3 {
|
||||
page-break-after: avoid;
|
||||
}
|
||||
}
|
||||
447
dist/css/normalize.css
vendored
Normal file
@@ -0,0 +1,447 @@
|
||||
/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
|
||||
|
||||
/* Document
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Correct the line height in all browsers.
|
||||
* 2. Prevent adjustments of font size after orientation changes in
|
||||
* IE on Windows Phone and in iOS.
|
||||
*/
|
||||
|
||||
html {
|
||||
line-height: 1.15; /* 1 */
|
||||
-ms-text-size-adjust: 100%; /* 2 */
|
||||
-webkit-text-size-adjust: 100%; /* 2 */
|
||||
}
|
||||
|
||||
/* Sections
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the margin in all browsers (opinionated).
|
||||
*/
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 9-.
|
||||
*/
|
||||
|
||||
article,
|
||||
aside,
|
||||
footer,
|
||||
header,
|
||||
nav,
|
||||
section {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the font size and margin on `h1` elements within `section` and
|
||||
* `article` contexts in Chrome, Firefox, and Safari.
|
||||
*/
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0;
|
||||
}
|
||||
|
||||
/* Grouping content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 9-.
|
||||
* 1. Add the correct display in IE.
|
||||
*/
|
||||
|
||||
figcaption,
|
||||
figure,
|
||||
main { /* 1 */
|
||||
display: block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct margin in IE 8.
|
||||
*/
|
||||
|
||||
figure {
|
||||
margin: 1em 40px;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Add the correct box sizing in Firefox.
|
||||
* 2. Show the overflow in Edge and IE.
|
||||
*/
|
||||
|
||||
hr {
|
||||
box-sizing: content-box; /* 1 */
|
||||
height: 0; /* 1 */
|
||||
overflow: visible; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||
* 2. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
|
||||
pre {
|
||||
font-family: monospace, monospace; /* 1 */
|
||||
font-size: 1em; /* 2 */
|
||||
}
|
||||
|
||||
/* Text-level semantics
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Remove the gray background on active links in IE 10.
|
||||
* 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
|
||||
*/
|
||||
|
||||
a {
|
||||
background-color: transparent; /* 1 */
|
||||
-webkit-text-decoration-skip: objects; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Remove the bottom border in Chrome 57- and Firefox 39-.
|
||||
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
|
||||
*/
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: none; /* 1 */
|
||||
text-decoration: underline; /* 2 */
|
||||
text-decoration: underline dotted; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent the duplicate application of `bolder` by the next rule in Safari 6.
|
||||
*/
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: inherit;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct font weight in Chrome, Edge, and Safari.
|
||||
*/
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||
* 2. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
|
||||
code,
|
||||
kbd,
|
||||
samp {
|
||||
font-family: monospace, monospace; /* 1 */
|
||||
font-size: 1em; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct font style in Android 4.3-.
|
||||
*/
|
||||
|
||||
dfn {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct background and color in IE 9-.
|
||||
*/
|
||||
|
||||
mark {
|
||||
background-color: #ff0;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct font size in all browsers.
|
||||
*/
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent `sub` and `sup` elements from affecting the line height in
|
||||
* all browsers.
|
||||
*/
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
/* Embedded content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 9-.
|
||||
*/
|
||||
|
||||
audio,
|
||||
video {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct display in iOS 4-7.
|
||||
*/
|
||||
|
||||
audio:not([controls]) {
|
||||
display: none;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the border on images inside links in IE 10-.
|
||||
*/
|
||||
|
||||
img {
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Hide the overflow in IE.
|
||||
*/
|
||||
|
||||
svg:not(:root) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Forms
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Change the font styles in all browsers (opinionated).
|
||||
* 2. Remove the margin in Firefox and Safari.
|
||||
*/
|
||||
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
font-family: sans-serif; /* 1 */
|
||||
font-size: 100%; /* 1 */
|
||||
line-height: 1.15; /* 1 */
|
||||
margin: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Show the overflow in IE.
|
||||
* 1. Show the overflow in Edge.
|
||||
*/
|
||||
|
||||
button,
|
||||
input { /* 1 */
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inheritance of text transform in Edge, Firefox, and IE.
|
||||
* 1. Remove the inheritance of text transform in Firefox.
|
||||
*/
|
||||
|
||||
button,
|
||||
select { /* 1 */
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
|
||||
* controls in Android 4.
|
||||
* 2. Correct the inability to style clickable types in iOS and Safari.
|
||||
*/
|
||||
|
||||
button,
|
||||
html [type="button"], /* 1 */
|
||||
[type="reset"],
|
||||
[type="submit"] {
|
||||
-webkit-appearance: button; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inner border and padding in Firefox.
|
||||
*/
|
||||
|
||||
button::-moz-focus-inner,
|
||||
[type="button"]::-moz-focus-inner,
|
||||
[type="reset"]::-moz-focus-inner,
|
||||
[type="submit"]::-moz-focus-inner {
|
||||
border-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Restore the focus styles unset by the previous rule.
|
||||
*/
|
||||
|
||||
button:-moz-focusring,
|
||||
[type="button"]:-moz-focusring,
|
||||
[type="reset"]:-moz-focusring,
|
||||
[type="submit"]:-moz-focusring {
|
||||
outline: 1px dotted ButtonText;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the padding in Firefox.
|
||||
*/
|
||||
|
||||
fieldset {
|
||||
padding: 0.35em 0.75em 0.625em;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the text wrapping in Edge and IE.
|
||||
* 2. Correct the color inheritance from `fieldset` elements in IE.
|
||||
* 3. Remove the padding so developers are not caught out when they zero out
|
||||
* `fieldset` elements in all browsers.
|
||||
*/
|
||||
|
||||
legend {
|
||||
box-sizing: border-box; /* 1 */
|
||||
color: inherit; /* 2 */
|
||||
display: table; /* 1 */
|
||||
max-width: 100%; /* 1 */
|
||||
padding: 0; /* 3 */
|
||||
white-space: normal; /* 1 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Add the correct display in IE 9-.
|
||||
* 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
|
||||
*/
|
||||
|
||||
progress {
|
||||
display: inline-block; /* 1 */
|
||||
vertical-align: baseline; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the default vertical scrollbar in IE.
|
||||
*/
|
||||
|
||||
textarea {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Add the correct box sizing in IE 10-.
|
||||
* 2. Remove the padding in IE 10-.
|
||||
*/
|
||||
|
||||
[type="checkbox"],
|
||||
[type="radio"] {
|
||||
box-sizing: border-box; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the cursor style of increment and decrement buttons in Chrome.
|
||||
*/
|
||||
|
||||
[type="number"]::-webkit-inner-spin-button,
|
||||
[type="number"]::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the odd appearance in Chrome and Safari.
|
||||
* 2. Correct the outline style in Safari.
|
||||
*/
|
||||
|
||||
[type="search"] {
|
||||
-webkit-appearance: textfield; /* 1 */
|
||||
outline-offset: -2px; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
|
||||
*/
|
||||
|
||||
[type="search"]::-webkit-search-cancel-button,
|
||||
[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inability to style clickable types in iOS and Safari.
|
||||
* 2. Change font properties to `inherit` in Safari.
|
||||
*/
|
||||
|
||||
::-webkit-file-upload-button {
|
||||
-webkit-appearance: button; /* 1 */
|
||||
font: inherit; /* 2 */
|
||||
}
|
||||
|
||||
/* Interactive
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Add the correct display in IE 9-.
|
||||
* 1. Add the correct display in Edge, IE, and Firefox.
|
||||
*/
|
||||
|
||||
details, /* 1 */
|
||||
menu {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/*
|
||||
* Add the correct display in all browsers.
|
||||
*/
|
||||
|
||||
summary {
|
||||
display: list-item;
|
||||
}
|
||||
|
||||
/* Scripting
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 9-.
|
||||
*/
|
||||
|
||||
canvas {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct display in IE.
|
||||
*/
|
||||
|
||||
template {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Hidden
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 10-.
|
||||
*/
|
||||
|
||||
[hidden] {
|
||||
display: none;
|
||||
}
|
||||
35
dist/doc/TOC.md
vendored
Normal file
@@ -0,0 +1,35 @@
|
||||
[HTML5 Boilerplate homepage](https://html5boilerplate.com/)
|
||||
|
||||
## Getting started
|
||||
|
||||
* [Usage](usage.md) — Overview of the project contents.
|
||||
* [FAQ](faq.md) — Frequently asked questions along with their answers.
|
||||
|
||||
## HTML5 Boilerplate core
|
||||
|
||||
* [HTML](html.md) — Guide to the default HTML.
|
||||
* [CSS](css.md) — Guide to the default CSS.
|
||||
* [JavaScript](js.md) — Guide to the default JavaScript.
|
||||
* [Everything else](misc.md).
|
||||
|
||||
## Development
|
||||
|
||||
* [Extending and customizing HTML5 Boilerplate](extend.md) — Going further
|
||||
with the boilerplate.
|
||||
|
||||
## Related projects
|
||||
|
||||
The [H5BP organization](https://github.com/h5bp) maintains several projects
|
||||
that complement HTML5 Boilerplate, projects that can help you improve different
|
||||
aspects of your website/web app (e.g.: the performance, security, etc.).
|
||||
|
||||
* [Server Configs](https://github.com/h5bp/server-configs) — Fast and
|
||||
smart configurations for web servers such as Apache and Nginx.
|
||||
* [Apache](https://github.com/h5bp/server-configs-apache)
|
||||
* [Google App Engine (GAE)](https://github.com/h5bp/server-configs-gae)
|
||||
* [Internet Information Services (IIS)](https://github.com/h5bp/server-configs-iis)
|
||||
* [lighttpd](https://github.com/h5bp/server-configs-lighttpd)
|
||||
* [Nginx](https://github.com/h5bp/server-configs-nginx)
|
||||
* [Node.js](https://github.com/h5bp/server-configs-node)
|
||||
* [Ant Build Script](https://github.com/h5bp/ant-build-script) — Apache
|
||||
Ant based build script.
|
||||
164
dist/doc/css.md
vendored
Normal file
@@ -0,0 +1,164 @@
|
||||
[HTML5 Boilerplate homepage](https://html5boilerplate.com/) | [Documentation
|
||||
table of contents](TOC.md)
|
||||
|
||||
# The CSS
|
||||
|
||||
HTML5 Boilerplate's CSS includes:
|
||||
|
||||
* [Normalize.css](#normalizecss)
|
||||
* [Useful defaults](#useful-defaults)
|
||||
* [Common helpers](#common-helpers)
|
||||
* [Placeholder media queries](#media-queries)
|
||||
* [Print styles](#print-styles)
|
||||
|
||||
This starting CSS does not rely on the presence of
|
||||
[conditional class names](https://www.paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/),
|
||||
[conditional style sheets](https://css-tricks.com/how-to-create-an-ie-only-stylesheet/),
|
||||
or [Modernizr](https://modernizr.com/), and it is ready to use no matter what
|
||||
your development preferences happen to be.
|
||||
|
||||
|
||||
## Normalize.css
|
||||
|
||||
In order to make browsers render all elements more consistently and in line
|
||||
with modern standards, we include
|
||||
[Normalize.css](https://necolas.github.io/normalize.css/) — a modern, HTML5-ready
|
||||
alternative to CSS resets.
|
||||
|
||||
As opposed to CSS resets, Normalize.css:
|
||||
|
||||
* targets only the styles that need normalizing
|
||||
* preserves useful browser defaults rather than erasing them
|
||||
* corrects bugs and common browser inconsistencies
|
||||
* improves usability with subtle improvements
|
||||
* doesn't clutter the debugging tools
|
||||
* has better documentation
|
||||
|
||||
For more information about Normalize.css, please refer to its [project
|
||||
page](https://necolas.github.com/normalize.css/), as well as this
|
||||
[blog post](http://nicolasgallagher.com/about-normalize-css/).
|
||||
|
||||
|
||||
## Useful defaults
|
||||
|
||||
Several base styles are included that build upon `Normalize.css`. These
|
||||
styles:
|
||||
|
||||
* provide basic typography settings that improve text readability
|
||||
* protect against unwanted `text-shadow` during text highlighting
|
||||
* tweak the default alignment of some elements (e.g.: `img`, `video`,
|
||||
`fieldset`, `textarea`)
|
||||
* style the prompt that is displayed to users using an outdated browser
|
||||
|
||||
You are free and even encouraged to modify or add to these base styles as your
|
||||
project requires.
|
||||
|
||||
|
||||
## Common helpers
|
||||
|
||||
Along with the base styles, we also provide some commonly used helper classes.
|
||||
|
||||
#### `.hidden`
|
||||
|
||||
The `hidden` class can be added to any element that you want to hide visually
|
||||
and from screen readers. It could be an element that will be populated and
|
||||
displayed later, or an element you will hide with JavaScript.
|
||||
|
||||
#### `.visuallyhidden`
|
||||
|
||||
The `visuallyhidden` class can be added to any element that you want to hide
|
||||
visually, while still have its content accessible to screen readers.
|
||||
|
||||
See also:
|
||||
|
||||
* [CSS in Action: Invisible Content Just for Screen Reader
|
||||
Users](http://webaim.org/techniques/css/invisiblecontent/)
|
||||
* [Hiding content for
|
||||
accessibility](https://snook.ca/archives/html_and_css/hiding-content-for-accessibility)
|
||||
* [HTML5 Boilerplate - Issue #194](https://github.com/h5bp/html5-boilerplate/issues/194).
|
||||
|
||||
__N.B.__ [The visuallyhidden class can be an accessibility issue for users using high contrast modes.](https://www.paciellogroup.com/blog/2012/08/notes-on-accessible-css-image-sprites/)
|
||||
|
||||
>Use JavaScript to detect when images are disabled and remove the CSS visually hidden display state of the text alternative.
|
||||
Use JavaScript to detect when Windows high contrast mode is enabled and remove the CSS visually hidden display state of the text alternative.
|
||||
|
||||
#### `.invisible`
|
||||
|
||||
The `invisible` class can be added to any element that you want to hide
|
||||
visually and from screen readers, but without affecting the layout.
|
||||
|
||||
As opposed to the `hidden` class that effectively removes the element from the
|
||||
layout, the `invisible` class will simply make the element invisible while
|
||||
keeping it in the flow and not affecting the positioning of the surrounding
|
||||
content.
|
||||
|
||||
__N.B.__ Try to stay away from, and don't use the classes specified above for
|
||||
[keyword stuffing](https://en.wikipedia.org/wiki/Keyword_stuffing) as you will
|
||||
harm your site's ranking!
|
||||
|
||||
#### `.clearfix`
|
||||
|
||||
The `clearfix` class can be added to any element to ensure that it always fully
|
||||
contains its floated children.
|
||||
|
||||
Over the years there have been many variants of the clearfix hack, but currently,
|
||||
we use the [micro clearfix](http://nicolasgallagher.com/micro-clearfix-hack/).
|
||||
|
||||
|
||||
## Media Queries
|
||||
|
||||
HTML5 Boilerplate makes it easy for you to get started with a
|
||||
[_mobile first_](http://www.lukew.com/presos/preso.asp?26) and [_responsive web
|
||||
design_](http://alistapart.com/article/responsive-web-design) approach to
|
||||
development. But it's worth remembering that there are [no silver
|
||||
bullets](https://cloudfour.com/thinks/css-media-query-for-mobile-is-fools-gold/).
|
||||
|
||||
We include placeholder media queries to help you build up your mobile styles for
|
||||
wider viewports and high-resolution displays. It's recommended that you adapt
|
||||
these media queries based on the content of your site rather than mirroring the
|
||||
fixed dimensions of specific devices.
|
||||
|
||||
If you do not want to take the _mobile first_ approach, you can simply edit or
|
||||
remove these placeholder media queries. One possibility would be to work from
|
||||
wide viewports down, and use `max-width` media queries instead (e.g.:
|
||||
`@media only screen and (max-width: 480px)`).
|
||||
|
||||
|
||||
## Print styles
|
||||
|
||||
Lastly, we provide some useful print styles that will optimize the printing
|
||||
process, as well as make the printed pages easier to read.
|
||||
|
||||
At printing time, these styles will:
|
||||
|
||||
* strip all background colors, change the font color to black, and remove the
|
||||
`text-shadow` — done in order to [help save printer ink and speed up the
|
||||
printing process](http://www.sanbeiji.com/archives/953)
|
||||
* underline and expand links to include the URL — done in order to allow users
|
||||
to know where to refer to<br>
|
||||
(exceptions to this are: the links that are
|
||||
[fragment identifiers](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-href),
|
||||
or use the
|
||||
[`javascript:` pseudo protocol](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/void#JavaScript_URIs))
|
||||
* expand abbreviations to include the full description — done in order to allow
|
||||
users to know what the abbreviations stands for
|
||||
* provide instructions on how browsers should break the content into pages and
|
||||
on [orphans/widows](https://en.wikipedia.org/wiki/Widows_and_orphans), namely,
|
||||
we instruct
|
||||
[supporting browsers](https://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28Cascading_Style_Sheets%29#Grammar_and_rules)
|
||||
that they should:
|
||||
|
||||
* ensure the table header (`<thead>`) is [printed on each page spanned by the
|
||||
table](http://css-discuss.incutio.com/wiki/Printing_Tables)
|
||||
* prevent block quotations, preformatted text, images and table rows from
|
||||
being split onto two different pages
|
||||
* ensure that headings never appear on a different page than the text they
|
||||
are associated with
|
||||
* ensure that
|
||||
[orphans and widows](https://en.wikipedia.org/wiki/Widows_and_orphans) do
|
||||
[not appear on printed pages](https://css-tricks.com/almanac/properties/o/orphans/)
|
||||
|
||||
The print styles are included along with the other `css` to [avoid the
|
||||
additional HTTP request](http://www.phpied.com/delay-loading-your-print-css/).
|
||||
Also, they should always be included last, so that the other styles can be
|
||||
overwritten.
|
||||
693
dist/doc/extend.md
vendored
Normal file
@@ -0,0 +1,693 @@
|
||||
[HTML5 Boilerplate homepage](https://html5boilerplate.com) | [Documentation
|
||||
table of contents](TOC.md)
|
||||
|
||||
# Extend and customise HTML5 Boilerplate
|
||||
|
||||
Here is some useful advice for how you can make your project with HTML5
|
||||
Boilerplate even better. We don't want to include it all by default, as
|
||||
not everything fits with everyone's needs.
|
||||
|
||||
|
||||
* [App Stores](#app-stores)
|
||||
* [DNS prefetching](#dns-prefetching)
|
||||
* [Google Universal Analytics](#google-universal-analytics)
|
||||
* [Internet Explorer](#internet-explorer)
|
||||
* [Miscellaneous](#miscellaneous)
|
||||
* [News Feeds](#news-feeds)
|
||||
* [Search](#search)
|
||||
* [Social Networks](#social-networks)
|
||||
* [URLs](#urls)
|
||||
* [Web Apps](#web-apps)
|
||||
|
||||
|
||||
## App Stores
|
||||
|
||||
### Smart App Banners in iOS 6+ Safari
|
||||
|
||||
Stop bothering everyone with gross modals advertising your entry in the
|
||||
App Store. Include the following [meta tag](https://developer.apple.com/library/IOS/documentation/AppleApplications/Reference/SafariWebContent/PromotingAppswithAppBanners/PromotingAppswithAppBanners.html#//apple_ref/doc/uid/TP40002051-CH6-SW2)
|
||||
will unintrusively allow the user the option to download your iOS app,
|
||||
or open it with some data about the user's current state on the website.
|
||||
|
||||
```html
|
||||
<meta name="apple-itunes-app" content="app-id=APP_ID,app-argument=SOME_TEXT">
|
||||
```
|
||||
|
||||
## DNS prefetching
|
||||
|
||||
In short, DNS Prefetching is a method of informing the browser of domain names
|
||||
referenced on a site so that the client can resolve the DNS for those hosts,
|
||||
cache them, and when it comes time to use them, have a faster turn around on
|
||||
the request.
|
||||
|
||||
### Implicit prefetches
|
||||
|
||||
There is a lot of prefetching done for you automatically by the browser. When
|
||||
the browser encounters an anchor in your html that does not share the same
|
||||
domain name as the current location the browser requests, from the client OS,
|
||||
the IP address for this new domain. The client first checks its cache and
|
||||
then, lacking a cached copy, makes a request from a DNS server. These requests
|
||||
happen in the background and are not meant to block the rendering of the
|
||||
page.
|
||||
|
||||
The goal of this is that when the foreign IP address is finally needed it will
|
||||
already be in the client cache and will not block the loading of the foreign
|
||||
content. Fewer requests result in faster page load times. The perception of this
|
||||
is increased on a mobile platform where DNS latency can be greater.
|
||||
|
||||
#### Disable implicit prefetching
|
||||
|
||||
```html
|
||||
<meta http-equiv="x-dns-prefetch-control" content="off">
|
||||
```
|
||||
|
||||
Even with X-DNS-Prefetch-Control meta tag (or http header) browsers will still
|
||||
prefetch any explicit dns-prefetch links.
|
||||
|
||||
**_WARNING:_** THIS MAY MAKE YOUR SITE SLOWER IF YOU RELY ON RESOURCES FROM
|
||||
FOREIGN DOMAINS.
|
||||
|
||||
### Explicit prefetches
|
||||
|
||||
Typically the browser only scans the HTML for foreign domains. If you have
|
||||
resources that are outside of your HTML (a javascript request to a remote
|
||||
server or a CDN that hosts content that may not be present on every page of
|
||||
your site, for example) then you can queue up a domain name to be prefetched.
|
||||
|
||||
```html
|
||||
<link rel="dns-prefetch" href="//example.com">
|
||||
<link rel="dns-prefetch" href="https://ajax.googleapis.com">
|
||||
```
|
||||
|
||||
You can use as many of these as you need, but it's best if they are all
|
||||
immediately after the [Meta
|
||||
Charset](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta#attr-charset)
|
||||
element (which should go right at the top of the `head`), so the browser can
|
||||
act on them ASAP.
|
||||
|
||||
#### Common Prefetch Links
|
||||
|
||||
Amazon S3:
|
||||
|
||||
```html
|
||||
<link rel="dns-prefetch" href="//s3.amazonaws.com">
|
||||
```
|
||||
|
||||
Google APIs:
|
||||
|
||||
```html
|
||||
<link rel="dns-prefetch" href="https://ajax.googleapis.com">
|
||||
```
|
||||
|
||||
Microsoft Ajax Content Delivery Network:
|
||||
|
||||
```html
|
||||
<link rel="dns-prefetch" href="//ajax.microsoft.com">
|
||||
<link rel="dns-prefetch" href="//ajax.aspnetcdn.com">
|
||||
```
|
||||
|
||||
### Further reading about DNS prefetching
|
||||
|
||||
* https://developer.mozilla.org/en-US/docs/Controlling_DNS_prefetching
|
||||
* https://dev.chromium.org/developers/design-documents/dns-prefetching
|
||||
* https://blogs.msdn.microsoft.com/ie/2011/03/17/internet-explorer-9-network-performance-improvements/
|
||||
* http://dayofjs.com/videos/22158462/web-browsers_alex-russel
|
||||
|
||||
|
||||
## Google Universal Analytics
|
||||
|
||||
### More tracking settings
|
||||
|
||||
The [optimized Google Universal Analytics
|
||||
snippet](https://mathiasbynens.be/notes/async-analytics-snippet#universal-analytics)
|
||||
included with HTML5 Boilerplate includes something like this:
|
||||
|
||||
```js
|
||||
ga('create', 'UA-XXXXX-X', 'auto'); ga('send', 'pageview');
|
||||
```
|
||||
|
||||
To customize further, see Google's [Advanced
|
||||
Setup](https://developers.google.com/analytics/devguides/collection/analyticsjs/advanced),
|
||||
[Pageview](https://developers.google.com/analytics/devguides/collection/analyticsjs/pages),
|
||||
and [Event](https://developers.google.com/analytics/devguides/collection/analyticsjs/events) Docs.
|
||||
|
||||
### Anonymize IP addresses
|
||||
|
||||
In some countries, no personal data may be transferred outside jurisdictions
|
||||
that do not have similarly strict laws (i.e. from Germany to outside the EU).
|
||||
Thus a webmaster using the Google Universal Analytics may have to ensure that
|
||||
no personal (trackable) data is transferred to the US. You can do that with
|
||||
[the `ga('set', 'anonymizeIp', true);`
|
||||
parameter](https://developers.google.com/analytics/devguides/collection/analyticsjs/advanced#anonymizeip)
|
||||
before sending any events/pageviews. In use it looks like this:
|
||||
|
||||
```js
|
||||
ga('create', 'UA-XXXXX-X', 'auto');
|
||||
ga('set', 'anonymizeIp', true);
|
||||
ga('send', 'pageview');
|
||||
```
|
||||
|
||||
### Track jQuery AJAX requests in Google Analytics
|
||||
|
||||
An article by @JangoSteve explains how to [track jQuery AJAX requests in Google
|
||||
Analytics](https://www.alfajango.com/blog/track-jquery-ajax-requests-in-google-analytics/).
|
||||
|
||||
Add this to `plugins.js`:
|
||||
|
||||
```js
|
||||
/*
|
||||
* Log all jQuery AJAX requests to Google Analytics
|
||||
* See: https://www.alfajango.com/blog/track-jquery-ajax-requests-in-google-analytics/
|
||||
*/
|
||||
if (typeof ga !== "undefined" && ga !== null) {
|
||||
$(document).ajaxSend(function(event, xhr, settings){
|
||||
ga('send', 'pageview', settings.url);
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
### Track JavaScript errors in Google Analytics
|
||||
|
||||
Add this function after `ga` is defined:
|
||||
|
||||
```js
|
||||
(function(window){
|
||||
var undefined,
|
||||
link = function (href) {
|
||||
var a = window.document.createElement('a');
|
||||
a.href = href;
|
||||
return a;
|
||||
};
|
||||
window.onerror = function (message, file, line, column) {
|
||||
var host = link(file).hostname;
|
||||
ga('send', {
|
||||
'hitType': 'event',
|
||||
'eventCategory': (host == window.location.hostname || host == undefined || host == '' ? '' : 'external ') + 'error',
|
||||
'eventAction': message,
|
||||
'eventLabel': (file + ' LINE: ' + line + (column ? ' COLUMN: ' + column : '')).trim(),
|
||||
'nonInteraction': 1
|
||||
});
|
||||
};
|
||||
}(window));
|
||||
```
|
||||
|
||||
### Track page scroll
|
||||
|
||||
Add this function after `ga` is defined:
|
||||
|
||||
```js
|
||||
$(function(){
|
||||
var isDuplicateScrollEvent,
|
||||
scrollTimeStart = new Date,
|
||||
$window = $(window),
|
||||
$document = $(document),
|
||||
scrollPercent;
|
||||
|
||||
$window.scroll(function() {
|
||||
scrollPercent = Math.round(100 * ($window.height() + $window.scrollTop())/$document.height());
|
||||
if (scrollPercent > 90 && !isDuplicateScrollEvent) { //page scrolled to 90%
|
||||
isDuplicateScrollEvent = 1;
|
||||
ga('send', 'event', 'scroll',
|
||||
'Window: ' + $window.height() + 'px; Document: ' + $document.height() + 'px; Time: ' + Math.round((new Date - scrollTimeStart )/1000,1) + 's'
|
||||
);
|
||||
}
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
## Internet Explorer
|
||||
|
||||
### Prompt users to switch to "Desktop Mode" in IE10 Metro
|
||||
|
||||
IE10 does not support plugins, such as Flash, in Metro mode. If
|
||||
your site requires plugins, you can let users know that via the
|
||||
`x-ua-compatible` meta element, which will prompt them to switch
|
||||
to Desktop Mode.
|
||||
|
||||
```html
|
||||
<meta http-equiv="x-ua-compatible" content="requiresActiveX=true">
|
||||
```
|
||||
|
||||
Here's what it looks like alongside H5BP's default `x-ua-compatible`
|
||||
values:
|
||||
|
||||
```html
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge,requiresActiveX=true">
|
||||
```
|
||||
|
||||
You can find more information in [Microsoft's IEBlog post about prompting for
|
||||
plugin use in IE10 Metro
|
||||
Mode](https://blogs.msdn.microsoft.com/ie/2012/01/31/web-sites-and-a-plug-in-free-web/).
|
||||
|
||||
### IE Pinned Sites (IE9+)
|
||||
|
||||
Enabling your application for pinning will allow IE9 users to add it to their
|
||||
Windows Taskbar and Start Menu. This comes with a range of new tools that you
|
||||
can easily configure with the elements below. See more [documentation on IE9
|
||||
Pinned Sites](https://msdn.microsoft.com/en-us/library/gg131029.aspx).
|
||||
|
||||
### Name the Pinned Site for Windows
|
||||
|
||||
Without this rule, Windows will use the page title as the name for your
|
||||
application.
|
||||
|
||||
```html
|
||||
<meta name="application-name" content="Sample Title">
|
||||
```
|
||||
|
||||
### Give your Pinned Site a tooltip
|
||||
|
||||
You know — a tooltip. A little textbox that appears when the user holds their
|
||||
mouse over your Pinned Site's icon.
|
||||
|
||||
```html
|
||||
<meta name="msapplication-tooltip" content="A description of what this site does.">
|
||||
```
|
||||
|
||||
### Set a default page for your Pinned Site
|
||||
|
||||
If the site should go to a specific URL when it is pinned (such as the
|
||||
homepage), enter it here. One idea is to send it to a special URL so you can
|
||||
track the number of pinned users, like so:
|
||||
`https://www.example.com/index.html?pinned=true`
|
||||
|
||||
```html
|
||||
<meta name="msapplication-starturl" content="https://www.example.com/index.html?pinned=true">
|
||||
```
|
||||
|
||||
### Recolor IE's controls manually for a Pinned Site
|
||||
|
||||
IE9+ will automatically use the overall color of your Pinned Site's favicon to
|
||||
shade its browser buttons. UNLESS you give it another color here. Only use
|
||||
named colors (`red`) or hex colors (`#ff0000`).
|
||||
|
||||
```html
|
||||
<meta name="msapplication-navbutton-color" content="#ff0000">
|
||||
```
|
||||
|
||||
### Manually set the window size of a Pinned Site
|
||||
|
||||
If the site should open at a certain window size once pinned, you can specify
|
||||
the dimensions here. It only supports static pixel dimensions. 800x600
|
||||
minimum.
|
||||
|
||||
```html
|
||||
<meta name="msapplication-window" content="width=800;height=600">
|
||||
```
|
||||
|
||||
### Jump List "Tasks" for Pinned Sites
|
||||
|
||||
Add Jump List Tasks that will appear when the Pinned Site's icon gets a
|
||||
right-click. Each Task goes to the specified URL, and gets its own mini icon
|
||||
(essentially a favicon, a 16x16 .ICO). You can add as many of these as you
|
||||
need.
|
||||
|
||||
```html
|
||||
<meta name="msapplication-task" content="name=Task 1;action-uri=http://host/Page1.html;icon-uri=http://host/icon1.ico">
|
||||
<meta name="msapplication-task" content="name=Task 2;action-uri=http://microsoft.com/Page2.html;icon-uri=http://host/icon2.ico">
|
||||
```
|
||||
|
||||
### (Windows 8) High quality visuals for Pinned Sites
|
||||
|
||||
Windows 8 adds the ability for you to provide a PNG tile image and specify the
|
||||
tile's background color. [Full details on the IE
|
||||
blog](https://blogs.msdn.microsoft.com/ie/2012/06/08/high-quality-visuals-for-pinned-sites-in-windows-8/).
|
||||
|
||||
* Create a 144x144 image of your site icon, filling all of the canvas, and
|
||||
using a transparent background.
|
||||
* Save this image as a 32-bit PNG and optimize it without reducing
|
||||
colour-depth. It can be named whatever you want (e.g. `metro-tile.png`).
|
||||
* To reference the tile and its color, add the HTML `meta` elements described
|
||||
in the IE Blog post.
|
||||
|
||||
### (Windows 8) Badges for Pinned Sites
|
||||
|
||||
IE10 will poll an XML document for badge information to display on your app's
|
||||
tile in the Start screen. The user will be able to receive these badge updates
|
||||
even when your app isn't actively running. The badge's value can be a number,
|
||||
or one of a predefined list of glyphs.
|
||||
|
||||
* [Tutorial on IEBlog with link to badge XML schema](https://blogs.msdn.microsoft.com/ie/2012/04/03/pinned-sites-in-windows-8/)
|
||||
* [Available badge values](https://msdn.microsoft.com/en-us/library/ie/br212849.aspx)
|
||||
|
||||
```html
|
||||
<meta name="msapplication-badge" value="frequency=NUMBER_IN_MINUTES;polling-uri=https://www.example.com/path/to/file.xml">
|
||||
```
|
||||
|
||||
### Disable link highlighting upon tap in IE10
|
||||
|
||||
Similar to [-webkit-tap-highlight-color](https://davidwalsh.name/mobile-highlight-color)
|
||||
in iOS Safari. Unlike that CSS property, this is an HTML meta element, and its
|
||||
value is boolean rather than a color. It's all or nothing.
|
||||
|
||||
```html
|
||||
<meta name="msapplication-tap-highlight" content="no" />
|
||||
```
|
||||
|
||||
You can read about this useful element and more techniques in
|
||||
[Microsoft's documentation on adapting WebKit-oriented apps for IE10](https://blogs.windows.com/buildingapps/2012/11/15/adapting-your-webkit-optimized-site-for-internet-explorer-10/)
|
||||
|
||||
## Search
|
||||
|
||||
### Direct search spiders to your sitemap
|
||||
|
||||
After creating a [sitemap](https://www.sitemaps.org/protocol.html)
|
||||
|
||||
Submit it to search engine tool:
|
||||
* [Google](https://www.google.com/webmasters/tools/sitemap-list)
|
||||
* [Bing](https://www.bing.com/toolbox/webmaster)
|
||||
* [Yandex](https://webmaster.yandex.com/)
|
||||
* [Baidu](https://zhanzhang.baidu.com/)
|
||||
OR
|
||||
Insert the following line anywhere in your robots.txt file, specifying the path to your sitemap:
|
||||
```
|
||||
Sitemap: https://example.com/sitemap_location.xml
|
||||
```
|
||||
|
||||
### Hide pages from search engines
|
||||
|
||||
According to Heather Champ, former community manager at Flickr, you should not
|
||||
allow search engines to index your "Contact Us" or "Complaints" page if you
|
||||
value your sanity. This is an HTML-centric way of achieving that.
|
||||
|
||||
```html
|
||||
<meta name="robots" content="noindex">
|
||||
```
|
||||
|
||||
**_WARNING:_** DO NOT INCLUDE ON PAGES THAT SHOULD APPEAR IN SEARCH ENGINES.
|
||||
|
||||
### Firefox and IE Search Plugins
|
||||
|
||||
Sites with in-site search functionality should be strongly considered for a
|
||||
browser search plugin. A "search plugin" is an XML file which defines how your
|
||||
plugin behaves in the browser. [How to make a browser search
|
||||
plugin](https://www.google.com/search?ie=UTF-8&q=how+to+make+browser+search+plugin).
|
||||
|
||||
```html
|
||||
<link rel="search" title="" type="application/opensearchdescription+xml" href="">
|
||||
```
|
||||
|
||||
|
||||
## Miscellaneous
|
||||
|
||||
* Use [polyfills](https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills).
|
||||
|
||||
* Use [Microformats](http://microformats.org/wiki/Main_Page) (via
|
||||
[microdata](http://microformats.org/wiki/microdata)) for optimum search
|
||||
results
|
||||
[visibility](https://webmasters.googleblog.com/2009/05/introducing-rich-snippets.html).
|
||||
|
||||
* If you're building a web app you may want [native style momentum scrolling in
|
||||
iOS 5+](http://www.johanbrook.com/articles/native-style-momentum-scrolling-to-arrive-in-ios-5/)
|
||||
using `-webkit-overflow-scrolling: touch`.
|
||||
|
||||
* If you want to disable the translation prompt in Chrome or block Google
|
||||
Translate from translating your web page, use [`<meta name="google"
|
||||
value="notranslate">`](https://support.google.com/translate/?hl=en#2641276).
|
||||
To disable translation for a particular section of the web page, add
|
||||
[`class="notranslate"`](https://support.google.com/translate/?hl=en#2641276).
|
||||
|
||||
* If you want to disable the automatic detection and formatting of possible
|
||||
phone numbers in Safari on iOS, use [`<meta name="format-detection"
|
||||
content="telephone=no">`](https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html/#//apple_ref/doc/uid/TP40008193-SW5).
|
||||
|
||||
* Avoid development/stage websites "leaking" into SERPs (search engine results
|
||||
page) by [implementing X-Robots-tag
|
||||
headers](https://github.com/h5bp/html5-boilerplate/issues/804).
|
||||
|
||||
|
||||
## News Feeds
|
||||
|
||||
### RSS
|
||||
|
||||
Have an RSS feed? Link to it here. Want to [learn how to write an RSS feed from
|
||||
scratch](http://www.rssboard.org/rss-specification)?
|
||||
|
||||
```html
|
||||
<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml">
|
||||
```
|
||||
|
||||
### Atom
|
||||
|
||||
Atom is similar to RSS, and you might prefer to use it instead of or in
|
||||
addition to it. [See what Atom's all
|
||||
about](http://www.atomenabled.org/developers/syndication/).
|
||||
|
||||
```html
|
||||
<link rel="alternate" type="application/atom+xml" title="Atom" href="/atom.xml">
|
||||
```
|
||||
|
||||
### Pingbacks
|
||||
|
||||
Your server may be notified when another site links to yours. The href
|
||||
attribute should contain the location of your pingback service.
|
||||
|
||||
```html
|
||||
<link rel="pingback" href="">
|
||||
```
|
||||
|
||||
* High-level explanation: https://codex.wordpress.org/Introduction_to_Blogging#Pingbacks
|
||||
* Step-by-step example case: http://www.hixie.ch/specs/pingback/pingback-1.0#TOC5
|
||||
* PHP pingback service: https://web.archive.org/web/20131211032834/http://blog.perplexedlabs.com/2009/07/15/xmlrpc-pingbacks-using-php/
|
||||
|
||||
|
||||
|
||||
## Social Networks
|
||||
|
||||
### Facebook Open Graph data
|
||||
|
||||
You can control the information that Facebook and others display when users
|
||||
share your site. Below are just the most basic data points you might need. For
|
||||
specific content types (including "website"), see [Facebook's built-in Open
|
||||
Graph content
|
||||
templates](https://developers.facebook.com/docs/opengraph/objects/builtin/).
|
||||
Take full advantage of Facebook's support for complex data and activity by
|
||||
following the [Open Graph
|
||||
tutorial](https://developers.facebook.com/docs/opengraph/tutorial/).
|
||||
|
||||
For a reference of Open Graph's markup and properties, you may check
|
||||
[Facebook's Open Graph Protocol reference](http://ogp.me/). Finally,
|
||||
you can validate your markup with the [Facebook Object
|
||||
Debugger](https://developers.facebook.com/tools/debug/) (needs
|
||||
registration to Facebook).
|
||||
|
||||
```html
|
||||
<meta property="fb:app_id" content="123456789">
|
||||
<meta property="og:url" content="https://www.example.com/path/to/page.html">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:title" content="">
|
||||
<meta property="og:image" content="https://www.example.com/path/to/image.jpg">
|
||||
<meta property="og:description" content="">
|
||||
<meta property="og:site_name" content="">
|
||||
<meta property="article:author" content="">
|
||||
```
|
||||
|
||||
### Twitter Cards
|
||||
|
||||
Twitter provides a snippet specification that serves a similar purpose to Open
|
||||
Graph. In fact, Twitter will use Open Graph when Cards is not available. Note
|
||||
that, as of this writing, Twitter requires that app developers activate Cards
|
||||
on a per-domain basis. You can read more about the various snippet formats
|
||||
and application process in the [official Twitter Cards
|
||||
documentation](https://dev.twitter.com/docs/cards), and you can validate
|
||||
your markup with the [Card validator](https://cards-dev.twitter.com/validator)
|
||||
(needs registration to Twitter).
|
||||
|
||||
```html
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@site_account">
|
||||
<meta name="twitter:creator" content="@individual_account">
|
||||
<meta name="twitter:url" content="https://www.example.com/path/to/page.html">
|
||||
<meta name="twitter:title" content="">
|
||||
<meta name="twitter:description" content="">
|
||||
<meta name="twitter:image" content="https://www.example.com/path/to/image.jpg">
|
||||
```
|
||||
|
||||
### Google+ / Schema.org
|
||||
|
||||
Google also provides a snippet specification that serves a similar
|
||||
purpose to Facebook's Open Graph or Twitter Cards. While it helps you
|
||||
to control information displayed on Google+, this metadata is a subset
|
||||
of [schema.org's microdata vocabulary](https://schema.org/), which
|
||||
covers many other schemas that can describe the content of your pages
|
||||
to search engines. For this reason, this metadata is more generic for
|
||||
SEO, notably for Google's search-engine, although this vocabulary is
|
||||
also used by Microsoft, Pinterest or Yandex.
|
||||
|
||||
You can validate your markup with the [Structured Data Testing
|
||||
Tool](https://developers.google.com/structured-data/testing-tool/).
|
||||
Also, please note that this markup requires to add attributes to your
|
||||
top `html` tag.
|
||||
|
||||
```html
|
||||
<html class="no-js" lang="" itemscope itemtype="http://schema.org/Article">
|
||||
<head>
|
||||
|
||||
<link rel="author" href="">
|
||||
<link rel="publisher" href="">
|
||||
<meta itemprop="name" content="">
|
||||
<meta itemprop="description" content="">
|
||||
<meta itemprop="image" content="">
|
||||
```
|
||||
|
||||
## URLs
|
||||
|
||||
### Canonical URL
|
||||
|
||||
Signal to search engines and others "Use this URL for this page!" Useful when
|
||||
parameters after a `#` or `?` is used to control the display state of a page.
|
||||
`https://www.example.com/cart.html?shopping-cart-open=true` can be indexed as
|
||||
the cleaner, more accurate `https://www.example.com/cart.html`.
|
||||
|
||||
```html
|
||||
<link rel="canonical" href="">
|
||||
```
|
||||
|
||||
### Official shortlink
|
||||
|
||||
Signal to the world "This is the shortened URL to use this page!" Poorly
|
||||
supported at this time. Learn more by reading the [article about shortlinks on
|
||||
the Microformats wiki](http://microformats.org/wiki/rel-shortlink).
|
||||
|
||||
```html
|
||||
<link rel="shortlink" href="h5bp.com">
|
||||
```
|
||||
|
||||
### Separate mobile URLs
|
||||
|
||||
If you use separate URLs for desktop and mobile users, you should consider
|
||||
helping search engine algorithms better understand the configuration on your
|
||||
web site.
|
||||
|
||||
This can be done by adding the following annotations in your HTML pages:
|
||||
|
||||
* on the desktop page, add the `link rel="alternate"` tag pointing to the
|
||||
corresponding mobile URL, e.g.:
|
||||
|
||||
`<link rel="alternate" media="only screen and (max-width: 640px)" href="https://m.example.com/page.html" >`
|
||||
|
||||
* on the mobile page, add the `link rel="canonical"` tag pointing to the
|
||||
corresponding desktop URL, e.g.:
|
||||
|
||||
`<link rel="canonical" href="https://www.example.com/page.html">`
|
||||
|
||||
For more information please see:
|
||||
|
||||
* https://developers.google.com/webmasters/smartphone-sites/details#separateurls
|
||||
* https://developers.google.com/webmasters/smartphone-sites/feature-phones
|
||||
|
||||
|
||||
## Web Apps
|
||||
|
||||
There are a couple of meta tags that provide information about a web app when
|
||||
added to the Home Screen on iOS:
|
||||
|
||||
* Adding `apple-mobile-web-app-capable` will make your web app chrome-less and
|
||||
provide the default iOS app view. You can control the color scheme of the
|
||||
default view by adding `apple-mobile-web-app-status-bar-style`.
|
||||
|
||||
```html
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
||||
```
|
||||
|
||||
* You can use `apple-mobile-web-app-title` to add a specific sites name for the
|
||||
Home Screen icon. This works since iOS 6.
|
||||
|
||||
```html
|
||||
<meta name="apple-mobile-web-app-title" content="">
|
||||
```
|
||||
|
||||
For further information please read the [official
|
||||
documentation](https://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html)
|
||||
on Apple's site.
|
||||
|
||||
|
||||
### Apple Touch Icons
|
||||
|
||||
The Apple touch icons can be seen as the favicons of iOS devices.
|
||||
|
||||
The main sizes of the Apple touch icons are:
|
||||
|
||||
* `57×57px` – iPhone with @1x display and iPod Touch
|
||||
* `72×72px` – iPad and iPad mini with @1x display running iOS ≤ 6
|
||||
* `76×76px` – iPad and iPad mini with @1x display running iOS ≥ 7
|
||||
* `114×114px` – iPhone with @2x display running iOS ≤ 6
|
||||
* `120×120px` – iPhone with @2x and @3x display running iOS ≥ 7
|
||||
* `144×144px` – iPad and iPad mini with @2x display running iOS ≤ 6
|
||||
* `152×152px` – iPad and iPad mini with @2x display running iOS 7
|
||||
* `180×180px` – iPad and iPad mini with @2x display running iOS 8
|
||||
|
||||
Displays meaning:
|
||||
|
||||
* @1x - non-Retina
|
||||
* @2x - Retina
|
||||
* @3x - Retina HD
|
||||
|
||||
More information about the displays of iOS devices can be found
|
||||
[here](https://en.wikipedia.org/wiki/List_of_iOS_devices#Display).
|
||||
|
||||
In most cases, one `180×180px` touch icon named `icon.png`
|
||||
and including:
|
||||
|
||||
```html
|
||||
<link rel="apple-touch-icon" href="icon.png">
|
||||
```
|
||||
|
||||
in the `<head>` of the page is enough. If you use art-direction and/or
|
||||
want to have different content for each device, you can add more touch
|
||||
icons as written above.
|
||||
|
||||
For a more comprehensive overview, please refer to Mathias' [article on Touch
|
||||
Icons](https://mathiasbynens.be/notes/touch-icons).
|
||||
|
||||
|
||||
### Apple Touch Startup Image
|
||||
|
||||
Apart from that it is possible to add start-up screens for web apps on iOS. This
|
||||
basically works by defining `apple-touch-startup-image` with an according link
|
||||
to the image. Since iOS devices have different screen resolutions it is
|
||||
necessary to add media queries to detect which image to load. Here is an
|
||||
example for a retina iPhone:
|
||||
|
||||
```html
|
||||
<link rel="apple-touch-startup-image" media="(max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)" href="img/startup-retina.png">
|
||||
```
|
||||
|
||||
However, it is possible to detect which start-up image to use with JavaScript.
|
||||
The Mobile Boilerplate provides a useful function for this. Please see
|
||||
[helpers.js](https://github.com/h5bp/mobile-boilerplate/blob/v4.1.0/js/helper.js#L336-L383)
|
||||
for the implementation.
|
||||
|
||||
|
||||
### Chrome Mobile web apps
|
||||
|
||||
Chrome Mobile has a specific meta tag for making apps [installable to the
|
||||
homescreen](https://developer.chrome.com/multidevice/android/installtohomescreen)
|
||||
which tries to be a more generic replacement to Apple's proprietary meta tag:
|
||||
|
||||
```html
|
||||
<meta name="mobile-web-app-capable" content="yes">
|
||||
```
|
||||
|
||||
Same applies to the touch icons:
|
||||
|
||||
```html
|
||||
<link rel="icon" sizes="192x192" href="highres-icon.png">
|
||||
```
|
||||
|
||||
### Theme Color
|
||||
|
||||
You can add the [`theme-color` meta extension](https://html.spec.whatwg.org/multipage/semantics.html#meta-theme-color)
|
||||
in the `<head>` of your pages to suggest the color that browsers and
|
||||
OSes should use if they customize the display of individual pages in
|
||||
their UIs with varying colors.
|
||||
|
||||
```html
|
||||
<meta name="theme-color" content="#ff69b4">
|
||||
```
|
||||
|
||||
The `content` attribute extension can take any valid CSS color.
|
||||
|
||||
Currently, the `theme-color` meta extension is supported by [Chrome 39+
|
||||
for Android Lollipop](https://developers.google.com/web/updates/2014/11/Support-for-theme-color-in-Chrome-39-for-Android).
|
||||
47
dist/doc/faq.md
vendored
Normal file
@@ -0,0 +1,47 @@
|
||||
[HTML5 Boilerplate homepage](https://html5boilerplate.com/) | [Documentation
|
||||
table of contents](TOC.md)
|
||||
|
||||
# Frequently asked questions
|
||||
|
||||
* [Why is the Google Analytics code at the bottom? Google recommends it be
|
||||
placed in the `<head>`.](#why-is-the-google-analytics-code-at-the-bottom-google-recommends-it-be-placed-in-the-head)
|
||||
* [How can I integrate Bootstrap with HTML5
|
||||
Boilerplate?](#how-can-i-integrate-bootstrap-with-html5-boilerplate)
|
||||
* [Do I need to upgrade my site each time a new version of HTML5 Boilerplate is
|
||||
released?](#do-i-need-to-upgrade-my-site-each-time-a-new-version-of-html5-boilerplate-is-released)
|
||||
* [Where can I get help with support
|
||||
questions?](#where-can-i-get-help-with-support-questions)
|
||||
|
||||
---
|
||||
|
||||
### Why is the Google Analytics code at the bottom? Google recommends it be placed in the `<head>`.
|
||||
|
||||
The main advantage of placing it in the `<head>` is that you will track the
|
||||
user's `pageview` even if they leave the page before it has been fully loaded.
|
||||
|
||||
Here's a handy quote from [Mathias Bynens](https://mathiasbynens.be/notes/async-analytics-snippet#comment-50) about our placement choice.
|
||||
>I should point out that it’s Google — not me — recommending to place this
|
||||
script before all other scripts in the document. The only real advantage is to
|
||||
catch a pageView call if your page fails to load completely (for example, if
|
||||
the user aborts loading, or quickly closes the page, etc.). Personally, I
|
||||
wouldn’t count that as a page view, so I actually prefer to place this script
|
||||
at the bottom, after all other scripts. This keeps all the scripts together and
|
||||
reinforces that scripts at the bottom are the right move. (Usually I
|
||||
concatenate and minify all my scripts into one .js file — the GA snippet being
|
||||
the suffix.)
|
||||
|
||||
### How can I integrate [Bootstrap](https://getbootstrap.com/) with HTML5 Boilerplate?
|
||||
|
||||
Here's Nicolas Gallagher writing about how [HTML5 Boilerplate and Bootstrap complement each
|
||||
other](https://www.quora.com/Is-Bootstrap-a-complement-or-an-alternative-to-HTML5-Boilerplate-or-viceversa/answer/Nicolas-Gallagher).
|
||||
|
||||
### Do I need to upgrade my site each time a new version of HTML5 Boilerplate is released?
|
||||
|
||||
No, same as you don't normally replace the foundation of a house once it
|
||||
was built. However, there is nothing stopping you from trying to work in the
|
||||
latest changes, but you'll have to assess the costs/benefits of doing so.
|
||||
|
||||
### Where can I get help with support questions?
|
||||
|
||||
Please ask for help on
|
||||
[StackOverflow](https://stackoverflow.com/questions/tagged/html5boilerplate).
|
||||
250
dist/doc/html.md
vendored
Normal file
@@ -0,0 +1,250 @@
|
||||
[HTML5 Boilerplate homepage](https://html5boilerplate.com/) | [Documentation
|
||||
table of contents](TOC.md)
|
||||
|
||||
# The HTML
|
||||
|
||||
By default, HTML5 Boilerplate provides two `html` pages:
|
||||
|
||||
* [`index.html`](#indexhtml) - a default HTML skeleton that should form the
|
||||
basis of all pages on your website
|
||||
* [`404.html`](#404html) - a placeholder 404 error page
|
||||
|
||||
|
||||
## `index.html`
|
||||
|
||||
|
||||
### The `no-js` Class
|
||||
|
||||
The `no-js` class is provided in order to allow you to more easily and
|
||||
explicitly add custom styles based on whether JavaScript is disabled
|
||||
(`.no-js`) or enabled (`.js`). Using this technique also helps [avoid the
|
||||
FOUC](https://www.paulirish.com/2009/avoiding-the-fouc-v3/).
|
||||
|
||||
|
||||
## Language Attribute
|
||||
|
||||
Please consider specifying the language of your content by adding a [value](http://www.iana.org/assignments/language-subtag-registry/language-subtag-registry) to the `lang`
|
||||
attribute in the `<html>` as in this example:
|
||||
|
||||
```html
|
||||
<html class="no-js" lang="en">
|
||||
```
|
||||
|
||||
### The order of the `<title>` and `<meta>` tags
|
||||
|
||||
The order in which the `<title>` and the `<meta>` tags are specified is
|
||||
important because:
|
||||
|
||||
1) the charset declaration (`<meta charset="utf-8">`):
|
||||
|
||||
* must be included completely within the [first 1024 bytes of the
|
||||
document](https://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#charset)
|
||||
|
||||
* should be specified as early as possible (before any content that could
|
||||
be controlled by an attacker, such as a `<title>` element) in order to
|
||||
avoid a potential [encoding-related security
|
||||
issue](https://code.google.com/p/doctype-mirror/wiki/ArticleUtf7) in
|
||||
Internet Explorer
|
||||
|
||||
2) the meta tag for compatibility mode
|
||||
(`<meta http-equiv="x-ua-compatible" content="ie=edge">`):
|
||||
|
||||
* [needs to be included before all other tags except for the `<title>` and
|
||||
the other `<meta>`
|
||||
tags](https://msdn.microsoft.com/en-us/library/cc288325.aspx)
|
||||
|
||||
|
||||
### `x-ua-compatible`
|
||||
|
||||
Internet Explorer 8/9/10 support [document compatibility
|
||||
modes](https://msdn.microsoft.com/en-us/library/cc288325.aspx) that affect the
|
||||
way webpages are interpreted and displayed. Because of this, even if your site's
|
||||
visitor is using, let's say, Internet Explorer 9, it's possible that IE will not
|
||||
use the latest rendering engine, and instead, decide to render your page using
|
||||
the Internet Explorer 5.5 rendering engine.
|
||||
|
||||
Specifying the `x-ua-compatible` meta tag:
|
||||
|
||||
```html
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
```
|
||||
|
||||
or sending the page with the following HTTP response header
|
||||
|
||||
```
|
||||
X-UA-Compatible: IE=edge
|
||||
```
|
||||
|
||||
will force Internet Explorer 8/9/10 to render the webpage in the highest
|
||||
available mode in [the various cases when it may
|
||||
not](https://hsivonen.fi/doctype/#ie8), and therefore, ensure that anyone
|
||||
browsing your site is treated to the best possible user experience that
|
||||
browser can offer.
|
||||
|
||||
If possible, we recommend that you remove the `meta` tag and send only the
|
||||
HTTP response header as the `meta` tag will not always work if your site is
|
||||
served on a non-standard port, as Internet Explorer's preference option
|
||||
`Display intranet sites in Compatibility View` is checked by default.
|
||||
|
||||
If you are using Apache as your webserver, including the
|
||||
[`.htaccess`](https://github.com/h5bp/server-configs-apache) file takes care of
|
||||
the HTTP header. If you are using a different server, check out our [other
|
||||
server config](https://github.com/h5bp/server-configs).
|
||||
|
||||
Starting with Internet Explorer 11, [document modes are
|
||||
deprecated](https://msdn.microsoft.com/library/bg182625.aspx#docmode).
|
||||
If your business still relies on older web apps and services that were
|
||||
designed for older versions of Internet Explorer, you might want to consider
|
||||
enabling [Enterprise Mode](https://blogs.msdn.microsoft.com/ie/2014/04/02/stay-up-to-date-with-enterprise-mode-for-internet-explorer-11/) throughout your company.
|
||||
|
||||
|
||||
## Meta Description
|
||||
|
||||
The `description` meta tag provides a short description of the page.
|
||||
In some situations this description is used as a part of the snippet
|
||||
shown in the search results.
|
||||
|
||||
```html
|
||||
<meta name="description" content="This is a description">
|
||||
```
|
||||
|
||||
|
||||
## Mobile Viewport
|
||||
|
||||
There are a few different options that you can use with the [`viewport` meta
|
||||
tag](https://docs.google.com/present/view?id=dkx3qtm_22dxsrgcf4 "Viewport and
|
||||
Media Queries - The Complete Idiot's Guide"). You can find out more in [the
|
||||
Apple developer docs](https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html).
|
||||
HTML5 Boilerplate comes with a simple setup that strikes a good balance for general use cases.
|
||||
|
||||
```html
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
```
|
||||
|
||||
## Web App Manifest
|
||||
HTML5 Boilerplate includes a simple web app manifest file.
|
||||
|
||||
The web app manifest is a simple JSON file that allows you to control how your
|
||||
app appears on a device's home screen, what it looks like when it launches
|
||||
in that context and what happens when it is launched. This allows for much greater
|
||||
control over the UI of a saved site or web app on a mobile device.
|
||||
|
||||
It's linked to from the HTML as follows:
|
||||
|
||||
```html
|
||||
<link rel="manifest" href="site.webmanifest">
|
||||
```
|
||||
Our [site.webmanifest](https://github.com/h5bp/html5-boilerplate/blob/master/src/site.webmanifest) contains a very skeletal "app" definition, just to show the basic usage.
|
||||
You should fill this file out with [more information about your site or application](https://developer.mozilla.org/en-US/docs/Web/Manifest)
|
||||
|
||||
## Favicons and Touch Icon
|
||||
|
||||
The shortcut icons should be put in the root directory of your site. `favicon.ico`
|
||||
is automatically picked up by browsers if it's placed in the root. HTML5
|
||||
Boilerplate comes with a default set of icons (include favicon and one Apple
|
||||
Touch Icon) that you can use as a baseline to create your own.
|
||||
|
||||
Please refer to the more detailed description in the [Extend section](extend.md)
|
||||
of these docs.
|
||||
|
||||
## The Content Area
|
||||
|
||||
The central part of the boilerplate template is pretty much empty. This is
|
||||
intentional, in order to make the boilerplate suitable for both web page and
|
||||
web app development.
|
||||
|
||||
### Browser Upgrade Prompt
|
||||
|
||||
The main content area of the boilerplate includes a prompt to install an up to
|
||||
date browser for users of IE 8 and lower. If you intended to support IE 8, then you
|
||||
should remove the snippet of code.
|
||||
|
||||
## Modernizr
|
||||
|
||||
HTML5 Boilerplate uses a custom build of Modernizr.
|
||||
|
||||
[Modernizr](https://modernizr.com/) is a JavaScript library which adds classes to
|
||||
the `html` element based on the results of feature test and which ensures that
|
||||
all browsers can make use of HTML5 elements (as it includes the HTML5 Shiv).
|
||||
This allows you to target parts of your CSS and JavaScript based on the
|
||||
features supported by a browser.
|
||||
|
||||
Starting with version 3 Modernizr can be customized using the [modernizr-config.json](https://github.com/h5bp/html5-boilerplate/blob/master/modernizr-config.json) and the
|
||||
[Modernizr command line utility](https://www.npmjs.com/package/modernizr-cli).
|
||||
|
||||
## What About Polyfills?
|
||||
|
||||
If you need to include [polyfills](https://remysharp.com/2010/10/08/what-is-a-polyfill)
|
||||
in your project, you must make sure those load before any other JavaScript. If you're
|
||||
using some polyfill CDN service, like [cdn.polyfill.io](https://cdn.polyfill.io/),
|
||||
just put it before the other scripts in the bottom of the page:
|
||||
|
||||
```html
|
||||
<script src="js/vendor/modernizr-3.5.0.min.js"></script>
|
||||
<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
|
||||
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="js/vendor/jquery-3.2.1.min.js"><\/script>')</script>
|
||||
<script src="js/plugins.js"></script>
|
||||
<script src="js/main.js"></script>
|
||||
</body>
|
||||
```
|
||||
|
||||
If you like to just include the polyfills yourself, you could include them in
|
||||
`js/plugins.js`. When you have a bunch of polyfills to load in, you could
|
||||
also create a `polyfills.js` file in the `js/vendor` directory or include the files
|
||||
individually and combine them using a build tool. Always ensure that the polyfills
|
||||
are all loaded before any other Javascript.
|
||||
|
||||
There are some misconceptions about Modernizr and polyfills. It's important
|
||||
to understand that Modernizr just handles feature checking, not polyfilling
|
||||
itself. The only thing Modernizr does regarding polyfills is that the team
|
||||
maintains [a huge list of cross Browser polyfills](https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills).
|
||||
|
||||
### jQuery CDN for jQuery
|
||||
|
||||
The jQuery CDN version of the jQuery JavaScript library is referenced towards
|
||||
the bottom of the page. A local fallback of jQuery is included for rare instances
|
||||
when the CDN version might not be available, and to facilitate offline
|
||||
development.
|
||||
|
||||
The jQuery CDN version was chosen over other potential candidates
|
||||
([like Google's Hosted Libraries](https://developers.google.com/speed/libraries/))
|
||||
because it's fast ([comparable or faster than Google by some
|
||||
measures](https://www.cdnperf.com/#jsdelivr,cdnjs,google,yandex,microsoft,jquery,bootstrapcdn/https/90))
|
||||
and, (unlike Google's CDN) is available to China's hundreds of millions of internet users.
|
||||
For many years we [chose](https://github.com/h5bp/html5-boilerplate/issues/1191)
|
||||
the Google Hosted version over the jQuery CDN because it was available
|
||||
over HTTPS (the jQuery CDN was not,) and it offered a better chance of
|
||||
hitting the cache lottery owing to the popularity of the Google CDN.
|
||||
The first issue is no longer valid and the second is far outweighed by
|
||||
being able to serve jQuery to Chinese users.
|
||||
|
||||
While the jQuery CDN is a strong default solution your site or application may
|
||||
require a different configuration. Testing your site with services like
|
||||
[WebPageTest](https://www.webpagetest.org/) and browser tools like
|
||||
[PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/) will help you examine the real
|
||||
world performance of your site and can show where you can optimize your specific
|
||||
site or application.
|
||||
|
||||
### Google Universal Analytics Tracking Code
|
||||
|
||||
Finally, an optimized version of the Google Universal Analytics tracking code is
|
||||
included. Google recommends that this script be placed at the top of the page.
|
||||
Factors to consider: if you place this script at the top of the page, you’ll
|
||||
be able to count users who don’t fully load the page, and you’ll incur the max
|
||||
number of simultaneous connections of the browser.
|
||||
|
||||
Further information:
|
||||
|
||||
* [Optimizing the Google Universal Analytics
|
||||
Snippet](https://mathiasbynens.be/notes/async-analytics-snippet#universal-analytics)
|
||||
* [Introduction to
|
||||
Analytics.js](https://developers.google.com/analytics/devguides/collection/analyticsjs/)
|
||||
* [Google Analytics Demos & Tools](https://ga-dev-tools.appspot.com/)
|
||||
|
||||
**N.B.** The Google Universal Analytics snippet is included by default mainly
|
||||
because Google Analytics is [currently one of the most popular tracking
|
||||
solutions](https://trends.builtwith.com/analytics/Google-Analytics) out there.
|
||||
However, its usage isn't set in stone, and you SHOULD consider exploring the
|
||||
[alternatives](https://en.wikipedia.org/wiki/List_of_web_analytics_software)
|
||||
and use whatever suits your needs best!
|
||||
36
dist/doc/js.md
vendored
Normal file
@@ -0,0 +1,36 @@
|
||||
[HTML5 Boilerplate homepage](https://html5boilerplate.com/) | [Documentation
|
||||
table of contents](TOC.md)
|
||||
|
||||
# The JavaScript
|
||||
|
||||
Information about the default JavaScript included in the project.
|
||||
|
||||
## main.js
|
||||
|
||||
This file can be used to contain or reference your site/app JavaScript code.
|
||||
If you're working on something more advanced you might replace this file
|
||||
entirely. That's cool.
|
||||
|
||||
## plugins.js
|
||||
|
||||
This file can be used to contain all your plugins, such as jQuery plugins and
|
||||
other 3rd party scripts for a simple site.
|
||||
|
||||
One approach is to put jQuery plugins inside of a `(function($){ ...
|
||||
})(jQuery);` closure to make sure they're in the jQuery namespace safety
|
||||
blanket. Read more about [jQuery plugin
|
||||
authoring](https://learn.jquery.com/plugins/#Getting_Started).
|
||||
|
||||
By default the `plugins.js` file contains a small script to avoid `console`
|
||||
errors in browsers that lack a `console`. The script will make sure that, if
|
||||
a console method isn't available, that method will have the value of empty
|
||||
function, thus, preventing the browser from throwing an error.
|
||||
|
||||
## vendor
|
||||
|
||||
This directory can be used to contain all 3rd party library code.
|
||||
|
||||
Minified versions of the latest jQuery and Modernizr libraries are included by
|
||||
default. You may wish to create your own [custom Modernizr
|
||||
build with the online builder](https://www.modernizr.com/download/) or [command
|
||||
line tool](https://modernizr.com/docs#command-line-config).
|
||||
158
dist/doc/misc.md
vendored
Normal file
@@ -0,0 +1,158 @@
|
||||
[HTML5 Boilerplate homepage](https://html5boilerplate.com/) | [Documentation
|
||||
table of contents](TOC.md)
|
||||
|
||||
# Miscellaneous
|
||||
|
||||
* [.gitignore](#gitignore)
|
||||
* [.editorconfig](#editorconfig)
|
||||
* [Server Configuration](#server-configuration)
|
||||
* [robots.txt](#robotstxt)
|
||||
* [browserconfig.xml](#browserconfigxml)
|
||||
|
||||
--
|
||||
|
||||
## .gitignore
|
||||
|
||||
HTML5 Boilerplate includes a basic project-level `.gitignore`. This should
|
||||
primarily be used to avoid certain project-level files and directories from
|
||||
being kept under source control. Different development-environments will
|
||||
benefit from different collections of ignores.
|
||||
|
||||
OS-specific and editor-specific files should be ignored using a "global
|
||||
ignore" that applies to all repositories on your system.
|
||||
|
||||
For example, add the following to your `~/.gitconfig`, where the `.gitignore`
|
||||
in your HOME directory contains the files and directories you'd like to
|
||||
globally ignore:
|
||||
|
||||
```gitignore
|
||||
[core]
|
||||
excludesfile = ~/.gitignore
|
||||
```
|
||||
|
||||
* More on global ignores: https://help.github.com/articles/ignoring-files/
|
||||
* Comprehensive set of ignores on GitHub: https://github.com/github/gitignore
|
||||
|
||||
|
||||
## .editorconfig
|
||||
|
||||
The `.editorconfig` file is provided in order to encourage and help you and
|
||||
your team define and maintain consistent coding styles between different
|
||||
editors and IDEs.
|
||||
|
||||
By default, `.editorconfig` includes some basic
|
||||
[properties](http://editorconfig.org/#supported-properties) that reflect the
|
||||
coding styles from the files provided by default, but you can easily change
|
||||
them to better suit your needs.
|
||||
|
||||
In order for your editor/IDE to apply the
|
||||
[properties](http://editorconfig.org/#supported-properties) from the
|
||||
`.editorconfig` file, you may need to [install a
|
||||
plugin]( http://editorconfig.org/#download).
|
||||
|
||||
__N.B.__ If you aren't using the server configurations provided by HTML5
|
||||
Boilerplate, we highly encourage you to configure your server to block
|
||||
access to `.editorconfig` files, as they can disclose sensitive information!
|
||||
|
||||
For more details, please refer to the [EditorConfig
|
||||
project](http://editorconfig.org/).
|
||||
|
||||
|
||||
## Server Configuration
|
||||
|
||||
H5BP includes a [`.htaccess`](#htaccess) file for the [Apache HTTP
|
||||
server](https://httpd.apache.org/docs/). If you are not using Apache
|
||||
as your web server, then you are encouraged to download a
|
||||
[server configuration](https://github.com/h5bp/server-configs) that
|
||||
corresponds to your web server and environment.
|
||||
|
||||
A `.htaccess` (hypertext access) file is an [Apache HTTP server
|
||||
configuration file](https://github.com/h5bp/server-configs-apache).
|
||||
The `.htaccess` file is mostly used for:
|
||||
|
||||
* Rewriting URLs
|
||||
* Controlling cache
|
||||
* Authentication
|
||||
* Server-side includes
|
||||
* Redirects
|
||||
* Gzipping
|
||||
|
||||
If you have access to the main server configuration file (usually called
|
||||
`httpd.conf`), you should add the logic from the `.htaccess` file in, for
|
||||
example, a <Directory> section in the main configuration file. This is usually
|
||||
the recommended way, as using .htaccess files slows down Apache!
|
||||
|
||||
To enable Apache modules locally, please see:
|
||||
https://github.com/h5bp/server-configs-apache/wiki/How-to-enable-Apache-modules.
|
||||
|
||||
In the repo the `.htaccess` is used for:
|
||||
|
||||
* Allowing cross-origin access to web fonts
|
||||
* CORS header for images when browsers request it
|
||||
* Enable `404.html` as 404 error document
|
||||
* Making the website experience better for IE users better
|
||||
* Media UTF-8 as character encoding for `text/html` and `text/plain`
|
||||
* Enabling the rewrite URLs engine
|
||||
* Forcing or removing the `www.` at the begin of a URL
|
||||
* It blocks access to directories without a default document
|
||||
* It blocks access to files that can expose sensitive information.
|
||||
* It reduces MIME type security risks
|
||||
* It forces compressing (gzipping)
|
||||
* It tells the browser whether they should request a specific file from the
|
||||
server or whether they should grab it from the browser's cache
|
||||
|
||||
When using `.htaccess` we recommend reading all inline comments (the rules after
|
||||
a `#`) in the file once. There is a bunch of optional stuff in it.
|
||||
|
||||
If you want to know more about the `.htaccess` file check out the
|
||||
[Apache HTTP server docs](https://httpd.apache.org/docs/) or more
|
||||
specifically the [htaccess
|
||||
section](https://httpd.apache.org/docs/current/howto/htaccess.html).
|
||||
|
||||
Notice that the original repo for the `.htaccess` file is [this
|
||||
one](https://github.com/h5bp/server-configs-apache).
|
||||
|
||||
|
||||
## robots.txt
|
||||
|
||||
The `robots.txt` file is used to give instructions to web robots on what can
|
||||
be crawled from the website.
|
||||
|
||||
By default, the file provided by this project includes the next two lines:
|
||||
|
||||
* `User-agent: *` - the following rules apply to all web robots
|
||||
* `Disallow:` - everything on the website is allowed to be crawled
|
||||
|
||||
If you want to disallow certain pages you will need to specify the path in a
|
||||
`Disallow` directive (e.g.: `Disallow: /path`) or, if you want to disallow
|
||||
crawling of all content, use `Disallow: /`.
|
||||
|
||||
The `/robots.txt` file is not intended for access control, so don't try to
|
||||
use it as such. Think of it as a "No Entry" sign, rather than a locked door.
|
||||
URLs disallowed by the `robots.txt` file might still be indexed without being
|
||||
crawled, and the content from within the `robots.txt` file can be viewed by
|
||||
anyone, potentially disclosing the location of your private content! So, if
|
||||
you want to block access to private content, use proper authentication instead.
|
||||
|
||||
For more information about `robots.txt`, please see:
|
||||
|
||||
* [robotstxt.org](http://www.robotstxt.org/)
|
||||
* [How Google handles the `robots.txt` file](https://developers.google.com/webmasters/control-crawl-index/docs/robots_txt)
|
||||
|
||||
|
||||
## browserconfig.xml
|
||||
|
||||
The `browserconfig.xml` file is used to customize the tile displayed when users
|
||||
pin your site to the Windows 8.1 start screen. In there you can define custom
|
||||
tile colors, custom images or even [live tiles](https://msdn.microsoft.com/library/dn455106.aspx#CreatingLiveTiles).
|
||||
|
||||
By default, the file points to 2 placeholder tile images:
|
||||
|
||||
* `tile.png` (558x558px): used for `Small`, `Medium` and `Large` tiles.
|
||||
This image resizes automatically when necessary.
|
||||
* `tile-wide.png` (558x270px): user for `Wide` tiles.
|
||||
|
||||
Notice that IE11 uses the same images when adding a site to the `favorites`.
|
||||
|
||||
For more in-depth information about the `browserconfig.xml` file, please
|
||||
see [MSDN](https://msdn.microsoft.com/library/dn320426.aspx).
|
||||
130
dist/doc/usage.md
vendored
Normal file
@@ -0,0 +1,130 @@
|
||||
[HTML5 Boilerplate homepage](https://html5boilerplate.com/) | [Documentation
|
||||
table of contents](TOC.md)
|
||||
|
||||
# Usage
|
||||
|
||||
The most basic usage of HTML5 Boilerplate is to create a static site or simple
|
||||
app. Once you've downloaded or cloned the project, that process looks something
|
||||
like this:
|
||||
|
||||
1. Set up the basic structure of the site.
|
||||
2. Add some content, style, and functionality.
|
||||
3. Run your site locally to see how it looks.
|
||||
4. Deploy your site.
|
||||
|
||||
Cool, right? _It is_. That said, the smart defaults, baseline elements, default
|
||||
attribute values and various other utilities that HTML5 Boilerplate offers can
|
||||
serve as the foundation for whatever you're interested in building.
|
||||
|
||||
Even the basic use-case of a simple static site can be enhanced by manipulating
|
||||
the code through an automated build process. Moving up in complexity HTML5
|
||||
Boilerplate can be be integrated with whatever front-end framework, CMS or
|
||||
e-commerce platform you're working with. Mix-and-match to your heart's content.
|
||||
Use what you need (toss it in a blender if you need to) and discard the rest.
|
||||
HTML5 Boilerplate is a starting point, not a destination.
|
||||
|
||||
## Basic structure
|
||||
|
||||
A basic HTML5 Boilerplate site initially looks something like this:
|
||||
|
||||
```
|
||||
.
|
||||
├── css
|
||||
│ ├── main.css
|
||||
│ └── normalize.css
|
||||
├── doc
|
||||
├── img
|
||||
├── js
|
||||
│ ├── main.js
|
||||
│ ├── plugins.js
|
||||
│ └── vendor
|
||||
│ ├── jquery.min.js
|
||||
│ └── modernizr.min.js
|
||||
├── .editorconfig
|
||||
├── .htaccess
|
||||
├── 404.html
|
||||
├── browserconfig.xml
|
||||
├── favicon.ico
|
||||
├── humans.txt
|
||||
├── icon.png
|
||||
├── index.html
|
||||
├── robots.txt
|
||||
├── site.webmanifest
|
||||
├── tile.png
|
||||
└── tile-wide.png
|
||||
```
|
||||
|
||||
What follows is a general overview of each major part and how to use them.
|
||||
|
||||
### css
|
||||
|
||||
This directory should contain all your project's CSS files. It includes some
|
||||
initial CSS to help get you started from a solid foundation. [About the
|
||||
CSS](css.md).
|
||||
|
||||
### doc
|
||||
|
||||
This directory contains all the HTML5 Boilerplate documentation. You can use it
|
||||
as the location and basis for your own project's documentation.
|
||||
|
||||
### js
|
||||
|
||||
This directory should contain all your project's JS files. Libraries, plugins,
|
||||
and custom code can all be included here. It includes some initial JS to help
|
||||
get you started. [About the JavaScript](js.md).
|
||||
|
||||
### .htaccess
|
||||
|
||||
The default web server configs are for Apache. For more information, please
|
||||
refer to the [Apache Server Configs
|
||||
repository](https://github.com/h5bp/server-configs-apache).
|
||||
|
||||
Host your site on a server other than Apache? You're likely to find the
|
||||
corresponding server configs project listed in our [Server Configs
|
||||
](https://github.com/h5bp/server-configs/blob/master/README.md) repository.
|
||||
|
||||
### 404.html
|
||||
|
||||
A helpful custom 404 to get you started.
|
||||
|
||||
### browserconfig.xml
|
||||
|
||||
This file contains all settings regarding custom tiles for IE11 and Edge.
|
||||
|
||||
For more info on this topic, please refer to
|
||||
[MSDN](https://msdn.microsoft.com/library/dn455106.aspx).
|
||||
|
||||
### .editorconfig
|
||||
|
||||
The `.editorconfig` file is provided in order to encourage and help you and
|
||||
your team to maintain consistent coding styles between different
|
||||
editors and IDEs. [Read more about the `.editorconfig` file](misc.md#editorconfig).
|
||||
|
||||
### index.html
|
||||
|
||||
This is the default HTML skeleton that should form the basis of all pages on
|
||||
your site. If you are using a server-side templating framework, then you will
|
||||
need to integrate this starting HTML with your setup.
|
||||
|
||||
Make sure that you update the URLs for the referenced CSS and JavaScript if you
|
||||
modify the directory structure at all.
|
||||
|
||||
If you are using Google Universal Analytics, make sure that you edit the
|
||||
corresponding snippet at the bottom to include your analytics ID.
|
||||
|
||||
### humans.txt
|
||||
|
||||
Edit this file to include the team that worked on your site/app, and the
|
||||
technology powering it.
|
||||
|
||||
### robots.txt
|
||||
|
||||
Edit this file to include any pages you need hidden from search engines.
|
||||
|
||||
### Icons
|
||||
|
||||
Replace the default `favicon.ico`, `tile.png`, `tile-wide.png` and Apple
|
||||
Touch Icon with your own.
|
||||
|
||||
If you want to use different Apple Touch Icons for different resolutions please
|
||||
refer to the [according documentation](extend.md#apple-touch-icons).
|
||||
BIN
dist/favicon.ico
vendored
Normal file
|
After Width: | Height: | Size: 766 B |
15
dist/humans.txt
vendored
Normal file
@@ -0,0 +1,15 @@
|
||||
# humanstxt.org/
|
||||
# The humans responsible & technology colophon
|
||||
|
||||
# TEAM
|
||||
|
||||
<name> -- <role> -- <twitter>
|
||||
|
||||
# THANKS
|
||||
|
||||
<name>
|
||||
|
||||
# TECHNOLOGY COLOPHON
|
||||
|
||||
CSS3, HTML5
|
||||
Apache Server Configs, jQuery, Modernizr, Normalize.css
|
||||
BIN
dist/icon.png
vendored
Normal file
|
After Width: | Height: | Size: 3.9 KiB |
0
img/.gitignore → dist/img/.gitignore
vendored
37
dist/index.html
vendored
Normal file
@@ -0,0 +1,37 @@
|
||||
<!doctype html>
|
||||
<html class="no-js" lang="">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<title></title>
|
||||
<meta name="description" content="">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<link rel="manifest" href="site.webmanifest">
|
||||
<link rel="apple-touch-icon" href="icon.png">
|
||||
<!-- Place favicon.ico in the root directory -->
|
||||
|
||||
<link rel="stylesheet" href="css/normalize.css">
|
||||
<link rel="stylesheet" href="css/main.css">
|
||||
</head>
|
||||
<body>
|
||||
<!--[if lte IE 9]>
|
||||
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
|
||||
<![endif]-->
|
||||
|
||||
<!-- Add your site or application content here -->
|
||||
<p>Hello world! This is HTML5 Boilerplate.</p>
|
||||
<script src="js/vendor/modernizr-3.5.0.min.js"></script>
|
||||
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="js/vendor/jquery-3.2.1.min.js"><\/script>')</script>
|
||||
<script src="js/plugins.js"></script>
|
||||
<script src="js/main.js"></script>
|
||||
|
||||
<!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
|
||||
<script>
|
||||
window.ga=function(){ga.q.push(arguments)};ga.q=[];ga.l=+new Date;
|
||||
ga('create','UA-XXXXX-Y','auto');ga('send','pageview')
|
||||
</script>
|
||||
<script src="https://www.google-analytics.com/analytics.js" async defer></script>
|
||||
</body>
|
||||
</html>
|
||||
0
dist/js/main.js
vendored
Normal file
24
dist/js/plugins.js
vendored
Normal file
@@ -0,0 +1,24 @@
|
||||
// Avoid `console` errors in browsers that lack a console.
|
||||
(function() {
|
||||
var method;
|
||||
var noop = function () {};
|
||||
var methods = [
|
||||
'assert', 'clear', 'count', 'debug', 'dir', 'dirxml', 'error',
|
||||
'exception', 'group', 'groupCollapsed', 'groupEnd', 'info', 'log',
|
||||
'markTimeline', 'profile', 'profileEnd', 'table', 'time', 'timeEnd',
|
||||
'timeline', 'timelineEnd', 'timeStamp', 'trace', 'warn'
|
||||
];
|
||||
var length = methods.length;
|
||||
var console = (window.console = window.console || {});
|
||||
|
||||
while (length--) {
|
||||
method = methods[length];
|
||||
|
||||
// Only stub undefined methods.
|
||||
if (!console[method]) {
|
||||
console[method] = noop;
|
||||
}
|
||||
}
|
||||
}());
|
||||
|
||||
// Place any jQuery/helper plugins in here.
|
||||
4
dist/js/vendor/jquery-3.2.1.min.js
vendored
Normal file
3
dist/js/vendor/modernizr-3.5.0.min.js
vendored
Normal file
5
dist/robots.txt
vendored
Normal file
@@ -0,0 +1,5 @@
|
||||
# www.robotstxt.org/
|
||||
|
||||
# Allow crawling of all content
|
||||
User-agent: *
|
||||
Disallow:
|
||||
8
dist/site.webmanifest
vendored
Normal file
@@ -0,0 +1,8 @@
|
||||
{
|
||||
"icons": [{
|
||||
"src": "icon.png",
|
||||
"sizes": "192x192",
|
||||
"type": "image/png"
|
||||
}],
|
||||
"start_url": "/"
|
||||
}
|
||||
BIN
dist/tile-wide.png
vendored
Normal file
|
After Width: | Height: | Size: 1.8 KiB |
BIN
dist/tile.png
vendored
Normal file
|
After Width: | Height: | Size: 3.4 KiB |
BIN
favicon.ico
|
Before Width: | Height: | Size: 1.1 KiB |
196
gulpfile.babel.js
Normal file
@@ -0,0 +1,196 @@
|
||||
import fs from 'fs';
|
||||
import path from 'path';
|
||||
|
||||
import gulp from 'gulp';
|
||||
|
||||
// Load all gulp plugins automatically
|
||||
// and attach them to the `plugins` object
|
||||
import plugins from 'gulp-load-plugins';
|
||||
|
||||
// Temporary solution until gulp 4
|
||||
// https://github.com/gulpjs/gulp/issues/355
|
||||
import runSequence from 'run-sequence';
|
||||
|
||||
import archiver from 'archiver';
|
||||
import glob from 'glob';
|
||||
import del from 'del';
|
||||
import sri from 'node-sri';
|
||||
import modernizr from 'modernizr';
|
||||
|
||||
import pkg from './package.json';
|
||||
import modernizrConfig from './modernizr-config.json';
|
||||
|
||||
|
||||
const dirs = pkg['h5bp-configs'].directories;
|
||||
|
||||
// ---------------------------------------------------------------------
|
||||
// | Helper tasks |
|
||||
// ---------------------------------------------------------------------
|
||||
|
||||
gulp.task('archive:create_archive_dir', () => {
|
||||
fs.mkdirSync(path.resolve(dirs.archive), '0755');
|
||||
});
|
||||
|
||||
gulp.task('archive:zip', (done) => {
|
||||
|
||||
const archiveName = path.resolve(dirs.archive, `${pkg.name}_v${pkg.version}.zip`);
|
||||
const zip = archiver('zip');
|
||||
const files = glob.sync('**/*.*', {
|
||||
'cwd': dirs.dist,
|
||||
'dot': true // include hidden files
|
||||
});
|
||||
const output = fs.createWriteStream(archiveName);
|
||||
|
||||
zip.on('error', (error) => {
|
||||
done();
|
||||
throw error;
|
||||
});
|
||||
|
||||
output.on('close', done);
|
||||
|
||||
files.forEach( (file) => {
|
||||
|
||||
const filePath = path.resolve(dirs.dist, file);
|
||||
|
||||
// `zip.bulk` does not maintain the file
|
||||
// permissions, so we need to add files individually
|
||||
zip.append(fs.createReadStream(filePath), {
|
||||
'name': file,
|
||||
'mode': fs.statSync(filePath).mode
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
zip.pipe(output);
|
||||
zip.finalize();
|
||||
|
||||
});
|
||||
|
||||
gulp.task('clean', (done) => {
|
||||
del([
|
||||
dirs.archive,
|
||||
dirs.dist
|
||||
]).then( () => {
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
gulp.task('copy', [
|
||||
'copy:.htaccess',
|
||||
'copy:index.html',
|
||||
'copy:jquery',
|
||||
'copy:license',
|
||||
'copy:main.css',
|
||||
'copy:misc',
|
||||
'copy:normalize'
|
||||
]);
|
||||
|
||||
gulp.task('copy:.htaccess', () =>
|
||||
gulp.src('node_modules/apache-server-configs/dist/.htaccess')
|
||||
.pipe(plugins().replace(/# ErrorDocument/g, 'ErrorDocument'))
|
||||
.pipe(gulp.dest(dirs.dist))
|
||||
);
|
||||
|
||||
gulp.task('copy:index.html', (done) =>
|
||||
sri.hash('node_modules/jquery/dist/jquery.min.js', (err, hash) => {
|
||||
if (err) throw err
|
||||
|
||||
let version = pkg.devDependencies.jquery;
|
||||
let modernizrVersion = pkg.devDependencies.modernizr;
|
||||
gulp.src(`${dirs.src}/index.html`)
|
||||
.pipe(plugins().replace(/{{JQUERY_VERSION}}/g, version))
|
||||
.pipe(plugins().replace(/{{MODERNIZR_VERSION}}/g, modernizrVersion))
|
||||
.pipe(plugins().replace(/{{JQUERY_SRI_HASH}}/g, hash))
|
||||
.pipe(gulp.dest(dirs.dist));
|
||||
done();
|
||||
})
|
||||
);
|
||||
|
||||
gulp.task('copy:jquery', () =>
|
||||
gulp.src(['node_modules/jquery/dist/jquery.min.js'])
|
||||
.pipe(plugins().rename(`jquery-${pkg.devDependencies.jquery}.min.js`))
|
||||
.pipe(gulp.dest(`${dirs.dist}/js/vendor`))
|
||||
);
|
||||
|
||||
gulp.task('copy:license', () =>
|
||||
gulp.src('LICENSE.txt')
|
||||
.pipe(gulp.dest(dirs.dist))
|
||||
);
|
||||
|
||||
gulp.task('copy:main.css', () => {
|
||||
|
||||
const banner = `/*! HTML5 Boilerplate v${pkg.version} | ${pkg.license} License | ${pkg.homepage} */\n\n`;
|
||||
|
||||
gulp.src(`${dirs.src}/css/main.css`)
|
||||
.pipe(plugins().header(banner))
|
||||
.pipe(plugins().autoprefixer({
|
||||
browsers: ['last 2 versions', 'ie >= 9', '> 1%'],
|
||||
cascade: false
|
||||
}))
|
||||
.pipe(gulp.dest(`${dirs.dist}/css`));
|
||||
});
|
||||
|
||||
gulp.task('copy:misc', () =>
|
||||
gulp.src([
|
||||
|
||||
// Copy all files
|
||||
`${dirs.src}/**/*`,
|
||||
|
||||
// Exclude the following files
|
||||
// (other tasks will handle the copying of these files)
|
||||
`!${dirs.src}/css/main.css`,
|
||||
`!${dirs.src}/index.html`
|
||||
|
||||
], {
|
||||
|
||||
// Include hidden files by default
|
||||
dot: true
|
||||
|
||||
}).pipe(gulp.dest(dirs.dist))
|
||||
);
|
||||
|
||||
gulp.task('copy:normalize', () =>
|
||||
gulp.src('node_modules/normalize.css/normalize.css')
|
||||
.pipe(gulp.dest(`${dirs.dist}/css`))
|
||||
);
|
||||
|
||||
gulp.task( 'modernizr', (done) =>{
|
||||
|
||||
modernizr.build(modernizrConfig, (code) => {
|
||||
fs.writeFile(`${dirs.dist}/js/vendor/modernizr-${pkg.devDependencies.modernizr}.min.js`, code, done);
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
gulp.task('lint:js', () =>
|
||||
gulp.src([
|
||||
'gulpfile.js',
|
||||
`${dirs.src}/js/*.js`,
|
||||
`${dirs.test}/*.js`
|
||||
]).pipe(plugins().jscs())
|
||||
.pipe(plugins().jshint())
|
||||
.pipe(plugins().jshint.reporter('jshint-stylish'))
|
||||
.pipe(plugins().jshint.reporter('fail'))
|
||||
);
|
||||
|
||||
|
||||
// ---------------------------------------------------------------------
|
||||
// | Main tasks |
|
||||
// ---------------------------------------------------------------------
|
||||
|
||||
gulp.task('archive', (done) => {
|
||||
runSequence(
|
||||
'build',
|
||||
'archive:create_archive_dir',
|
||||
'archive:zip',
|
||||
done)
|
||||
});
|
||||
|
||||
gulp.task('build', (done) => {
|
||||
runSequence(
|
||||
['clean', 'lint:js'],
|
||||
'copy', 'modernizr',
|
||||
done)
|
||||
});
|
||||
|
||||
gulp.task('default', ['build']);
|
||||
43
humans.txt
@@ -1,43 +0,0 @@
|
||||
/* the humans responsible & colophon */
|
||||
/* humanstxt.org */
|
||||
|
||||
|
||||
/* TEAM */
|
||||
<your title>: <your name>
|
||||
Site:
|
||||
Twitter:
|
||||
Location:
|
||||
|
||||
/* THANKS */
|
||||
Names (& URL):
|
||||
|
||||
/* SITE */
|
||||
Standards: HTML5, CSS3
|
||||
Components: Modernizr, jQuery
|
||||
Software:
|
||||
|
||||
|
||||
|
||||
-o/-
|
||||
+oo//-
|
||||
:ooo+//:
|
||||
-ooooo///-
|
||||
/oooooo//:
|
||||
:ooooooo+//-
|
||||
-+oooooooo///-
|
||||
-://////////////+oooooooooo++////////////::
|
||||
:+ooooooooooooooooooooooooooooooooooooo+:::-
|
||||
-/+ooooooooooooooooooooooooooooooo+/::////:-
|
||||
-:+oooooooooooooooooooooooooooo/::///////:-
|
||||
--/+ooooooooooooooooooooo+::://////:-
|
||||
-:+ooooooooooooooooo+:://////:--
|
||||
/ooooooooooooooooo+//////:-
|
||||
-ooooooooooooooooooo////-
|
||||
/ooooooooo+oooooooooo//:
|
||||
:ooooooo+/::/+oooooooo+//-
|
||||
-oooooo/::///////+oooooo///-
|
||||
/ooo+::://////:---:/+oooo//:
|
||||
-o+/::///////:- -:/+o+//-
|
||||
:-:///////:- -:/://
|
||||
-////:- --//:
|
||||
-- -:
|
||||
67
index.html
@@ -1,67 +0,0 @@
|
||||
<!doctype html>
|
||||
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
|
||||
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
|
||||
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
|
||||
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
|
||||
<!-- Consider adding a manifest.appcache: h5bp.com/d/Offline -->
|
||||
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<!-- Use the .htaccess and remove these lines to avoid edge case issues.
|
||||
More info: h5bp.com/i/378 -->
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
|
||||
<title></title>
|
||||
<meta name="description" content="">
|
||||
|
||||
<!-- Mobile viewport optimized: h5bp.com/viewport -->
|
||||
<meta name="viewport" content="width=device-width">
|
||||
|
||||
<!-- Place favicon.ico and apple-touch-icon.png in the root directory: mathiasbynens.be/notes/touch-icons -->
|
||||
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
|
||||
<!-- More ideas for your <head> here: h5bp.com/d/head-Tips -->
|
||||
|
||||
<!-- All JavaScript at the bottom, except this Modernizr build.
|
||||
Modernizr enables HTML5 elements & feature detects for optimal performance.
|
||||
Create your own custom Modernizr build: www.modernizr.com/download/ -->
|
||||
<script src="js/libs/modernizr-2.5.0.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Prompt IE 6 users to install Chrome Frame. Remove this if you support IE 6.
|
||||
chromium.org/developers/how-tos/chrome-frame-getting-started -->
|
||||
<!--[if lt IE 7]><p class=chromeframe>Your browser is <em>ancient!</em> <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p><![endif]-->
|
||||
<header>
|
||||
|
||||
</header>
|
||||
<div role="main">
|
||||
|
||||
</div>
|
||||
<footer>
|
||||
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- JavaScript at the bottom for fast page loading -->
|
||||
|
||||
<!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
|
||||
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.min.js"><\/script>')</script>
|
||||
|
||||
<!-- scripts concatenated and minified via build script -->
|
||||
<script src="js/plugins.js"></script>
|
||||
<script src="js/script.js"></script>
|
||||
<!-- end scripts -->
|
||||
|
||||
<!-- Asynchronous Google Analytics snippet. Change UA-XXXXX-X to be your site's ID.
|
||||
mathiasbynens.be/notes/async-analytics-snippet -->
|
||||
<script>
|
||||
var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
|
||||
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
|
||||
g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
|
||||
s.parentNode.insertBefore(g,s)}(document,'script'));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
9266
js/libs/jquery-1.7.1.js
vendored
4
js/libs/jquery-1.7.1.min.js
vendored
4
js/libs/modernizr-2.5.0.min.js
vendored
@@ -1,11 +0,0 @@
|
||||
// usage: log('inside coolFunc', this, arguments);
|
||||
// paulirish.com/2009/log-a-lightweight-wrapper-for-consolelog/
|
||||
window.log = function f(){ log.history = log.history || []; log.history.push(arguments); if(this.console) { var args = arguments, newarr; args.callee = args.callee.caller; newarr = [].slice.call(args); if (typeof console.log === 'object') log.apply.call(console.log, console, newarr); else console.log.apply(console, newarr);}};
|
||||
|
||||
// make it safe to use console.log always
|
||||
(function(a){function b(){}for(var c="assert,count,debug,dir,dirxml,error,exception,group,groupCollapsed,groupEnd,info,log,markTimeline,profile,profileEnd,time,timeEnd,trace,warn".split(","),d;!!(d=c.pop());){a[d]=a[d]||b;}})
|
||||
(function(){try{console.log();return window.console;}catch(a){return (window.console={});}}());
|
||||
|
||||
|
||||
// place any jQuery/helper plugins in here, instead of separate, slower script files.
|
||||
|
||||
@@ -1,8 +0,0 @@
|
||||
/* Author:
|
||||
|
||||
*/
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
30
modernizr-config.json
Normal file
@@ -0,0 +1,30 @@
|
||||
{
|
||||
"minify": true,
|
||||
"options": [
|
||||
"domPrefixes",
|
||||
"prefixes",
|
||||
"addTest",
|
||||
"hasEvent",
|
||||
"mq",
|
||||
"prefixedCSSValue",
|
||||
"testAllProps",
|
||||
"testProp",
|
||||
"testStyles",
|
||||
"setClasses"
|
||||
],
|
||||
"feature-detects": [
|
||||
"test/custom-elements",
|
||||
"test/history",
|
||||
"test/pointerevents",
|
||||
"test/postmessage",
|
||||
"test/webgl",
|
||||
"test/websockets",
|
||||
"test/css/animations",
|
||||
"test/css/columns",
|
||||
"test/css/flexbox",
|
||||
"test/elem/picture",
|
||||
"test/img/sizes",
|
||||
"test/img/srcset",
|
||||
"test/workers/webworkers"
|
||||
]
|
||||
}
|
||||
68
package.json
Normal file
@@ -0,0 +1,68 @@
|
||||
{
|
||||
"devDependencies": {
|
||||
"@alrra/travis-scripts": "^3.0.1",
|
||||
"apache-server-configs": "2.14.0",
|
||||
"archiver": "^2.0.0",
|
||||
"babel-core": "^6.25.0",
|
||||
"babel-preset-es2015": "^6.18.0",
|
||||
"babel-register": "^6.8.0",
|
||||
"del": "^3.0.0",
|
||||
"glob": "^7.1.2",
|
||||
"gulp": "^3.9.1",
|
||||
"gulp-autoprefixer": "^3.1.1",
|
||||
"gulp-header": "^1.8.8",
|
||||
"gulp-jscs": "^4.0.0",
|
||||
"gulp-jshint": "^2.0.4",
|
||||
"gulp-load-plugins": "^1.5.0",
|
||||
"gulp-rename": "^1.2.2",
|
||||
"gulp-replace": "^0.6.1",
|
||||
"jquery": "3.2.1",
|
||||
"jshint": "^2.9.5",
|
||||
"jshint-stylish": "^2.2.1",
|
||||
"mocha": "^3.2.0",
|
||||
"modernizr": "3.5.0",
|
||||
"node-sri": "^1.1.1",
|
||||
"normalize.css": "7.0.0",
|
||||
"run-sequence": "^2.0.0",
|
||||
"strip-json-comments": "^2.0.1",
|
||||
"travis-after-all": "^1.4.5"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=4",
|
||||
"npm": ">=3"
|
||||
},
|
||||
"babel": {
|
||||
"presets": [
|
||||
"es2015"
|
||||
]
|
||||
},
|
||||
"h5bp-configs": {
|
||||
"directories": {
|
||||
"archive": "archive",
|
||||
"dist": "dist",
|
||||
"src": "src",
|
||||
"test": "test"
|
||||
}
|
||||
},
|
||||
"homepage": "https://html5boilerplate.com/",
|
||||
"license": "MIT",
|
||||
"name": "html5-boilerplate",
|
||||
"scripts": {
|
||||
"build": "gulp build",
|
||||
"test": "gulp archive && mocha --compilers js:babel-register --reporter spec --timeout 5000"
|
||||
},
|
||||
"version": "6.0.0",
|
||||
"description": "A professional front-end template for building fast, robust, and adaptable web apps or sites.",
|
||||
"files": [
|
||||
"CHANGELOG.md",
|
||||
"LICENSE.txt",
|
||||
"package.json",
|
||||
"dist/",
|
||||
"modernizr-config.json",
|
||||
"README.md"
|
||||
],
|
||||
"repository" : {
|
||||
"type" : "git",
|
||||
"url" : "https://github.com/h5bp/html5-boilerplate.git"
|
||||
}
|
||||
}
|
||||
55
readme.md
@@ -1,55 +0,0 @@
|
||||
# [HTML5 Boilerplate](http://html5boilerplate.com)
|
||||
|
||||
HTML5 Boilerplate is a professional front-end template that helps you build fast, robust, adaptable, and future-proof websites. Spend more time developing and less time reinventing the wheel.
|
||||
|
||||
This project is the product of many years of iterative development and combined community knowledge. It does not impose a specific development philosophy or framework, so you're free to architect your code in the way that you want.
|
||||
|
||||
|
||||
## Quick start
|
||||
|
||||
Clone the git repo - `git clone git://github.com/h5bp/html5-boilerplate.git` - or [download it](https://github.com/h5bp/html5-boilerplate/zipball/master)
|
||||
|
||||
|
||||
## Features
|
||||
|
||||
* HTML5 ready. Use the new elements with confidence.
|
||||
* Cross-browser compatible (Chrome, Opera, Safari, Firefox 3.6+, IE6+).
|
||||
* Designed with progressive enhancement in mind.
|
||||
* CSS normalizations and common bug fixes.
|
||||
* IE-specific classes for easier cross-browser control.
|
||||
* A default print stylesheet, performance optimized.
|
||||
* Mobile browser optimizations.
|
||||
* Protection against any stray `console.log` causing JavaScript errors in IE6/7.
|
||||
* The latest jQuery via CDN, with a local fallback.
|
||||
* A custom Modernizr build for feature detection.
|
||||
* An optimized Google Analytics snippet.
|
||||
* Apache server caching, compression, and other configuration defaults for Grade-A performance.
|
||||
* Cross-domain Ajax and Flash.
|
||||
* "Delete-key friendly." Easy to strip out parts you don't need.
|
||||
* Extensive inline and accompanying documentation.
|
||||
|
||||
|
||||
## Contributing
|
||||
|
||||
Anyone and everyone is welcome to [contribute](https://github.com/h5bp/html5-boilerplate/wiki/contribute). Hundreds of developers have helped make the HTML5 Boilerplate what it is today.
|
||||
|
||||
|
||||
## Project information
|
||||
|
||||
* Source: http://github.com/h5bp/html5-boilerplate
|
||||
* Web: http://html5boilerplate.com
|
||||
* Docs: http://html5boilerplate.com/docs
|
||||
* Twitter: http://twitter.com/h5bp
|
||||
|
||||
|
||||
## License
|
||||
|
||||
### Major components:
|
||||
|
||||
* jQuery: MIT/GPL license
|
||||
* Modernizr: MIT/BSD license
|
||||
* Normalize.css: Public Domain
|
||||
|
||||
### Everything else:
|
||||
|
||||
The Unlicense (aka: public domain)
|
||||
@@ -1,4 +0,0 @@
|
||||
# www.robotstxt.org/
|
||||
# http://code.google.com/web/controlcrawlindex/
|
||||
|
||||
User-agent: *
|
||||
13
src/.editorconfig
Normal file
@@ -0,0 +1,13 @@
|
||||
# editorconfig.org
|
||||
|
||||
root = true
|
||||
|
||||
[*]
|
||||
charset = utf-8
|
||||
indent_size = 4
|
||||
indent_style = space
|
||||
insert_final_newline = true
|
||||
trim_trailing_whitespace = true
|
||||
|
||||
[*.md]
|
||||
trim_trailing_whitespace = false
|
||||
192
src/.gitattributes
vendored
Normal file
@@ -0,0 +1,192 @@
|
||||
## GITATTRIBUTES FOR WEB PROJECTS
|
||||
#
|
||||
# These settings are for any web project.
|
||||
#
|
||||
# Details per file setting:
|
||||
# text These files should be normalized (i.e. convert CRLF to LF).
|
||||
# binary These files are binary and should be left untouched.
|
||||
#
|
||||
# Note that binary is a macro for -text -diff.
|
||||
######################################################################
|
||||
|
||||
## AUTO-DETECT
|
||||
## Handle line endings automatically for files detected as
|
||||
## text and leave all files detected as binary untouched.
|
||||
## This will handle all files NOT defined below.
|
||||
* text=auto
|
||||
|
||||
## SOURCE CODE
|
||||
*.bat text eol=crlf
|
||||
*.coffee text
|
||||
*.css text
|
||||
*.htm text
|
||||
*.html text
|
||||
*.inc text
|
||||
*.ini text
|
||||
*.js text
|
||||
*.json text
|
||||
*.jsx text
|
||||
*.less text
|
||||
*.od text
|
||||
*.onlydata text
|
||||
*.php text
|
||||
*.pl text
|
||||
*.py text
|
||||
*.rb text
|
||||
*.sass text
|
||||
*.scm text
|
||||
*.scss text
|
||||
*.sh text eol=lf
|
||||
*.sql text
|
||||
*.styl text
|
||||
*.tag text
|
||||
*.ts text
|
||||
*.tsx text
|
||||
*.xml text
|
||||
*.xhtml text
|
||||
|
||||
## DOCKER
|
||||
*.dockerignore text
|
||||
Dockerfile text
|
||||
|
||||
## DOCUMENTATION
|
||||
*.markdown text
|
||||
*.md text
|
||||
*.mdwn text
|
||||
*.mdown text
|
||||
*.mkd text
|
||||
*.mkdn text
|
||||
*.mdtxt text
|
||||
*.mdtext text
|
||||
*.txt text
|
||||
AUTHORS text
|
||||
CHANGELOG text
|
||||
CHANGES text
|
||||
CONTRIBUTING text
|
||||
COPYING text
|
||||
copyright text
|
||||
*COPYRIGHT* text
|
||||
INSTALL text
|
||||
license text
|
||||
LICENSE text
|
||||
NEWS text
|
||||
readme text
|
||||
*README* text
|
||||
TODO text
|
||||
|
||||
## TEMPLATES
|
||||
*.dot text
|
||||
*.ejs text
|
||||
*.haml text
|
||||
*.handlebars text
|
||||
*.hbs text
|
||||
*.hbt text
|
||||
*.jade text
|
||||
*.latte text
|
||||
*.mustache text
|
||||
*.njk text
|
||||
*.phtml text
|
||||
*.tmpl text
|
||||
*.tpl text
|
||||
*.twig text
|
||||
|
||||
## LINTERS
|
||||
.csslintrc text
|
||||
.eslintrc text
|
||||
.htmlhintrc text
|
||||
.jscsrc text
|
||||
.jshintrc text
|
||||
.jshintignore text
|
||||
.stylelintrc text
|
||||
|
||||
## CONFIGS
|
||||
*.bowerrc text
|
||||
*.cnf text
|
||||
*.conf text
|
||||
*.config text
|
||||
.browserslistrc text
|
||||
.editorconfig text
|
||||
.gitattributes text
|
||||
.gitconfig text
|
||||
.gitignore text
|
||||
.htaccess text
|
||||
*.npmignore text
|
||||
*.yaml text
|
||||
*.yml text
|
||||
browserslist text
|
||||
Makefile text
|
||||
makefile text
|
||||
|
||||
## HEROKU
|
||||
Procfile text
|
||||
.slugignore text
|
||||
|
||||
## GRAPHICS
|
||||
*.ai binary
|
||||
*.bmp binary
|
||||
*.eps binary
|
||||
*.gif binary
|
||||
*.ico binary
|
||||
*.jng binary
|
||||
*.jp2 binary
|
||||
*.jpg binary
|
||||
*.jpeg binary
|
||||
*.jpx binary
|
||||
*.jxr binary
|
||||
*.pdf binary
|
||||
*.png binary
|
||||
*.psb binary
|
||||
*.psd binary
|
||||
*.svg text
|
||||
*.svgz binary
|
||||
*.tif binary
|
||||
*.tiff binary
|
||||
*.wbmp binary
|
||||
*.webp binary
|
||||
|
||||
## AUDIO
|
||||
*.kar binary
|
||||
*.m4a binary
|
||||
*.mid binary
|
||||
*.midi binary
|
||||
*.mp3 binary
|
||||
*.ogg binary
|
||||
*.ra binary
|
||||
|
||||
## VIDEO
|
||||
*.3gpp binary
|
||||
*.3gp binary
|
||||
*.as binary
|
||||
*.asf binary
|
||||
*.asx binary
|
||||
*.fla binary
|
||||
*.flv binary
|
||||
*.m4v binary
|
||||
*.mng binary
|
||||
*.mov binary
|
||||
*.mp4 binary
|
||||
*.mpeg binary
|
||||
*.mpg binary
|
||||
*.ogv binary
|
||||
*.swc binary
|
||||
*.swf binary
|
||||
*.webm binary
|
||||
|
||||
## ARCHIVES
|
||||
*.7z binary
|
||||
*.gz binary
|
||||
*.jar binary
|
||||
*.rar binary
|
||||
*.tar binary
|
||||
*.zip binary
|
||||
|
||||
## FONTS
|
||||
*.ttf binary
|
||||
*.eot binary
|
||||
*.otf binary
|
||||
*.woff binary
|
||||
*.woff2 binary
|
||||
|
||||
## EXECUTABLES
|
||||
*.exe binary
|
||||
*.pyc binary
|
||||
3
src/.gitignore
vendored
Normal file
@@ -0,0 +1,3 @@
|
||||
# Include your project-specific ignores in this file
|
||||
# Read about how to use .gitignore: https://help.github.com/articles/ignoring-files
|
||||
# Useful .gitignore templates: https://github.com/github/gitignore
|
||||
60
src/404.html
Normal file
@@ -0,0 +1,60 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Page Not Found</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<style>
|
||||
|
||||
* {
|
||||
line-height: 1.2;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
html {
|
||||
color: #888;
|
||||
display: table;
|
||||
font-family: sans-serif;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
margin: 2em auto;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #555;
|
||||
font-size: 2em;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0 auto;
|
||||
width: 280px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 280px) {
|
||||
|
||||
body, p {
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.5em;
|
||||
margin: 0 0 0.3em;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Page Not Found</h1>
|
||||
<p>Sorry, but the page you were trying to view does not exist.</p>
|
||||
</body>
|
||||
</html>
|
||||
<!-- IE needs 512+ bytes: https://blogs.msdn.microsoft.com/ieinternals/2010/08/18/friendly-http-error-pages/ -->
|
||||
12
src/browserconfig.xml
Normal file
@@ -0,0 +1,12 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Please read: https://msdn.microsoft.com/en-us/library/ie/dn455106.aspx -->
|
||||
<browserconfig>
|
||||
<msapplication>
|
||||
<tile>
|
||||
<square70x70logo src="tile.png"/>
|
||||
<square150x150logo src="tile.png"/>
|
||||
<wide310x150logo src="tile-wide.png"/>
|
||||
<square310x310logo src="tile.png"/>
|
||||
</tile>
|
||||
</msapplication>
|
||||
</browserconfig>
|
||||
280
src/css/main.css
Normal file
@@ -0,0 +1,280 @@
|
||||
/*
|
||||
* What follows is the result of much research on cross-browser styling.
|
||||
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
|
||||
* Kroc Camen, and the H5BP dev community and team.
|
||||
*/
|
||||
|
||||
/* ==========================================================================
|
||||
Base styles: opinionated defaults
|
||||
========================================================================== */
|
||||
|
||||
html {
|
||||
color: #222;
|
||||
font-size: 1em;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/*
|
||||
* Remove text-shadow in selection highlight:
|
||||
* https://twitter.com/miketaylr/status/12228805301
|
||||
*
|
||||
* Vendor-prefixed and regular ::selection selectors cannot be combined:
|
||||
* https://stackoverflow.com/a/16982510/7133471
|
||||
*
|
||||
* Customize the background color to match your design.
|
||||
*/
|
||||
|
||||
::selection {
|
||||
background: #b3d4fc;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
/*
|
||||
* A better looking default horizontal rule
|
||||
*/
|
||||
|
||||
hr {
|
||||
display: block;
|
||||
height: 1px;
|
||||
border: 0;
|
||||
border-top: 1px solid #ccc;
|
||||
margin: 1em 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* Remove the gap between audio, canvas, iframes,
|
||||
* images, videos and the bottom of their containers:
|
||||
* https://github.com/h5bp/html5-boilerplate/issues/440
|
||||
*/
|
||||
|
||||
audio,
|
||||
canvas,
|
||||
iframe,
|
||||
img,
|
||||
svg,
|
||||
video {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/*
|
||||
* Remove default fieldset styles.
|
||||
*/
|
||||
|
||||
fieldset {
|
||||
border: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* Allow only vertical resizing of textareas.
|
||||
*/
|
||||
|
||||
textarea {
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Browser Upgrade Prompt
|
||||
========================================================================== */
|
||||
|
||||
.browserupgrade {
|
||||
margin: 0.2em 0;
|
||||
background: #ccc;
|
||||
color: #000;
|
||||
padding: 0.2em 0;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Author's custom styles
|
||||
========================================================================== */
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* ==========================================================================
|
||||
Helper classes
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Hide visually and from screen readers
|
||||
*/
|
||||
|
||||
.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/*
|
||||
* Hide only visually, but have it available for screen readers:
|
||||
* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
|
||||
*
|
||||
* 1. For long content, line feeds are not interpreted as spaces and small width
|
||||
* causes content to wrap 1 word per line:
|
||||
* https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
|
||||
*/
|
||||
|
||||
.visuallyhidden {
|
||||
border: 0;
|
||||
clip-path: inset(50%);
|
||||
display: inline-block;
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
width: 1px;
|
||||
white-space: nowrap; /* 1 */
|
||||
}
|
||||
|
||||
/*
|
||||
* Extends the .visuallyhidden class to allow the element
|
||||
* to be focusable when navigated to via the keyboard:
|
||||
* https://www.drupal.org/node/897638
|
||||
*/
|
||||
|
||||
.visuallyhidden.focusable:active,
|
||||
.visuallyhidden.focusable:focus {
|
||||
clip: auto;
|
||||
clip-path: none;
|
||||
height: auto;
|
||||
margin: 0;
|
||||
overflow: visible;
|
||||
position: static;
|
||||
width: auto;
|
||||
white-space: inherit;
|
||||
}
|
||||
|
||||
/*
|
||||
* Hide visually and from screen readers, but maintain layout
|
||||
*/
|
||||
|
||||
.invisible {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
/*
|
||||
* Clearfix: contain floats
|
||||
*
|
||||
* For modern browsers
|
||||
* 1. The space content is one way to avoid an Opera bug when the
|
||||
* `contenteditable` attribute is included anywhere else in the document.
|
||||
* Otherwise it causes space to appear at the top and bottom of elements
|
||||
* that receive the `clearfix` class.
|
||||
* 2. The use of `table` rather than `block` is only necessary if using
|
||||
* `:before` to contain the top-margins of child elements.
|
||||
*/
|
||||
|
||||
.clearfix:before,
|
||||
.clearfix:after {
|
||||
content: " "; /* 1 */
|
||||
display: table; /* 2 */
|
||||
}
|
||||
|
||||
.clearfix:after {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
EXAMPLE Media Queries for Responsive Design.
|
||||
These examples override the primary ('mobile first') styles.
|
||||
Modify as content requires.
|
||||
========================================================================== */
|
||||
|
||||
@media only screen and (min-width: 35em) {
|
||||
/* Style adjustments for viewports that meet the condition */
|
||||
}
|
||||
|
||||
@media print,
|
||||
(min-resolution: 1.25dppx),
|
||||
(min-resolution: 120dpi) {
|
||||
/* Style adjustments for high resolution devices */
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Print styles.
|
||||
Inlined to avoid the additional HTTP request:
|
||||
http://www.phpied.com/delay-loading-your-print-css/
|
||||
========================================================================== */
|
||||
|
||||
@media print {
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
background: transparent !important;
|
||||
color: #000 !important; /* Black prints faster:
|
||||
http://www.sanbeiji.com/archives/953 */
|
||||
box-shadow: none !important;
|
||||
text-shadow: none !important;
|
||||
}
|
||||
|
||||
a,
|
||||
a:visited {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
a[href]:after {
|
||||
content: " (" attr(href) ")";
|
||||
}
|
||||
|
||||
abbr[title]:after {
|
||||
content: " (" attr(title) ")";
|
||||
}
|
||||
|
||||
/*
|
||||
* Don't show links that are fragment identifiers,
|
||||
* or use the `javascript:` pseudo protocol
|
||||
*/
|
||||
|
||||
a[href^="#"]:after,
|
||||
a[href^="javascript:"]:after {
|
||||
content: "";
|
||||
}
|
||||
|
||||
pre {
|
||||
white-space: pre-wrap !important;
|
||||
}
|
||||
pre,
|
||||
blockquote {
|
||||
border: 1px solid #999;
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
|
||||
/*
|
||||
* Printing Tables:
|
||||
* http://css-discuss.incutio.com/wiki/Printing_Tables
|
||||
*/
|
||||
|
||||
thead {
|
||||
display: table-header-group;
|
||||
}
|
||||
|
||||
tr,
|
||||
img {
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
|
||||
p,
|
||||
h2,
|
||||
h3 {
|
||||
orphans: 3;
|
||||
widows: 3;
|
||||
}
|
||||
|
||||
h2,
|
||||
h3 {
|
||||
page-break-after: avoid;
|
||||
}
|
||||
}
|
||||
35
src/doc/TOC.md
Normal file
@@ -0,0 +1,35 @@
|
||||
[HTML5 Boilerplate homepage](https://html5boilerplate.com/)
|
||||
|
||||
## Getting started
|
||||
|
||||
* [Usage](usage.md) — Overview of the project contents.
|
||||
* [FAQ](faq.md) — Frequently asked questions along with their answers.
|
||||
|
||||
## HTML5 Boilerplate core
|
||||
|
||||
* [HTML](html.md) — Guide to the default HTML.
|
||||
* [CSS](css.md) — Guide to the default CSS.
|
||||
* [JavaScript](js.md) — Guide to the default JavaScript.
|
||||
* [Everything else](misc.md).
|
||||
|
||||
## Development
|
||||
|
||||
* [Extending and customizing HTML5 Boilerplate](extend.md) — Going further
|
||||
with the boilerplate.
|
||||
|
||||
## Related projects
|
||||
|
||||
The [H5BP organization](https://github.com/h5bp) maintains several projects
|
||||
that complement HTML5 Boilerplate, projects that can help you improve different
|
||||
aspects of your website/web app (e.g.: the performance, security, etc.).
|
||||
|
||||
* [Server Configs](https://github.com/h5bp/server-configs) — Fast and
|
||||
smart configurations for web servers such as Apache and Nginx.
|
||||
* [Apache](https://github.com/h5bp/server-configs-apache)
|
||||
* [Google App Engine (GAE)](https://github.com/h5bp/server-configs-gae)
|
||||
* [Internet Information Services (IIS)](https://github.com/h5bp/server-configs-iis)
|
||||
* [lighttpd](https://github.com/h5bp/server-configs-lighttpd)
|
||||
* [Nginx](https://github.com/h5bp/server-configs-nginx)
|
||||
* [Node.js](https://github.com/h5bp/server-configs-node)
|
||||
* [Ant Build Script](https://github.com/h5bp/ant-build-script) — Apache
|
||||
Ant based build script.
|
||||
164
src/doc/css.md
Normal file
@@ -0,0 +1,164 @@
|
||||
[HTML5 Boilerplate homepage](https://html5boilerplate.com/) | [Documentation
|
||||
table of contents](TOC.md)
|
||||
|
||||
# The CSS
|
||||
|
||||
HTML5 Boilerplate's CSS includes:
|
||||
|
||||
* [Normalize.css](#normalizecss)
|
||||
* [Useful defaults](#useful-defaults)
|
||||
* [Common helpers](#common-helpers)
|
||||
* [Placeholder media queries](#media-queries)
|
||||
* [Print styles](#print-styles)
|
||||
|
||||
This starting CSS does not rely on the presence of
|
||||
[conditional class names](https://www.paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/),
|
||||
[conditional style sheets](https://css-tricks.com/how-to-create-an-ie-only-stylesheet/),
|
||||
or [Modernizr](https://modernizr.com/), and it is ready to use no matter what
|
||||
your development preferences happen to be.
|
||||
|
||||
|
||||
## Normalize.css
|
||||
|
||||
In order to make browsers render all elements more consistently and in line
|
||||
with modern standards, we include
|
||||
[Normalize.css](https://necolas.github.io/normalize.css/) — a modern, HTML5-ready
|
||||
alternative to CSS resets.
|
||||
|
||||
As opposed to CSS resets, Normalize.css:
|
||||
|
||||
* targets only the styles that need normalizing
|
||||
* preserves useful browser defaults rather than erasing them
|
||||
* corrects bugs and common browser inconsistencies
|
||||
* improves usability with subtle improvements
|
||||
* doesn't clutter the debugging tools
|
||||
* has better documentation
|
||||
|
||||
For more information about Normalize.css, please refer to its [project
|
||||
page](https://necolas.github.com/normalize.css/), as well as this
|
||||
[blog post](http://nicolasgallagher.com/about-normalize-css/).
|
||||
|
||||
|
||||
## Useful defaults
|
||||
|
||||
Several base styles are included that build upon `Normalize.css`. These
|
||||
styles:
|
||||
|
||||
* provide basic typography settings that improve text readability
|
||||
* protect against unwanted `text-shadow` during text highlighting
|
||||
* tweak the default alignment of some elements (e.g.: `img`, `video`,
|
||||
`fieldset`, `textarea`)
|
||||
* style the prompt that is displayed to users using an outdated browser
|
||||
|
||||
You are free and even encouraged to modify or add to these base styles as your
|
||||
project requires.
|
||||
|
||||
|
||||
## Common helpers
|
||||
|
||||
Along with the base styles, we also provide some commonly used helper classes.
|
||||
|
||||
#### `.hidden`
|
||||
|
||||
The `hidden` class can be added to any element that you want to hide visually
|
||||
and from screen readers. It could be an element that will be populated and
|
||||
displayed later, or an element you will hide with JavaScript.
|
||||
|
||||
#### `.visuallyhidden`
|
||||
|
||||
The `visuallyhidden` class can be added to any element that you want to hide
|
||||
visually, while still have its content accessible to screen readers.
|
||||
|
||||
See also:
|
||||
|
||||
* [CSS in Action: Invisible Content Just for Screen Reader
|
||||
Users](http://webaim.org/techniques/css/invisiblecontent/)
|
||||
* [Hiding content for
|
||||
accessibility](https://snook.ca/archives/html_and_css/hiding-content-for-accessibility)
|
||||
* [HTML5 Boilerplate - Issue #194](https://github.com/h5bp/html5-boilerplate/issues/194).
|
||||
|
||||
__N.B.__ [The visuallyhidden class can be an accessibility issue for users using high contrast modes.](https://www.paciellogroup.com/blog/2012/08/notes-on-accessible-css-image-sprites/)
|
||||
|
||||
>Use JavaScript to detect when images are disabled and remove the CSS visually hidden display state of the text alternative.
|
||||
Use JavaScript to detect when Windows high contrast mode is enabled and remove the CSS visually hidden display state of the text alternative.
|
||||
|
||||
#### `.invisible`
|
||||
|
||||
The `invisible` class can be added to any element that you want to hide
|
||||
visually and from screen readers, but without affecting the layout.
|
||||
|
||||
As opposed to the `hidden` class that effectively removes the element from the
|
||||
layout, the `invisible` class will simply make the element invisible while
|
||||
keeping it in the flow and not affecting the positioning of the surrounding
|
||||
content.
|
||||
|
||||
__N.B.__ Try to stay away from, and don't use the classes specified above for
|
||||
[keyword stuffing](https://en.wikipedia.org/wiki/Keyword_stuffing) as you will
|
||||
harm your site's ranking!
|
||||
|
||||
#### `.clearfix`
|
||||
|
||||
The `clearfix` class can be added to any element to ensure that it always fully
|
||||
contains its floated children.
|
||||
|
||||
Over the years there have been many variants of the clearfix hack, but currently,
|
||||
we use the [micro clearfix](http://nicolasgallagher.com/micro-clearfix-hack/).
|
||||
|
||||
|
||||
## Media Queries
|
||||
|
||||
HTML5 Boilerplate makes it easy for you to get started with a
|
||||
[_mobile first_](http://www.lukew.com/presos/preso.asp?26) and [_responsive web
|
||||
design_](http://alistapart.com/article/responsive-web-design) approach to
|
||||
development. But it's worth remembering that there are [no silver
|
||||
bullets](https://cloudfour.com/thinks/css-media-query-for-mobile-is-fools-gold/).
|
||||
|
||||
We include placeholder media queries to help you build up your mobile styles for
|
||||
wider viewports and high-resolution displays. It's recommended that you adapt
|
||||
these media queries based on the content of your site rather than mirroring the
|
||||
fixed dimensions of specific devices.
|
||||
|
||||
If you do not want to take the _mobile first_ approach, you can simply edit or
|
||||
remove these placeholder media queries. One possibility would be to work from
|
||||
wide viewports down, and use `max-width` media queries instead (e.g.:
|
||||
`@media only screen and (max-width: 480px)`).
|
||||
|
||||
|
||||
## Print styles
|
||||
|
||||
Lastly, we provide some useful print styles that will optimize the printing
|
||||
process, as well as make the printed pages easier to read.
|
||||
|
||||
At printing time, these styles will:
|
||||
|
||||
* strip all background colors, change the font color to black, and remove the
|
||||
`text-shadow` — done in order to [help save printer ink and speed up the
|
||||
printing process](http://www.sanbeiji.com/archives/953)
|
||||
* underline and expand links to include the URL — done in order to allow users
|
||||
to know where to refer to<br>
|
||||
(exceptions to this are: the links that are
|
||||
[fragment identifiers](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-href),
|
||||
or use the
|
||||
[`javascript:` pseudo protocol](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/void#JavaScript_URIs))
|
||||
* expand abbreviations to include the full description — done in order to allow
|
||||
users to know what the abbreviations stands for
|
||||
* provide instructions on how browsers should break the content into pages and
|
||||
on [orphans/widows](https://en.wikipedia.org/wiki/Widows_and_orphans), namely,
|
||||
we instruct
|
||||
[supporting browsers](https://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28Cascading_Style_Sheets%29#Grammar_and_rules)
|
||||
that they should:
|
||||
|
||||
* ensure the table header (`<thead>`) is [printed on each page spanned by the
|
||||
table](http://css-discuss.incutio.com/wiki/Printing_Tables)
|
||||
* prevent block quotations, preformatted text, images and table rows from
|
||||
being split onto two different pages
|
||||
* ensure that headings never appear on a different page than the text they
|
||||
are associated with
|
||||
* ensure that
|
||||
[orphans and widows](https://en.wikipedia.org/wiki/Widows_and_orphans) do
|
||||
[not appear on printed pages](https://css-tricks.com/almanac/properties/o/orphans/)
|
||||
|
||||
The print styles are included along with the other `css` to [avoid the
|
||||
additional HTTP request](http://www.phpied.com/delay-loading-your-print-css/).
|
||||
Also, they should always be included last, so that the other styles can be
|
||||
overwritten.
|
||||
693
src/doc/extend.md
Normal file
@@ -0,0 +1,693 @@
|
||||
[HTML5 Boilerplate homepage](https://html5boilerplate.com) | [Documentation
|
||||
table of contents](TOC.md)
|
||||
|
||||
# Extend and customise HTML5 Boilerplate
|
||||
|
||||
Here is some useful advice for how you can make your project with HTML5
|
||||
Boilerplate even better. We don't want to include it all by default, as
|
||||
not everything fits with everyone's needs.
|
||||
|
||||
|
||||
* [App Stores](#app-stores)
|
||||
* [DNS prefetching](#dns-prefetching)
|
||||
* [Google Universal Analytics](#google-universal-analytics)
|
||||
* [Internet Explorer](#internet-explorer)
|
||||
* [Miscellaneous](#miscellaneous)
|
||||
* [News Feeds](#news-feeds)
|
||||
* [Search](#search)
|
||||
* [Social Networks](#social-networks)
|
||||
* [URLs](#urls)
|
||||
* [Web Apps](#web-apps)
|
||||
|
||||
|
||||
## App Stores
|
||||
|
||||
### Smart App Banners in iOS 6+ Safari
|
||||
|
||||
Stop bothering everyone with gross modals advertising your entry in the
|
||||
App Store. Include the following [meta tag](https://developer.apple.com/library/IOS/documentation/AppleApplications/Reference/SafariWebContent/PromotingAppswithAppBanners/PromotingAppswithAppBanners.html#//apple_ref/doc/uid/TP40002051-CH6-SW2)
|
||||
will unintrusively allow the user the option to download your iOS app,
|
||||
or open it with some data about the user's current state on the website.
|
||||
|
||||
```html
|
||||
<meta name="apple-itunes-app" content="app-id=APP_ID,app-argument=SOME_TEXT">
|
||||
```
|
||||
|
||||
## DNS prefetching
|
||||
|
||||
In short, DNS Prefetching is a method of informing the browser of domain names
|
||||
referenced on a site so that the client can resolve the DNS for those hosts,
|
||||
cache them, and when it comes time to use them, have a faster turn around on
|
||||
the request.
|
||||
|
||||
### Implicit prefetches
|
||||
|
||||
There is a lot of prefetching done for you automatically by the browser. When
|
||||
the browser encounters an anchor in your html that does not share the same
|
||||
domain name as the current location the browser requests, from the client OS,
|
||||
the IP address for this new domain. The client first checks its cache and
|
||||
then, lacking a cached copy, makes a request from a DNS server. These requests
|
||||
happen in the background and are not meant to block the rendering of the
|
||||
page.
|
||||
|
||||
The goal of this is that when the foreign IP address is finally needed it will
|
||||
already be in the client cache and will not block the loading of the foreign
|
||||
content. Fewer requests result in faster page load times. The perception of this
|
||||
is increased on a mobile platform where DNS latency can be greater.
|
||||
|
||||
#### Disable implicit prefetching
|
||||
|
||||
```html
|
||||
<meta http-equiv="x-dns-prefetch-control" content="off">
|
||||
```
|
||||
|
||||
Even with X-DNS-Prefetch-Control meta tag (or http header) browsers will still
|
||||
prefetch any explicit dns-prefetch links.
|
||||
|
||||
**_WARNING:_** THIS MAY MAKE YOUR SITE SLOWER IF YOU RELY ON RESOURCES FROM
|
||||
FOREIGN DOMAINS.
|
||||
|
||||
### Explicit prefetches
|
||||
|
||||
Typically the browser only scans the HTML for foreign domains. If you have
|
||||
resources that are outside of your HTML (a javascript request to a remote
|
||||
server or a CDN that hosts content that may not be present on every page of
|
||||
your site, for example) then you can queue up a domain name to be prefetched.
|
||||
|
||||
```html
|
||||
<link rel="dns-prefetch" href="//example.com">
|
||||
<link rel="dns-prefetch" href="https://ajax.googleapis.com">
|
||||
```
|
||||
|
||||
You can use as many of these as you need, but it's best if they are all
|
||||
immediately after the [Meta
|
||||
Charset](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta#attr-charset)
|
||||
element (which should go right at the top of the `head`), so the browser can
|
||||
act on them ASAP.
|
||||
|
||||
#### Common Prefetch Links
|
||||
|
||||
Amazon S3:
|
||||
|
||||
```html
|
||||
<link rel="dns-prefetch" href="//s3.amazonaws.com">
|
||||
```
|
||||
|
||||
Google APIs:
|
||||
|
||||
```html
|
||||
<link rel="dns-prefetch" href="https://ajax.googleapis.com">
|
||||
```
|
||||
|
||||
Microsoft Ajax Content Delivery Network:
|
||||
|
||||
```html
|
||||
<link rel="dns-prefetch" href="//ajax.microsoft.com">
|
||||
<link rel="dns-prefetch" href="//ajax.aspnetcdn.com">
|
||||
```
|
||||
|
||||
### Further reading about DNS prefetching
|
||||
|
||||
* https://developer.mozilla.org/en-US/docs/Controlling_DNS_prefetching
|
||||
* https://dev.chromium.org/developers/design-documents/dns-prefetching
|
||||
* https://blogs.msdn.microsoft.com/ie/2011/03/17/internet-explorer-9-network-performance-improvements/
|
||||
* http://dayofjs.com/videos/22158462/web-browsers_alex-russel
|
||||
|
||||
|
||||
## Google Universal Analytics
|
||||
|
||||
### More tracking settings
|
||||
|
||||
The [optimized Google Universal Analytics
|
||||
snippet](https://mathiasbynens.be/notes/async-analytics-snippet#universal-analytics)
|
||||
included with HTML5 Boilerplate includes something like this:
|
||||
|
||||
```js
|
||||
ga('create', 'UA-XXXXX-X', 'auto'); ga('send', 'pageview');
|
||||
```
|
||||
|
||||
To customize further, see Google's [Advanced
|
||||
Setup](https://developers.google.com/analytics/devguides/collection/analyticsjs/advanced),
|
||||
[Pageview](https://developers.google.com/analytics/devguides/collection/analyticsjs/pages),
|
||||
and [Event](https://developers.google.com/analytics/devguides/collection/analyticsjs/events) Docs.
|
||||
|
||||
### Anonymize IP addresses
|
||||
|
||||
In some countries, no personal data may be transferred outside jurisdictions
|
||||
that do not have similarly strict laws (i.e. from Germany to outside the EU).
|
||||
Thus a webmaster using the Google Universal Analytics may have to ensure that
|
||||
no personal (trackable) data is transferred to the US. You can do that with
|
||||
[the `ga('set', 'anonymizeIp', true);`
|
||||
parameter](https://developers.google.com/analytics/devguides/collection/analyticsjs/advanced#anonymizeip)
|
||||
before sending any events/pageviews. In use it looks like this:
|
||||
|
||||
```js
|
||||
ga('create', 'UA-XXXXX-X', 'auto');
|
||||
ga('set', 'anonymizeIp', true);
|
||||
ga('send', 'pageview');
|
||||
```
|
||||
|
||||
### Track jQuery AJAX requests in Google Analytics
|
||||
|
||||
An article by @JangoSteve explains how to [track jQuery AJAX requests in Google
|
||||
Analytics](https://www.alfajango.com/blog/track-jquery-ajax-requests-in-google-analytics/).
|
||||
|
||||
Add this to `plugins.js`:
|
||||
|
||||
```js
|
||||
/*
|
||||
* Log all jQuery AJAX requests to Google Analytics
|
||||
* See: https://www.alfajango.com/blog/track-jquery-ajax-requests-in-google-analytics/
|
||||
*/
|
||||
if (typeof ga !== "undefined" && ga !== null) {
|
||||
$(document).ajaxSend(function(event, xhr, settings){
|
||||
ga('send', 'pageview', settings.url);
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
### Track JavaScript errors in Google Analytics
|
||||
|
||||
Add this function after `ga` is defined:
|
||||
|
||||
```js
|
||||
(function(window){
|
||||
var undefined,
|
||||
link = function (href) {
|
||||
var a = window.document.createElement('a');
|
||||
a.href = href;
|
||||
return a;
|
||||
};
|
||||
window.onerror = function (message, file, line, column) {
|
||||
var host = link(file).hostname;
|
||||
ga('send', {
|
||||
'hitType': 'event',
|
||||
'eventCategory': (host == window.location.hostname || host == undefined || host == '' ? '' : 'external ') + 'error',
|
||||
'eventAction': message,
|
||||
'eventLabel': (file + ' LINE: ' + line + (column ? ' COLUMN: ' + column : '')).trim(),
|
||||
'nonInteraction': 1
|
||||
});
|
||||
};
|
||||
}(window));
|
||||
```
|
||||
|
||||
### Track page scroll
|
||||
|
||||
Add this function after `ga` is defined:
|
||||
|
||||
```js
|
||||
$(function(){
|
||||
var isDuplicateScrollEvent,
|
||||
scrollTimeStart = new Date,
|
||||
$window = $(window),
|
||||
$document = $(document),
|
||||
scrollPercent;
|
||||
|
||||
$window.scroll(function() {
|
||||
scrollPercent = Math.round(100 * ($window.height() + $window.scrollTop())/$document.height());
|
||||
if (scrollPercent > 90 && !isDuplicateScrollEvent) { //page scrolled to 90%
|
||||
isDuplicateScrollEvent = 1;
|
||||
ga('send', 'event', 'scroll',
|
||||
'Window: ' + $window.height() + 'px; Document: ' + $document.height() + 'px; Time: ' + Math.round((new Date - scrollTimeStart )/1000,1) + 's'
|
||||
);
|
||||
}
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
## Internet Explorer
|
||||
|
||||
### Prompt users to switch to "Desktop Mode" in IE10 Metro
|
||||
|
||||
IE10 does not support plugins, such as Flash, in Metro mode. If
|
||||
your site requires plugins, you can let users know that via the
|
||||
`x-ua-compatible` meta element, which will prompt them to switch
|
||||
to Desktop Mode.
|
||||
|
||||
```html
|
||||
<meta http-equiv="x-ua-compatible" content="requiresActiveX=true">
|
||||
```
|
||||
|
||||
Here's what it looks like alongside H5BP's default `x-ua-compatible`
|
||||
values:
|
||||
|
||||
```html
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge,requiresActiveX=true">
|
||||
```
|
||||
|
||||
You can find more information in [Microsoft's IEBlog post about prompting for
|
||||
plugin use in IE10 Metro
|
||||
Mode](https://blogs.msdn.microsoft.com/ie/2012/01/31/web-sites-and-a-plug-in-free-web/).
|
||||
|
||||
### IE Pinned Sites (IE9+)
|
||||
|
||||
Enabling your application for pinning will allow IE9 users to add it to their
|
||||
Windows Taskbar and Start Menu. This comes with a range of new tools that you
|
||||
can easily configure with the elements below. See more [documentation on IE9
|
||||
Pinned Sites](https://msdn.microsoft.com/en-us/library/gg131029.aspx).
|
||||
|
||||
### Name the Pinned Site for Windows
|
||||
|
||||
Without this rule, Windows will use the page title as the name for your
|
||||
application.
|
||||
|
||||
```html
|
||||
<meta name="application-name" content="Sample Title">
|
||||
```
|
||||
|
||||
### Give your Pinned Site a tooltip
|
||||
|
||||
You know — a tooltip. A little textbox that appears when the user holds their
|
||||
mouse over your Pinned Site's icon.
|
||||
|
||||
```html
|
||||
<meta name="msapplication-tooltip" content="A description of what this site does.">
|
||||
```
|
||||
|
||||
### Set a default page for your Pinned Site
|
||||
|
||||
If the site should go to a specific URL when it is pinned (such as the
|
||||
homepage), enter it here. One idea is to send it to a special URL so you can
|
||||
track the number of pinned users, like so:
|
||||
`https://www.example.com/index.html?pinned=true`
|
||||
|
||||
```html
|
||||
<meta name="msapplication-starturl" content="https://www.example.com/index.html?pinned=true">
|
||||
```
|
||||
|
||||
### Recolor IE's controls manually for a Pinned Site
|
||||
|
||||
IE9+ will automatically use the overall color of your Pinned Site's favicon to
|
||||
shade its browser buttons. UNLESS you give it another color here. Only use
|
||||
named colors (`red`) or hex colors (`#ff0000`).
|
||||
|
||||
```html
|
||||
<meta name="msapplication-navbutton-color" content="#ff0000">
|
||||
```
|
||||
|
||||
### Manually set the window size of a Pinned Site
|
||||
|
||||
If the site should open at a certain window size once pinned, you can specify
|
||||
the dimensions here. It only supports static pixel dimensions. 800x600
|
||||
minimum.
|
||||
|
||||
```html
|
||||
<meta name="msapplication-window" content="width=800;height=600">
|
||||
```
|
||||
|
||||
### Jump List "Tasks" for Pinned Sites
|
||||
|
||||
Add Jump List Tasks that will appear when the Pinned Site's icon gets a
|
||||
right-click. Each Task goes to the specified URL, and gets its own mini icon
|
||||
(essentially a favicon, a 16x16 .ICO). You can add as many of these as you
|
||||
need.
|
||||
|
||||
```html
|
||||
<meta name="msapplication-task" content="name=Task 1;action-uri=http://host/Page1.html;icon-uri=http://host/icon1.ico">
|
||||
<meta name="msapplication-task" content="name=Task 2;action-uri=http://microsoft.com/Page2.html;icon-uri=http://host/icon2.ico">
|
||||
```
|
||||
|
||||
### (Windows 8) High quality visuals for Pinned Sites
|
||||
|
||||
Windows 8 adds the ability for you to provide a PNG tile image and specify the
|
||||
tile's background color. [Full details on the IE
|
||||
blog](https://blogs.msdn.microsoft.com/ie/2012/06/08/high-quality-visuals-for-pinned-sites-in-windows-8/).
|
||||
|
||||
* Create a 144x144 image of your site icon, filling all of the canvas, and
|
||||
using a transparent background.
|
||||
* Save this image as a 32-bit PNG and optimize it without reducing
|
||||
colour-depth. It can be named whatever you want (e.g. `metro-tile.png`).
|
||||
* To reference the tile and its color, add the HTML `meta` elements described
|
||||
in the IE Blog post.
|
||||
|
||||
### (Windows 8) Badges for Pinned Sites
|
||||
|
||||
IE10 will poll an XML document for badge information to display on your app's
|
||||
tile in the Start screen. The user will be able to receive these badge updates
|
||||
even when your app isn't actively running. The badge's value can be a number,
|
||||
or one of a predefined list of glyphs.
|
||||
|
||||
* [Tutorial on IEBlog with link to badge XML schema](https://blogs.msdn.microsoft.com/ie/2012/04/03/pinned-sites-in-windows-8/)
|
||||
* [Available badge values](https://msdn.microsoft.com/en-us/library/ie/br212849.aspx)
|
||||
|
||||
```html
|
||||
<meta name="msapplication-badge" value="frequency=NUMBER_IN_MINUTES;polling-uri=https://www.example.com/path/to/file.xml">
|
||||
```
|
||||
|
||||
### Disable link highlighting upon tap in IE10
|
||||
|
||||
Similar to [-webkit-tap-highlight-color](https://davidwalsh.name/mobile-highlight-color)
|
||||
in iOS Safari. Unlike that CSS property, this is an HTML meta element, and its
|
||||
value is boolean rather than a color. It's all or nothing.
|
||||
|
||||
```html
|
||||
<meta name="msapplication-tap-highlight" content="no" />
|
||||
```
|
||||
|
||||
You can read about this useful element and more techniques in
|
||||
[Microsoft's documentation on adapting WebKit-oriented apps for IE10](https://blogs.windows.com/buildingapps/2012/11/15/adapting-your-webkit-optimized-site-for-internet-explorer-10/)
|
||||
|
||||
## Search
|
||||
|
||||
### Direct search spiders to your sitemap
|
||||
|
||||
After creating a [sitemap](https://www.sitemaps.org/protocol.html)
|
||||
|
||||
Submit it to search engine tool:
|
||||
* [Google](https://www.google.com/webmasters/tools/sitemap-list)
|
||||
* [Bing](https://www.bing.com/toolbox/webmaster)
|
||||
* [Yandex](https://webmaster.yandex.com/)
|
||||
* [Baidu](https://zhanzhang.baidu.com/)
|
||||
OR
|
||||
Insert the following line anywhere in your robots.txt file, specifying the path to your sitemap:
|
||||
```
|
||||
Sitemap: https://example.com/sitemap_location.xml
|
||||
```
|
||||
|
||||
### Hide pages from search engines
|
||||
|
||||
According to Heather Champ, former community manager at Flickr, you should not
|
||||
allow search engines to index your "Contact Us" or "Complaints" page if you
|
||||
value your sanity. This is an HTML-centric way of achieving that.
|
||||
|
||||
```html
|
||||
<meta name="robots" content="noindex">
|
||||
```
|
||||
|
||||
**_WARNING:_** DO NOT INCLUDE ON PAGES THAT SHOULD APPEAR IN SEARCH ENGINES.
|
||||
|
||||
### Firefox and IE Search Plugins
|
||||
|
||||
Sites with in-site search functionality should be strongly considered for a
|
||||
browser search plugin. A "search plugin" is an XML file which defines how your
|
||||
plugin behaves in the browser. [How to make a browser search
|
||||
plugin](https://www.google.com/search?ie=UTF-8&q=how+to+make+browser+search+plugin).
|
||||
|
||||
```html
|
||||
<link rel="search" title="" type="application/opensearchdescription+xml" href="">
|
||||
```
|
||||
|
||||
|
||||
## Miscellaneous
|
||||
|
||||
* Use [polyfills](https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills).
|
||||
|
||||
* Use [Microformats](http://microformats.org/wiki/Main_Page) (via
|
||||
[microdata](http://microformats.org/wiki/microdata)) for optimum search
|
||||
results
|
||||
[visibility](https://webmasters.googleblog.com/2009/05/introducing-rich-snippets.html).
|
||||
|
||||
* If you're building a web app you may want [native style momentum scrolling in
|
||||
iOS 5+](http://www.johanbrook.com/articles/native-style-momentum-scrolling-to-arrive-in-ios-5/)
|
||||
using `-webkit-overflow-scrolling: touch`.
|
||||
|
||||
* If you want to disable the translation prompt in Chrome or block Google
|
||||
Translate from translating your web page, use [`<meta name="google"
|
||||
value="notranslate">`](https://support.google.com/translate/?hl=en#2641276).
|
||||
To disable translation for a particular section of the web page, add
|
||||
[`class="notranslate"`](https://support.google.com/translate/?hl=en#2641276).
|
||||
|
||||
* If you want to disable the automatic detection and formatting of possible
|
||||
phone numbers in Safari on iOS, use [`<meta name="format-detection"
|
||||
content="telephone=no">`](https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html/#//apple_ref/doc/uid/TP40008193-SW5).
|
||||
|
||||
* Avoid development/stage websites "leaking" into SERPs (search engine results
|
||||
page) by [implementing X-Robots-tag
|
||||
headers](https://github.com/h5bp/html5-boilerplate/issues/804).
|
||||
|
||||
|
||||
## News Feeds
|
||||
|
||||
### RSS
|
||||
|
||||
Have an RSS feed? Link to it here. Want to [learn how to write an RSS feed from
|
||||
scratch](http://www.rssboard.org/rss-specification)?
|
||||
|
||||
```html
|
||||
<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml">
|
||||
```
|
||||
|
||||
### Atom
|
||||
|
||||
Atom is similar to RSS, and you might prefer to use it instead of or in
|
||||
addition to it. [See what Atom's all
|
||||
about](http://www.atomenabled.org/developers/syndication/).
|
||||
|
||||
```html
|
||||
<link rel="alternate" type="application/atom+xml" title="Atom" href="/atom.xml">
|
||||
```
|
||||
|
||||
### Pingbacks
|
||||
|
||||
Your server may be notified when another site links to yours. The href
|
||||
attribute should contain the location of your pingback service.
|
||||
|
||||
```html
|
||||
<link rel="pingback" href="">
|
||||
```
|
||||
|
||||
* High-level explanation: https://codex.wordpress.org/Introduction_to_Blogging#Pingbacks
|
||||
* Step-by-step example case: http://www.hixie.ch/specs/pingback/pingback-1.0#TOC5
|
||||
* PHP pingback service: https://web.archive.org/web/20131211032834/http://blog.perplexedlabs.com/2009/07/15/xmlrpc-pingbacks-using-php/
|
||||
|
||||
|
||||
|
||||
## Social Networks
|
||||
|
||||
### Facebook Open Graph data
|
||||
|
||||
You can control the information that Facebook and others display when users
|
||||
share your site. Below are just the most basic data points you might need. For
|
||||
specific content types (including "website"), see [Facebook's built-in Open
|
||||
Graph content
|
||||
templates](https://developers.facebook.com/docs/opengraph/objects/builtin/).
|
||||
Take full advantage of Facebook's support for complex data and activity by
|
||||
following the [Open Graph
|
||||
tutorial](https://developers.facebook.com/docs/opengraph/tutorial/).
|
||||
|
||||
For a reference of Open Graph's markup and properties, you may check
|
||||
[Facebook's Open Graph Protocol reference](http://ogp.me/). Finally,
|
||||
you can validate your markup with the [Facebook Object
|
||||
Debugger](https://developers.facebook.com/tools/debug/) (needs
|
||||
registration to Facebook).
|
||||
|
||||
```html
|
||||
<meta property="fb:app_id" content="123456789">
|
||||
<meta property="og:url" content="https://www.example.com/path/to/page.html">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:title" content="">
|
||||
<meta property="og:image" content="https://www.example.com/path/to/image.jpg">
|
||||
<meta property="og:description" content="">
|
||||
<meta property="og:site_name" content="">
|
||||
<meta property="article:author" content="">
|
||||
```
|
||||
|
||||
### Twitter Cards
|
||||
|
||||
Twitter provides a snippet specification that serves a similar purpose to Open
|
||||
Graph. In fact, Twitter will use Open Graph when Cards is not available. Note
|
||||
that, as of this writing, Twitter requires that app developers activate Cards
|
||||
on a per-domain basis. You can read more about the various snippet formats
|
||||
and application process in the [official Twitter Cards
|
||||
documentation](https://dev.twitter.com/docs/cards), and you can validate
|
||||
your markup with the [Card validator](https://cards-dev.twitter.com/validator)
|
||||
(needs registration to Twitter).
|
||||
|
||||
```html
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@site_account">
|
||||
<meta name="twitter:creator" content="@individual_account">
|
||||
<meta name="twitter:url" content="https://www.example.com/path/to/page.html">
|
||||
<meta name="twitter:title" content="">
|
||||
<meta name="twitter:description" content="">
|
||||
<meta name="twitter:image" content="https://www.example.com/path/to/image.jpg">
|
||||
```
|
||||
|
||||
### Google+ / Schema.org
|
||||
|
||||
Google also provides a snippet specification that serves a similar
|
||||
purpose to Facebook's Open Graph or Twitter Cards. While it helps you
|
||||
to control information displayed on Google+, this metadata is a subset
|
||||
of [schema.org's microdata vocabulary](https://schema.org/), which
|
||||
covers many other schemas that can describe the content of your pages
|
||||
to search engines. For this reason, this metadata is more generic for
|
||||
SEO, notably for Google's search-engine, although this vocabulary is
|
||||
also used by Microsoft, Pinterest or Yandex.
|
||||
|
||||
You can validate your markup with the [Structured Data Testing
|
||||
Tool](https://developers.google.com/structured-data/testing-tool/).
|
||||
Also, please note that this markup requires to add attributes to your
|
||||
top `html` tag.
|
||||
|
||||
```html
|
||||
<html class="no-js" lang="" itemscope itemtype="http://schema.org/Article">
|
||||
<head>
|
||||
|
||||
<link rel="author" href="">
|
||||
<link rel="publisher" href="">
|
||||
<meta itemprop="name" content="">
|
||||
<meta itemprop="description" content="">
|
||||
<meta itemprop="image" content="">
|
||||
```
|
||||
|
||||
## URLs
|
||||
|
||||
### Canonical URL
|
||||
|
||||
Signal to search engines and others "Use this URL for this page!" Useful when
|
||||
parameters after a `#` or `?` is used to control the display state of a page.
|
||||
`https://www.example.com/cart.html?shopping-cart-open=true` can be indexed as
|
||||
the cleaner, more accurate `https://www.example.com/cart.html`.
|
||||
|
||||
```html
|
||||
<link rel="canonical" href="">
|
||||
```
|
||||
|
||||
### Official shortlink
|
||||
|
||||
Signal to the world "This is the shortened URL to use this page!" Poorly
|
||||
supported at this time. Learn more by reading the [article about shortlinks on
|
||||
the Microformats wiki](http://microformats.org/wiki/rel-shortlink).
|
||||
|
||||
```html
|
||||
<link rel="shortlink" href="h5bp.com">
|
||||
```
|
||||
|
||||
### Separate mobile URLs
|
||||
|
||||
If you use separate URLs for desktop and mobile users, you should consider
|
||||
helping search engine algorithms better understand the configuration on your
|
||||
web site.
|
||||
|
||||
This can be done by adding the following annotations in your HTML pages:
|
||||
|
||||
* on the desktop page, add the `link rel="alternate"` tag pointing to the
|
||||
corresponding mobile URL, e.g.:
|
||||
|
||||
`<link rel="alternate" media="only screen and (max-width: 640px)" href="https://m.example.com/page.html" >`
|
||||
|
||||
* on the mobile page, add the `link rel="canonical"` tag pointing to the
|
||||
corresponding desktop URL, e.g.:
|
||||
|
||||
`<link rel="canonical" href="https://www.example.com/page.html">`
|
||||
|
||||
For more information please see:
|
||||
|
||||
* https://developers.google.com/webmasters/smartphone-sites/details#separateurls
|
||||
* https://developers.google.com/webmasters/smartphone-sites/feature-phones
|
||||
|
||||
|
||||
## Web Apps
|
||||
|
||||
There are a couple of meta tags that provide information about a web app when
|
||||
added to the Home Screen on iOS:
|
||||
|
||||
* Adding `apple-mobile-web-app-capable` will make your web app chrome-less and
|
||||
provide the default iOS app view. You can control the color scheme of the
|
||||
default view by adding `apple-mobile-web-app-status-bar-style`.
|
||||
|
||||
```html
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
||||
```
|
||||
|
||||
* You can use `apple-mobile-web-app-title` to add a specific sites name for the
|
||||
Home Screen icon. This works since iOS 6.
|
||||
|
||||
```html
|
||||
<meta name="apple-mobile-web-app-title" content="">
|
||||
```
|
||||
|
||||
For further information please read the [official
|
||||
documentation](https://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html)
|
||||
on Apple's site.
|
||||
|
||||
|
||||
### Apple Touch Icons
|
||||
|
||||
The Apple touch icons can be seen as the favicons of iOS devices.
|
||||
|
||||
The main sizes of the Apple touch icons are:
|
||||
|
||||
* `57×57px` – iPhone with @1x display and iPod Touch
|
||||
* `72×72px` – iPad and iPad mini with @1x display running iOS ≤ 6
|
||||
* `76×76px` – iPad and iPad mini with @1x display running iOS ≥ 7
|
||||
* `114×114px` – iPhone with @2x display running iOS ≤ 6
|
||||
* `120×120px` – iPhone with @2x and @3x display running iOS ≥ 7
|
||||
* `144×144px` – iPad and iPad mini with @2x display running iOS ≤ 6
|
||||
* `152×152px` – iPad and iPad mini with @2x display running iOS 7
|
||||
* `180×180px` – iPad and iPad mini with @2x display running iOS 8
|
||||
|
||||
Displays meaning:
|
||||
|
||||
* @1x - non-Retina
|
||||
* @2x - Retina
|
||||
* @3x - Retina HD
|
||||
|
||||
More information about the displays of iOS devices can be found
|
||||
[here](https://en.wikipedia.org/wiki/List_of_iOS_devices#Display).
|
||||
|
||||
In most cases, one `180×180px` touch icon named `icon.png`
|
||||
and including:
|
||||
|
||||
```html
|
||||
<link rel="apple-touch-icon" href="icon.png">
|
||||
```
|
||||
|
||||
in the `<head>` of the page is enough. If you use art-direction and/or
|
||||
want to have different content for each device, you can add more touch
|
||||
icons as written above.
|
||||
|
||||
For a more comprehensive overview, please refer to Mathias' [article on Touch
|
||||
Icons](https://mathiasbynens.be/notes/touch-icons).
|
||||
|
||||
|
||||
### Apple Touch Startup Image
|
||||
|
||||
Apart from that it is possible to add start-up screens for web apps on iOS. This
|
||||
basically works by defining `apple-touch-startup-image` with an according link
|
||||
to the image. Since iOS devices have different screen resolutions it is
|
||||
necessary to add media queries to detect which image to load. Here is an
|
||||
example for a retina iPhone:
|
||||
|
||||
```html
|
||||
<link rel="apple-touch-startup-image" media="(max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)" href="img/startup-retina.png">
|
||||
```
|
||||
|
||||
However, it is possible to detect which start-up image to use with JavaScript.
|
||||
The Mobile Boilerplate provides a useful function for this. Please see
|
||||
[helpers.js](https://github.com/h5bp/mobile-boilerplate/blob/v4.1.0/js/helper.js#L336-L383)
|
||||
for the implementation.
|
||||
|
||||
|
||||
### Chrome Mobile web apps
|
||||
|
||||
Chrome Mobile has a specific meta tag for making apps [installable to the
|
||||
homescreen](https://developer.chrome.com/multidevice/android/installtohomescreen)
|
||||
which tries to be a more generic replacement to Apple's proprietary meta tag:
|
||||
|
||||
```html
|
||||
<meta name="mobile-web-app-capable" content="yes">
|
||||
```
|
||||
|
||||
Same applies to the touch icons:
|
||||
|
||||
```html
|
||||
<link rel="icon" sizes="192x192" href="highres-icon.png">
|
||||
```
|
||||
|
||||
### Theme Color
|
||||
|
||||
You can add the [`theme-color` meta extension](https://html.spec.whatwg.org/multipage/semantics.html#meta-theme-color)
|
||||
in the `<head>` of your pages to suggest the color that browsers and
|
||||
OSes should use if they customize the display of individual pages in
|
||||
their UIs with varying colors.
|
||||
|
||||
```html
|
||||
<meta name="theme-color" content="#ff69b4">
|
||||
```
|
||||
|
||||
The `content` attribute extension can take any valid CSS color.
|
||||
|
||||
Currently, the `theme-color` meta extension is supported by [Chrome 39+
|
||||
for Android Lollipop](https://developers.google.com/web/updates/2014/11/Support-for-theme-color-in-Chrome-39-for-Android).
|
||||
47
src/doc/faq.md
Normal file
@@ -0,0 +1,47 @@
|
||||
[HTML5 Boilerplate homepage](https://html5boilerplate.com/) | [Documentation
|
||||
table of contents](TOC.md)
|
||||
|
||||
# Frequently asked questions
|
||||
|
||||
* [Why is the Google Analytics code at the bottom? Google recommends it be
|
||||
placed in the `<head>`.](#why-is-the-google-analytics-code-at-the-bottom-google-recommends-it-be-placed-in-the-head)
|
||||
* [How can I integrate Bootstrap with HTML5
|
||||
Boilerplate?](#how-can-i-integrate-bootstrap-with-html5-boilerplate)
|
||||
* [Do I need to upgrade my site each time a new version of HTML5 Boilerplate is
|
||||
released?](#do-i-need-to-upgrade-my-site-each-time-a-new-version-of-html5-boilerplate-is-released)
|
||||
* [Where can I get help with support
|
||||
questions?](#where-can-i-get-help-with-support-questions)
|
||||
|
||||
---
|
||||
|
||||
### Why is the Google Analytics code at the bottom? Google recommends it be placed in the `<head>`.
|
||||
|
||||
The main advantage of placing it in the `<head>` is that you will track the
|
||||
user's `pageview` even if they leave the page before it has been fully loaded.
|
||||
|
||||
Here's a handy quote from [Mathias Bynens](https://mathiasbynens.be/notes/async-analytics-snippet#comment-50) about our placement choice.
|
||||
>I should point out that it’s Google — not me — recommending to place this
|
||||
script before all other scripts in the document. The only real advantage is to
|
||||
catch a pageView call if your page fails to load completely (for example, if
|
||||
the user aborts loading, or quickly closes the page, etc.). Personally, I
|
||||
wouldn’t count that as a page view, so I actually prefer to place this script
|
||||
at the bottom, after all other scripts. This keeps all the scripts together and
|
||||
reinforces that scripts at the bottom are the right move. (Usually I
|
||||
concatenate and minify all my scripts into one .js file — the GA snippet being
|
||||
the suffix.)
|
||||
|
||||
### How can I integrate [Bootstrap](https://getbootstrap.com/) with HTML5 Boilerplate?
|
||||
|
||||
Here's Nicolas Gallagher writing about how [HTML5 Boilerplate and Bootstrap complement each
|
||||
other](https://www.quora.com/Is-Bootstrap-a-complement-or-an-alternative-to-HTML5-Boilerplate-or-viceversa/answer/Nicolas-Gallagher).
|
||||
|
||||
### Do I need to upgrade my site each time a new version of HTML5 Boilerplate is released?
|
||||
|
||||
No, same as you don't normally replace the foundation of a house once it
|
||||
was built. However, there is nothing stopping you from trying to work in the
|
||||
latest changes, but you'll have to assess the costs/benefits of doing so.
|
||||
|
||||
### Where can I get help with support questions?
|
||||
|
||||
Please ask for help on
|
||||
[StackOverflow](https://stackoverflow.com/questions/tagged/html5boilerplate).
|
||||
250
src/doc/html.md
Normal file
@@ -0,0 +1,250 @@
|
||||
[HTML5 Boilerplate homepage](https://html5boilerplate.com/) | [Documentation
|
||||
table of contents](TOC.md)
|
||||
|
||||
# The HTML
|
||||
|
||||
By default, HTML5 Boilerplate provides two `html` pages:
|
||||
|
||||
* [`index.html`](#indexhtml) - a default HTML skeleton that should form the
|
||||
basis of all pages on your website
|
||||
* [`404.html`](#404html) - a placeholder 404 error page
|
||||
|
||||
|
||||
## `index.html`
|
||||
|
||||
|
||||
### The `no-js` Class
|
||||
|
||||
The `no-js` class is provided in order to allow you to more easily and
|
||||
explicitly add custom styles based on whether JavaScript is disabled
|
||||
(`.no-js`) or enabled (`.js`). Using this technique also helps [avoid the
|
||||
FOUC](https://www.paulirish.com/2009/avoiding-the-fouc-v3/).
|
||||
|
||||
|
||||
## Language Attribute
|
||||
|
||||
Please consider specifying the language of your content by adding a [value](http://www.iana.org/assignments/language-subtag-registry/language-subtag-registry) to the `lang`
|
||||
attribute in the `<html>` as in this example:
|
||||
|
||||
```html
|
||||
<html class="no-js" lang="en">
|
||||
```
|
||||
|
||||
### The order of the `<title>` and `<meta>` tags
|
||||
|
||||
The order in which the `<title>` and the `<meta>` tags are specified is
|
||||
important because:
|
||||
|
||||
1) the charset declaration (`<meta charset="utf-8">`):
|
||||
|
||||
* must be included completely within the [first 1024 bytes of the
|
||||
document](https://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#charset)
|
||||
|
||||
* should be specified as early as possible (before any content that could
|
||||
be controlled by an attacker, such as a `<title>` element) in order to
|
||||
avoid a potential [encoding-related security
|
||||
issue](https://code.google.com/p/doctype-mirror/wiki/ArticleUtf7) in
|
||||
Internet Explorer
|
||||
|
||||
2) the meta tag for compatibility mode
|
||||
(`<meta http-equiv="x-ua-compatible" content="ie=edge">`):
|
||||
|
||||
* [needs to be included before all other tags except for the `<title>` and
|
||||
the other `<meta>`
|
||||
tags](https://msdn.microsoft.com/en-us/library/cc288325.aspx)
|
||||
|
||||
|
||||
### `x-ua-compatible`
|
||||
|
||||
Internet Explorer 8/9/10 support [document compatibility
|
||||
modes](https://msdn.microsoft.com/en-us/library/cc288325.aspx) that affect the
|
||||
way webpages are interpreted and displayed. Because of this, even if your site's
|
||||
visitor is using, let's say, Internet Explorer 9, it's possible that IE will not
|
||||
use the latest rendering engine, and instead, decide to render your page using
|
||||
the Internet Explorer 5.5 rendering engine.
|
||||
|
||||
Specifying the `x-ua-compatible` meta tag:
|
||||
|
||||
```html
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
```
|
||||
|
||||
or sending the page with the following HTTP response header
|
||||
|
||||
```
|
||||
X-UA-Compatible: IE=edge
|
||||
```
|
||||
|
||||
will force Internet Explorer 8/9/10 to render the webpage in the highest
|
||||
available mode in [the various cases when it may
|
||||
not](https://hsivonen.fi/doctype/#ie8), and therefore, ensure that anyone
|
||||
browsing your site is treated to the best possible user experience that
|
||||
browser can offer.
|
||||
|
||||
If possible, we recommend that you remove the `meta` tag and send only the
|
||||
HTTP response header as the `meta` tag will not always work if your site is
|
||||
served on a non-standard port, as Internet Explorer's preference option
|
||||
`Display intranet sites in Compatibility View` is checked by default.
|
||||
|
||||
If you are using Apache as your webserver, including the
|
||||
[`.htaccess`](https://github.com/h5bp/server-configs-apache) file takes care of
|
||||
the HTTP header. If you are using a different server, check out our [other
|
||||
server config](https://github.com/h5bp/server-configs).
|
||||
|
||||
Starting with Internet Explorer 11, [document modes are
|
||||
deprecated](https://msdn.microsoft.com/library/bg182625.aspx#docmode).
|
||||
If your business still relies on older web apps and services that were
|
||||
designed for older versions of Internet Explorer, you might want to consider
|
||||
enabling [Enterprise Mode](https://blogs.msdn.microsoft.com/ie/2014/04/02/stay-up-to-date-with-enterprise-mode-for-internet-explorer-11/) throughout your company.
|
||||
|
||||
|
||||
## Meta Description
|
||||
|
||||
The `description` meta tag provides a short description of the page.
|
||||
In some situations this description is used as a part of the snippet
|
||||
shown in the search results.
|
||||
|
||||
```html
|
||||
<meta name="description" content="This is a description">
|
||||
```
|
||||
|
||||
|
||||
## Mobile Viewport
|
||||
|
||||
There are a few different options that you can use with the [`viewport` meta
|
||||
tag](https://docs.google.com/present/view?id=dkx3qtm_22dxsrgcf4 "Viewport and
|
||||
Media Queries - The Complete Idiot's Guide"). You can find out more in [the
|
||||
Apple developer docs](https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html).
|
||||
HTML5 Boilerplate comes with a simple setup that strikes a good balance for general use cases.
|
||||
|
||||
```html
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
```
|
||||
|
||||
## Web App Manifest
|
||||
HTML5 Boilerplate includes a simple web app manifest file.
|
||||
|
||||
The web app manifest is a simple JSON file that allows you to control how your
|
||||
app appears on a device's home screen, what it looks like when it launches
|
||||
in that context and what happens when it is launched. This allows for much greater
|
||||
control over the UI of a saved site or web app on a mobile device.
|
||||
|
||||
It's linked to from the HTML as follows:
|
||||
|
||||
```html
|
||||
<link rel="manifest" href="site.webmanifest">
|
||||
```
|
||||
Our [site.webmanifest](https://github.com/h5bp/html5-boilerplate/blob/master/src/site.webmanifest) contains a very skeletal "app" definition, just to show the basic usage.
|
||||
You should fill this file out with [more information about your site or application](https://developer.mozilla.org/en-US/docs/Web/Manifest)
|
||||
|
||||
## Favicons and Touch Icon
|
||||
|
||||
The shortcut icons should be put in the root directory of your site. `favicon.ico`
|
||||
is automatically picked up by browsers if it's placed in the root. HTML5
|
||||
Boilerplate comes with a default set of icons (include favicon and one Apple
|
||||
Touch Icon) that you can use as a baseline to create your own.
|
||||
|
||||
Please refer to the more detailed description in the [Extend section](extend.md)
|
||||
of these docs.
|
||||
|
||||
## The Content Area
|
||||
|
||||
The central part of the boilerplate template is pretty much empty. This is
|
||||
intentional, in order to make the boilerplate suitable for both web page and
|
||||
web app development.
|
||||
|
||||
### Browser Upgrade Prompt
|
||||
|
||||
The main content area of the boilerplate includes a prompt to install an up to
|
||||
date browser for users of IE 8 and lower. If you intended to support IE 8, then you
|
||||
should remove the snippet of code.
|
||||
|
||||
## Modernizr
|
||||
|
||||
HTML5 Boilerplate uses a custom build of Modernizr.
|
||||
|
||||
[Modernizr](https://modernizr.com/) is a JavaScript library which adds classes to
|
||||
the `html` element based on the results of feature test and which ensures that
|
||||
all browsers can make use of HTML5 elements (as it includes the HTML5 Shiv).
|
||||
This allows you to target parts of your CSS and JavaScript based on the
|
||||
features supported by a browser.
|
||||
|
||||
Starting with version 3 Modernizr can be customized using the [modernizr-config.json](https://github.com/h5bp/html5-boilerplate/blob/master/modernizr-config.json) and the
|
||||
[Modernizr command line utility](https://www.npmjs.com/package/modernizr-cli).
|
||||
|
||||
## What About Polyfills?
|
||||
|
||||
If you need to include [polyfills](https://remysharp.com/2010/10/08/what-is-a-polyfill)
|
||||
in your project, you must make sure those load before any other JavaScript. If you're
|
||||
using some polyfill CDN service, like [cdn.polyfill.io](https://cdn.polyfill.io/),
|
||||
just put it before the other scripts in the bottom of the page:
|
||||
|
||||
```html
|
||||
<script src="js/vendor/modernizr-3.5.0.min.js"></script>
|
||||
<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
|
||||
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="js/vendor/jquery-3.2.1.min.js"><\/script>')</script>
|
||||
<script src="js/plugins.js"></script>
|
||||
<script src="js/main.js"></script>
|
||||
</body>
|
||||
```
|
||||
|
||||
If you like to just include the polyfills yourself, you could include them in
|
||||
`js/plugins.js`. When you have a bunch of polyfills to load in, you could
|
||||
also create a `polyfills.js` file in the `js/vendor` directory or include the files
|
||||
individually and combine them using a build tool. Always ensure that the polyfills
|
||||
are all loaded before any other Javascript.
|
||||
|
||||
There are some misconceptions about Modernizr and polyfills. It's important
|
||||
to understand that Modernizr just handles feature checking, not polyfilling
|
||||
itself. The only thing Modernizr does regarding polyfills is that the team
|
||||
maintains [a huge list of cross Browser polyfills](https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills).
|
||||
|
||||
### jQuery CDN for jQuery
|
||||
|
||||
The jQuery CDN version of the jQuery JavaScript library is referenced towards
|
||||
the bottom of the page. A local fallback of jQuery is included for rare instances
|
||||
when the CDN version might not be available, and to facilitate offline
|
||||
development.
|
||||
|
||||
The jQuery CDN version was chosen over other potential candidates
|
||||
([like Google's Hosted Libraries](https://developers.google.com/speed/libraries/))
|
||||
because it's fast ([comparable or faster than Google by some
|
||||
measures](https://www.cdnperf.com/#jsdelivr,cdnjs,google,yandex,microsoft,jquery,bootstrapcdn/https/90))
|
||||
and, (unlike Google's CDN) is available to China's hundreds of millions of internet users.
|
||||
For many years we [chose](https://github.com/h5bp/html5-boilerplate/issues/1191)
|
||||
the Google Hosted version over the jQuery CDN because it was available
|
||||
over HTTPS (the jQuery CDN was not,) and it offered a better chance of
|
||||
hitting the cache lottery owing to the popularity of the Google CDN.
|
||||
The first issue is no longer valid and the second is far outweighed by
|
||||
being able to serve jQuery to Chinese users.
|
||||
|
||||
While the jQuery CDN is a strong default solution your site or application may
|
||||
require a different configuration. Testing your site with services like
|
||||
[WebPageTest](https://www.webpagetest.org/) and browser tools like
|
||||
[PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/) will help you examine the real
|
||||
world performance of your site and can show where you can optimize your specific
|
||||
site or application.
|
||||
|
||||
### Google Universal Analytics Tracking Code
|
||||
|
||||
Finally, an optimized version of the Google Universal Analytics tracking code is
|
||||
included. Google recommends that this script be placed at the top of the page.
|
||||
Factors to consider: if you place this script at the top of the page, you’ll
|
||||
be able to count users who don’t fully load the page, and you’ll incur the max
|
||||
number of simultaneous connections of the browser.
|
||||
|
||||
Further information:
|
||||
|
||||
* [Optimizing the Google Universal Analytics
|
||||
Snippet](https://mathiasbynens.be/notes/async-analytics-snippet#universal-analytics)
|
||||
* [Introduction to
|
||||
Analytics.js](https://developers.google.com/analytics/devguides/collection/analyticsjs/)
|
||||
* [Google Analytics Demos & Tools](https://ga-dev-tools.appspot.com/)
|
||||
|
||||
**N.B.** The Google Universal Analytics snippet is included by default mainly
|
||||
because Google Analytics is [currently one of the most popular tracking
|
||||
solutions](https://trends.builtwith.com/analytics/Google-Analytics) out there.
|
||||
However, its usage isn't set in stone, and you SHOULD consider exploring the
|
||||
[alternatives](https://en.wikipedia.org/wiki/List_of_web_analytics_software)
|
||||
and use whatever suits your needs best!
|
||||
36
src/doc/js.md
Normal file
@@ -0,0 +1,36 @@
|
||||
[HTML5 Boilerplate homepage](https://html5boilerplate.com/) | [Documentation
|
||||
table of contents](TOC.md)
|
||||
|
||||
# The JavaScript
|
||||
|
||||
Information about the default JavaScript included in the project.
|
||||
|
||||
## main.js
|
||||
|
||||
This file can be used to contain or reference your site/app JavaScript code.
|
||||
If you're working on something more advanced you might replace this file
|
||||
entirely. That's cool.
|
||||
|
||||
## plugins.js
|
||||
|
||||
This file can be used to contain all your plugins, such as jQuery plugins and
|
||||
other 3rd party scripts for a simple site.
|
||||
|
||||
One approach is to put jQuery plugins inside of a `(function($){ ...
|
||||
})(jQuery);` closure to make sure they're in the jQuery namespace safety
|
||||
blanket. Read more about [jQuery plugin
|
||||
authoring](https://learn.jquery.com/plugins/#Getting_Started).
|
||||
|
||||
By default the `plugins.js` file contains a small script to avoid `console`
|
||||
errors in browsers that lack a `console`. The script will make sure that, if
|
||||
a console method isn't available, that method will have the value of empty
|
||||
function, thus, preventing the browser from throwing an error.
|
||||
|
||||
## vendor
|
||||
|
||||
This directory can be used to contain all 3rd party library code.
|
||||
|
||||
Minified versions of the latest jQuery and Modernizr libraries are included by
|
||||
default. You may wish to create your own [custom Modernizr
|
||||
build with the online builder](https://www.modernizr.com/download/) or [command
|
||||
line tool](https://modernizr.com/docs#command-line-config).
|
||||
158
src/doc/misc.md
Normal file
@@ -0,0 +1,158 @@
|
||||
[HTML5 Boilerplate homepage](https://html5boilerplate.com/) | [Documentation
|
||||
table of contents](TOC.md)
|
||||
|
||||
# Miscellaneous
|
||||
|
||||
* [.gitignore](#gitignore)
|
||||
* [.editorconfig](#editorconfig)
|
||||
* [Server Configuration](#server-configuration)
|
||||
* [robots.txt](#robotstxt)
|
||||
* [browserconfig.xml](#browserconfigxml)
|
||||
|
||||
--
|
||||
|
||||
## .gitignore
|
||||
|
||||
HTML5 Boilerplate includes a basic project-level `.gitignore`. This should
|
||||
primarily be used to avoid certain project-level files and directories from
|
||||
being kept under source control. Different development-environments will
|
||||
benefit from different collections of ignores.
|
||||
|
||||
OS-specific and editor-specific files should be ignored using a "global
|
||||
ignore" that applies to all repositories on your system.
|
||||
|
||||
For example, add the following to your `~/.gitconfig`, where the `.gitignore`
|
||||
in your HOME directory contains the files and directories you'd like to
|
||||
globally ignore:
|
||||
|
||||
```gitignore
|
||||
[core]
|
||||
excludesfile = ~/.gitignore
|
||||
```
|
||||
|
||||
* More on global ignores: https://help.github.com/articles/ignoring-files/
|
||||
* Comprehensive set of ignores on GitHub: https://github.com/github/gitignore
|
||||
|
||||
|
||||
## .editorconfig
|
||||
|
||||
The `.editorconfig` file is provided in order to encourage and help you and
|
||||
your team define and maintain consistent coding styles between different
|
||||
editors and IDEs.
|
||||
|
||||
By default, `.editorconfig` includes some basic
|
||||
[properties](http://editorconfig.org/#supported-properties) that reflect the
|
||||
coding styles from the files provided by default, but you can easily change
|
||||
them to better suit your needs.
|
||||
|
||||
In order for your editor/IDE to apply the
|
||||
[properties](http://editorconfig.org/#supported-properties) from the
|
||||
`.editorconfig` file, you may need to [install a
|
||||
plugin]( http://editorconfig.org/#download).
|
||||
|
||||
__N.B.__ If you aren't using the server configurations provided by HTML5
|
||||
Boilerplate, we highly encourage you to configure your server to block
|
||||
access to `.editorconfig` files, as they can disclose sensitive information!
|
||||
|
||||
For more details, please refer to the [EditorConfig
|
||||
project](http://editorconfig.org/).
|
||||
|
||||
|
||||
## Server Configuration
|
||||
|
||||
H5BP includes a [`.htaccess`](#htaccess) file for the [Apache HTTP
|
||||
server](https://httpd.apache.org/docs/). If you are not using Apache
|
||||
as your web server, then you are encouraged to download a
|
||||
[server configuration](https://github.com/h5bp/server-configs) that
|
||||
corresponds to your web server and environment.
|
||||
|
||||
A `.htaccess` (hypertext access) file is an [Apache HTTP server
|
||||
configuration file](https://github.com/h5bp/server-configs-apache).
|
||||
The `.htaccess` file is mostly used for:
|
||||
|
||||
* Rewriting URLs
|
||||
* Controlling cache
|
||||
* Authentication
|
||||
* Server-side includes
|
||||
* Redirects
|
||||
* Gzipping
|
||||
|
||||
If you have access to the main server configuration file (usually called
|
||||
`httpd.conf`), you should add the logic from the `.htaccess` file in, for
|
||||
example, a <Directory> section in the main configuration file. This is usually
|
||||
the recommended way, as using .htaccess files slows down Apache!
|
||||
|
||||
To enable Apache modules locally, please see:
|
||||
https://github.com/h5bp/server-configs-apache/wiki/How-to-enable-Apache-modules.
|
||||
|
||||
In the repo the `.htaccess` is used for:
|
||||
|
||||
* Allowing cross-origin access to web fonts
|
||||
* CORS header for images when browsers request it
|
||||
* Enable `404.html` as 404 error document
|
||||
* Making the website experience better for IE users better
|
||||
* Media UTF-8 as character encoding for `text/html` and `text/plain`
|
||||
* Enabling the rewrite URLs engine
|
||||
* Forcing or removing the `www.` at the begin of a URL
|
||||
* It blocks access to directories without a default document
|
||||
* It blocks access to files that can expose sensitive information.
|
||||
* It reduces MIME type security risks
|
||||
* It forces compressing (gzipping)
|
||||
* It tells the browser whether they should request a specific file from the
|
||||
server or whether they should grab it from the browser's cache
|
||||
|
||||
When using `.htaccess` we recommend reading all inline comments (the rules after
|
||||
a `#`) in the file once. There is a bunch of optional stuff in it.
|
||||
|
||||
If you want to know more about the `.htaccess` file check out the
|
||||
[Apache HTTP server docs](https://httpd.apache.org/docs/) or more
|
||||
specifically the [htaccess
|
||||
section](https://httpd.apache.org/docs/current/howto/htaccess.html).
|
||||
|
||||
Notice that the original repo for the `.htaccess` file is [this
|
||||
one](https://github.com/h5bp/server-configs-apache).
|
||||
|
||||
|
||||
## robots.txt
|
||||
|
||||
The `robots.txt` file is used to give instructions to web robots on what can
|
||||
be crawled from the website.
|
||||
|
||||
By default, the file provided by this project includes the next two lines:
|
||||
|
||||
* `User-agent: *` - the following rules apply to all web robots
|
||||
* `Disallow:` - everything on the website is allowed to be crawled
|
||||
|
||||
If you want to disallow certain pages you will need to specify the path in a
|
||||
`Disallow` directive (e.g.: `Disallow: /path`) or, if you want to disallow
|
||||
crawling of all content, use `Disallow: /`.
|
||||
|
||||
The `/robots.txt` file is not intended for access control, so don't try to
|
||||
use it as such. Think of it as a "No Entry" sign, rather than a locked door.
|
||||
URLs disallowed by the `robots.txt` file might still be indexed without being
|
||||
crawled, and the content from within the `robots.txt` file can be viewed by
|
||||
anyone, potentially disclosing the location of your private content! So, if
|
||||
you want to block access to private content, use proper authentication instead.
|
||||
|
||||
For more information about `robots.txt`, please see:
|
||||
|
||||
* [robotstxt.org](http://www.robotstxt.org/)
|
||||
* [How Google handles the `robots.txt` file](https://developers.google.com/webmasters/control-crawl-index/docs/robots_txt)
|
||||
|
||||
|
||||
## browserconfig.xml
|
||||
|
||||
The `browserconfig.xml` file is used to customize the tile displayed when users
|
||||
pin your site to the Windows 8.1 start screen. In there you can define custom
|
||||
tile colors, custom images or even [live tiles](https://msdn.microsoft.com/library/dn455106.aspx#CreatingLiveTiles).
|
||||
|
||||
By default, the file points to 2 placeholder tile images:
|
||||
|
||||
* `tile.png` (558x558px): used for `Small`, `Medium` and `Large` tiles.
|
||||
This image resizes automatically when necessary.
|
||||
* `tile-wide.png` (558x270px): user for `Wide` tiles.
|
||||
|
||||
Notice that IE11 uses the same images when adding a site to the `favorites`.
|
||||
|
||||
For more in-depth information about the `browserconfig.xml` file, please
|
||||
see [MSDN](https://msdn.microsoft.com/library/dn320426.aspx).
|
||||
130
src/doc/usage.md
Normal file
@@ -0,0 +1,130 @@
|
||||
[HTML5 Boilerplate homepage](https://html5boilerplate.com/) | [Documentation
|
||||
table of contents](TOC.md)
|
||||
|
||||
# Usage
|
||||
|
||||
The most basic usage of HTML5 Boilerplate is to create a static site or simple
|
||||
app. Once you've downloaded or cloned the project, that process looks something
|
||||
like this:
|
||||
|
||||
1. Set up the basic structure of the site.
|
||||
2. Add some content, style, and functionality.
|
||||
3. Run your site locally to see how it looks.
|
||||
4. Deploy your site.
|
||||
|
||||
Cool, right? _It is_. That said, the smart defaults, baseline elements, default
|
||||
attribute values and various other utilities that HTML5 Boilerplate offers can
|
||||
serve as the foundation for whatever you're interested in building.
|
||||
|
||||
Even the basic use-case of a simple static site can be enhanced by manipulating
|
||||
the code through an automated build process. Moving up in complexity HTML5
|
||||
Boilerplate can be be integrated with whatever front-end framework, CMS or
|
||||
e-commerce platform you're working with. Mix-and-match to your heart's content.
|
||||
Use what you need (toss it in a blender if you need to) and discard the rest.
|
||||
HTML5 Boilerplate is a starting point, not a destination.
|
||||
|
||||
## Basic structure
|
||||
|
||||
A basic HTML5 Boilerplate site initially looks something like this:
|
||||
|
||||
```
|
||||
.
|
||||
├── css
|
||||
│ ├── main.css
|
||||
│ └── normalize.css
|
||||
├── doc
|
||||
├── img
|
||||
├── js
|
||||
│ ├── main.js
|
||||
│ ├── plugins.js
|
||||
│ └── vendor
|
||||
│ ├── jquery.min.js
|
||||
│ └── modernizr.min.js
|
||||
├── .editorconfig
|
||||
├── .htaccess
|
||||
├── 404.html
|
||||
├── browserconfig.xml
|
||||
├── favicon.ico
|
||||
├── humans.txt
|
||||
├── icon.png
|
||||
├── index.html
|
||||
├── robots.txt
|
||||
├── site.webmanifest
|
||||
├── tile.png
|
||||
└── tile-wide.png
|
||||
```
|
||||
|
||||
What follows is a general overview of each major part and how to use them.
|
||||
|
||||
### css
|
||||
|
||||
This directory should contain all your project's CSS files. It includes some
|
||||
initial CSS to help get you started from a solid foundation. [About the
|
||||
CSS](css.md).
|
||||
|
||||
### doc
|
||||
|
||||
This directory contains all the HTML5 Boilerplate documentation. You can use it
|
||||
as the location and basis for your own project's documentation.
|
||||
|
||||
### js
|
||||
|
||||
This directory should contain all your project's JS files. Libraries, plugins,
|
||||
and custom code can all be included here. It includes some initial JS to help
|
||||
get you started. [About the JavaScript](js.md).
|
||||
|
||||
### .htaccess
|
||||
|
||||
The default web server configs are for Apache. For more information, please
|
||||
refer to the [Apache Server Configs
|
||||
repository](https://github.com/h5bp/server-configs-apache).
|
||||
|
||||
Host your site on a server other than Apache? You're likely to find the
|
||||
corresponding server configs project listed in our [Server Configs
|
||||
](https://github.com/h5bp/server-configs/blob/master/README.md) repository.
|
||||
|
||||
### 404.html
|
||||
|
||||
A helpful custom 404 to get you started.
|
||||
|
||||
### browserconfig.xml
|
||||
|
||||
This file contains all settings regarding custom tiles for IE11 and Edge.
|
||||
|
||||
For more info on this topic, please refer to
|
||||
[MSDN](https://msdn.microsoft.com/library/dn455106.aspx).
|
||||
|
||||
### .editorconfig
|
||||
|
||||
The `.editorconfig` file is provided in order to encourage and help you and
|
||||
your team to maintain consistent coding styles between different
|
||||
editors and IDEs. [Read more about the `.editorconfig` file](misc.md#editorconfig).
|
||||
|
||||
### index.html
|
||||
|
||||
This is the default HTML skeleton that should form the basis of all pages on
|
||||
your site. If you are using a server-side templating framework, then you will
|
||||
need to integrate this starting HTML with your setup.
|
||||
|
||||
Make sure that you update the URLs for the referenced CSS and JavaScript if you
|
||||
modify the directory structure at all.
|
||||
|
||||
If you are using Google Universal Analytics, make sure that you edit the
|
||||
corresponding snippet at the bottom to include your analytics ID.
|
||||
|
||||
### humans.txt
|
||||
|
||||
Edit this file to include the team that worked on your site/app, and the
|
||||
technology powering it.
|
||||
|
||||
### robots.txt
|
||||
|
||||
Edit this file to include any pages you need hidden from search engines.
|
||||
|
||||
### Icons
|
||||
|
||||
Replace the default `favicon.ico`, `tile.png`, `tile-wide.png` and Apple
|
||||
Touch Icon with your own.
|
||||
|
||||
If you want to use different Apple Touch Icons for different resolutions please
|
||||
refer to the [according documentation](extend.md#apple-touch-icons).
|
||||
BIN
src/favicon.ico
Normal file
|
After Width: | Height: | Size: 766 B |
15
src/humans.txt
Normal file
@@ -0,0 +1,15 @@
|
||||
# humanstxt.org/
|
||||
# The humans responsible & technology colophon
|
||||
|
||||
# TEAM
|
||||
|
||||
<name> -- <role> -- <twitter>
|
||||
|
||||
# THANKS
|
||||
|
||||
<name>
|
||||
|
||||
# TECHNOLOGY COLOPHON
|
||||
|
||||
CSS3, HTML5
|
||||
Apache Server Configs, jQuery, Modernizr, Normalize.css
|
||||
BIN
src/icon.png
Normal file
|
After Width: | Height: | Size: 3.9 KiB |
0
src/img/.gitignore
vendored
Normal file
37
src/index.html
Normal file
@@ -0,0 +1,37 @@
|
||||
<!doctype html>
|
||||
<html class="no-js" lang="">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<title></title>
|
||||
<meta name="description" content="">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<link rel="manifest" href="site.webmanifest">
|
||||
<link rel="apple-touch-icon" href="icon.png">
|
||||
<!-- Place favicon.ico in the root directory -->
|
||||
|
||||
<link rel="stylesheet" href="css/normalize.css">
|
||||
<link rel="stylesheet" href="css/main.css">
|
||||
</head>
|
||||
<body>
|
||||
<!--[if lte IE 9]>
|
||||
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
|
||||
<![endif]-->
|
||||
|
||||
<!-- Add your site or application content here -->
|
||||
<p>Hello world! This is HTML5 Boilerplate.</p>
|
||||
<script src="js/vendor/modernizr-{{MODERNIZR_VERSION}}.min.js"></script>
|
||||
<script src="https://code.jquery.com/jquery-{{JQUERY_VERSION}}.min.js" integrity="{{JQUERY_SRI_HASH}}" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="js/vendor/jquery-{{JQUERY_VERSION}}.min.js"><\/script>')</script>
|
||||
<script src="js/plugins.js"></script>
|
||||
<script src="js/main.js"></script>
|
||||
|
||||
<!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
|
||||
<script>
|
||||
window.ga=function(){ga.q.push(arguments)};ga.q=[];ga.l=+new Date;
|
||||
ga('create','UA-XXXXX-Y','auto');ga('send','pageview')
|
||||
</script>
|
||||
<script src="https://www.google-analytics.com/analytics.js" async defer></script>
|
||||
</body>
|
||||
</html>
|
||||
0
src/js/main.js
Normal file
24
src/js/plugins.js
Normal file
@@ -0,0 +1,24 @@
|
||||
// Avoid `console` errors in browsers that lack a console.
|
||||
(function() {
|
||||
var method;
|
||||
var noop = function () {};
|
||||
var methods = [
|
||||
'assert', 'clear', 'count', 'debug', 'dir', 'dirxml', 'error',
|
||||
'exception', 'group', 'groupCollapsed', 'groupEnd', 'info', 'log',
|
||||
'markTimeline', 'profile', 'profileEnd', 'table', 'time', 'timeEnd',
|
||||
'timeline', 'timelineEnd', 'timeStamp', 'trace', 'warn'
|
||||
];
|
||||
var length = methods.length;
|
||||
var console = (window.console = window.console || {});
|
||||
|
||||
while (length--) {
|
||||
method = methods[length];
|
||||
|
||||
// Only stub undefined methods.
|
||||
if (!console[method]) {
|
||||
console[method] = noop;
|
||||
}
|
||||
}
|
||||
}());
|
||||
|
||||
// Place any jQuery/helper plugins in here.
|
||||
5
src/robots.txt
Normal file
@@ -0,0 +1,5 @@
|
||||
# www.robotstxt.org/
|
||||
|
||||
# Allow crawling of all content
|
||||
User-agent: *
|
||||
Disallow:
|
||||
8
src/site.webmanifest
Normal file
@@ -0,0 +1,8 @@
|
||||
{
|
||||
"icons": [{
|
||||
"src": "icon.png",
|
||||
"sizes": "192x192",
|
||||
"type": "image/png"
|
||||
}],
|
||||
"start_url": "/"
|
||||
}
|
||||
BIN
src/tile-wide.png
Normal file
|
After Width: | Height: | Size: 1.8 KiB |
BIN
src/tile.png
Normal file
|
After Width: | Height: | Size: 3.4 KiB |
85
test/file_content.js
Normal file
@@ -0,0 +1,85 @@
|
||||
/* jshint mocha: true */
|
||||
|
||||
import assert from 'assert';
|
||||
import fs from 'fs';
|
||||
import path from 'path';
|
||||
|
||||
import pkg from './../package.json';
|
||||
|
||||
const dirs = pkg['h5bp-configs'].directories;
|
||||
|
||||
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
|
||||
|
||||
function checkString(file, string, done) {
|
||||
|
||||
let character = '';
|
||||
let matchFound = false;
|
||||
let matchedPositions = 0;
|
||||
const readStream = fs.createReadStream(file, { 'encoding': 'utf8' });
|
||||
|
||||
readStream.on('close', done);
|
||||
readStream.on('error', done);
|
||||
readStream.on('readable', function () {
|
||||
|
||||
// Read file until the string is found
|
||||
// or the whole file has been read
|
||||
while (matchFound !== true &&
|
||||
(character = readStream.read(1)) !== null) {
|
||||
|
||||
if (character === string.charAt(matchedPositions)) {
|
||||
matchedPositions += 1;
|
||||
} else {
|
||||
matchedPositions = 0;
|
||||
}
|
||||
|
||||
if (matchedPositions === string.length) {
|
||||
matchFound = true;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
assert.equal(true, matchFound);
|
||||
this.close();
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
|
||||
|
||||
function runTests() {
|
||||
|
||||
const dir = dirs.dist;
|
||||
|
||||
describe(`Test if the files from the "${dir}" directory have the expected content`, () => {
|
||||
|
||||
it('".htaccess" should have the "ErrorDocument..." line uncommented', (done) => {
|
||||
const string = '\n\nErrorDocument 404 /404.html\n\n';
|
||||
checkString(path.resolve(dir, '.htaccess'), string, done);
|
||||
});
|
||||
|
||||
it('"index.html" should contain the correct jQuery version in the CDN URL', (done) => {
|
||||
const string = `code.jquery.com/jquery-${pkg.devDependencies.jquery}.min.js`;
|
||||
checkString(path.resolve(dir, 'index.html'), string, done);
|
||||
});
|
||||
|
||||
it('"index.html" should contain the correct jQuery version in the local URL', (done) => {
|
||||
const string = `js/vendor/jquery-${pkg.devDependencies.jquery}.min.js`;
|
||||
checkString(path.resolve(dir, 'index.html'), string, done);
|
||||
});
|
||||
|
||||
it('"index.html" should contain the correct Modernizr version in the local URL', (done) => {
|
||||
const string = `js/vendor/modernizr-${pkg.devDependencies.modernizr}.min.js`;
|
||||
checkString(path.resolve(dir, 'index.html'), string, done);
|
||||
});
|
||||
|
||||
it('"main.css" should contain a custom banner', function (done) {
|
||||
const string = `/*! HTML5 Boilerplate v${pkg.version} | ${pkg.license} License | ${pkg.homepage} */\n\n/*\n`;
|
||||
checkString(path.resolve(dir, 'css/main.css'), string, done);
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
runTests();
|
||||
135
test/file_existence.js
Normal file
@@ -0,0 +1,135 @@
|
||||
/* jshint mocha: true */
|
||||
|
||||
import assert from 'assert';
|
||||
import fs from 'fs';
|
||||
import path from 'path';
|
||||
import glob from 'glob';
|
||||
|
||||
import pkg from './../package.json';
|
||||
|
||||
const dirs = pkg['h5bp-configs'].directories;
|
||||
|
||||
const expectedFilesInArchiveDir = [
|
||||
`${pkg.name}_v${pkg.version}.zip`
|
||||
];
|
||||
|
||||
const expectedFilesInDistDir = [
|
||||
|
||||
'.editorconfig',
|
||||
'.gitattributes',
|
||||
'.gitignore',
|
||||
'.htaccess',
|
||||
'404.html',
|
||||
'browserconfig.xml',
|
||||
|
||||
'css/', // for directories, a `/` character
|
||||
// should be included at the end
|
||||
'css/main.css',
|
||||
'css/normalize.css',
|
||||
|
||||
'doc/',
|
||||
'doc/TOC.md',
|
||||
'doc/css.md',
|
||||
'doc/extend.md',
|
||||
'doc/faq.md',
|
||||
'doc/html.md',
|
||||
'doc/js.md',
|
||||
'doc/misc.md',
|
||||
'doc/usage.md',
|
||||
|
||||
'favicon.ico',
|
||||
'humans.txt',
|
||||
|
||||
'icon.png',
|
||||
|
||||
'img/',
|
||||
'img/.gitignore',
|
||||
|
||||
'index.html',
|
||||
|
||||
'js/',
|
||||
'js/main.js',
|
||||
'js/plugins.js',
|
||||
'js/vendor/',
|
||||
`js/vendor/jquery-${pkg.devDependencies.jquery}.min.js`,
|
||||
`js/vendor/modernizr-${pkg.devDependencies.modernizr}.min.js`,
|
||||
|
||||
'LICENSE.txt',
|
||||
'robots.txt',
|
||||
'site.webmanifest',
|
||||
'tile-wide.png',
|
||||
'tile.png'
|
||||
|
||||
];
|
||||
|
||||
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
|
||||
|
||||
function checkFiles(directory, expectedFiles) {
|
||||
|
||||
// Get the list of files from the specified directory
|
||||
const files = glob.sync('**/*', {
|
||||
'cwd': directory,
|
||||
'dot': true, // include hidden files
|
||||
'mark': true // add a `/` character to directory matches
|
||||
});
|
||||
|
||||
// Check if all expected files are present in the
|
||||
// specified directory, and are of the expected type
|
||||
expectedFiles.forEach( (file) => {
|
||||
|
||||
let ok = false;
|
||||
const expectedFileType = (file.slice(-1) !== '/' ? 'regular file' : 'directory');
|
||||
|
||||
// If file exists
|
||||
if (files.indexOf(file) !== -1) {
|
||||
|
||||
// Check if the file is of the correct type
|
||||
if (file.slice(-1) !== '/') {
|
||||
// Check if the file is really a regular file
|
||||
ok = fs.statSync(path.resolve(directory, file)).isFile();
|
||||
} else {
|
||||
// Check if the file is a directory
|
||||
// (Since glob adds the `/` character to directory matches,
|
||||
// we can simply check if the `/` character is present)
|
||||
ok = (files[files.indexOf(file)].slice(-1) === '/');
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
it(`"${file}" should be present and it should be a ${expectedFileType}`, () =>{
|
||||
assert.equal(true, ok);
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
// List all files that should be NOT
|
||||
// be present in the specified directory
|
||||
(files.filter( (file) => {
|
||||
return expectedFiles.indexOf(file) === -1;
|
||||
})).forEach( (file) => {
|
||||
it(`"${file}" should NOT be present`, () => {
|
||||
assert(false);
|
||||
});
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
|
||||
|
||||
function runTests() {
|
||||
|
||||
describe('Test if all the expected files, and only them, are present in the build directories', () => {
|
||||
|
||||
describe(dirs.archive, () => {
|
||||
checkFiles(dirs.archive, expectedFilesInArchiveDir);
|
||||
});
|
||||
|
||||
describe(dirs.dist, () => {
|
||||
checkFiles(dirs.dist, expectedFilesInDistDir);
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
runTests();
|
||||