Documentation

Everything you can do with Beauter


Getting Started


Downloading Beauter

There are many ways to get Beauter

  • Download the Latest Release
  • Install with npm npm install @outboxcraft/beauter
  • Install with Bower bower install beauter

You will get beauter.css, the complete source to study and modify the beauter, and beauter.min.css, the minified version of the stylesheet to use for your websites.


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 Viewport

Beauter is a responsive framework and 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">

Adding Beauter

Beauter can be added simply by adding the stylesheet.

<link rel="stylesheet" type="text/css" href="beauter.min.css" />

Basic Beauter Document

A basic Beauter document after following everything written above will look like this.

<!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="beauter.min.css" />
</head>

<body>
...
	<script>
		...
	</script>
</body>

</html>

Scripts, if any, should be added at the end. It reduces loading time.



News

  • New 'Examples' section coming with wonderful tutorials!
  • Adding animations and transitions effects soon.
  • 0.3 development started. Join us here.

Get Involved

Your contribution can make beauter more beautiful. Visit Github to collaborate.

Star Fork

Sitemap Designed with by Shubham Ramdeo
Follow @ramdeoshubham
outboxcraft logoOutboxcraft
© 2017