Documentation

Everything you can do with Beauter

Getting Started

This guide will help you to start with Beauter quickly as 1 2 3!

Downloading Beauter

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.css

You 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.js

HTML 5

Beauter 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>

Setting up the Viewport

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.

Adding Fonts

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">

Basic Beauter Document

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.


Sitemap ..

Code licensed under MIT
Docs under CC BY NC SA 4.0.
Designed with
outboxcraft logoOutboxcraft
© 2017