Brush Ninja Animated Gif Creator

Styleguide

Colours

Colours

$white
$black
$red
$blue
$dark-blue
$green
$dark-green
$yellow
$dark-yellow 
<div class="colour-swatch colour-bg-white">
	<span>$white</span>
</div>


<div class="colour-swatch colour-bg-black">
	<span>$black</span>
</div>


<div class="colour-swatch colour-bg-red">
	<span>$red</span>
</div>


<div class="colour-swatch colour-bg-blue">
	<span>$blue</span>
</div>


<div class="colour-swatch colour-bg-dark-blue">
	<span>$dark-blue</span>
</div>


<div class="colour-swatch colour-bg-green">
	<span>$green</span>
</div>


<div class="colour-swatch colour-bg-dark-green">
	<span>$dark-green</span>
</div>


<div class="colour-swatch colour-bg-yellow">
	<span>$yellow</span>
</div>


<div class="colour-swatch colour-bg-dark-yellow">
	<span>$dark-yellow</span>
</div>

Greys

$white
$light-grey
$mid-grey
$dark-grey
$very-dark-grey
$black 
<div class="colour-swatch colour-bg-white">
	<span>$white</span>
</div>


<div class="colour-swatch colour-bg-light-grey">
	<span>$light-grey</span>
</div>


<div class="colour-swatch colour-bg-mid-grey">
	<span>$mid-grey</span>
</div>


<div class="colour-swatch colour-bg-dark-grey">
	<span>$dark-grey</span>
</div>


<div class="colour-swatch colour-bg-very-dark-grey">
	<span>$very-dark-grey</span>
</div>


<div class="colour-swatch colour-bg-black">
	<span>$black</span>
</div>

Typography

Font Sizes/ scale

A page heading

A page heading

A page heading

A page heading

A page heading

<p class="font-mega">A page heading</p>
<p class="font-big">A page heading</p>
<p class="font-medium">A page heading</p>
<p class="font-normal">A page heading</p>
<p class="font-small">A page heading</p>

Headings

A page heading

A page heading

A page heading

A page heading

A page heading
A page heading
<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>

Paragraphs

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.

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 .font-normal class to the element you want to change.

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

Blockquotes

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

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.

Home > Archives > Post Title

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

Unordered Lists

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

Ordered Lists

  1. A list item
  2. A list item
  3. A list item
  4. A list item
<ol>
	<li>A list item</li>
	<li>A list item</li>
	<li>A list item</li>
	<li>A list item</li>
</ol>

Buttons

Default Buttons

Button text 😄 Button text 
<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">

Large Buttons

Button text 😄 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">

Disabled Buttons

Button text 😄 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">

Full width Buttons

Button text 😄 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">

Ghost Buttons

Button text 😄 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">

Button Colours

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

Small Buttons

Button text 😄 Button text 
<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">

Form

Input

Disabled styles also work for textareas and other input form elements.

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

Textarea

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

Label

<label>A form label</label>

Legend and Fieldset

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

Radio group

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

<label>Font selector</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>

List group

A list of radio elements that makes them easy to select and understand.

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

Group item

A radio element that forms part of a group. These are generally used with a list-group or radio-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-classic selected">
	<input type="radio" value="gif-classic" checked="" name="export">
	<h3>Animated Gif</h3>
</label>

File Input

Style a file uploader. This is designed exclusively for use on modal windows. Might need something more flexible if we want to use it elsewhere.

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

Checkbox

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

Element

Error

We are setting display: block since the error message defaults to hidden.

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

Widget

Widget Title

This is the content for the widget.

  • A widget list.
  • A widget list.
  • A widget list.
  • A widget list.
<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>

Gallery

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

Large Gallery

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

Pagination

This gets generated by {% include pagination.html %}.

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

Social Icons

<a href="https://instagram.com/BrushNinjaApp/" class="social instagram"><span class="screen-reader-text">Brush Ninja on Instagram</span></a>
<a href="https://www.facebook.com/brushninja/posts/" class="social facebook"><span class="screen-reader-text">Brush Ninja on Facebook</span></a>
<a href="https://twitter.com/binarymoon" class="social twitter"><span class="screen-reader-text">Binary Moon (the Brush Ninja creator) on Twitter</span></a>

Loading

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

Button with description

A description for the button.

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

Horizontal Rule

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

Note

This is a note.

This is another note.

It can contain html or markdown.

This is another note.

It can contain html or markdown. 
<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>

Command Prompt

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

Colours

Typography

Buttons

Form

Element