Simply drop the Webplate directory into your web project and include the start.js file before your ending body tag. Below is an example of this and note that an id of webplate is required.
<body style="display:none;">
/* Your content goes here */
<script id="webplate" src="webplate/start.js"></script>
</body>
The body tag style attribute is used to prevent CSS style snapping on load and is highly recommended.
If you would like a page loader to display while your project files load, simply wrap your content in a div with id webplate-content. See an example below.
<body>
<div id="webplate-content" style="display:none;">
/* Your content goes here */
</div>
<script id="webplate" src="webplate/start.js"></script>
</body>
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 webplate/project/config.json. Below is an example of what you might typically see.
{
"project": {
"css": ["welcome.css", "theme.css"],
"js": ["min/welcome.min.js"],
}
}
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. Want to know more?
Before you have even started, Webplate has already loaded up Modernizr, Normalize.css, Typeplate, Velocity.js 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.
This will get you up and running for most projects but if you want to include Webplate components like Buttons, Forms or Modals or perhaps you want to even start delving into Webplate's automatic Bower, SASS and Grunt intergration then just read over some of the online documentation and become a bonafide pro.
Browser Support: IE9+, Chrome, Firefox, Safari, Opera