Description
Webplate is an awesome front-end framework that lets you stay focused on building your site or app all the while remaining really easy to use.
webplate alternatives and similar libraries
Based on the "Boilerplates" category.
Alternatively, view webplate alternatives based on common mentions on social networks and blogs.
-
html5-boilerplate
A professional front-end template for building fast, robust, and adaptable web apps or sites. -
Cerberus
A few simple, but solid patterns for responsive HTML email templates and newsletters. Even in Outlook and Gmail. -
mobile-boilerplate
A front-end template that helps you build fast, modern mobile web apps. -
React PWA
An upgradable boilerplate for Progressive web applications (PWA) with server side rendering, build with SEO in mind and achieving max page speed and optimized user experience. -
Mobile-First-RWD
An example of a mobile-first responsive web design -
full-page-intro-and-navigation
An intro page with a full width background image, a bold animated menu and an iOS-like blurred effect behind the navigation
SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
* Code Quality Rankings and insights are calculated and provided by Lumnify.
They vary from L1 to L5 with "L5" being the highest.
Do you think we are missing an alternative of webplate or a related project?
README
Webplate Framework
Webplate is an awesome front-end framework that lets you stay focused on building your site or app all the while remaining really easy to use.
Getting Started
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.
Simple Page Loader
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>
Load Your Project Files
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.
Lets Go To The Next Level
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
Documentation
Webplate has many aspects to it so for more information view the comprehensive online documentation.
Author
Created and maintained by Chris Humboldt Website: chrishumboldt.com Twitter: twitter.com/chrishumboldt GitHub github.com/chrishumboldt
Contributors
Simon Goellner Oleg Kalandarashvili digiltd
Copyright and License
Copyright 2016 Webplate Project
Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
*Note that all licence references and agreements mentioned in the webplate README section above
are relevant to that project's source code only.