Typography

Beauter retains the basic HTML formatting while adding them a bit of beauty.

Paragraph

Beauter preserve the basic HTML formatting elements while making each of them cross browser and responsive

<p> ... </p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi enim augue, pellentesque id nibh at, laoreet placerat mi. Sed rutrum diam auctor mollis scelerisque. Pellentesque sit amet ultricies ante. Nullam molestie euismod iaculis. Sed pellentesque mauris eleifend mattis tempor. Aenean id tempus urna. Donec rutrum mauris et erat accumsan porttitor.</p>
<p class="_low">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi enim augue, pellentesque id nibh at, laoreet placerat mi. Sed rutrum diam auctor mollis scelerisque. Pellentesque sit amet ultricies ante. Nullam molestie euismod iaculis. Sed pellentesque mauris eleifend mattis tempor. Aenean id tempus urna. Donec rutrum mauris et erat accumsan porttitor.</p>
<p class = "_high">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi enim augue, pellentesque id nibh at, laoreet placerat mi. Sed rutrum diam auctor mollis scelerisque. Pellentesque sit amet ultricies ante. Nullam molestie euismod iaculis. Sed pellentesque mauris eleifend mattis tempor. Aenean id tempus urna. Donec rutrum mauris et erat accumsan porttitor.</p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi enim augue, pellentesque id nibh at, laoreet placerat mi. Sed rutrum diam auctor mollis scelerisque. Pellentesque sit amet ultricies ante. Nullam molestie euismod iaculis. Sed pellentesque mauris eleifend mattis tempor. Aenean id tempus urna. Donec rutrum mauris et erat accumsan porttitor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi enim augue, pellentesque id nibh at, laoreet placerat mi. Sed rutrum diam auctor mollis scelerisque. Pellentesque sit amet ultricies ante. Nullam molestie euismod iaculis. Sed pellentesque mauris eleifend mattis tempor. Aenean id tempus urna. Donec rutrum mauris et erat accumsan porttitor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi enim augue, pellentesque id nibh at, laoreet placerat mi. Sed rutrum diam auctor mollis scelerisque. Pellentesque sit amet ultricies ante. Nullam molestie euismod iaculis. Sed pellentesque mauris eleifend mattis tempor. Aenean id tempus urna. Donec rutrum mauris et erat accumsan porttitor.

Headings

Beauter adds the secondary headings which can be very useful for adding sub titles while grouping.

<h*> ... </h>
<h*> ... <small>...</small> ...</h>

<h1>Primary<small>Secondary</small></h1>
<h2>Primary<small>Secondary</small></h2>
<h3>Primary<small>Secondary</small></h3>
<h4>Primary<small>Secondary</small></h4>
<h5>Primary<small>Secondary</small></h5>
<h6>Primary<small>Secondary</small></h6>

PrimarySecondary

PrimarySecondary

PrimarySecondary

PrimarySecondary

PrimarySecondary

PrimarySecondary

Basic text styles

<p>Base <strong>Bolded</strong>
<a href="https://outboxcraft.com/beauter">Link</a>
<small>Smaller</small>
<del>Deleted</del>
<em>Italicized</em>
<a>Colored</a>
<u>Underlined</u>
<mark>Highlighted</mark></p>
<code>printf("Hello, Horld!\n");</code>
<kbd>Ctrl</kbd>
</p>

Base Bolded Link Smaller Deleted Italicized Colored Underlined Highlighted printf("Hello, Horld!\n"); Ctrl

Showing codes

Codes and Buttons can be shown using the above styles as printf("Hello, Horld!\n"); Ctrl. But beauter can also pre - format source code. You can easily add any third party syntax highlighter to differentiate the syntax.

<pre><code><p>
#include <stdio.h>
int main()
{
	printf("Hello, World!\n");
	return 0;
}</p></code>
</pre>

#include <stdio.h>
int main()
{
	printf("Hello, World!\n");
	return 0;
}

This also allows the black board effects

EXAMPLE:

#include <stdio.h>
int main()
{
	printf("Hello, World!\n");
	return 0;
}

#include <stdio.h>
int main()
{
	printf("Hello, World!\n");
	return 0;
}

BlockQuotes

Beauter can draw beautiful blockquote along with a footer and a cite.

<blockquote>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi enim augue, pellentesque id nibh at, laoreet placerat mi. Sed rutrum diam auctor mollis scelerisque. Pellentesque sit amet ultricies ante. Nullam molestie euismod iaculis. Sed pellentesque mauris eleifend mattis tempor. Aenean id tempus urna. Donec rutrum mauris et erat accumsan porttitor.
<footer>Someone famous in <cite title="Source Title">Source Title</cite>
</footer>
</blockquote>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi enim augue, pellentesque id nibh at, laoreet placerat mi. Sed rutrum diam auctor mollis scelerisque. Pellentesque sit amet ultricies ante. Nullam molestie euismod iaculis. Sed pellentesque mauris eleifend mattis tempor. Aenean id tempus urna. Donec rutrum mauris et erat accumsan porttitor.