structrdfal 0.1.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +7 -0
- data/LICENSE.txt +21 -0
- data/README.md +133 -0
- data/_includes/blogList.html +82 -0
- data/_includes/blogList.html~1 +100 -0
- data/_includes/blogList.html~2 +85 -0
- data/_includes/catag-old.html +15 -0
- data/_includes/catag.html +16 -0
- data/_includes/footer.html +18 -0
- data/_includes/nav.html +14 -0
- data/_layouts/aboutPage.html +5 -0
- data/_layouts/autopage_category.html +11 -0
- data/_layouts/autopage_tags.html +12 -0
- data/_layouts/bloghome.html +10 -0
- data/_layouts/contactPage.html +5 -0
- data/_layouts/default.html +131 -0
- data/_layouts/event.html +145 -0
- data/_layouts/page.html +4 -0
- data/_layouts/post.html +34 -0
- data/_layouts/sitehome.html +62 -0
- data/_sass/_variables.scss +36 -0
- data/_sass/_vertical-rhythm.scss +61 -0
- data/assets/.colophon/html5-boilerplate_v7.0.1/404.html +60 -0
- data/assets/.colophon/html5-boilerplate_v7.0.1/LICENSE.txt +19 -0
- data/assets/.colophon/html5-boilerplate_v7.0.1/docs/TOC.md +34 -0
- data/assets/.colophon/html5-boilerplate_v7.0.1/docs/css.md +54 -0
- data/assets/.colophon/html5-boilerplate_v7.0.1/docs/extend.md +640 -0
- data/assets/.colophon/html5-boilerplate_v7.0.1/docs/faq.md +42 -0
- data/assets/.colophon/html5-boilerplate_v7.0.1/docs/html.md +198 -0
- data/assets/.colophon/html5-boilerplate_v7.0.1/docs/js.md +36 -0
- data/assets/.colophon/html5-boilerplate_v7.0.1/docs/misc.md +173 -0
- data/assets/.colophon/html5-boilerplate_v7.0.1/docs/usage.md +130 -0
- data/assets/.colophon/html5-boilerplate_v7.0.1/index.html +41 -0
- data/assets/.colophon/normalize-scss/README.md +158 -0
- data/assets/.editorconfig +13 -0
- data/assets/.htaccess +1224 -0
- data/assets/404.html +6 -0
- data/assets/browserconfig.xml +12 -0
- data/assets/contactform.html +23 -0
- data/assets/eventform.html +110 -0
- data/assets/favicon.ico +0 -0
- data/assets/humans.txt +16 -0
- data/assets/icon.png +0 -0
- data/assets/robots.txt +5 -0
- data/assets/scripts/.DS_Store +0 -0
- data/assets/scripts/main.js +0 -0
- data/assets/scripts/plugins.js +24 -0
- data/assets/scripts/vendor/jquery-3.3.1.min.js +2 -0
- data/assets/scripts/vendor/modernizr-3.6.0.min.js +3 -0
- data/assets/site.webmanifest +12 -0
- data/assets/styles/HTML5BP-main.css +290 -0
- data/assets/styles/form.css +81 -0
- data/assets/styles/normalize.css +349 -0
- data/assets/styles/structRDFaL.css +177 -0
- data/assets/tile-wide.png +0 -0
- data/assets/tile.png +0 -0
- metadata +156 -0
|
@@ -0,0 +1,198 @@
|
|
|
1
|
+
[HTML5 Boilerplate homepage](https://html5boilerplate.com/) | [Documentation
|
|
2
|
+
table of contents](TOC.md)
|
|
3
|
+
|
|
4
|
+
# The HTML
|
|
5
|
+
|
|
6
|
+
By default, HTML5 Boilerplate provides two `html` pages:
|
|
7
|
+
|
|
8
|
+
* [`index.html`](#indexhtml) - a default HTML skeleton that should form the
|
|
9
|
+
basis of all pages on your website
|
|
10
|
+
* `404.html` - a placeholder 404 error page
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
## `index.html`
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
### The `no-js` Class
|
|
17
|
+
|
|
18
|
+
The `no-js` class is provided in order to allow you to more easily and
|
|
19
|
+
explicitly add custom styles based on whether JavaScript is disabled
|
|
20
|
+
(`.no-js`) or enabled (`.js`). Using this technique also helps [avoid the
|
|
21
|
+
FOUC](https://www.paulirish.com/2009/avoiding-the-fouc-v3/).
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
## Language Attribute
|
|
25
|
+
|
|
26
|
+
Please consider specifying the language of your content by adding a [value](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry) to the `lang`
|
|
27
|
+
attribute in the `<html>` as in this example:
|
|
28
|
+
|
|
29
|
+
```html
|
|
30
|
+
<html class="no-js" lang="en">
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
### The order of the `<title>` and `<meta>` tags
|
|
34
|
+
|
|
35
|
+
The charset declaration (`<meta charset="utf-8">`) must be included completely
|
|
36
|
+
within the [first 1024 bytes of the document](https://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#charset)
|
|
37
|
+
and should be specified as early as possible (before any content that could
|
|
38
|
+
be controlled by an attacker, such as a `<title>` element) in order to avoid a
|
|
39
|
+
potential [encoding-related security issue](https://code.google.com/archive/p/doctype-mirror/wikis/ArticleUtf7.wiki)
|
|
40
|
+
in Internet Explorer
|
|
41
|
+
|
|
42
|
+
## Meta Description
|
|
43
|
+
|
|
44
|
+
The `description` meta tag provides a short description of the page.
|
|
45
|
+
In some situations this description is used as a part of the snippet
|
|
46
|
+
shown in the search results.
|
|
47
|
+
|
|
48
|
+
```html
|
|
49
|
+
<meta name="description" content="This is a description">
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
Google's [Create good meta descriptions](https://support.google.com/webmasters/answer/35624?hl=en#meta-descriptions)
|
|
53
|
+
documentation has useful tips on creating an effective description.
|
|
54
|
+
|
|
55
|
+
## Mobile Viewport
|
|
56
|
+
|
|
57
|
+
There are a few different options that you can use with the [`viewport` meta
|
|
58
|
+
tag](https://docs.google.com/present/view?id=dkx3qtm_22dxsrgcf4 "Viewport and
|
|
59
|
+
Media Queries - The Complete Idiot's Guide"). You can find out more in [the
|
|
60
|
+
MDN Web Docs](https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag).
|
|
61
|
+
HTML5 Boilerplate comes with a simple setup that strikes a good balance for general use cases.
|
|
62
|
+
|
|
63
|
+
```html
|
|
64
|
+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
If you want to take advantage of edge-to-edge displays of iPhone X/XS/XR you can do
|
|
68
|
+
so with additional viewport parameters. [Check the WebKit blog](https://webkit.org/blog/7929/designing-websites-for-iphone-x/)
|
|
69
|
+
for details.
|
|
70
|
+
|
|
71
|
+
## Web App Manifest
|
|
72
|
+
|
|
73
|
+
HTML5 Boilerplate includes a simple web app manifest file.
|
|
74
|
+
|
|
75
|
+
The web app manifest is a simple JSON file that allows you to control how your
|
|
76
|
+
app appears on a device's home screen, what it looks like when it launches
|
|
77
|
+
in that context and what happens when it is launched. This allows for much greater
|
|
78
|
+
control over the UI of a saved site or web app on a mobile device.
|
|
79
|
+
|
|
80
|
+
It's linked to from the HTML as follows:
|
|
81
|
+
|
|
82
|
+
```html
|
|
83
|
+
<link rel="manifest" href="site.webmanifest">
|
|
84
|
+
```
|
|
85
|
+
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.
|
|
86
|
+
You should fill this file out with [more information about your site or application](https://developer.mozilla.org/en-US/docs/Web/Manifest)
|
|
87
|
+
|
|
88
|
+
## Favicons and Touch Icon
|
|
89
|
+
|
|
90
|
+
The shortcut icons should be put in the root directory of your site. `favicon.ico`
|
|
91
|
+
is automatically picked up by browsers if it's placed in the root. HTML5
|
|
92
|
+
Boilerplate comes with a default set of icons (include favicon and one Apple
|
|
93
|
+
Touch Icon) that you can use as a baseline to create your own.
|
|
94
|
+
|
|
95
|
+
Please refer to the more detailed description in the [Extend section](extend.md)
|
|
96
|
+
of these docs.
|
|
97
|
+
|
|
98
|
+
## The Content Area
|
|
99
|
+
|
|
100
|
+
The central part of the boilerplate template is pretty much empty. This is
|
|
101
|
+
intentional, in order to make the boilerplate suitable for both web page and
|
|
102
|
+
web app development.
|
|
103
|
+
|
|
104
|
+
### Browser Upgrade Prompt
|
|
105
|
+
|
|
106
|
+
The main content area of the boilerplate includes a prompt to install an up to
|
|
107
|
+
date browser for users of IE 9 and lower. If you intended to support IE, then you
|
|
108
|
+
should edit or remove the snippet of code.
|
|
109
|
+
|
|
110
|
+
## Modernizr
|
|
111
|
+
|
|
112
|
+
HTML5 Boilerplate uses a custom build of Modernizr.
|
|
113
|
+
|
|
114
|
+
[Modernizr](https://modernizr.com/) is a JavaScript library which adds classes to
|
|
115
|
+
the `html` element based on the results of feature test and which ensures that
|
|
116
|
+
all browsers can make use of HTML5 elements (as it includes the HTML5 Shiv).
|
|
117
|
+
This allows you to target parts of your CSS and JavaScript based on the
|
|
118
|
+
features supported by a browser.
|
|
119
|
+
|
|
120
|
+
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
|
|
121
|
+
[Modernizr command line utility](https://www.npmjs.com/package/modernizr-cli).
|
|
122
|
+
|
|
123
|
+
## What About Polyfills?
|
|
124
|
+
|
|
125
|
+
If you need to include [polyfills](https://remysharp.com/2010/10/08/what-is-a-polyfill)
|
|
126
|
+
in your project, you must make sure those load before any other JavaScript. If you're
|
|
127
|
+
using a polyfill CDN service, like [cdn.polyfill.io](https://cdn.polyfill.io/),
|
|
128
|
+
just put it before the other scripts in the bottom of the page:
|
|
129
|
+
|
|
130
|
+
```html
|
|
131
|
+
<script src="js/vendor/modernizr-3.6.0.min.js"></script>
|
|
132
|
+
<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
|
|
133
|
+
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
|
|
134
|
+
<script>window.jQuery || document.write('<script src="js/vendor/jquery-3.3.1.min.js"><\/script>')</script>
|
|
135
|
+
<script src="js/plugins.js"></script>
|
|
136
|
+
<script src="js/main.js"></script>
|
|
137
|
+
</body>
|
|
138
|
+
```
|
|
139
|
+
|
|
140
|
+
If you like to just include the polyfills yourself, you could include them in
|
|
141
|
+
`js/plugins.js`. When you have a bunch of polyfills to load in, you could
|
|
142
|
+
also create a `polyfills.js` file in the `js/vendor` directory or include the files
|
|
143
|
+
individually and combine them using a build tool. Always ensure that the polyfills
|
|
144
|
+
are all loaded before any other JavaScript.
|
|
145
|
+
|
|
146
|
+
There are some misconceptions about Modernizr and polyfills. It's important
|
|
147
|
+
to understand that Modernizr just handles feature checking, not polyfilling
|
|
148
|
+
itself. The only thing Modernizr does regarding polyfills is that the team
|
|
149
|
+
maintains [a huge list of cross Browser polyfills](https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills).
|
|
150
|
+
|
|
151
|
+
### jQuery CDN for jQuery
|
|
152
|
+
|
|
153
|
+
The jQuery CDN version of the jQuery JavaScript library is referenced towards
|
|
154
|
+
the bottom of the page. A local fallback of jQuery is included for rare instances
|
|
155
|
+
when the CDN version might not be available, and to facilitate offline
|
|
156
|
+
development.
|
|
157
|
+
|
|
158
|
+
The jQuery CDN version was chosen over other potential candidates
|
|
159
|
+
([like Google's Hosted Libraries](https://developers.google.com/speed/libraries/))
|
|
160
|
+
because it's fast ([comparable or faster than Google by some
|
|
161
|
+
measures](https://www.cdnperf.com/#jsdelivr,cdnjs,google,yandex,microsoft,jquery,bootstrapcdn/https/90))
|
|
162
|
+
and, (unlike Google's CDN) is available to China's hundreds of millions of internet users.
|
|
163
|
+
For many years we [chose](https://github.com/h5bp/html5-boilerplate/issues/1191)
|
|
164
|
+
the Google Hosted version over the jQuery CDN because it was available
|
|
165
|
+
over HTTPS (the jQuery CDN was not,) and it offered a better chance of
|
|
166
|
+
hitting the cache lottery owing to the popularity of the Google CDN.
|
|
167
|
+
The first issue is no longer valid and the second is far outweighed by
|
|
168
|
+
being able to serve jQuery to Chinese users.
|
|
169
|
+
|
|
170
|
+
While the jQuery CDN is a strong default solution your site or application may
|
|
171
|
+
require a different configuration. Testing your site with services like
|
|
172
|
+
[WebPageTest](https://www.webpagetest.org/) and browser tools like
|
|
173
|
+
[PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/) will help you examine the real
|
|
174
|
+
world performance of your site and can show where you can optimize your specific
|
|
175
|
+
site or application.
|
|
176
|
+
|
|
177
|
+
### Google Universal Analytics Tracking Code
|
|
178
|
+
|
|
179
|
+
Finally, an optimized version of the Google Universal Analytics tracking code is
|
|
180
|
+
included. Google recommends that this script be placed at the top of the page.
|
|
181
|
+
Factors to consider: if you place this script at the top of the page, you’ll
|
|
182
|
+
be able to count users who don’t fully load the page, and you’ll incur the max
|
|
183
|
+
number of simultaneous connections of the browser.
|
|
184
|
+
|
|
185
|
+
Further information:
|
|
186
|
+
|
|
187
|
+
* [Optimizing the Google Universal Analytics
|
|
188
|
+
Snippet](https://mathiasbynens.be/notes/async-analytics-snippet#universal-analytics)
|
|
189
|
+
* [Introduction to
|
|
190
|
+
Analytics.js](https://developers.google.com/analytics/devguides/collection/analyticsjs/)
|
|
191
|
+
* [Google Analytics Demos & Tools](https://ga-dev-tools.appspot.com/)
|
|
192
|
+
|
|
193
|
+
**N.B.** The Google Universal Analytics snippet is included by default mainly
|
|
194
|
+
because Google Analytics is [currently one of the most popular tracking
|
|
195
|
+
solutions](https://trends.builtwith.com/analytics/Google-Analytics) out there.
|
|
196
|
+
However, its usage isn't set in stone, and you SHOULD consider exploring the
|
|
197
|
+
[alternatives](https://en.wikipedia.org/wiki/List_of_web_analytics_software)
|
|
198
|
+
and use whatever suits your needs best!
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
[HTML5 Boilerplate homepage](https://html5boilerplate.com/) | [Documentation
|
|
2
|
+
table of contents](TOC.md)
|
|
3
|
+
|
|
4
|
+
# The JavaScript
|
|
5
|
+
|
|
6
|
+
Information about the default JavaScript included in the project.
|
|
7
|
+
|
|
8
|
+
## main.js
|
|
9
|
+
|
|
10
|
+
This file can be used to contain or reference your site/app JavaScript code.
|
|
11
|
+
If you're working on something more advanced you might replace this file
|
|
12
|
+
entirely. That's cool.
|
|
13
|
+
|
|
14
|
+
## plugins.js
|
|
15
|
+
|
|
16
|
+
This file can be used to contain all your plugins, such as jQuery plugins and
|
|
17
|
+
other 3rd party scripts for a simple site.
|
|
18
|
+
|
|
19
|
+
One approach is to put jQuery plugins inside of a `(function($){ ...
|
|
20
|
+
})(jQuery);` closure to make sure they're in the jQuery namespace safety
|
|
21
|
+
blanket. Read more about [jQuery plugin
|
|
22
|
+
authoring](https://learn.jquery.com/plugins/#Getting_Started).
|
|
23
|
+
|
|
24
|
+
By default the `plugins.js` file contains a small script to avoid `console`
|
|
25
|
+
errors in browsers that lack a `console`. The script will make sure that, if
|
|
26
|
+
a console method isn't available, that method will have the value of empty
|
|
27
|
+
function, thus, preventing the browser from throwing an error.
|
|
28
|
+
|
|
29
|
+
## vendor
|
|
30
|
+
|
|
31
|
+
This directory can be used to contain all 3rd party library code.
|
|
32
|
+
|
|
33
|
+
Minified versions of the latest jQuery and Modernizr libraries are included by
|
|
34
|
+
default. You may wish to create your own [custom Modernizr
|
|
35
|
+
build with the online builder](https://www.modernizr.com/download/) or [command
|
|
36
|
+
line tool](https://modernizr.com/docs#command-line-config).
|
|
@@ -0,0 +1,173 @@
|
|
|
1
|
+
[HTML5 Boilerplate homepage](https://html5boilerplate.com/) | [Documentation
|
|
2
|
+
table of contents](TOC.md)
|
|
3
|
+
|
|
4
|
+
# Miscellaneous
|
|
5
|
+
|
|
6
|
+
* [.gitignore](#gitignore)
|
|
7
|
+
* [.editorconfig](#editorconfig)
|
|
8
|
+
* [Server Configuration](#server-configuration)
|
|
9
|
+
* [robots.txt](#robotstxt)
|
|
10
|
+
* [humans.txt](#humanstxt)
|
|
11
|
+
* [browserconfig.xml](#browserconfigxml)
|
|
12
|
+
|
|
13
|
+
--
|
|
14
|
+
|
|
15
|
+
## .gitignore
|
|
16
|
+
|
|
17
|
+
HTML5 Boilerplate includes a basic project-level `.gitignore`. This should
|
|
18
|
+
primarily be used to avoid certain project-level files and directories from
|
|
19
|
+
being kept under source control. Different development-environments will
|
|
20
|
+
benefit from different collections of ignores.
|
|
21
|
+
|
|
22
|
+
OS-specific and editor-specific files should be ignored using a "global
|
|
23
|
+
ignore" that applies to all repositories on your system.
|
|
24
|
+
|
|
25
|
+
For example, add the following to your `~/.gitconfig`, where the `.gitignore`
|
|
26
|
+
in your HOME directory contains the files and directories you'd like to
|
|
27
|
+
globally ignore:
|
|
28
|
+
|
|
29
|
+
```gitignore
|
|
30
|
+
[core]
|
|
31
|
+
excludesfile = ~/.gitignore
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
* More on global ignores: https://help.github.com/articles/ignoring-files/
|
|
35
|
+
* Comprehensive set of ignores on GitHub: https://github.com/github/gitignore
|
|
36
|
+
|
|
37
|
+
|
|
38
|
+
## .editorconfig
|
|
39
|
+
|
|
40
|
+
The `.editorconfig` file is provided in order to encourage and help you and
|
|
41
|
+
your team define and maintain consistent coding styles between different
|
|
42
|
+
editors and IDEs.
|
|
43
|
+
|
|
44
|
+
By default, `.editorconfig` includes some basic
|
|
45
|
+
[properties](https://editorconfig.org/#supported-properties) that reflect the
|
|
46
|
+
coding styles from the files provided by default, but you can easily change
|
|
47
|
+
them to better suit your needs.
|
|
48
|
+
|
|
49
|
+
In order for your editor/IDE to apply the
|
|
50
|
+
[properties](https://editorconfig.org/#supported-properties) from the
|
|
51
|
+
`.editorconfig` file, you may need to [install a
|
|
52
|
+
plugin]( https://editorconfig.org/#download).
|
|
53
|
+
|
|
54
|
+
__N.B.__ If you aren't using the server configurations provided by HTML5
|
|
55
|
+
Boilerplate, we highly encourage you to configure your server to block
|
|
56
|
+
access to `.editorconfig` files, as they can disclose sensitive information!
|
|
57
|
+
|
|
58
|
+
For more details, please refer to the [EditorConfig
|
|
59
|
+
project](https://editorconfig.org/).
|
|
60
|
+
|
|
61
|
+
|
|
62
|
+
## Server Configuration
|
|
63
|
+
|
|
64
|
+
H5BP includes a [`.htaccess`](#htaccess) file for the [Apache HTTP
|
|
65
|
+
server](https://httpd.apache.org/docs/). If you are not using Apache
|
|
66
|
+
as your web server, then you are encouraged to download a
|
|
67
|
+
[server configuration](https://github.com/h5bp/server-configs) that
|
|
68
|
+
corresponds to your web server and environment.
|
|
69
|
+
|
|
70
|
+
A `.htaccess` (hypertext access) file is an [Apache HTTP server
|
|
71
|
+
configuration file](https://github.com/h5bp/server-configs-apache).
|
|
72
|
+
The `.htaccess` file is mostly used for:
|
|
73
|
+
|
|
74
|
+
* Rewriting URLs
|
|
75
|
+
* Controlling cache
|
|
76
|
+
* Authentication
|
|
77
|
+
* Server-side includes
|
|
78
|
+
* Redirects
|
|
79
|
+
* Gzipping
|
|
80
|
+
|
|
81
|
+
If you have access to the main server configuration file (usually called
|
|
82
|
+
`httpd.conf`), you should add the logic from the `.htaccess` file in, for
|
|
83
|
+
example, a <Directory> section in the main configuration file. This is usually
|
|
84
|
+
the recommended way, as using .htaccess files slows down Apache!
|
|
85
|
+
|
|
86
|
+
To enable Apache modules locally, please see:
|
|
87
|
+
https://github.com/h5bp/server-configs-apache/wiki/How-to-enable-Apache-modules.
|
|
88
|
+
|
|
89
|
+
In the repo the `.htaccess` is used for:
|
|
90
|
+
|
|
91
|
+
* Allowing cross-origin access to web fonts
|
|
92
|
+
* CORS header for images when browsers request it
|
|
93
|
+
* Enable `404.html` as 404 error document
|
|
94
|
+
* Making the website experience better for IE users better
|
|
95
|
+
* Media UTF-8 as character encoding for `text/html` and `text/plain`
|
|
96
|
+
* Enabling the rewrite URLs engine
|
|
97
|
+
* Forcing or removing the `www.` at the begin of a URL
|
|
98
|
+
* It blocks access to directories without a default document
|
|
99
|
+
* It blocks access to files that can expose sensitive information.
|
|
100
|
+
* It reduces MIME type security risks
|
|
101
|
+
* It forces compressing (gzipping)
|
|
102
|
+
* It tells the browser whether they should request a specific file from the
|
|
103
|
+
server or whether they should grab it from the browser's cache
|
|
104
|
+
|
|
105
|
+
When using `.htaccess` we recommend reading all inline comments (the rules after
|
|
106
|
+
a `#`) in the file once. There is a bunch of optional stuff in it.
|
|
107
|
+
|
|
108
|
+
If you want to know more about the `.htaccess` file check out the
|
|
109
|
+
[Apache HTTP server docs](https://httpd.apache.org/docs/) or more
|
|
110
|
+
specifically the [htaccess
|
|
111
|
+
section](https://httpd.apache.org/docs/current/howto/htaccess.html).
|
|
112
|
+
|
|
113
|
+
Notice that the original repo for the `.htaccess` file is [this
|
|
114
|
+
one](https://github.com/h5bp/server-configs-apache).
|
|
115
|
+
|
|
116
|
+
|
|
117
|
+
## robots.txt
|
|
118
|
+
|
|
119
|
+
The `robots.txt` file is used to give instructions to web robots on what can
|
|
120
|
+
be crawled from the website.
|
|
121
|
+
|
|
122
|
+
By default, the file provided by this project includes the next two lines:
|
|
123
|
+
|
|
124
|
+
* `User-agent: *` - the following rules apply to all web robots
|
|
125
|
+
* `Disallow:` - everything on the website is allowed to be crawled
|
|
126
|
+
|
|
127
|
+
If you want to disallow certain pages you will need to specify the path in a
|
|
128
|
+
`Disallow` directive (e.g.: `Disallow: /path`) or, if you want to disallow
|
|
129
|
+
crawling of all content, use `Disallow: /`.
|
|
130
|
+
|
|
131
|
+
The `/robots.txt` file is not intended for access control, so don't try to
|
|
132
|
+
use it as such. Think of it as a "No Entry" sign, rather than a locked door.
|
|
133
|
+
URLs disallowed by the `robots.txt` file might still be indexed without being
|
|
134
|
+
crawled, and the content from within the `robots.txt` file can be viewed by
|
|
135
|
+
anyone, potentially disclosing the location of your private content! So, if
|
|
136
|
+
you want to block access to private content, use proper authentication instead.
|
|
137
|
+
|
|
138
|
+
For more information about `robots.txt`, please see:
|
|
139
|
+
|
|
140
|
+
* [robotstxt.org](http://www.robotstxt.org/)
|
|
141
|
+
* [How Google handles the `robots.txt` file](https://developers.google.com/webmasters/control-crawl-index/docs/robots_txt)
|
|
142
|
+
|
|
143
|
+
## humans.txt
|
|
144
|
+
|
|
145
|
+
The `humans.txt` file is used to provide information about people involved with
|
|
146
|
+
the website.
|
|
147
|
+
|
|
148
|
+
The provided file contains three sections:
|
|
149
|
+
|
|
150
|
+
* `TEAM` - this is intended to list the group of people responsible for the website
|
|
151
|
+
* `THANKS` - this is intended to list the group of people that have contributed
|
|
152
|
+
to the website
|
|
153
|
+
* `TECHNOLOGY COLOPHON` - the section lists technologies used to make the website
|
|
154
|
+
|
|
155
|
+
For more information about `humans.txt`, please see: http://humanstxt.org/
|
|
156
|
+
|
|
157
|
+
|
|
158
|
+
## browserconfig.xml
|
|
159
|
+
|
|
160
|
+
The `browserconfig.xml` file is used to customize the tile displayed when users
|
|
161
|
+
pin your site to the Windows 8.1 start screen. In there you can define custom
|
|
162
|
+
tile colors, custom images or even [live tiles](https://msdn.microsoft.com/library/dn455106.aspx#CreatingLiveTiles).
|
|
163
|
+
|
|
164
|
+
By default, the file points to 2 placeholder tile images:
|
|
165
|
+
|
|
166
|
+
* `tile.png` (558x558px): used for `Small`, `Medium` and `Large` tiles.
|
|
167
|
+
This image resizes automatically when necessary.
|
|
168
|
+
* `tile-wide.png` (558x270px): user for `Wide` tiles.
|
|
169
|
+
|
|
170
|
+
Notice that IE11 uses the same images when adding a site to the `favorites`.
|
|
171
|
+
|
|
172
|
+
For more in-depth information about the `browserconfig.xml` file, please
|
|
173
|
+
see [MSDN](https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/platform-apis/dn320426(v=vs.85)).
|
|
@@ -0,0 +1,130 @@
|
|
|
1
|
+
[HTML5 Boilerplate homepage](https://html5boilerplate.com/) | [Documentation
|
|
2
|
+
table of contents](TOC.md)
|
|
3
|
+
|
|
4
|
+
# Usage
|
|
5
|
+
|
|
6
|
+
The most basic usage of HTML5 Boilerplate is to create a static site or simple
|
|
7
|
+
app. Once you've downloaded or cloned the project, that process looks something
|
|
8
|
+
like this:
|
|
9
|
+
|
|
10
|
+
1. Set up the basic structure of the site.
|
|
11
|
+
2. Add some content, style, and functionality.
|
|
12
|
+
3. Run your site locally to see how it looks.
|
|
13
|
+
4. Deploy your site.
|
|
14
|
+
|
|
15
|
+
Cool, right? _It is_. That said, the smart defaults, baseline elements, default
|
|
16
|
+
attribute values and various other utilities that HTML5 Boilerplate offers can
|
|
17
|
+
serve as the foundation for whatever you're interested in building.
|
|
18
|
+
|
|
19
|
+
Even the basic use-case of a simple static site can be enhanced by manipulating
|
|
20
|
+
the code through an automated build process. Moving up in complexity HTML5
|
|
21
|
+
Boilerplate can be integrated with whatever front-end framework, CMS or
|
|
22
|
+
e-commerce platform you're working with. Mix-and-match to your heart's content.
|
|
23
|
+
Use what you need (toss it in a blender if you need to) and discard the rest.
|
|
24
|
+
HTML5 Boilerplate is a starting point, not a destination.
|
|
25
|
+
|
|
26
|
+
## Basic structure
|
|
27
|
+
|
|
28
|
+
A basic HTML5 Boilerplate site initially looks something like this:
|
|
29
|
+
|
|
30
|
+
```
|
|
31
|
+
.
|
|
32
|
+
├── css
|
|
33
|
+
│ ├── main.css
|
|
34
|
+
│ └── normalize.css
|
|
35
|
+
├── doc
|
|
36
|
+
├── img
|
|
37
|
+
├── js
|
|
38
|
+
│ ├── main.js
|
|
39
|
+
│ ├── plugins.js
|
|
40
|
+
│ └── vendor
|
|
41
|
+
│ ├── jquery.min.js
|
|
42
|
+
│ └── modernizr.min.js
|
|
43
|
+
├── .editorconfig
|
|
44
|
+
├── .htaccess
|
|
45
|
+
├── 404.html
|
|
46
|
+
├── browserconfig.xml
|
|
47
|
+
├── favicon.ico
|
|
48
|
+
├── humans.txt
|
|
49
|
+
├── icon.png
|
|
50
|
+
├── index.html
|
|
51
|
+
├── robots.txt
|
|
52
|
+
├── site.webmanifest
|
|
53
|
+
├── tile.png
|
|
54
|
+
└── tile-wide.png
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
What follows is a general overview of each major part and how to use them.
|
|
58
|
+
|
|
59
|
+
### css
|
|
60
|
+
|
|
61
|
+
This directory should contain all your project's CSS files. It includes some
|
|
62
|
+
initial CSS to help get you started from a solid foundation. [About the
|
|
63
|
+
CSS](css.md).
|
|
64
|
+
|
|
65
|
+
### doc
|
|
66
|
+
|
|
67
|
+
This directory contains all the HTML5 Boilerplate documentation. You can use it
|
|
68
|
+
as the location and basis for your own project's documentation.
|
|
69
|
+
|
|
70
|
+
### js
|
|
71
|
+
|
|
72
|
+
This directory should contain all your project's JS files. Libraries, plugins,
|
|
73
|
+
and custom code can all be included here. It includes some initial JS to help
|
|
74
|
+
get you started. [About the JavaScript](js.md).
|
|
75
|
+
|
|
76
|
+
### .htaccess
|
|
77
|
+
|
|
78
|
+
The default web server configs are for Apache. For more information, please
|
|
79
|
+
refer to the [Apache Server Configs
|
|
80
|
+
repository](https://github.com/h5bp/server-configs-apache).
|
|
81
|
+
|
|
82
|
+
Host your site on a server other than Apache? You're likely to find the
|
|
83
|
+
corresponding server configs project listed in our [Server Configs
|
|
84
|
+
](https://github.com/h5bp/server-configs/blob/master/README.md) repository.
|
|
85
|
+
|
|
86
|
+
### 404.html
|
|
87
|
+
|
|
88
|
+
A helpful custom 404 to get you started.
|
|
89
|
+
|
|
90
|
+
### browserconfig.xml
|
|
91
|
+
|
|
92
|
+
This file contains all settings regarding custom tiles for IE11 and Edge.
|
|
93
|
+
|
|
94
|
+
For more info on this topic, please refer to
|
|
95
|
+
[Microsoft's Docs](https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/platform-apis/dn320426(v=vs.85)).
|
|
96
|
+
|
|
97
|
+
### .editorconfig
|
|
98
|
+
|
|
99
|
+
The `.editorconfig` file is provided in order to encourage and help you and
|
|
100
|
+
your team to maintain consistent coding styles between different
|
|
101
|
+
editors and IDEs. [Read more about the `.editorconfig` file](misc.md#editorconfig).
|
|
102
|
+
|
|
103
|
+
### index.html
|
|
104
|
+
|
|
105
|
+
This is the default HTML skeleton that should form the basis of all pages on
|
|
106
|
+
your site. If you are using a server-side templating framework, then you will
|
|
107
|
+
need to integrate this starting HTML with your setup.
|
|
108
|
+
|
|
109
|
+
Make sure that you update the URLs for the referenced CSS and JavaScript if you
|
|
110
|
+
modify the directory structure at all.
|
|
111
|
+
|
|
112
|
+
If you are using Google Universal Analytics, make sure that you edit the
|
|
113
|
+
corresponding snippet at the bottom to include your analytics ID.
|
|
114
|
+
|
|
115
|
+
### humans.txt
|
|
116
|
+
|
|
117
|
+
Edit this file to include the team that worked on your site/app, and the
|
|
118
|
+
technology powering it.
|
|
119
|
+
|
|
120
|
+
### robots.txt
|
|
121
|
+
|
|
122
|
+
Edit this file to include any pages you need hidden from search engines.
|
|
123
|
+
|
|
124
|
+
### Icons
|
|
125
|
+
|
|
126
|
+
Replace the default `favicon.ico`, `tile.png`, `tile-wide.png` and Apple
|
|
127
|
+
Touch Icon with your own.
|
|
128
|
+
|
|
129
|
+
If you want to use different Apple Touch Icons for different resolutions please
|
|
130
|
+
refer to the [according documentation](extend.md#apple-touch-icons).
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html class="no-js" lang="en">
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="utf-8">
|
|
6
|
+
<title></title>
|
|
7
|
+
<meta name="description" content="">
|
|
8
|
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
9
|
+
|
|
10
|
+
<link rel="manifest" href="site.webmanifest">
|
|
11
|
+
<link rel="apple-touch-icon" href="icon.png">
|
|
12
|
+
<!-- Place favicon.ico in the root directory -->
|
|
13
|
+
|
|
14
|
+
<link rel="stylesheet" href="css/normalize.css">
|
|
15
|
+
<link rel="stylesheet" href="css/main.css">
|
|
16
|
+
|
|
17
|
+
<meta name="theme-color" content="#fafafa">
|
|
18
|
+
</head>
|
|
19
|
+
|
|
20
|
+
<body>
|
|
21
|
+
<!--[if lte IE 9]>
|
|
22
|
+
<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>
|
|
23
|
+
<![endif]-->
|
|
24
|
+
|
|
25
|
+
<!-- Add your site or application content here -->
|
|
26
|
+
<p>Hello world! This is HTML5 Boilerplate.</p>
|
|
27
|
+
<script src="js/vendor/modernizr-3.6.0.min.js"></script>
|
|
28
|
+
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
|
|
29
|
+
<script>window.jQuery || document.write('<script src="js/vendor/jquery-3.3.1.min.js"><\/script>')</script>
|
|
30
|
+
<script src="js/plugins.js"></script>
|
|
31
|
+
<script src="js/main.js"></script>
|
|
32
|
+
|
|
33
|
+
<!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
|
|
34
|
+
<script>
|
|
35
|
+
window.ga = function () { ga.q.push(arguments) }; ga.q = []; ga.l = +new Date;
|
|
36
|
+
ga('create', 'UA-XXXXX-Y', 'auto'); ga('send', 'pageview')
|
|
37
|
+
</script>
|
|
38
|
+
<script src="https://www.google-analytics.com/analytics.js" async defer></script>
|
|
39
|
+
</body>
|
|
40
|
+
|
|
41
|
+
</html>
|