Styleguide
Colours
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
<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
- A list item
- A list item
- A list item
- 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
<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
<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
<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
<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
<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
<a href="#" class="button">Button text</a>
<a href="#" class="button secondary">Button text</a>Small Buttons
<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
<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: "Comic Sans MS";"><input name="text-fonts" type="radio" value="Comic Sans MS">Comic Sans MS</label>
<label class="group" style="font-family: "Times New Roman";"><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
<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
<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" />Command Prompt
<div class="command">
www:/> MakeGif -BMr<br>
www:/> ..........<br>
www:/> <a href="#" class="file-download" download="animation.gif">Save!</a>
</div>