structrdfal 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- 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>
|