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.

Elite Web Design UI Nottingham

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

Text Edit

All fields are inline elements...

Rounded field's...

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

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

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





































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:

1

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

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


A a Ca

"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
1 2 3 4 5

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
















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

View Source






















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

View Source


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

View Source










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.





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
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
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce condimentum
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
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce condimentum

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

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

I'm some content
I'm aligned to the bottom
I'm aligned in the middle of the Y or vertical axis
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!

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce condimentum, diam sit amet ultricies ultricies.
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...
Edit Edit Text
Single group of buttons...
You can group, groups of buttons...
Change the color scheme of buttons, groups and groups of grouped buttons...
Default Gray Inverted Yellow Red Green Blue

Fill color scheme...
Default Gray Inverted Yellow Red Green Blue
Optionally rounded...
Optionally animated...
Edit
Optionally disabled...
Disabled
Various sizes with optional animation...
Default Default
Default Default

Massive Massive
Massive Massive

Large Large
Large Large

Small Small
Small Small
Toggle buttons, groups and groups of buttons...
Toggle
G1 G2