Using uigg

get uigg

download zip

You can download uigg from the official website

uigg download
get gitHub

You can also get uigg from gitHub

gitHub
download design template

We have prepared the design specification of rapid prototyping for designers

Adobe XD
quote

You also refer to files directly from the web

<link rel="stylesheet" href="https://ui.gg/uigg/styles/uigg.css"> <script src="https://ui.gg/uigg/js/uigg.js"></script>
CDN

You can use third-party network acceleration

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/mixice/uigg/styles/uigg.min.css"> <script src="https://cdn.jsdelivr.net/gh/mixice/uigg/js/uigg.min.js"></script>
plugin

Load the following plug-ins on demand jquery is must

<link rel="stylesheet" href="https://ui.gg/uigg/styles/swiper-bundle.min.css"> <script src="https://ui.gg/uigg/js/jquery.min.js"></script> <script src="https://ui.gg/uigg/js/less.min.js"></script> <script src="https://ui.gg/uigg/js/anime.min.js"></script> <script src="https://ui.gg/uigg/js/swiper-bundle.min.js"></script>
plugin CDN

You can use third-party network acceleration

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/mixice/uigg/styles/swiper-bundle.min.css"> <script src="https://cdn.jsdelivr.net/gh/mixice/uigg/js/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/mixice/uigg/js/less.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/mixice/uigg/js/anime.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/mixice/uigg/js/swiper-bundle.min.js"></script>

responsive rule

PC rule

.main defines the center of the content area, the maximum width is 1300px , add the class to the DOM

class="main"
mobile rule

.mobile defines the center of the content area, the maximum width is 640px , add the class to the DOM

class="mobile"
unit conversion

Uigg uses rem as the response unit, and the calculation rule is 100px = 1rem

layout preset

basic preset

Add the class to the DOM

class="block" class="clear" class="hide" class="show" class="center" class="float-left" class="float-right" class="flex" class="flex-column" class="full" class="full-device"
absolute preset

Add the class to the DOM

class="absolute" class="absolute-left" class="absolute-right" class="absolute-top" class="absolute-bottom" class="absolute-top-left" class="absolute-top-right" class="absolute-bottom-left" class="absolute-bottom-right" class="fixed" class="fixed-left" class="fixed-right" class="fixed-top" class="fixed-bottom" class="fixed-top-left" class="fixed-top-right" class="fixed-bottom-left" class="fixed-bottom-right"
special preset

Add the code to the DOM

<corner></corner> <shadow></shadow>

Preset function

alone

code

Add the javascript to the DOM

alone = $('element');

If you need manipulating character objects, must choose Z in $(document).ready()

$(function(){ $('element z'); });
effect display
view

anew

code

Add the class to the DOM

class="anew"

If you need a separate button, add the class to the DOM

class="anew btn"
effect display
view

anime

code

Add the class to the DOM

class="anime-pulse" class="anime-rotate" class="anime-fade-in" class="anime-fade-in-down" class="anime-fade-in-left" class="anime-fade-in-right" class="anime-fade-in-up" class="anime-fade-out" class="anime-fade-out-down" class="anime-fade-out-left" class="anime-fade-out-right" class="anime-fade-out-up" class="anime-flip-in-x" class="anime-flip-in-y" class="anime-flip-out-x" class="anime-flip-out-y" class="anime-zoom-in" class="anime-zoom-out" class="anime-shrink-in" class="anime-shrink-out" class="anime-shrink-in-enlarge" class="anime-shrink-out-enlarge"

If you want the some effects, add the class to the DOM

class="infinite" class="alternate"
effect display
view

button

code

Add the class to the DOM

class="btn"

Empty button

class="btn btn-empty"

Color button, please refer to color

class="btn bg-red"

Color empty button, please refer to color

class="btn co-red"

Button disable

class="btn btn-disable"

Button ico

<a class="btn"><i class="ico ico-search"></i><span>button</span></a>

Button flex group

<div class="btn-flex"> <a class="btn">button</a> <a class="btn">button</a> </div>
effect display
view

countdown

code

Add the code to the DOM

<section class="countdown"> <d>00</d> <h>00</h> <m>00</m> <s>00</s> </section>

Add the javascript to the DOM

<script> countDate="0000/00/00 00:00:00"; countdown(); </script>
effect display
view

disable

code

If you need to prevent users from viewing your code, add the function to the DOM

<script> disable(); </script> view

drop

code

Add the code to the DOM

<drop> <drop-list> <li><a>drop 1</a></li> <li><a>drop 2</a></li> <li><a>drop 3</a></li> </drop-list> </drop>

If you need to add a submenu, just add drop-list to li, you can have unlimited sets of dolls

effect display
view

font

web font

Add the class to the DOM

class="font-amaranth" class="font-avenir" class="font-clarendon" class="font-din" class="font-geo" class="font-gotham" class="font-lat" class="font-montserrat" class="font-moto" class="font-museo" class="font-neo" class="font-philosopher" class="font-portada" class="font-raleway" class="font-read" class="font-renault" class="font-roboto" class="font-santander" class="font-tanseek"

Webfont is an independent element, you can introduce it directly into your styles

@import url('https://ui.gg/lib/font/font.css');
local font

Add the class to the DOM (Local font is only valid on the computer side)

class="font-uigg" class="font-yahei" class="font-jhenghei" class="font-nsimsun" class="font-kaiti" class="font-lisu" class="font-youyuan" class="font-fangsong" class="font-xingkai" class="font-Xinwei" class="font-arial" class="font-tahoma"
effect display
view

form

code

Add the code to the DOM

<section class="form"> <form> <li><span>account</span> <input class="med" type="text"> <cite>Lorem ipsum dolor sit amet</cite> </li> <li><span>password</span> <input class="sml" type="password"> <cite class="co-red">Password error</cite> </li> <li><span>time</span> <div class="input sml"><i class="ico ico-calendar"></i><input type="text" class="calendar"></div> <span>to</span> <div class="input sml"><i class="ico ico-calendar"></i><input type="text" class="calendar"></div> <cite>Lorem ipsum dolor sit amet</cite> </li> <li><span>checkbox</span> <o class="radio"></o><span>radio</span> <o class="radio"></o><span>radio</span> <o class="checkbox"></o><span>checkbox</span> <cite>Lorem ipsum dolor sit amet</cite> </li> <li><span>select</span> <div class="select sml"> <i class="ico ico-alone-bottom"></i> <select><option>select</option><option>select</option></select> </div> <div class="select sml"> <i class="ico ico-alone-bottom"></i> <select><option>select</option><option>select</option></select> </div> <cite>Lorem ipsum dolor sit amet</cite> </li> <li><span>robot</span> <input class="min" type="text"> <em class="code center">OOOO</em> <cite>Lorem ipsum dolor sit amet</cite> </li> <li><span>code</span> <input class="min" type="text"> <a href="" class="btn code">get code</a> <cite>Lorem ipsum dolor sit amet</cite> </li> <li><span>message</span> <textarea class="big"></textarea> </li> <li><span>upload</span> <div class="upload max"> <div class="ico upload-group"><input type="file"><x class="ico"></x></div> <div class="ico upload-add"></div> </div> </li> <li class="resolve"><o class="checkbox"></o><span>I've read and agreed</span><a>"User agreement"</a></li> <li class="resolve"><button class="btn">cancel</button><button class="btn">submit</button></li> </form> </section>
effect display
view

fullscreen

code

Add the class to the DOM

class="fullscreen"
effect display
view

load

code

If you need to wait for the page to be displayed after loading, add the code to the DOM

<load></load>

mix

code

Add the class to the DOM

class="mix-abrazine" class="mix-hue" class="mix-multiply" class="mix-screen" class="mix-luminosity" class="mix-difference" class="mono" class="mono-click"
effect display
view

notify

code

Use notifyValue to define what you want to notify, run notify()

notifyValue = 'notify'; notify();
effect display
view

page

code

Add the code to the DOM

<page> <a href="" class="ico ico-alone-side-left"></a> <a href="" class="ico ico-alone-left"></a> <a href="">1</a> <a href="">2</a> <a href="" class="active">3</a> <a href="">4</a> <a href="">5</a> <a href="" class="ico ico-alone-right"></a> <a href="" class="ico ico-alone-side-right"></a> <span>1/12</span> <input type="text"> <button class="ico ico-arrow-enter"></button> </page>
effect display
view

random

code

Put the tags below into src and background , and you'll get random images

uigg-img uigg-product uigg-bg uigg-avatar uigg-color

If you need random text, add the code to the DOM

<uigg-title></uigg-title> <uigg-txt></uigg-txt>
effect display
view

rate

code

Add the code to the DOM

<rate></rate>

If you need edit it, add the class to the DOM

class="edit"
effect display
view

return

code

Add the class to the DOM

class="return"

scaler

code

Add the code to the DOM

<scaler> <input type="text" value="1"> </scaler>
effect display
view

smooth

code

Add the code to the DOM

<a class="smooth" href="#id"></a>
effect display
view

tab

code

Add the code to the DOM

<tab> <tab-list> <li class="active"><a>one</a></li> <li><a>two</a></li> <li><a>three</a></li> </tab-list> <tab-cont> <tab-group class="active">one</tab-group> <tab-group>two</tab-group> <tab-group>three</tab-group> </tab-cont> </tab>
effect display
view

table

code

Add the code to the DOM

<section class="table"> <table> <thead> <tr> <th>classify</th> <td>classify</td> <td>classify</td> <td>classify</td> </tr> </thead> <tbody> <tr> <th>list</th> <td>content</td> <td>content</td> <td>content</td> </tr> <tr> <th>list</th> <td>content</td> <td>content</td> <td>content</td> </tr> <tr> <th>list</th> <td>content</td> <td>content</td> <td>content</td> </tr> </tbody> <tfoot> <tr> <th>list</th> <td>content</td> <td>content</td> <td>content</td> </tr> </tfoot> </table> </section>
effect display
view

tip

code

Add the code to the DOM (You need jquery to .show() it)

<tip><i class="ico ico-circular-warn"></i><span>Lorem ipsum</span></tip>
effect display
view

title

code 1

Add the code to the DOM

<section class="title"> <em>~</em> <h3>title</h3> <em>~</em> </section>
code 2

Add the code to the DOM

<section class="title"> <h3>title</h3> <span>subtitle</span> </section>
code 3

Add the code to the DOM

<section class="title-flex"> <h3>title</h3> </section>
effect display
view

toggle

code

Add the code to the DOM

<o class="radio"></o> <o class="radio-done"></o> <o class="checkbox"></o> <o class="checkbox-done"></o> <o class="checkbox checkbox-all"></o> <o class="checkbox-cancel"></o> <o class="favorite"></o> <o class="star"></o> <o class="visibility"></o> <o class="mic"></o> <o class="volume"></o> <o class="muzak"></o> <o class="phonecard"></o> <o class="telecamera"></o> <o class="camera"></o> <o class="aim"></o> <o class="semaphore"></o> <o class="suitcase"></o> <o class="toggle"></o>
effect display
view

Mobile terminal

name

name code

Add the code to the DOM

<name> <a class="ico ico-return-left return"></a> <h2>name</h2><u></u> <a href="" class="ico ico-menu"></a> </name>
left name code

Add the code to the DOM

<name> <a class="ico ico-return-left return"></a> <h3>name</h3> <a href="" class="ico ico-menu"></a> </name>
logo name code

Add the code to the DOM

<name> <a class="ico ico-return-left return"></a> <name-logo><img src="../images/logo.svg"><h1>uigg</h1></name-logo><u></u> <a href="" class="ico ico-menu"></a> </name>
search name code

Add the code to the DOM

<name> <a class="ico ico-return-left return"></a> <name-search><input type="text" placeholder="Search"></name-search> <a href="" class="ico ico-menu"></a> </name>
effect display
view

muzak

code

Add the code to the DOM

<music> <audio src="../"></audio> </music>

If you need pause by default, add the class to the music

class="pause"
effect display
view

touch

code

Add the code to the DOM

class="touch-left" class="touch-right" class="touch-up" class="touch-down" class="touch-all" <script> $('.touch-up').bindmove('touchup','event'); $('.touch-down').bindmove('touchdown','event'); $('.touch-left').bindmove('touchleft','event'); $('.touch-right').bindmove('touchright','event'); $('.touch-all').bindmove('touchall','event'); </script>
effect display
view

Internal components

calendar

code

Add the class to the input

class="calendar"
effect display
view

pop

pop center code

Add the code to the DOM

<pop> <pop-main> <pop-title><h3>title</h3><a class="close"></a></pop-title> <pop-cont>article</pop-cont> <pop-solve> <a href="" class="btn">previous</a> <a href="" class="btn">cancel</a> <button class="btn">submit</button> <a href="" class="btn">confirm</a> </pop-solve> </pop-main> </pop>
pop choice code

Add the code to the DOM

<pop> <pop-choice> <pop-title><h3>title</h3><a class="close"></a></pop-title> <pop-cont>article</pop-cont> <pop-solve> <a href="" class="btn">previous</a> <a href="" class="btn">cancel</a> <button class="btn">submit</button> <a href="" class="btn">confirm</a> </pop-solve> </pop-choice> </pop>
pop sider code

Add the code to the DOM

<pop> <pop-sider class="anime-fade-in-left"> <pop-title><h3>title</h3><a class="close"></a></pop-title> <pop-cont>article</pop-cont> </pop-sider> </pop>
effect display
view

admin (Preview)

admin general template

We provide a common function management interface

login admin

External components

swiper

You can go to swiper to see more parameters. uigg only provides a few common models

Swiper API
swiper banner code

Add the code to the DOM

<section class="swiper swiper-banner"> <div class="swiper-wrapper"> <div class="swiper-slide"></div> <div class="swiper-slide"></div> <div class="swiper-slide"></div> </div> <div class="swiper-pagination"></div> <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> <script> var swiper = new Swiper('.swiper-banner', { spaceBetween: 10, centeredSlides: true, loop: true, keyboard: { enabled: true, }, autoplay: { delay: 5000, disableOnInteraction: false, }, pagination: { el: '.swiper-pagination', clickable: true, dynamicBullets: true, }, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, }); </script> </section>
swiper list code

Add the code to the DOM

<section class="swiper swiper-list"> <div class="swiper-wrapper"> <div class="swiper-slide"></div> <div class="swiper-slide"></div> <div class="swiper-slide"></div> </div> <div class="swiper-pagination"></div> <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> <script> var swiper = new Swiper('.swiper-list', { slidesPerView: 3, //slidesPerGroup: 3 loop: true, loopFillGroupWithBlank: true, pagination: { el: '.swiper-pagination', clickable: true, }, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, breakpoints: { 320: { slidesPerView: 1, spaceBetween: 10 }, 720: { slidesPerView: 2, spaceBetween: 15 }, 960: { slidesPerView: 3, spaceBetween: 20 }, }, }); </script> </section>
swiper vertical code

Add the code to the DOM

<section class="swiper swiper-vertical"> <div class="swiper-wrapper"> <div class="swiper-slide"></div> <div class="swiper-slide"></div> <div class="swiper-slide"></div> </div> <div class="swiper-pagination"></div> <script> var swiper = new Swiper('.swiper-vertical', { direction: 'vertical', slidesPerView: 1, spaceBetween: 10, mousewheel: true, keyboard: { enabled: true, }, pagination: { el: '.swiper-pagination', clickable: true, }, }); </script> </section>
swiper gallery code

Add the code to the DOM

<section class="swiper-gallery"> <div class="swiper gallery-top"> <div class="swiper-wrapper"> <div class="swiper-slide"></div> <div class="swiper-slide"></div> <div class="swiper-slide"></div> </div> <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> </div> <div class="swiper gallery-thumbs"> <div class="swiper-wrapper"> <div class="swiper-slide"></div> <div class="swiper-slide"></div> <div class="swiper-slide"></div> </div> </div> <script> var galleryThumbs = new Swiper('.gallery-thumbs', { spaceBetween: 10, slidesPerView: 4, freeMode: true, loop: true, loopedSlides: 5, //looped slides should be the same watchSlidesVisibility: true, watchSlidesProgress: true, }); var galleryTop = new Swiper('.gallery-top', { spaceBetween: 10, loop:true, loopedSlides: 5, //looped slides should be the same navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, thumbs: { swiper: galleryThumbs, }, }); </script> </section>
swiper relative code

Add the code to the DOM

<section class="swiper-relative"> <div class="swiper relative-top"> <div class="swiper-wrapper"> <div class="swiper-slide"></div> <div class="swiper-slide"></div> <div class="swiper-slide"></div> </div> </div> <div class="swiper relative-thumb"> <div class="swiper-wrapper"> <div class="swiper-slide"></div> <div class="swiper-slide"></div> <div class="swiper-slide"></div> </div> </div> <script> var relativeTop = new Swiper('.relative-top',{ loop: true, loopedSlides: 5, }); var relativeThumb = new Swiper('.relative-thumb',{ spaceBetween: 10, slidesPerView : 5, centeredSlides : true, loop: true, loopedSlides: 5, slideToClickedSlide: true, controller: { control: relativeTop, }, }); </script> </section>
swiper animate code

Add the code to the DOM

<section class="swiper swiper-animate"> <div class="swiper-wrapper"> <div class="swiper-slide"><div class="swiper-anime anime-fade-in"></div></div> <div class="swiper-slide"><div class="swiper-anime anime-fade-in"></div></div> <div class="swiper-slide"><div class="swiper-anime anime-fade-in"></div></div> </div> <div class="swiper-pagination"></div> <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> <script> var mySwiper = new Swiper('.swiper-animate', { pagination: { el: '.swiper-pagination', clickable: true, }, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, }); </script> </section>
swiper lug code

Add the code to the DOM

<section class="swiper-lug"> <div class="lug-thumbs"> <a id="lug-1" class="active"></a> <a id="lug-2"></a> <a id="lug-3"></a> </div> <div class="swiper lug-top"> <div class="swiper-wrapper"> <div class="swiper-slide"></div> <div class="swiper-slide"></div> <div class="swiper-slide"></div> </div> </div> <script> var mySwiper = new Swiper('.lug-top',{ //effect : 'fade', }); $('#lug-1').click(function(){ mySwiper.slideToLoop(0, 1000, false); }) $('#lug-2').click(function(){ mySwiper.slideToLoop(1, 1000, false); }) $('#lug-3').click(function(){ mySwiper.slideToLoop(2, 1000, false); }); lug(); </script> </section>
swiper hash code

Add the code to the DOM

<section class="swiper swiper-hash"> <div class="swiper-wrapper"> <div data-hash="one" class="swiper-slide center">one</div> <div data-hash="two" class="swiper-slide center">two</div> <div data-hash="three" class="swiper-slide center">three</div> </div> <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> <div class="swiper-pagination"></div> <script> var swiper = new Swiper(".swiper-hash", { spaceBetween: 30, hashNavigation: { watchState: true, }, pagination: { el: ".swiper-pagination", clickable: true, }, navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev", }, }); </script> </section>
swiper scrollbar code

Add the code to the DOM

<section class="swiper swiper-scroll"> <div class="swiper-wrapper"> <div class="swiper-slide"></div> <div class="swiper-slide"></div> <div class="swiper-slide"></div> </div> <div class="swiper-scrollbar"></div> <script> var swiper = new Swiper('.swiper-scroll', { scrollbar: { el: '.swiper-scrollbar', hide: true, }, }); </script> </section>
swiper coverflow code

Add the code to the DOM

<section class="swiper swiper-coverflow"> <div class="swiper-wrapper"> <div class="swiper-slide"></div> <div class="swiper-slide"></div> <div class="swiper-slide"></div> </div> <div class="swiper-pagination"></div> <script> var swiper = new Swiper('.swiper-coverflow', { effect: 'coverflow', grabCursor: true, centeredSlides: true, slidesPerView: 'auto', coverflowEffect: { rotate: 50, stretch: 0, depth: 100, modifier: 1, slideShadows: true, }, pagination: { el: '.swiper-pagination', }, }); </script> </section>
swiper parallax code

Add the code to the DOM

<section class="swiper swiper-parallax"> <div class="parallax-bg" style="background-image: url()" data-swiper-parallax="-23%"></div> <div class="swiper-wrapper"> <div class="swiper-slide"> <h3 data-swiper-parallax="-300"><span data-swiper-parallax="100"></span></h3> </div> <div class="swiper-slide"> <h3 data-swiper-parallax="-300"><span data-swiper-parallax="100"></span></h3> </div> <div class="swiper-slide"> <h3 data-swiper-parallax="-300"><span data-swiper-parallax="100"></span></h3> </div> </div> <script> var swiper = new Swiper('.swiper-parallax', { speed: 600, parallax: true, }); </script> </section>
effect display
view

General library

color

CSS functions

Uigg preset some common color functions

view

ico

uigg iconfont

Uigg fonts is a library free licensed font families and api for conveniently using the fonts via iconfont, img, unicode, symbol and css. We also provide delightful, beautifully crafted icons for common actions and items. Download them for use in your digital products for Android, iOS, and web

view