Documentation

Everything you can do with Beauter


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

base
<p> ... </p>
EXAMPLE

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

base
<h*> ... </h>
<h*> ... <small>...</small> ...</h>
EXAMPLE

<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="http://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.
Someone famous in Source Title


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