Getting Started
This is a simple process that requires you dropping a copy of the Webplate directory you just got into your project and including the webplate/stack.js in your head tag. Below is a basic example and note that the id of webplate-stack is required.
<head>
<script id="webplate-stack" src="webplate/stack.js" type="text/javascript">
</head>
This will load all the neccessary files required as well as give you the option to load your own "project" specific JS or CSS files. To load project files add a data attribute to your "body" like the example below.
<body style="display: none;" data-project-css="welcome.css" data-project-js="welcome.js">
Note that the style="display: none;" attribute is used to prevent style snapping so that the page will only show once the files have been loaded. It is not required but recommended.
All files are loaded asynchronously. From here on out you have access to all Webplate plugins, including the Blueplate responsive CSS layout engine, the Flickerplate plugin and all other libraries like, jQuery, Modernizr, Typeplate, IcoMoon and jQuery.Finger.
Going Responsive
Webplate includes its custom built Blueplate layout engine and can be used in one of two ways. You can either build your layouts using the recommended atomic implementation (requires SASS) or you can build it using the classing implementation. See a basic example of both below.
Atomic Implementation
HTML
<div class="atomic-example">
<div class="left-col">Left</div>
<div class="middle-col">Middle</div>
<div class="right-col">Right</div>
</div>
SASS
.atomic-example {
@include row();
// Columns - mobile first
.left-col, .right-col, .middle-col {
@include span(12);
}
// Over 700px
@include respond-to(large) {
.left-col {
@include new-span(6);
}
.middle-col, .right-col {
@include new-span(3);
}
}
// Over 800px
@include respond-to(50em) {
.left-col {
@include new-span(12);
}
.middle-col {
@include new-span(9);
}
.right-col {
@include new-span(3);
}
}
// Over 900px
@include respond-to(56.250em) {
.left-col, .right-col {
@include new-span(2);
}
.middle-col {
@include new-span(8);
}
}
}
RESULT (Screen Width: px)
Classed Implementation
HTML
<div class="class-example row">
<div class="span-12 large-span-2">Left</div>
<div class="span-6 large-span-8">Middle</div>
<div class="span-6 large-span-2">Right</div>
</div>
RESULT (Screen Width: px)
There is a lot more that can be done and configured and it is recommended that you read the online documentation on layouts.
Forms
Getting truly universal forms and inputs can be tricky and Webplate has got you covered. Best of all, it looks and acts the same and is completely responsive across all devices, even touch screens.
HTML
<a href="#" class="button blue">Button</a>
// Button dropdown
<div class="button blue">
Drop-down<span class="icon-arrow-down"></span>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li class="line-top"><a href="#">Link 3</a></li>
</ul>
</div>
// Text input
<input type="text" name="inp-example" value="" placeholder="Input field">
// Checkboxes
<div class="inline">
<input type="checkbox">
<label>Checkbox 1</label>
</div>
<div class="inline">
<input type="checkbox">
<label>Checkbox 2</label>
</div>
<div class="inline">
<input type="checkbox">
<label>Checkbox 3</label>
</div>
// Radio options
<div class="inline">
<input type="radio" name="iCheck">
<label>Radio 1</label>
</div>
<div class="inline">
<input type="radio" name="iCheck">
<label>Radio 2</label>
</div>
<div class="inline">
<input type="radio" name="iCheck">
<label>Radio 3</label>
</div>
// Textarea
<textarea placeholder="Textarea"></textarea>
RESULT
For more information read the online documentation on forms.
Documentation
You are just starting to scratch the surface of what Webplate is capable of. It should be enough to get started but for more in depth information and full referencing visit the online documentation at http://getwebplate.com/documentation.