Skip to content

Commit ce8364f

Browse files
jgthmsjgthms
committed
Init
0 parents  commit ce8364f

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

48 files changed

+3102
-0
lines changed

‎.gitignore

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
# Files
2+
3+
.config.local.yml
4+
.DS_Store
5+
.jekyll-metadata
6+
.ruby-version
7+
npm-debug.log
8+
test.sass
9+
10+
# Folders
11+
12+
.idea/
13+
.sass-cache
14+
_gh_pages
15+
_site
16+
images/trash
17+
node_modules

‎CNAME

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
htmlreference.io

‎LICENSE

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
The MIT License (MIT)
2+
3+
Copyright (c) 2016 Jeremy Thomas
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in
13+
all copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21+
THE SOFTWARE.

‎README.md

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
# [HTML Reference](http://htmlreference.io): a free visual guide to the most popular CSS properties
2+
3+
[![HTML Reference screenshot](https://raw.github.com/jgthms/html-reference/master/images/html-reference-share.png)](http://htmlreference.io)
4+
5+
# License
6+
7+
The content of this project itself is licensed under the [Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License](http://creativecommons.org/licenses/by-nc-sa/4.0/).
8+
9+
The underlying source code used to format and display that content is licensed under the [MIT license](http://opensource.org/licenses/mit-license.php).

‎_config.local.yml

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
title: HTML Reference
2+
description: A free guide to all HTML elements and attributes.
3+
share: "HTML Reference: a free guide to all HTML elements and attributes."
4+
url: http://localhost:4000
5+
markdown: kramdown
6+
permalink: pretty
7+
exclude: ['node_modules']

‎_config.yml

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
title: HTML Reference
2+
description: A free guide to all HTML elements and attributes.
3+
share: "HTML Reference: a free guide to all HTML elements and attributes."
4+
url: http://htmlreference.io
5+
markdown: kramdown
6+
permalink: pretty
7+
exclude: ['node_modules']

‎_includes/favicons.html

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<link rel="apple-touch-icon" sizes="180x180" href="{{site.url}}/favicons/apple-touch-icon.png?v=201611221819">
2+
<link rel="icon" type="image/png" href="{{site.url}}/favicons/favicon-32x32.png?v=201611221819" sizes="32x32">
3+
<link rel="icon" type="image/png" href="{{site.url}}/favicons/favicon-16x16.png?v=201611221819" sizes="16x16">
4+
<link rel="manifest" href="{{site.url}}/favicons/manifest.json?v=201611221819">
5+
<link rel="mask-icon" href="{{site.url}}/favicons/safari-pinned-tab.svg?v=201611221819" color="#05ffb0">
6+
<link rel="shortcut icon" href="{{site.url}}/favicons/favicon.ico?v=201611221819">
7+
<meta name="msapplication-config" content="{{site.url}}/favicons/browserconfig.xml?v=201611221819">
8+
<meta name="theme-color" content="#05ffb0">

‎_includes/google-fonts.html

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<script async type="text/javascript">
2+
WebFontConfig = {
3+
google: { families: [ 'Source+Sans+Pro:400,700,400italic,700italic:latin', 'Source+Code+Pro::latin' ] }
4+
};
5+
(function() {
6+
var wf = document.createElement('script');
7+
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
8+
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
9+
wf.type = 'text/javascript';
10+
wf.async = 'true';
11+
var s = document.getElementsByTagName('script')[0];
12+
s.parentNode.insertBefore(wf, s);
13+
})();
14+
</script>

‎_includes/lists/main-list.html

+120
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
<section id="input" class="element">
2+
<header class="element-header">
3+
<h2 class="element-name">
4+
<a href="/#input">
5+
<span>#</span>
6+
input
7+
</a>
8+
</h2>
9+
<div class="element-description">
10+
The HTML element &lt;input&gt; is used to create interactive controls for web-based forms in order to accept data from the user. How an &lt;input&gt; works varies considerably depending on the value of its type attribute.
11+
</div>
12+
</header>
13+
14+
<article class="attribute attribute--required">
15+
<div class="attribute-header">
16+
<h3 class="attribute-name">
17+
<span class="tag">type</span>
18+
</h3>
19+
<div class="attribute-description">
20+
<p>Defines the type of form input.</p>
21+
<strong class="attribute-is-required">Required.</strong>
22+
</div>
23+
</div>
24+
<div class="attribute-values">
25+
<article class="value">
26+
<header class="value-header">
27+
<h4 class="value-name">
28+
<span class="tag">"text"</span>
29+
</h4>
30+
<div class="value-description">
31+
<p>Simple single line text input that accepts any type of character.</p>
32+
</div>
33+
</header>
34+
<aside class="value-preview">
35+
<div class="value-output"><input type="text"></div>
36+
</aside>
37+
</article>
38+
<article class="value">
39+
<header class="value-header">
40+
<h4 class="value-name">
41+
<span class="tag">"checkbox"</span>
42+
</h4>
43+
<div class="value-description">
44+
<p>A toggle checkbox that can only return one of two values: checked or unchecked.</p>
45+
</div>
46+
</header>
47+
<aside class="value-preview">
48+
<div class="value-output"><input type="checkbox"></div>
49+
</aside>
50+
</article>
51+
<article class="value">
52+
<header class="value-header">
53+
<h4 class="value-name">
54+
<span class="tag">"radio"</span>
55+
</h4>
56+
<div class="value-description">
57+
<p>Needs to be used used in combination with other radio buttons, so that they are mutually exclusive.</p>
58+
</div>
59+
</header>
60+
<aside class="value-preview">
61+
<div class="value-output"><input type="radio"></div>
62+
</aside>
63+
</article>
64+
<div class="value value--example">
65+
<header class="value-header">
66+
<div class="value-description">
67+
<p>You link radio buttons through a similar <strong>name</strong> attribute:</p>
68+
<pre class="value-code">&lt;label&gt;
69+
&lt;input type=&quot;radio&quot; name=&quot;newsletter&quot; value=&quot;yes&quot;&gt;
70+
Yes
71+
&lt;/label&gt;
72+
&lt;label&gt;
73+
&lt;input type=&quot;radio&quot; name=&quot;newsletter&quot; value=&quot;no&quot;&gt;
74+
No
75+
&lt;/label&gt;</pre>
76+
<p>Notice how clicking one deselects the other.</p>
77+
</div>
78+
</header>
79+
<aside class="value-preview">
80+
<div class="value-output">
81+
<label>
82+
<input type="radio" name="newsletter" value="yes">
83+
Yes
84+
</label>
85+
<label>
86+
<input type="radio" name="newsletter" value="no">
87+
No
88+
</label>
89+
</div>
90+
</aside>
91+
</div>
92+
</div>
93+
</article>
94+
95+
<article class="attribute">
96+
<div class="attribute-header">
97+
<h3 class="attribute-name">
98+
<span class="tag">placeholder</span>
99+
</h3>
100+
<div class="attribute-description">
101+
<p>Define a non-selectable placeholder text that only appears when the input is empty.</p>
102+
</div>
103+
</div>
104+
<div class="attribute-values">
105+
<article class="value">
106+
<header class="value-header">
107+
<h4 class="value-name">
108+
<span class="tag">"e.g. [email protected]"</span>
109+
</h4>
110+
<div class="value-description">
111+
<p>Simple single line text input that accepts any type of character.</p>
112+
</div>
113+
</header>
114+
<aside class="value-preview">
115+
<div class="value-output"><input type="text"></div>
116+
</aside>
117+
</article>
118+
</div>
119+
</article>
120+
</section>

‎_includes/lists/menu-list.html

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<li><a href="{{site.url}}/#input" data-property-name="input">input</a></li>

‎_includes/menu.html

+116
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
<script type="text/javascript">
2+
window.carbonLoaded = false;
3+
4+
window.helloCarbon = function() {
5+
window.carbonLoaded = true;
6+
}
7+
8+
document.addEventListener('DOMContentLoaded', function() {
9+
var $menuHello = document.getElementById('menuHello');
10+
var $huggingFace = document.getElementById('huggingFace');
11+
var $carbon = document.getElementById('carbon');
12+
13+
setTimeout(function() {
14+
if (window.carbonLoaded) {
15+
$menuHello.style.minHeight = '218px';
16+
$huggingFace.style.display = 'none';
17+
$carbon.style.display = 'block';
18+
} else {
19+
$menuHello.style.minHeight = '0';
20+
$huggingFace.style.display = 'block';
21+
$carbon.style.display = 'none';
22+
}
23+
}, 5000);
24+
});
25+
</script>
26+
27+
<aside class="menu">
28+
<header class="menu-header">
29+
<a id="logo" class="menu-logo" href="{{site.url}}">
30+
<figure>
31+
<img class="menu-logo-icon" src="{{site.url}}/images/html-reference-icon.png" alt="HTML Reference icon">
32+
<img class="menu-logo-type" src="{{site.url}}/images/html-reference-type.png" alt="HTML Reference type">
33+
</figure>
34+
</a>
35+
</header>
36+
<nav class="menu-collections">
37+
<p><strong>HTML Elements</strong></p>
38+
<ul>
39+
<li><a class="menu-collection-link{% if page.route == 'index' %} menu-collection-link--active{% endif %}" href="{{site.url}}">All</a></li>
40+
<li><a class="menu-collection-link{% if page.collection_name == 'Form' %} menu-collection-link--active{% endif %}" href="{{site.url}}/html-elements/form/">Form</a></li>
41+
</ul>
42+
<p><strong>HTML Templates</strong></p>
43+
<ul>
44+
<li><a class="menu-collection-link{% if page.collection_name == 'Content' %} menu-collection-link--active{% endif %}" href="{{site.url}}/html-templates/content/">Content</a></li>
45+
<li><a class="menu-collection-link{% if page.collection_name == 'Forms' %} menu-collection-link--active{% endif %}" href="{{site.url}}/html-templates/forms/">Forms</a></li>
46+
<li><a class="menu-collection-link{% if page.collection_name == 'Tables' %} menu-collection-link--active{% endif %}" href="{{site.url}}/html-templates/table/">Tables</a></li>
47+
</ul>
48+
<p><strong><a class="menu-collection-link" href="{{site.url}}/html-global-attributes/">Global attributes</a></strong></p>
49+
</nav>
50+
<nav id="menu-nav" class="menu-nav">
51+
<div class="menu-search">
52+
<input id="menu-search-input" type="search" autocomplete="off" placeholder="Search for a property">
53+
<i class="icon is-search"></i>
54+
</div>
55+
<div id="menu-list" class="menu-list">
56+
<ul id="menu-list-ul" class="menu-list-ul">
57+
{% include lists/menu-list.html %}
58+
</ul>
59+
<i id="menu-shadow-top" class="menu-list-shadow is-top"></i>
60+
<i id="menu-shadow-bottom" class="menu-list-shadow is-bottom"></i>
61+
</div>
62+
<a id="menu-nav-close" class="menu-close">
63+
<i class="icon is-close"></i>
64+
<strong>Close</strong>
65+
</a>
66+
</nav>
67+
<footer id="menuHello" class="menu-hello">
68+
<div id="huggingFace">
69+
<p>
70+
HTML Reference is <strong>free</strong> and <br>
71+
always will be!
72+
</p>
73+
<p>
74+
Please whitelist us in <br>
75+
your ad blocker.
76+
</p>
77+
<p>
78+
Thank you! <img src="{{site.url}}/images/hugging-face.png" alt="Hugging face emoji">
79+
</p>
80+
</div>
81+
<div id="carbon">
82+
<!-- <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=htmlreferenceio" id="_carbonads_js" onload ="window.helloCarbon()"></script> -->
83+
</div>
84+
</footer>
85+
</aside>
86+
87+
<footer class="footer">
88+
<p class="footer-title">
89+
<strong>{{site.description}}</strong> <small>Created by <a href="https://twitter.com/jgthms">@jgthms</a></small>
90+
</p>
91+
<div class="footer-facebook">
92+
<iframe src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fhtmlreference%2F&width=100&layout=button_count&action=like&size=small&show_faces=false&share=false&height=20&appId=1212191075486670" width="100" height="20" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
93+
</div>
94+
<div class="footer-github">
95+
<iframe src="https://ghbtns.com/github-btn.html?user=jgthms&repo=html-reference&type=star&count=true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
96+
</div>
97+
<p class="footer-share footer-share--social">
98+
<strong class="footer-share-label">Share</strong>
99+
<a class="footer-share-button is-twitter"
100+
data-social-network="Twitter"
101+
data-social-action="tweet"
102+
data-social-target="{{site.url}}{{page.url}}"
103+
href="https://twitter.com/intent/tweet?url={{site.url | url_encode}}&text={{site.share | url_encode}}"
104+
rel="external nofollow"
105+
target="_blank">
106+
{% include svg/twitter.html %}
107+
</a>
108+
<a class="footer-share-button is-facebook"
109+
href="http://www.facebook.com/sharer.php?u={{site.url | url_encode}}"
110+
rel="external nofollow"
111+
target="_blank">
112+
{% include svg/facebook.html %}
113+
</a>
114+
<a id="menu-nav-open" class="footer-share-nav">Menu</a>
115+
</p>
116+
</footer>

‎_includes/modals/share.html

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<div id="modal-share" class="modal">
2+
<div class="modal-box">
3+
<p class="modal-title">Share this CSS property</p>
4+
<p class="modal-url">
5+
<input id="modal-input" class="input" type="text" value="{{site.url}}/" readonly>
6+
<button id="modal-copy" class="button is-primary" data-clipboard-target="#modal-input">Copy</button>
7+
</p>
8+
<p class="modal-social">
9+
<a id="modal-twitter" class="button is-twitter" href="https://twitter.com/intent/tweet?url=http%3A%2F%2Fhtmlreference.io&text=CSS%20Reference%3A%20a%20visual%20guide%20to%20the%20most%20popular%20%23CSS%20properties">Share on Twitter</a>
10+
<a id="modal-facebook" class="button is-facebook" href="https://www.facebook.com/sharer.php?u=http%3A%2F%2Fhtmlreference.io">Share on Facebook</a>
11+
</p>
12+
<a id="modal-close" class="modal-close"></a>
13+
</div>
14+
</div>

‎_includes/noscript.html

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<noscript>
2+
<style type="text/css">
3+
#menuHello {
4+
min-height: 0;
5+
}
6+
7+
#huggingFace {
8+
display: block;
9+
}
10+
11+
#carbon {
12+
display: none;
13+
}
14+
</style>
15+
</noscript>

‎_includes/svg/facebook.html

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<svg class="svg svg--facebook" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
2+
width="266.893px" height="266.895px" viewBox="0 0 266.893 266.895" enable-background="new 0 0 266.893 266.895"
3+
xml:space="preserve">
4+
<path fill="#3C5A99" d="M248.082,262.307c7.854,0,14.223-6.369,14.223-14.225V18.812
5+
c0-7.857-6.368-14.224-14.223-14.224H18.812c-7.857,0-14.224,6.367-14.224,14.224v229.27c0,7.855,6.366,14.225,14.224,14.225
6+
H248.082z"/>
7+
<path fill="#FFFFFF" d="M182.409,262.307v-99.803h33.499l5.016-38.895h-38.515V98.777c0-11.261,3.127-18.935,19.275-18.935
8+
l20.596-0.009V45.045c-3.562-0.474-15.788-1.533-30.012-1.533c-29.695,0-50.025,18.126-50.025,51.413v28.684h-33.585v38.895h33.585
9+
v99.803H182.409z"/>
10+
</svg>

‎_includes/svg/github.html

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<svg class="svg svg--github" width="33" height="32" viewBox="0 0 33 32" xmlns="http://www.w3.org/2000/svg"><path d="M16.2885009,0 C7.2942243,0 0,7.293 0,16.29 C0,23.487 4.66714351,29.592 11.1403426,31.746 C11.9553676,31.896 12.2523768,31.393 12.2523768,30.961 C12.2523768,30.575 12.2383763,29.55 12.2303761,28.191 C7.69923675,29.175 6.74320735,26.007 6.74320735,26.007 C6.00218457,24.125 4.93415172,23.624 4.93415172,23.624 C3.45510624,22.614 5.04615517,22.634 5.04615517,22.634 C6.68120545,22.749 7.54123189,24.313 7.54123189,24.313 C8.99427657,26.802 11.3543491,26.083 12.2823777,25.666 C12.4303822,24.614 12.8513952,23.896 13.3164095,23.489 C9.69929825,23.078 5.89618131,21.68 5.89618131,15.438 C5.89618131,13.66 6.53120083,12.205 7.57323288,11.067 C7.40522771,10.655 6.84621052,8.998 7.7332378,6.756 C7.7332378,6.756 9.10027983,6.318 12.2123755,8.426 C13.5114155,8.064 14.9054583,7.884 16.2905009,7.877 C17.6745435,7.884 19.0675863,8.064 20.3686263,8.426 C23.478722,6.318 24.8437639,6.756 24.8437639,6.756 C25.7327913,8.998 25.1737741,10.655 25.006769,11.067 C26.0508011,12.205 26.6808204,13.66 26.6808204,15.438 C26.6808204,21.696 22.8717033,23.073 19.2435917,23.476 C19.8276097,23.979 20.3486257,24.973 20.3486257,26.493 C20.3486257,28.67 20.3286251,30.427 20.3286251,30.961 C20.3286251,31.397 20.6226341,31.904 21.4486595,31.745 C27.9168584,29.586 32.5800018,23.485 32.5800018,16.29 C32.5800018,7.293 25.2857775,0 16.2885009,0" id="Fill-3"></path></svg>

‎_includes/svg/twitter.html

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<svg class="svg svg--twitter" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300.00006 244.18703" height="244.19" width="300" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">
2+
<g transform="translate(-539.18 -568.86)">
3+
<path d="m633.9 812.04c112.46 0 173.96-93.168 173.96-173.96 0-2.6463-0.0539-5.2806-0.1726-7.903 11.938-8.6302 22.314-19.4 30.498-31.66-10.955 4.8694-22.744 8.1474-35.111 9.6255 12.623-7.5693 22.314-19.543 26.886-33.817-11.813 7.0031-24.895 12.093-38.824 14.841-11.157-11.884-27.041-19.317-44.629-19.317-33.764 0-61.144 27.381-61.144 61.132 0 4.7978 0.5364 9.4646 1.5854 13.941-50.815-2.5569-95.874-26.886-126.03-63.88-5.2508 9.0354-8.2785 19.531-8.2785 30.73 0 21.212 10.794 39.938 27.208 50.893-10.031-0.30992-19.454-3.0635-27.69-7.6468-0.009 0.25652-0.009 0.50661-0.009 0.78077 0 29.61 21.075 54.332 49.051 59.934-5.1376 1.4006-10.543 2.1516-16.122 2.1516-3.9336 0-7.766-0.38716-11.491-1.1026 7.7838 24.293 30.355 41.971 57.115 42.465-20.926 16.402-47.287 26.171-75.937 26.171-4.929 0-9.7983-0.28036-14.584-0.84634 27.059 17.344 59.189 27.464 93.722 27.464" fill="#1da1f2"/>
4+
</g>
5+
</svg>

0 commit comments

Comments
 (0)