CSS-UI

getting started

download the latest version and include it in your website

formatting

Description	Class	CSS
Show an element	ui-show	display: block;
Hide an element	ui-hide	display: none;
Clear an element	ui-clear	clear: both;
Make width 100%	ui-table-full	width: 100%;

Show when on desktop	ui-desktop	...
Show when on mobile	ui-mobile	...
Show when printing	ui-print	...

Left align text	ui-txt-left	text-align: left;
Right align text	ui-txt-right	text-align: right;
Center some text	ui-txt-center	text-align: center;
Uppercase some text	ui-txt-up	text-transform: uppercase;
Capitalize some text	ui-txt-cap	text-transform: capitalize;
Truncate some text	ui-txt-trunc	...
Stop text wrapping	ui-nowrap	white-space: nowrap;

grey text	ui-txt-grey	color: #C9C9C9;
blue text	ui-txt-blue	color: #2f87d9;
green text	ui-txt-green	color: #58C026;
red text	ui-txt-red	color: #ee5a4f;
orange text	ui-txt-orange	color: #F7AB2B;
yellow text	ui-txt-yellow	color: #F7AB2B;

Line seperator

ui-separate

...

list

item 1 right
item 2 right
item 3


	item 1 right
	item 2 right
	item 3

tabs

tab 1 tab 2 tab 3 tab 4

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


	tab 1
	tab 2
	tab 3
	tab 4

Lorem ipsum dolor sit ...

grid

class	columns	padding	width
ui-wrapper	-	0px	960px
ui-full	1	15px	930px
ui-half	2	15px	450px
ui-third	3	15px	290px
ui-fourth	4	15px	210px
ui-sixth	-	15px	610px

view grid demo

Description	Class
fixed header div	ui-fixed-header
fixed header clearing	ui-fixed-header-clear

view fixed header demo

messages

Info! Some new info is available [ui-msg-blue]

Success! Your account has been created [ui-msg-green]

Warning! This is a warning message [ui-msg-yellow]

Error! This action cannot be completed [ui-msg-red]

...

buttons

Next <a class="ui-btn-grey">

Send <a class="ui-btn-blue">

OK <a class="ui-btn-green">

Delete <a class="ui-btn-red">

Contact <a class="ui-btn-orange">

Close <a class="ui-btn-black">

Like <a class="ui-btn-pink">

Star <a class="ui-btn-yellow"> back to top

tables

#	First Name	Last Name	Email
1	John	Smith	john.smith@email.com
2	Sarah	Lee	sarahlee@email.com
3	Fred	Maison	fred.ma@email.com
4	George	McKay	g.mckay@email.com
5	Emily	Simon	emily.simon@email.com

#	First Name	Last Name	Email
1	John	Smith	john.smith@email.com
2	Sarah	Lee	sarahlee@email.com
3	Fred	Maison	fred.ma@email.com
4	George	McKay	g.mckay@email.com
5	Emily	Simon	emily.simon@email.com

#	First Name	Last Name	Email
1	John	Smith	john.smith@email.com
2	Sarah	Lee	sarahlee@email.com
3	Fred	Maison	fred.ma@email.com
4	George	McKay	g.mckay@email.com
5	Emily	Simon	emily.simon@email.com

#	First Name	Last Name	Email
1	John	Smith	john.smith@email.com
2	Sarah	Lee	sarahlee@email.com
3	Fred	Maison	fred.ma@email.com
4	George	McKay	g.mckay@email.com
5	Emily	Simon	emily.simon@email.com