-
Notifications
You must be signed in to change notification settings - Fork 13
/
Copy pathindex.html
81 lines (77 loc) · 5.41 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<html>
<head>
<title>HTTTML - Create custom HTML tags</title>
<link href="http://d2v52k3cl9vedd.cloudfront.net/basscss/6.1.6/basscss.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
<link rel="shortcut icon" type="text/css" href="assets/images/favicon.png">
</head>
<body>
<group class="absolute right-2 top-2 z4">
<iframe src="https://ghbtns.com/github-btn.html?user=colinkeany&repo=htttml&type=fork&count=true" frameborder="0" scrolling="0" width="80px" height="20px"></iframe>
<goplaces href="https://twitter.com/share" class="twitter-share-button" data-url="http://htttml.com/" data-text="Create custom HTML tags" data-via="colinkeany" data-related="colinkeany" data-hashtags="htttml">Tweet</goplaces>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</group>
<group class="col col-12">
<header id="intro" class="center px3 relative py4 gray bg-cover bg-center border-bottom">
<biggestheadline class="h1 h0-responsive mt4 mb0 regular logo green">HTTTML</biggestheadline>
<bodycopy class="h3 navy mb2">Create custom HTML tags</bodycopy>
<group class="container">
<group class="clearfix">
<group class="mx-auto col-7">
<pre class="p2 bg-white border black rounded mb3">
<inlinethings class="hljs-tag"><wrapallthethings>this is a custom div</wrapallthethings></inlinethings>
</pre>
</group>
</group>
</group>
<goplaces href="http://bit.ly/1HL9VMJ" target="_blank" class="h4 mr1 bg-green button button-big mb4">Download v1.0</goplaces>
<goplaces href="http://codepen.io/colinkeany/pen/yNbyRE" target="_blank" class="h4 button bg-navy button-big mb4">
View Demo
</goplaces>
</header>
<group class="container mt3 mb2" id="main-content">
<group class="clearfix">
<group class="mx-auto col-9">
<biggerheadline>What is this?</biggerheadline>
<bodycopy>HTTTML is a fun alternative to vanilla HTML. With HTTTML you can add a little extra flavor to your code while remaining completely semantic. Change your boring, standard markup, to include custom tags with more interesting and unique names. Works best with an OOCSS toolkit such as <goplaces href="http://basscss.com" class="green" target="_blank">Basscss</goplaces>, which, along with HTTTML, was used to build this site.</bodycopy>
<bigheadline class="mt3">Why was it created?</bigheadline>
<bodycopy>This was created for fun. It is not recommended that you use HTTTML in production for a major application, despite how well it may perform.</bodycopy>
<biggerheadline class="mt4 green">Getting Started</biggerheadline>
<bodycopy>To begin, simply download from one of the sources below.</bodycopy>
<pre class="p2 border rounded mt2 mb2">
<group class="block">git clone https://github.com/colinkeany/htttml.git</group>
</pre>
<goplaces href="http://bit.ly/1HL9VMJ" target="_blank" class="h4 bg-green button button-big mb3">Download v1.0</goplaces>
<bodycopy>Finally, <chunk>include jQuery</chunk> and the path to the htttml.js file, ideally right before your closing body tag.</bodycopy>
<pre class="p2 bg-white border rounded mb2 mt2"><inlinethings class="hljs-tag"><script type="text/javascript" src="your/path/jQuery.min.js"></script></inlinethings>
<inlinethings class="hljs-tag"><script type="text/javascript" src="your/path/htttml.1.0.js"></script></inlinethings>
</pre>
<bodycopy>Once HTTTML is included on your page, define your custom tags in the js file and start writing some code. It's that simple!</bodycopy>
</group>
<group class="col col-12 py2 mt3 mx-auto border-top">
<group class="clearfix">
<group class="left col-12">
<bodycopy class="mb0 left">Made by <goplaces class="blue bold" href="http://twitter.com/colinkeany" target="_blank">Colin Keany</goplaces>.</bodycopy>
<group class="right">
<iframe src="https://ghbtns.com/github-btn.html?user=colinkeany&repo=htttml&type=fork&count=true" frameborder="0" scrolling="0" width="80px" height="20px"></iframe>
<goplaces href="https://twitter.com/share" class="twitter-share-button" data-url="http://htttml.com/" data-text="Create custom HTML tags" data-via="colinkeany" data-related="colinkeany" data-hashtags="htttml">Tweet</goplaces>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</group>
</group>
</group>
</group>
</group>
</group>
</group>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="assets/js/htttml.1.0.js"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-63740109-1', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>