<p class="f1">A page heading</p>
<p class="f2">A page heading</p>
<p class="f3">A page heading</p>
<p class="f4">A page heading</p>
<p class="f5">A page heading</p>
<p class="f6">A page heading</p>

			

			<h1>A page heading</h1>
<h2>A page heading</h2>
<h3>A page heading</h3>
<h4>A page heading</h4>
<h5>A page heading</h5>
<h6>A page heading</h6>
			

			<p class="intro">This is an example of an introductory paragraph. As such the font size is slightly larger which makes it stand out more. It should only be used on articles, and not for decoration.</p>
<p>This is an example of a normal paragraph. This is the default text size for paragraphs. If you want to use this size elsewhere you can apply the <code>.font-normal</code> class to the element you want to change.</p>
			

			<blockquote>This isn't really a quote but it serves to demo how they should work.</blockquote>
			

			<p class="meta">This is some meta text. It can be used for all sorts of content like breadcrumbs or post dates or whatever else is supplemental information.</p>
<p class="meta"><a href="#">Home</a> <span class="sep">></span> <a href="#">Archives</a> <span class="sep">></span> Post Title</p>


			

			<ul>
	<li>A list item</li>
	<li>A list item</li>
	<li>A list item</li>
	<li>A list item</li>
</ul>

			

			<ol>
	<li>A list item</li>
	<li>A list item</li>
	<li>A list item</li>
	<li>A list item</li>
</ol>

			

			<a href="#" class="button">Button text</a>
<a href="#" class="button">😄 Button text</a>
<button class="button">Button text</button>
<input type="button" class="button" value="Button text">
			

			<a href="#" class="button jumbo">Button text</a>
<a href="#" class="button jumbo">😄 Button text</a>
<button class="button jumbo">Button text</button>
<input type="button" class="button jumbo" value="Button text">
			

			<a href="#" class="button disabled">Button text</a>
<a href="#" class="button disabled">😄 Button text</a>
<button class="button" disabled>Button text</button>
<input type="button" class="button" disabled value="Button text">
			

			<a href="#" class="button greedy">Button text</a>
<a href="#" class="button greedy">😄 Button text</a>
<button class="button greedy">Button text</button>
<input type="button" class="button greedy" value="Button text">
			

			<a href="#" class="button ghost">Button text</a>
<a href="#" class="button ghost">😄 Button text</a>
<button class="button ghost">Button text</button>
<input type="button" class="button ghost" value="Button text">
			

			<a href="#" class="button">Button text</a>
<a href="#" class="button secondary">Button text</a>
<a href="#" class="button tertiary">Button text</a>

			

			<a href="#" class="button teeny">Button text</a>
<a href="#" class="button teeny">😄 Button text</a>
<button class="button teeny">Button text</button>
<input type="button" class="button teeny" value="Button text">
			

			<label for="inputbox">A form label</label>
<input type="text" id="inputbox" placeholder="placeholder" />

<label for="disabledinputbox">A disabled form label</label>
<input type="text" id="disabledinputbox" disabled placeholder="placeholder" />
			

			<label for="textareabox">A form label</label>
<textarea id="textareabox"></textarea>
			

			<label>A form label</label>
			

			<fieldset>
	<legend>Field Legend</legend>
	<input type="text" placeholder="placeholder" />
</fieldset>
			

			<label>Colour picker</label>
<div class="radioGroup">
	<input name="color-scheme" type="radio" value="light (default)" label="Light (Default)" />
	<input name="color-scheme" type="radio" value="dark" label="Dark" />
	<input name="color-scheme" type="radio" value="red" label="Red" />
	<input name="color-scheme" type="radio" value="green" label="Green" />
	<input name="color-scheme" type="radio" value="pink" label="Pink" />
	<input name="color-scheme" type="radio" value="blue" checked="checked" label="Blue" />
	<input name="color-scheme" type="radio" value="yellow" label="Yellow" />
</div>

<label>Font selector (old style radio group)</label>
<div class="radio-group text-font-group">
	<label class="group checked" style="font-family: Arial;"><input name="text-fonts" type="radio" value="Arial" checked="checked">Arial</label>
	<label class="group" style="font-family: &quot;Comic Sans MS&quot;;"><input name="text-fonts" type="radio" value="Comic Sans MS">Comic Sans MS</label>
	<label class="group" style="font-family: &quot;Times New Roman&quot;;"><input name="text-fonts" type="radio" value="Times New Roman">Times New Roman</label>
</div>
			

			<form class="select list-group">

	<label class="group gif-classic selected">
		<input type="radio" value="gif-classic" checked="" name="export">
		<h3>Animated Gif</h3>
	</label>

	<label class="group gif-twitter">
		<input type="radio" value="gif-twitter" name="export">
		<h3>Twitter Animated Gif</h3>
		<p>Twitter adds a pause at the end of animated gifs so they don't loop smoothly. This fixes that.</p>
	</label>

	<label class="group save-image">
		<input type="radio" value="save-image" name="export">
		<h3>Save an image</h3>
		<p>A single image with each frame laid out side by side like a comic.</p>
	</label>

	<label class="group save-file">
		<input type="radio" value="save-file" name="export">
		<h3>Save the ninja animation file</h3>
		<p>This can only be opened in the <a href="/desktop-app/" class="brush-ninja-app" target="_blank">Brush Ninja desktop app</a></p>
	</label>

</form>
			

			<label class="group gif-classic selected">
	<input type="radio" value="gif-classic" checked="" name="export">
	<h3>Animated Gif</h3>
</label>

<label class="group gif-classic selected">
	<input type="radio" value="gif-classic" checked="" name="export">
	<h3>Animated Gif</h3>
</label>
			

			<label for="file-uploader" class="file-upload">
	Choose an Image File
	<input type="file" id="file-uploader" />
</label>

			

			<label for="inputcheckbox1" class="checkbox">
	<input type="checkbox" checked id="inputcheckbox1" />
	A form label
</label>

<label for="inputcheckbox2" class="checkbox f6">
	<input type="checkbox" id="inputcheckbox2" />
	A form label
</label>

			

			<label for="inputradio1" class="radio">
	<input type="radio" name="radiobox" checked id="inputradio1" />
	A form label
</label>

<label for="inputradio2" class="radio f6">
	<input type="radio" name="radiobox" id="inputradio2" />
	A form label
</label>


			

			<input type="search" placeholder="Search..." />
			

			<div class="error show">
This is an error.
</div>
			

			<section class="widget">
	<h2>Widget Title</h2>
	<p>This is the content for the widget.</p>
	<ul>
		<li>A widget list.</li>
		<li>A widget list.</li>
		<li>A widget list.</li>
		<li>A widget list.</li>
	</ul>
</section>
			

			<div class="gallery">
	<img src="/assets/images/store-screenshot/mas/1.jpg" alt="*" />
	<img src="/assets/images/store-screenshot/mas/1.jpg" alt="*" />
	<img src="/assets/images/store-screenshot/mas/1.jpg" alt="*" />
	<img src="/assets/images/store-screenshot/mas/1.jpg" alt="*" />
	<img src="/assets/images/store-screenshot/mas/1.jpg" alt="*" />
	<img src="/assets/images/store-screenshot/mas/1.jpg" alt="*" />
</div>
			

			<div class="gallery gallery-large">
	<img src="/assets/images/store-screenshot/mas/1.jpg" alt="*" />
	<img src="/assets/images/store-screenshot/mas/1.jpg" alt="*" />
	<img src="/assets/images/store-screenshot/mas/1.jpg" alt="*" />
	<img src="/assets/images/store-screenshot/mas/1.jpg" alt="*" />
	<img src="/assets/images/store-screenshot/mas/1.jpg" alt="*" />
	<img src="/assets/images/store-screenshot/mas/1.jpg" alt="*" />
</div>
			

			<ul class="pager">
	<li class="previous"><a href="/blog/">← Newer Posts</a></li>
	<li class="next"><a href="/blog/page/2/">Older Posts →</a></li>
</ul>
			

			<a href="https://www.youtube.com/@brushninja" class="social youtube" rel="me noreferrer noopener nofollow"><span class="screen-reader-text">Brush Ninja on Youtube</span></a>
<a href="https://mastodon.social/@binarymoon" class="social mastodon" rel="me noreferrer noopener nofollow"><span class="screen-reader-text">Binary Moon (the Brush Ninja creator) on Mastodon</span></a>
<a href="https://www.instagram.com/BrushNinjaApp/" class="social instagram" rel="me noreferrer noopener nofollow"><span class="screen-reader-text">Brush Ninja on Instagram</span></a>
<!-- <a href="https://www.facebook.com/brushninja/posts/" class="social facebook" rel="me noreferrer noopener nofollow"><span class="screen-reader-text">Brush Ninja on Facebook</span></a> -->
<a href="https://twitter.com/binarymoon" class="social twitter" rel="me noreferrer noopener nofollow"><span class="screen-reader-text">Binary Moon (the Brush Ninja creator) on Twitter</span></a>
<a href="/contact/" class="social contact"><span class="screen-reader-text">Contact Me</span></a>

			

			<div class="loading">Loading</div>
			

			<div class="loading__small"></div>
			

			<div class="button-description">
	<button class="button greedy">A button</button>
	<p>A description for the button.</p>
</div>
			

			<hr />
<hr class="ruler" />
<hr class="ruler jumbo" />
<hr class="ruler teeny" />
			

			<div class="note">
	This is a note.
</div>

<div class="note" markdown="1">
<h3>This is another note.</h3>
It can contain html or markdown.
</div>

<div class="note note-idea" markdown="1">
	<h3>This is another note.</h3>
	It can contain html or markdown.
</div>
			

			<div class="premium">
	<p>This is some text with a <a href="#">call to action</a>.</p>
</div>

<div class="premium">
	<h2>Title</h2>
	<p>This is some text with a <a href="#">call to action</a>.</p>
</div>
			

			<div class="premium teeny">
	<p>This is some text with a <a href="#">call to action</a>.</p>
</div>

<div class="premium teeny">
	<h2>Title</h2>
	<p>This is some text with a <a href="#">call to action</a>.</p>
</div>
			

			<div class="command">
www:/&gt; MakeGif -BMr<br>
www:/&gt; ..........<br>
www:/&gt; <a href="#" class="file-download" download="animation.gif">Save!</a>
</div>
			

			<div class="shadow-low bg-white p4 b-br2 m4">Low</div>
<div class="shadow-mid bg-white p4 b-br2 m4">Mid</div>
<div class="shadow-high bg-white p4 b-br2 m4">High</div>