Want Updates? Follow Us @webplatetweets
This is a simple process that requires you dropping a copy of the Webplate directory you just got into your project and including the stack.js file 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">
</head>
In the above [webplate] is referencing the directory that houses the framework. By default it is often just called webplate and sits in your site root, but can be any name you wish. Just include the correct name in your stack call as above and all other paths will line up automatically.
The stack will load all the neccessary files required as well as give you the option to load your own project specific JS and CSS. 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">
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 as all files are loaded asynchronously. From here on out you will have access to all Webplate plugins as well as all other third party vendor libraries like, jQuery, Modernizr, Typeplate, Velocity.js, Hammer.js and icon font support to name a few.
Browser Support: IE9+, Chrome, Firefox, Safari, Opera
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 classing implementation or you can build it using the recommended mixin implementation (requires SASS). See a basic example of both below.
HTML
<div class="class-example row">
<div class="span-12 span-large-2">Left</div>
<div class="span-6 span-large-8">Middle</div>
<div class="span-6 span-large-2">Right</div>
</div>
RESULT (Screen Width: px)
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 span-new(6);
}
.middle-col, .right-col {
@include span-new(3);
}
}
// Over 800px
@include respond-to(50em) {
.left-col {
@include span-new(12);
}
.middle-col {
@include span-new(9);
}
.right-col {
@include span-new(3);
}
}
// Over 900px
@include respond-to(56.250em) {
.left-col, .right-col {
@include span-new(2);
}
.middle-col {
@include span-new(8);
}
}
}
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.
Getting truly universal forms and inputs can be tricky but 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
<div class="formplate">
<label for="text-input">Text Input:</label>
<input type="text" id="text-input" name="text-input">
</div>
// Textarea
<div class="formplate">
<textarea placeholder="Textarea"></textarea>
</div>
// Checkboxes
<div class="formplate">
<input type="checkbox" name="checkbox-1" value="checkbox-1" id="checkbox-1">
<label for="checkbox-1">Checkbox 1</label>
</div>
<div class="formplate">
<input type="checkbox" name="checkbox-2" value="checkbox-2" id="checkbox-2">
<label for="checkbox-2">Checkbox 2</label>
</div>
<div class="formplate">
<input type="checkbox" name="checkbox-3" value="checkbox-3" id="checkbox-3">
<label for="checkbox-3">Checkbox 3</label>
</div>
// Radio buttons
<div class="formplate">
<input type="radio" name="radio" value="radio-1" id="radio-1">
<label for="radio-1">Radio 1</label>
</div>
<div class="formplate">
<input type="radio" name="radio" value="radio-2" id="radio-2">
<label for="radio-2">Radio 2</label>
</div>
<div class="formplate">
<input type="radio" name="radio" value="radio-3" id="radio-3">
<label for="radio-3">Radio 3</label>
</div>
// Drop-down
<div class="formplate">
<select>
<option value="1">Select Option 1</option>
<option value="2">Select Option 2</option>
<option value="3">Select Option 3</option>
</select>
</div>
// Toggler
<div class="formplate">
<input type="checkbox" class="toggler" name="toggler" value="toggler">
</div>
RESULT
For more information read the online documentation on forms.
A core component of any project are the buttons and Webplate uses a custom plugin called Buttonplate. See a few example below.
HTML
<a href="#" class="button">Basic</a>
<a href="#" class="button blue small">Small Blue</a>
<a href="#" class="button green">Green</a>
<a href="#" class="button orange large">Orange Large</a>
<a href="#" class="button red pill extra-large">Red Pill Extra Large</a>
// Button dropdown
<div class="button purple drop-down">
Purple Drop-down<div class="arrow"></div>
<ul>
<li class="line-bottom"><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</div>
RESULT
Basic Small Blue Green Orange Large Red Pill Extra Large
For more information read the online documentation on buttons.
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.