Beauter
Everything you can do with Beauter
This guide will help you to start with Beauter quickly as 1 2 3!
There are many ways to download beauter, you can see available option here, easiest of them is to use a CDN network.
Link the CSS directly, paste this code just before the ending </head> tag.:
https://rawgit.com/outboxcraft/beauter/master/beauter.min.cssYou might also need to include beauter's javascript file for dynamic options. You may paste this code just before the ending </body> tag.
https://rawgit.com/outboxcraft/beauter/master/beauter.min.jsBeauter is build to meet the requirements of the modern internet. To get the best out of Beauter, make sure your HTML document is declared HTML5 type.
<!DOCTYPE html>
...
</html>
Beauter is a responsive framework and is built keeping Mobile First in mind. This responsiveness for smaller devices can be achieved by setting up the correct viewport in the <head> section of your HTML document.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">The property user-scalable=no is optional and will disable zooming and make your webpage to behave like a native app on the mobile screen.
Beauter uses and recommends Google's Roboto Fonts but you can add whatever you want in the <head> section of your HTML document.
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic">
A basic Beauter document after following everything written above will look like this. Simple copy paste will do!
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic">
<link rel="stylesheet" type="text/css" href="https://rawgit.com/outboxcraft/beauter/master/beauter.min.css"/>
</head>
<body>
<!-- design your site here -->
<script src="https://rawgit.com/outboxcraft/beauter/master/beauter.min.js"></script>
</body>
</html>
Scripts, if any, should be added at the end.
You can use the above basic beauter document as a startimg boiler plate for your beauter site by simply copying and pasting it as a new html file.
