This repository has been archived by the owner on May 27, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 92
/
index.html
87 lines (78 loc) · 5.07 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
82
83
84
85
86
87
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Webplate</title>
<link rel="icon" type="image/png" href="project/img/welcome/favicon.png" />
<link href='http://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="webplate-content" style="display:none;">
<!-- Title bar -->
<section class="title-bar">
<ul>
<li class="small-hide"><a href="#starting-guide" class="border-pink scroll-to">Getting Started</a></li>
<li class="small-hide"><a href="http://getwebplate.com/#/documentation/what-you-got/"target="_blank">Documentation</a></li>
<li class="small-show"><a href="http://getwebplate.com/#/documentation/what-you-got/"target="_blank">Docs</a></li>
<li><a href="https://twitter.com/webplatetweets" class="icon-twitter" target="_blank"></a></li>
</ul>
<a href="http://getwebplate.com" target="_blank" class="logo">
<span>Webplate</span>
<i class="icon-nfc"></i>
</a>
</section>
<!-- Banner -->
<section class="banner _title-bar-padding _fuse"><div class="limit">
<h1>Make Something Awesome</h1>
<p>We are so happy that you have decided to use Webplate. It is really easy to get started and has a ton of cool features so below are a few basic tips to get you going. Happy building!</p>
<a class="btn-banner small-hide" href="https://github.com/chrishumboldt/Webplate" target="_blank">Fork Repo</a>
<a class="btn-banner btn-bower" href="http://getwebplate.com/#/documentation/what-you-got/" target="_blank">Read Docs</a>
</div></section>
<!-- Starting guide -->
<div id="starting-guide" class="grey-strip">Getting Started</div>
<section class="content limit">
<h4>Include Webplate</h4>
<p>Simply drop the Webplate directory into your web project and include the <b>start.js</b> file before your ending body tag. Below is an example of this and note that an id of <b>webplate</b> is required.</p>
<pre class="prettyprint linenums">
<body style="display:none;">
/* Your content goes here */
<script id="webplate" src="webplate/start.js"></script>
</body>
</pre>
<p class="note">The body tag style attribute is used to prevent CSS style snapping on load and is highly recommended.</p>
<br><br>
<h4>Load Your Project Files</h4>
<p>All web projects include a combination of CSS and Javascript and Webplate makes it incredibly easy to load these using a simple configuration file. You can find this file at <b>webplate/project/config.json</b>. Below is an example of what you might typically see.</p>
<pre class="prettyprint linenums">
{
"project": {
"css": ["welcome.css", "theme.css"],
"js": ["min/welcome.min.js"],
}
}
</pre>
<p class="note">You will notice that a comma delimited list allows you to load more than one file and that the Webplate path is not required. This is because Webplate automatically knows where to look inside the project directory. You can also load different files on different pages. <a href="http://getwebplate.com/#/documentation/configuration/" target="_blank">Want to know more?</a></p>
<br><br>
<h4>Lets Go To The Next Level</h4>
<p>Before you have even started, Webplate has already loaded up <a href="http://modernizr.com/" target="_blank">Modernizr</a>, <a href="http://necolas.github.io/normalize.css/" target="_blank">Normalize.css</a>, <a href="http://typeplate.com/" target="_blank">Typeplate</a>, <a href="http://julian.com/research/velocity/" target="_blank">Velocity.js</a> and icon font support at a minimal size. This takes away most of the set up time and acts like a kind of advanced boilerplate.</p>
<p>This will get you up and running for most projects but if you want to include Webplate components like <a href="http://getwebplate.com/#/documentation/buttons/" target="_blank">Buttons</a>, <a href="http://getwebplate.com/#/documentation/forms/" target="_blank">Forms</a> or <a href="http://getwebplate.com/#/documentation/modals/" target="_blank">Modals</a> or perhaps you want to even start delving into Webplate's automatic <b>Bower, SASS</b> and <b>Grunt</b> intergration then just read over some of the online documentation and become a bonafide pro.</p>
<p><b>Browser Support:</b> IE9+, Chrome, Firefox, Safari, Opera</p>
</section>
<!-- Footer -->
<footer><div class="content limit"><div class="col-double">
<div class="left">
Made by <a href="http://chrishumboldt.com" target="_blank">Chris Humboldt</a>
</div>
<div class="right">
<a href="http://getwebplate.com/#/documentation/what-you-got/" target="_blank">Docs</a>
<a href="http://getwebplate.com/#/legal/" target="_blank">Legal Stuff</a>
Want updates? <a href="http://twitter.com/webplatetweets" target="_blank">@webplatetweets</a>
</div>
</div></div></footer>
</div>
<!-- Webplate -->
<script id="webplate" src="start.js"></script>
</body>
</html>