logo

CSS UI is a set of open-source style sheets designed for rapid development of web apps

download latest (v1.6) GitHub
angular-plugins
formatting grid fixed header messages buttons tables

Advertisement

336x280_V2 linode

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

tabs

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.

Lorem ipsum dolor sit ...
back to top

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

back to top
Description Class
fixed header div ui-fixed-header
fixed header clearing ui-fixed-header-clear

view fixed header demo

back to top

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]

...

back to top

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
back to top

MIT License

a code everywhere project