Elite UI 0.5

With a world growing exponentially in frontend development it’s time for a sleek, prompt UI. Elite UI has remastered the thinking of what a UI should be! Less DOM, more CSS and advanced SCSS for large modifications to be easily implemented.

Forms

Forms are a vital part of our UI for transacting client data. Elite UI allows you to rapidly build advanced, stylish, engaging forms that have an elegant extension for easy validation. See the next section below on how to apply data validation without adding Javascript!

You can have multiple icons and single buttons in one form field...

<!-- This is a simple field with icons, a text label and even a button icon -->
<div class="ewd field">
	<i class="code"></i>
	<i class="gears"></i>
	<input name="name" type="text" placeholder="Test"/>
	<i>Text</i>
	<i class="code"></i>
	<a href="#/" class="ewd button label"><i class="pencil"></i>Edit</a>
</div>

Text Edit

All fields are inline elements...

<!-- These fields will stack up against each other... -->
<div class="ewd field">
	<i class="user"></i>
	<input name="name" type="text" placeholder="Test"/>
</div>
<div class="ewd field">
	<i class="gears"></i>
	<input name="name" type="text" placeholder="Test"/>
</div>

Rounded field's...

<!-- By simply adding the class of rounded you will get a completely different looking field... -->
<div class="ewd field rounded">
	<i class="times-circle"></i>
	<input name="name" type="text" placeholder="Test"/>
</div>

Fields can be fluid to fill the parent container...

<!-- By adding the fluid class your field will grow to fill the parents content area... -->
<div class="ewd field fluid">
	<a href="#/" class="ewd button label"><i class="pencil"></i>Edit</a>
	<input name="name" type="text" placeholder="Test"/>
	<i class="user"></i>
	<a href="#/" class="ewd button"><i class="search"></i></a>
</div>

Edit

You can also have fields with the fill and flat style's...

<!-- By adding the class of fill or flat you will get a completely different looking field... -->
<div class="ewd field fill">
	<i class="times-circle"></i>
	<input name="name" type="text" placeholder="Test"/>
</div>
<div class="ewd field flat">
	<i class="check-circle"></i>
	<input name="name" type="text" placeholder="Test"/>
</div>
<!--  Rounded fill and flat style's...  -->
<div class="ewd field rounded fill">
	<i class="times-circle"></i>
	<input name="name" type="text" placeholder="Test"/>
</div>
<div class="ewd field rounded flat">
	<i class="check-circle"></i>
	<input name="name" type="text" placeholder="Test"/>
</div>

All different colors, fill and flat style's as well...

<!-- Change the field color by adding the class of either invert, gray, yellow, red, green, blue... -->
<div class="ewd field [ invert, gray, yellow, red, green, blue ]">
	<i class="gear"></i>
	<input name="name" type="text" placeholder="Inverted"/>
</div>
<!-- Add the fill class which can also be used with a color class... -->
<div class="ewd field [ fill ] [ invert, gray, yellow, red, green, blue ]">
	<i class="gear"></i>
	<input name="name" type="text" placeholder="Inverted"/>
</div>
<!-- Add the flat class which can also be used with a color class... -->
<div class="ewd field [ flat ] [ invert, gray, yellow, red, green, blue ]">
	<i class="gear"></i>
	<input name="name" type="text" placeholder="Inverted"/>
</div>

Strict Validation

Elite UI extends the simple form with advanced validation and there's no need for you to write any Javascript! All validation is strictly applied which'll prevent the user from inputting invalid data into a field. Truly this is modelled after the AngularJS type of validation with no Javascript having to be written at all!

Text & special characters only:

Text [A to Z] [0 to 9] characters only:

Purist text [A to Z] characters only:

Max [5] length:

Min [5] length:

Min [5] and max [10] length:

Lowercase only:

Uppercase only:

No whitespace:

Integer only:

Floating point number:

1.0

Max number:

500

Min number:

200

Min and max floating point numbers:

200.5 - 500.7

Typography|

Typography permeates our lives no matter where we are. Elite UI has put the focus back into typography and all the different elements that are built within modern browsers and even old ones. We use the open sans font and the light version to keep the fonts looking sleek and slim but legibility is the ultimate goal!

A A

A a Ca

<!-- It's the same code through to <h6>, all classes are optional -->
<h1 class=" [ normal ] [ upper lower caps ] [ center justify right ] ">
	Amazingly clean header 1
	<sub>- Optional sub heading</sub>
</h1>

Amazingly clean header 1_{- Optional sub heading}

Amazingly clean header 2_{- Optional sub heading}

Amazingly clean header 3_{- Optional sub heading}

Amazingly clean header 4_{- Optional sub heading}

Amazingly clean header 5_{- Optional sub heading}

Amazingly clean header 6_{- Optional sub heading}

h1 h2 h3 h4 h5 h6

<!-- It's the same code through to <h6>, all classes are optional -->
<h1 class=" [ normal ] [ upper lower caps ] [ center justify right ] ">
	<i class="icon cogs">
	Header with icon inline
	<sub>- Optional sub heading</sub>
</h1>

Header with icon inline_{- Optional sub heading}

A a Ca

<!-- All classes in square brakets are optional -->
<p class=" [ upper lower caps ] [ center justify right ] ">
	"Lorem ipsum dolor sit amet, consectetur adipiscing elit." ... <br/>
	<cite>- Inline citation example</cite>
</p>

<blockquote class=" [ upper lower caps ] [ center justify right ] ">
	Lorem ipsum dolor sit amet tincidunt... <br/>
	<cite>- Lawrence Turton Elite UI</cite>
</blockquote>

<p class=" [ upper lower caps ] [ center justify right ] ">
	<del>Using del tags for strikethrough effect</del> <br/>
	<em>em tags for emphasis</em> <br/>
	<small>All the small things matter</small> <br/>
	<mark>You can mark your text</mark> <br/>
	This is normal fomatted text <sup>But with a superscript</sup> <br/>
	This is normal fomatted text <sub>But with a subscript</sub> <br/>
	<ins>But what about inserted text?</ins> <br/>
	<b>Bolded text with the simple b tags</b> <br/>
	<strong>Strong text is bold and uppercase</strong> <br/>
	<i>I tags are for italic text</i>
</p>

"Lorem ipsum dolor sit amet, consectetur adipiscing elit." - Inline citation example vestibulum amet malesuada cursus. Aliquam dapibus rutrum risus, consectetur ultricies mauris pretium vel. Duis a neque at nulla auctor iaculis. Pellentesque lobortis ut eros eu tincidunt. Aliquam et sagittis tortor. Aliquam dictum ligula sapien, ut ornare nisl fermentum et.
- Lawrence Turton Elite UI

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tempus magna sit amet malesuada cursus. Aliquam dapibus rutrum risus, consectetur ultricies mauris pretium vel. Duis a neque at nulla auctor iaculis. Pellentesque lobortis ut eros eu tincidunt. Aliquam et sagittis tortor. Aliquam dictum ligula sapien, ut ornare nisl fermentum et. Vivamus efficitur enim quis enim varius, pretium tristique ante mollis. Proin auctor elit at felis suscipit condimentum. In vitae mollis mauris, in gravida nisi. Quisque sed libero ut dui dignissim venenatis eu a est. Nunc vulputate varius mi id luctus. Maecenas consequat viverra vulputate. Donec et maximus lectus, et faucibus libero.
- Lawrence Turton Elite UI

~~Using del tags for strikethrough effect~~
em tags for emphasis
All the small things matter
You can mark your text
This is normal fomatted text ^{But with a superscript}
This is normal fomatted text _{But with a subscript}
But what about inserted text?
Bolded text with the simple b tags
Strong text is bold and uppercase
I tags are for italic text

Text Columns

Note, this feature is experimental; columns are new to CSS3 and older browsers will just render the text as normal. This experimental feature allows you to quickly format text into and up to 6 columns which traditionally we where not able to do. You can choose from six resolutions they are massive, huge, large, medium, small and tiny.

2 3 4 5 6

1 2 3 4 5

<!-- You must apply the ewd class namespace, all other classes are optional -->
<p class="ewd [ desktop-1 ... desktop-6 ] 
			  [ massive-1 ... massive-5 ]
			  [ huge-1 ... huge-5 ]
			  [ large-1 ... large-5 ]
			  [ medium-1 ... medium-5 ]
			  [ small-1 ... small-5 ]
			  [ tiny-1 ... tiny-5 ]">
	The paragraph text ...
</p>
<!-- This is our live example only using three resolutions but you can use more -->
<p class="ewd desktop-4 massive-2 medium-1">Morbi iaculis lectus...</p>

Morbi iaculis lectus non lacus lacinia auctor. Cras imperdiet mauris nec feugiat pulvinar. Fusce dolor libero, feugiat ultricies tincidunt ut, finibus ac nulla. Suspendisse gravida faucibus pharetra. Duis consequat lacus ac varius gravida. Fusce mattis sapien vitae mi faucibus, nec malesuada nisi condimentum. Cras fringilla lorem nibh, vel consequat velit faucibus a. Fusce nec auctor dui. Morbi ultricies viverra diam, eget elementum nibh rutrum a. Phasellus condimentum venenatis facilisis. Pellentesque a ipsum id leo pretium elementum at eget est. Nulla imperdiet interdum diam non facilisis. Nulla consequat auctor dui non tempor. Nulla facilisi. Suspendisse molestie quis mi sit amet interdum. Curabitur sit amet erat eleifend diam molestie vulputate nec ac augue. In hac habitasse platea dictumst. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ac elit risus. Nulla varius augue quam, sit amet imperdiet lorem pharetra vitae. Suspendisse sagittis lectus quis dui faucibus, non pellentesque enim elementum. Etiam rutrum tincidunt sem nec pretium. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras consequat mollis quam, eu porttitor leo. Vestibulum sit amet dignissim velit. Proin quis porttitor magna. Aenean vel leo nulla.

Grid System

The grid system provides a standard grid, divisional grid and a table layout grid. The traditional grid is defined by the main parent and then child elements have classes applied to them for their column span. We also have divisional grids and grid rows that divide the child columns up for different resolutions. The table layout grid which does require DOM breakpoints allows advanced alignment that could not have been done with traditional methods such as matching column heights and vertical content alignment.

Here's a grid system that only uses three resolutions but you can have up to six resolutions if you wish...

View Source

<!-- You must apply the ewd and grid classes, default grid span column is 16 -->
<div class="ewd grid [ desktop-1 ... desktop-16 ] 
			  [ massive-1 ... massive-15 ]
			  [ huge-1 ... huge-15 ]
			  [ large-1 ... large-15 ]
			  [ medium-1 ... medium-15 ]
			  [ small-1 ... small-15 ]
			  [ tiny-1 ... tiny-15 ]">
	<!-- Define your grid here... -->
</div>
<!-- The code here -->
<div class="ewd grid desktop-16 massive-8 medium-4">
	<div class="row">
		<div></div>....
	</div>
</div>

Here's a row that overrides the default division of the main grid...

View Source

<div class="ewd grid desktop-16 massive-8 medium-4">
	<div class="row">
		<div></div>...
	</div>
	<!-- Here is where we override the default grid, now desktop is 6, massive 2 and medium 1 -->
	<div class="row desktop-6 massive-2 medium-1">
		<div></div>...
	</div>
</div>

Next we have the ability to change the dimensions of the columns within the grid...

View Source

<div class="ewd grid">
	<div class="row">
		<div class="desktop-10 massive-5 medium-10"><br/></div>
		<div class="desktop-6 massive-10 medium-5"><br/></div>
	</div>
</div>

Finally, for the standard grid system you could just have a divisional row on it's own or define column specific sizes...

View Source

<!-- the row must have the ewd class -->
<div class="ewd row desktop-6 massive-3 medium-2">
	<div></div>...
</div>
<div class="ewd row">
	<div class="desktop-10 massive-5 medium-10"></div>
	<div class="desktop-6 massive-10 medium-5"></div>
</div>

Padding

Padding is important for separating content between columns. Sometimes you require more or less padding and you may wish to change the padding depth depending upon different screen resolutions. You have a range in pixels with each value incremented by 5, so for example 10, 15, 20 ... all the way to ... 85. We're just using three resolutions with three padding options each, but in reality you have massive, huge, large, medium, small and tiny.

35 45 55

20 25 30

10 15 20

<!-- Full grid example -->
<div class="ewd grid desktop-2 padding-desktop-55">
	<div class="row">
		<div></div>
		<div></div>
	</div>
	<!-- Row overide optional-->
	<div class="row padding-desktop-25">
		<!-- Cell overide as well -->
		<div class="padding-desktop-10"></div>
		<div></div>
	</div>
</div>
<!-- 
	Single grid row example.... 
-->
<div class="ewd row 
			desktop-4 padding-desktop-55 
			massive-2 padding-massive-25 
			medium-1 padding-medium-10">
	<div></div>
	<div></div>
	<!-- You may also overide padding via cells-->
	<div class="padding-desktop-10"></div>
	<div></div>
</div>

By simply adding the class of even-padding to a row or grid element, you'll get a nice even padding...

Flex / Table Grid

The flex grid is extremely powerful for layouts in modern browsers with none of the drawbacks, even in older browsers with no JS! This works in all modern browsers except for opera mini and internet explorer 9, however the flex grid will fallback to the table layout automatically. This gives a very similar feel with the ability to align content vertically, match column heights, column pushing and padding to name a few but not as powerful as the flex API. Note the fallback requires extra DOM but it is optional.

No styling tricks here! Column heights match even when rows are divided up...

View Source

<!-- You must provide classes for all six resolutions for fallback support.
If your just planning to only support the flex box model, you only need to include classes for specific resolutions-->
<div class="ewd grid flex desktop-4 massive-3 huge-2 medium-2 small-1 tiny-1">
	<div class="row">
		<div>Cell 1</div>
		<div class="break"></div>
		<!-- You must provide a break div for fallback support such as ie 10 & 9 -->
		<div>Cell 2</div>
		<div class="break"></div> ...
		<!-- For the last cell don't include break as it's not necessary -->
		<div>Cell 8</div>
	</div>
</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce condimentum, diam sit amet ultricies ultricies, neque turpis maximus justo, sit amet ullamcorper ante mauris sed quam.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce condimentum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce condimentum, diam sit amet ultricies ultricies, neque turpis maximus justo, sit amet ullamcorper ante mauris sed quam.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce condimentum

We can align content vertically even in the fallback grid system...

View Source

<!--  You can have vertical alignment set on the grid -->
<div class="ewd grid flex [ middle top bottom ] desktop-4 massive-4 huge-2 medium-2 small-1 tiny-1">
		<div class="row">
			<div class="middle">I'm aligned in the middle</div>
			<div class="break"></div>
			<div class="top">I'm aligned to the top</div>
			<div class="break"></div>
			<div class="bottom">I'm aligned to the bottom</div>
			<div class="break"></div>
			<div>I'm a larger column...</div>
		</div>
		<!-- You can set alignment on the row which overrides the main grid alignment -->
		<div class="row [ middle top bottom ]">
			<!-- Cell always overrides row and grid vertical alignment -->
			<div class=" [ middle top bottom ]">Cell 1</div>
			<div class="break"></div>...
		</div>
</div>

I'm aligned in the middle of the Y or vertical axis

I'm aligned to the top

I'm aligned to the bottom

I'm a larger column to demonstrate the power of the flex grid and the control it offers to everyone! I'm a larger column to demonstrate the power of the flex grid and the control it offers to everyone! I'm a larger column to demonstrate the power of the flex grid and the control it offers to everyone!

We can align content vertically even in the fallback grid system...

View Source

<!--  This example shows division row overrides -->
<div class="ewd grid flex desktop-4 massive-4 huge-2 medium-2 small-1 tiny-1">
	<!-- Row overrides column widths on desktop and massive resolution -->
	<div class="row desktop-2 massive-2 huge-1">
		<div>I'm some content</div>
		<div class="break"></div>
		<div>I'm aligned to the bottom</div>
		<div class="break"></div>
		<div class="middle">I'm aligned in the middle of the Y or vertical axis</div>
		<div class="break"></div>
		<div>I'm a larger column to demonstrate</div>
	</div>
</div>

I'm some content

I'm aligned to the bottom

I'm aligned in the middle of the Y or vertical axis

With flex we can override with cell specific classes and push is available with the table fallback...

View Source

<div class="ewd grid flex">
	<div class="row">
		<div class="desktop-6 massive-10 medium-15">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce condimentum, diam sit amet ultricies ultricies.</div>
		<div class="break"></div>
		<div class="desktop-10 massive-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce condimentum, diam sit amet ultricies ultricies.</div>
	</div>
</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce condimentum, diam sit amet ultricies ultricies.

Buttons

We’ve remastered buttons that are now simplistic and minimal in markup. No more remembering twenty to fifty different combinations, with just a little DOM you can easily produce a range of button combinations.

Single buttons...

<!-- Single buttons use anchor's which must have the classes ewd and buttons.
All other classes are optional -->

<a href="#/" class="ewd button"><i class="pencil"></i></a>
<a href="#/" class="ewd button label"><i class="pencil"></i>Edit</a>
<a href="#/" class="ewd button label right"><i class="pencil"></i>Edit</a>
<a href="#/" class="ewd button">Text</a>

Edit Edit Text

Single group of buttons...

<!-- To create a group of buttons first create a div which must have the classes ewd and buttons.
Inside of the div we have anchors which are the individual buttons that make up the group.
You can have all kinds of different button combinations in a single group. -->

<!-- You optionally can define a vertical break point at any of the six resolutions to stack the buttons vertically. -->

<div class="ewd buttons 
	[ vertical-tiny vertical-small vertical-medium vertical-large vertical-huge vertical-massive ]">
	<a class="label" href="#/"><i class="align-left"></i>Left</a>
	<a href="#/"><i class="align-center"></i></a>
	<a class="label right" href="#/"><i class="align-right"></i>Right</a>
</div>

Left Right

You can group, groups of buttons...

<!-- Group's of grouped buttons are extremely flexible including breaking and vertical stacking.
First we have the main div which must have the classes ewd and buttons.
The optional break and vertical classes target all six resolutions.
Break will break up the entire group into smaller single groups.
Vertical will target all group's, vertically stacking the buttons at the specified resolution. -->

<div class="ewd buttons 
	[ break-tiny ... break-massive ] 
	[ vertical-tiny ... vertical-massive ]">
	<!-- Next the inner div is a single button group container. -->
	<div>
		<!-- Finally the anchors which are the buttons within the group. -->
		<a href="#/"><i class="sort-amount-asc"></i></a>
		<a href="#/"><i class="sort-amount-desc"></i></a>
		<a href="#/"><i class="sort-alpha-asc"></i></a>
		<a href="#/"><i class="sort-alpha-desc"></i></a>
	</div>
	<!-- Second group. -->
	<div>
		<!-- Just like a single group you can have multiple button combinations. -->
		<a class="label" href="#/"><i class="home"></i>Left</a>
		<a class="label" href="#/"><i class="cloud"></i>Icon</a>
	</div>
	<!-- Third group. -->
	<div>
		<!-- Here's a group consisting of two right label buttons. -->
		<a class="label right green" href="#/"><i class="bullseye"></i>Right</a>
		<a class="label right" href="#/"><i class="briefcase"></i>Icon</a>
	</div>
</div>

Left Icon

Right Icon

Change the color scheme of buttons, groups and groups of grouped buttons...

<!-- Change the color scheme by adding the class gray, invert, yellow, red, green or blue.
Here's a single labeled button with a yellow color scheme. -->
<a href="#/" class="ewd button label yellow"><i class="gratipay"></i>Yellow</a>

<!-- Next we can change the color scheme of a group of buttons. -->
<div class="ewd buttons yellow">
	<a class="label" href="#/"><i class="align-left"></i>Left</a>
	<a href="#/"><i class="align-center"></i></a>
	<a class="label right" href="#/"><i class="align-right"></i>Right</a>
</div>

<!-- Finally we can change the color scheme of groups of grouped buttons. -->
<div class="ewd buttons yellow">
	<div>
		<a href="#/"><i class="sort-amount-asc"></i></a>
		...
	</div>
	<div>
		...
	</div>
</div>

Default Gray Inverted Yellow Red Green Blue

Fill color scheme...

<!-- By using the combination of class fill with a color class we get a varied effect.
Here's a single labeled button with a filled yellow color scheme. -->
<a href="#/" class="ewd button label fill yellow"><i class="gratipay"></i>Yellow</a>

<!-- Next we can also apply this to a single group. -->
<div class="ewd buttons fill yellow">
	<a class="label" href="#/"><i class="align-left"></i>Left</a>
	<a href="#/"><i class="align-center"></i></a>
	<a class="label right" href="#/"><i class="align-right"></i>Right</a>
</div>

<!-- Finally we can also apply this to groups of grouped buttons. -->
<div class="ewd buttons fill yellow">
	<div>
		<a href="#/"><i class="sort-amount-asc"></i></a>
		...
	</div>
	<div>
		...
	</div>
</div>

Default Gray Inverted Yellow Red Green Blue

Optionally rounded...

<!-- By adding the class rounded we can round the edges of a single button, 
group of buttons or group of grouped buttons.
Here's an example of a single button. -->
<a href="#/" class="ewd button rounded"><i class="pencil"></i></a>


<!-- We can also use the same class on a single group of buttons.
Note that vertical stacking will disable rounded corners. -->
<div class="ewd buttons rounded">
	...
</div>

<!-- Also we can round the corners of groups of grouped buttons.
Also if you break the groups up this will also work.
Note that vertical stacking will disable rounded corners. -->
<div class="ewd buttons rounded">
	<div>
		...
	</div>
	<div>
		...
	</div>
</div>

Edit Edit

Optionally animated...

<!-- We can use the class animate on either a button, group of buttons, or groups of grouped buttons.
This will animate labeled icons in and out of view. -->
<a href="#/" class="ewd button fill gray label animate"><i class="pencil"></i>Edit</a>

<!-- Animate a group of buttons -->
<div class="ewd buttons fill gray animate">
	<a href="#/" class="label"><i class="pencil"></i>Edit</a>
	...
</div>

<!-- Animate labeled icons within group's of grouped buttons. -->
<div class="ewd buttons animate">
	<div>
		<a href="#/" class="label"><i class="pencil"></i>Edit</a>
		...
	</div>
	<div>
		...
	</div>
</div>

Edit

Edit Edit

Optionally disabled...

<!-- You can add the class disabled to a single button, group of buttons and group of grouped buttons.
This will stop all events on anchor's via CSS. -->
<a href="#/" class="ewd button label disabled"><i class="bell"></i>Disabled</a>

<!-- Disable a group of buttons. -->
<div class="ewd buttons disabled">
	<a href="#/" class="label"><i class="inbox"></i>Stop</a>
	<a href="#/" class="label right"><i class="cloud-upload"></i>Stop</a>
</div>

<!-- Disable groups of grouped buttons. -->
<div class="ewd buttons disabled">
	<div>
		...
	</div>
	<div>
		...
	</div>
</div>

Disabled

Stop Stop

Various sizes with optional animation...

<!-- The default size doesn't require any class.
However you also have 3 other sizes massive, large and small.
These sizes can be on a single button, group of buttons or group of grouped buttons.
All sizes can be optionally animated. -->

<a href="#/" class="ewd button [ massive large small ] [ animate ] label "><i class="bell"></i>Size</a>

<!-- Group of buttons. -->
<div class="ewd buttons [ massive large small ] [ animate ] "></div>

<!-- Group of grouped buttons. -->
<div class="ewd buttons [ massive large small ] [ animate ]">
	<div>
		...
	</div>
	<div>
		...
	</div>
</div>

Default Default
Default Default

Massive Massive
Massive Massive

Large Large
Large Large

Small Small
Small Small

Toggle buttons, groups and groups of buttons...

<!-- Toggle a single button with animation. -->
<a href="#/" class="ewd button fill gray label animate toggle"><i class="pencil"></i>Toggle</a>

<!-- Toggle buttons with animation in a single group. -->
<div class="ewd buttons fill gray animate toggle">
	<a href="#/" class="label"><i class="pencil"></i>Option 1</a>
	<a href="#/" class="label right"><i class="pencil"></i>Option 2</a>
</div>

<!-- Toggle groups of grouped buttons with animation. -->
<div class="ewd buttons fill gray animate">
	<div>
		...
	</div>
	<div>
		...
	</div>
</div>

Elite UI 0.5

Forms

Strict Validation

Typography|

Amazingly clean header 1- Optional sub heading

Amazingly clean header 2- Optional sub heading

Amazingly clean header 3- Optional sub heading

Amazingly clean header 4- Optional sub heading

Amazingly clean header 5- Optional sub heading

Amazingly clean header 6- Optional sub heading

Header with icon inline- Optional sub heading

Text Columns

Grid System

Padding

Flex / Table Grid

Buttons

Elite UI

Amazingly clean header 1_{- Optional sub heading}

Amazingly clean header 2_{- Optional sub heading}

Amazingly clean header 3_{- Optional sub heading}

Amazingly clean header 4_{- Optional sub heading}

Amazingly clean header 5_{- Optional sub heading}

Amazingly clean header 6_{- Optional sub heading}

Header with icon inline_{- Optional sub heading}