Start

Just add to your HTML5 file:
<style type="text/css" media="screen"> <!-- @import "http://unpxre.pl/uw.min.css"; --> </style>
<script type="text/javascript" src="http://unpxre.pl/uw.min.js"></script>

Gallery

Example

Description

How to use

Just add class:
uw_photo
to any tag, inside anhor tag with href to image.

<a href="site/bmw1.jpg"><img src="site/bmw1T.jpg" class="
uw_photo
cute_img ml10" alt="Description"></a>
<a href="http://unpxre.pl/include/img/dk.png"><span class="
uw_photo
">xxx</span></a>

Elements to restyle

#uw_photo_box - Photo container, for example you can change background(#fff), border(4px solid rgba(0, 0, 0, 0.9)),     border-radius(4px) or padding(6px)
#uw_photo_box img - Photo, you can add some effect or change the border-radius(4px).
#uw_photo_box h3 - Description(alt), you can style the text
#uw_photo_curtain - Overlay, you can change the background(rgba(0, 0, 0, 0.8)) or set display to none.
#uw_close_gallery -Close button.
#uw_max_photo - Open in new tab button.

u.Clouds

Example

move mouse over me !
move mouse over me !

How to use

Just add class:
ucloud
to any tag and attribute
cloudcontent
with html code who contains content.
You can also create a few styles of uclouds, just add attribute
cloudstyle
with name of your class.

<span class="
ucloud
"
cloudcontent="YOLO AND SWAG !"
>move mouse over me !</span>
<span class="
ucloud
"
cloudstyle="red_cloud" cloudcontent="<img src='bmw1T.jpg'
>">move mouse over me !</span>

Default class for ucloud

.default_cloud
{
box-shadow: 0 0 2px #000;
border: 3px solid #0170D0;
text-sahdow: 0 0 2px #fff;
border-radius: 6px;
background: #fff;
padding: 5px;
}

u.Notify

Example

CLICK, to see alert CLICK, to see warning CLICK, to see info CLICK, to see success CLICK, to see error

How to use

ualert(msg); //alert
uwarning(msg); //warning
uinfo(msg); //info
uok(msg); //success
uerror(msg); //error

Elements to restyle

#unotify_box - Notify container, for example you can change position using top, left right, bottom. .unotify - Single notify, yuo can change margin etc
.unotify_image - Colour Box.
.unotify span - Notify content.
.unotify_info -Type of notify, you can change the colour box using: .unotify_info .unotify_image.
.unotify_ok -Type of notify, you can change the colour box using: .unotify_ok .unotify_image.
.unotify_alert -Type of notify, you can change the colour box using: .unotify_alert .unotify_image.
.unotify_warning -Type of notify, you can change the colour box using: .unotify_warning .unotify_image.
.unotify_error -Type of notify, you can change the colour box using: .unotify_error .unotify_image.

Classes of quickly access

Decorative elements

.noshadow - ( box-shadow: none !important; text-shadow: none !important; )
.curp - ( cursor: pointer; )
.cute_img - Decorate image create border and hover effect.
.cute_list - Decorate list.
.r - add contrast colors (for DEBUG)
.gradient_table - decorate table (gradient rows etc)
.br0, .br1 ... .br20 - ( border-radius: X px; )
.brtl0, .brtl1 ... .brtl20 - ( border-top-left-radius: X px; )
.brtr0, .brtr1 ... .brtr20 - ( border-top-right-radius: X px; )
.brbl0, .brbl1 ... .brbl20 - ( border-bottom-left-radius: X px; )
.brbr0, .brbr1 ... .brbr20 - ( border-bottom-right-radius: X px; )
input.bad - for bad data in input
input.good - for good data in input
.oh, oh-x, oh-x - ( overflow[-x, -y]: hidden; )
.ov, ov-x, ov-x - ( overflow[-x, -y]: visible; )

Text elements

.tal - ( text-align: left; )
.tar - ( text-align: right; )
.tac - ( text-align: center; )
.taj - ( text-align: justify; )
.fs0, .fs1 ... .fs50 - ( font-size: X; )
.b, .bold - ( font-weight: bold; )
.i, .italic - ( font-style: italic; )
.u, .underline - ( text-decoration: underline; )
.n, .normal - ( text-decoration: none; font-weight: normal; font-style: normal; )

Sizes elements

.w0, .w1 ... w100 - width in percents( width: X %; )
.wx0, .wx1 ... wx1000 - width in pixels( width: X px; )
.hx0, .hx1 ... hx1000 - height in pixels( height: X px; )
.taj - ( text-align: justify; )
.fs1, .fs2 ... .fs50 - ( font-size: X; )
.mx-20, ... .mx0 ... .mx120 - ( margin: X px; )
.mt-20, ... .mt0 ... .mt120 - ( margin-top: X px; )
.mb-20, ... .mb0 ... .mb120 - ( margin-bottom: X px; )
.ml-20, ... .ml0 ... .ml120 - ( margin-left: X px; )
.mr-20, ... .mr0 ... .mr120 - ( margin-right: X px; )
.px0, px1 ... .px50 - ( padding: X px; )
.pt0, pt1 ... .pt50 - ( padding-top: X px; )
.pb0, pb1 ... .pb50 - ( padding-bottop: X px; )
.pl0, pl1 ... .pl50 - ( padding-left: X px; )
.pr0, pr1 ... .pr50 - ( padding-right: X px; )

Others

.db - ( display: block; )
.dn - ( display: none; )
.di - ( display: inline; )
.dib - ( display: inline-block; )
.vam - ( vertical-align: middle; )
.vat - ( vertical-align: top; )
.vab - ( vertical-align: bottom; )
.pa - ( position: absolute; )
.pr - ( position: relative; )
.pf - ( position: fixed; )
.fly - ( float: left; display: block; )
.both - ( clear:both; )
.lx, .fl - ( float: left; )
.rx, .fr - ( float: right; )
#obox - ( position: absolute; width: 1000px; height: auto; left: 50%; margin-left: -500px; min-height: 100%; )
.starbg - add star image to the right-top corner.
.noselect - make text not selectable.
.ifl, .efl - fl & w47 if browser.width>1250
.ifr, .ef - fr & w47 if browser.width>1250

Validator & Forms

Example

Form 1.

Form 2.

Accept IT

How to use

mail field validtype="mail" validfieldname="Your email"
text field validtype="len" minlen="3" maxlen="90" validfieldname="Your Name"
number field validtype="num" minnum="21" maxnum="120" validfieldname="Your age"y
select validtype="select" defaultval="0" validfieldname="Best singier"
checkbox validtype="checkbox" validfieldname="Accept IT"
submit validclass="form2" and submit
must have class "validate"
, fields must have class contained in validclass

JS function for ajax check_form('.form2'); //returns true if form is valid

Others

CSS animations

tada - ( shakes and scales )
notify_image - animation used in u.Notify
notify_content - animation used in u.Notify
notify_hide - animation used in u.Notify



To use it, example:
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-name: tada;
animation-name: tada;