CSS UI Elements

Button


<a> <button> is prefered <div> <span> Code
Button
Button
Button Code .MButton
<a class="MButton">Button</a>
<button class="MButton">Button</button>
<div class="MButton">Button</div>
<span class="MButton">Button</span>
Button Disabled
Button Disabled
Button Disabled Code .MButton with attribute disabled="true"
<a class="MButton" disabled="true">Button</a>
<button class="MButton" disabled="true"Button</button>
<div class="MButton" disabled="true">Button</div>
<span class="MButton" disabled="true">Button</span>
Button Red
Button Red
Button Red Code .MButtonRed or .MButtonR
<a class="MButtonRed">Button</a>
<button class="MButtonRed">Button</button>
<div class="MButtonRed">Button</div>
<span class="MButtonRed">Button</span>
Button Orange
Button Orange
Button Orange Code .MButtonOrage or .MButtonO
<a class="MButtonOrange">Button</a>
<button class="MButtonOrange">Button</button>
<div class="MButtonOrange">Button</div>
<span class="MButtonOrange">Button</span>
Button Yellow
Button Yellow
Button Yellow Code .MButtonYellow or .MButtonY
<a class="MButtonYellow">Button</a>
<button class="MButtonYellow">Button</button>
<div class="MButtonYellow">Button</div>
<span class="MButtonYellow">Button</span>
Button Green
Button Green
Button Green Code .MButtonGreen or .MButtonG
<a class="MButtonGreen">Button</a>
<button class="MButtonGreen">Button</button>
<div class="MButtonGreen">Button</div>
<span class="MButtonGreen">Button</span>
Button Blue
Button Blue
Button Blue Code .MButtonBlue or .MButtonB
<a class="MButtonBlue">Button</a>
<button class="MButtonBlue">Button</button>
<div class="MButtonBlue">Button</div>
<span class="MButtonBlue">Button</span>
Button Violet
Button Violet
Button Violet Code .MButtonViolet or .MButtonV
<a class="MButtonViolet">Button</a>
<button class="MButtonViolet">Button</button>
<div class="MButtonViolet">Button</div>
<span class="MButtonViolet">Button</span>

Input Buttons


Code
<input type="button" value="Button"/>
<input type="submit" />
<input type="reset" />

Button Group


Code
<div class="MHButtonGroup">
	<button>A Button</button>
	<button>Another Button</button>
	<button>Yet Another Button</button>
</div>
Code
<div class="MVButtonGroup">
	<button>A Button</button>
	<button>Another Button</button>
	<button>Yet Another Button</button>
</div>

Input


A work in progress.
Code
<input type="checkbox" id="checkbox1"/>
<label for="checkbox1">Checkbox</label>

<input type="radio" name="radio" id="radio1"/>
<label for="radio1">Radio 1</label>

<input type="radio" name="radio" id="radio2"/>
<label for="radio2">Radio 2</label>
	
<select>
	<option>Select</option>
	<option>Option 1</option>
	<option>Option 2</option>
	<option>Option 3 With More Text</option>
</select>

<input type="number" value="0" min="0" max="100"/>

Text

Code
<input class="MWidthFull" type="text" placeholder="Input Text"/>
<input class="MWidthFull MInputInvisible" type="text" placeholder="Input with No Border"/>
<input class="MWidthFull" type="text" placeholder="Input Text Disabled" disabled="true"/>

<textarea class="MWidthFull" placeholder="Textarea"></textarea>
<textarea class="MWidthFull MInputInvisible" placeholder="Textarea with No Border"></textarea>
<textarea class="MWidthFull" placeholder="Textarea Disabled" disabled="true"></textarea>

Notes


Notes are rotated on document ready to make them look more organic.
They can be applied to nearly any block level element and have a default maximum width of 200px.

I'm in a white note.

Code .MNote
<p class="MNote">...</p>

I'm in a red note.

Code .MNoteRed or .MNoteR
<p class="MNoteRed">...</p>

I'm in a orange note.

Code .MNoteOrange or .MNoteO
<p class="MNoteOrange">...</p>

I'm in a yellow note.

Code .MNoteYellow or .MNoteY
<p class="MNoteYellow">...</p>

I'm in a green note.

Code .MNoteGreen or .MNoteG
<p class="MNoteGreen">...</p>

I'm in a blue note.

Code .MNoteBlue or .MNoteB
<p class="MNoteBlue">...</p>

I'm in a violet note.

Code .MNoteViolet or .MNoteV
<p class="MNoteViolet">...</p>

Layout


MHBoxLayout

Code
<div class="MHBoxLayout">
	...
</div>

MVBoxLayout

Code
<div class="MVBoxLayout">
	...
</div>

Well



I'm in a well.

Code
<div class="MWell">
	...
</div>

Widget



I'm in a widget.

Code
<div class="MWidget">
	...
</div>