UIGG Document

get UIGG

download zip

You can download UIGG from the official website

download

download design template

We have prepared the design specification of rapid prototyping for designers

Adobe XD figma

get gitHub

You can get UIGG from gitHub (Click the code block to copy it)

//github.com/mixice/uigg.git gitHub

get npm

You can get UIGG from npm

npm i uigg

Add style module

import 'uigg/uigg.css'

Add javascript module

import 'uigg'

quote

You also refer to files directly from the web

CDN

unpkg

You can use unpkg

https://unpkg.com/uigg

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"

mobile mode

If you need to force the mobile mode, add the javascript to the DOM

mobile(true)

unit conversion

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

layout preset

basic

Add the class to the DOM

class="block" class="cover" class="contain" class="center" class="clear" class="hide" class="show" class="hide-important" class="show-important" class="single" class="only-web" class="only-mob" class="float-left" class="float-right" class="float-left-important" class="float-right-important" class="flex" class="flex-auto" class="flex-column" class="full" class="full-device" class="transparent" class="transition"

absolute

The logic of absolute and fixed positions

1 2 3 4 5 6 7 8 9

Add the class to the DOM

class="absolute" class="absolute-1" class="absolute-2" class="absolute-3" class="absolute-4" class="absolute-5" class="absolute-6" class="absolute-7" class="absolute-8" class="absolute-9" class="fixed" class="fixed-1" class="fixed-2" class="fixed-3" class="fixed-4" class="fixed-5" class="fixed-6" class="fixed-7" class="fixed-8" class="fixed-9"

wide

wide can quickly set the width of elements, usually used for form

wide-10 wide-20 wide-30 wide-40 wide-50 wide-60 wide-70 wide-80 wide-90 wide

Add the class to the DOM

class="wide" /* 100% */ class="wide-10" class="wide-20" class="wide-30" class="wide-40" class="wide-50" class="wide-60" class="wide-70" class="wide-80" class="wide-90"

load

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

corner

Add the class to the DOM

class="corner"

Styles demo

.corner::after {border-width: 0 10px 10px 10px;border-bottom-color: white;top: -10px;}

shadow

Add the class to the DOM

class="shadow"

Styles demo

.shadow::after {background-color: white;box-shadow: 0 5px 10px white;}

adrift

Add the class to the DOM

class="adrift"

Styles demo

.adrift {filter: drop-shadow(0 10px 10px var(--color));}

return

Add the class to the DOM

class="return"

alert

code

Add the javascript to the DOM

alert('alert')

If you need confirm, run confirm()

confirm('confirm')

If you need prompt, run prompt()

prompt('prompt')

effect display

view

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

anime

code

Add the class to the DOM

class="anime-spasm" class="anime-rotate" class="anime-beat-x" class="anime-beat-y" class="anime-beat-z" class="anime-beat-r" 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-bounce-in" class="anime-bounce-in-down" class="anime-bounce-in-left" class="anime-bounce-in-right" class="anime-bounce-in-up" class="anime-bounce-out" class="anime-bounce-out-down" class="anime-bounce-out-left" class="anime-bounce-out-right" class="anime-bounce-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-zoom-in-enlarge" class="anime-zoom-out-enlarge" 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" class="reverse"

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

<a class="btn" disabled>button</a>

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

clue

code

Add the attribute to the DOM, If the element has a title, the value of clue will become the value of title

clue=""

You can add left or right or bottom to change the position of the clue

effect display

view

cookie

code

Save cookies, add the javascript to the DOM

setCookie('name','value','time')

Get cookies, add the javascript to the DOM

getCookie('name')

effect display

view

copy

Warning: This function can work normally only after obtaining user clipboard authorization or under the https security domain

code

Add the attribute to the DOM

copy-val copy-btn

If you need more than one, set different values for different groups

copy-val="copy1" copy-btn="copy1"

If you need select copy, add the attribute to the DOM

copy-select

effect display

view

countdown

code

Add the code to the DOM

Add the javascript to the DOM

countDate = '0000/00/00 00:00:00' countdown()

effect display

view

crumb

code

Add the code to the DOM

<crumb> <li><a href="/">home</a></li> <li><a href="">layer</a></li> <li><a href="">layer</a></li> </crumb>

effect display

view

disable

code

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

disable() view

drop

code

Add the code to the DOM

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

effect display

view

empty

code

Add the code to the DOM

You can also customize the content, add the code to the DOM

If vertical arrangement is required, add DOM around the content

effect display

view

fold

code

Add the code to the DOM

<fold> <fold-group> <fold-title><h5>title</h5><u></u></fold-title> <fold-cont>article</fold-cont> </fold-group> </fold>

If you need to expand all by default, you only need to add the show attribute to the fold

show

effect display

view

font

web font

Add the class to the DOM

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

Set font-family in CSS, because UIGG uses UIGG fonts by default, you maybe need !important

font-family: 'aclonica' font-family: 'aller' font-family: 'amaranth' font-family: 'avenir' font-family: 'clarendon' font-family: 'din' font-family: 'encode' font-family: 'geo' font-family: 'gotham' font-family: 'lat' font-family: 'montserrat' font-family: 'moto' font-family: 'museo' font-family: 'neo' font-family: 'overpass' font-family: 'philosopher' font-family: 'portada' font-family: 'raleway' font-family: 'read' font-family: 'renault' font-family: 'roboto' font-family: 'santander' font-family: 'steel' font-family: 'tanseek' font-family: 'ubuntu'

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

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

CDN

@import url('//cdn.jsdelivr.net/npm/uigg/font/font.min.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

filter

Add the code to the DOM

<section class="form filter"> <form> <li><span>name</span><input type="text"></li> <li><span>time</span><input type="date"></li> <li><span>select</span><div class="select"><select><option selected disabled>select</option><option>select</option></select></div></li> <li><a class="btn">search</a></li> </form> </section>

form

Add the code to the DOM

<section class="form"> <form> <li><span>account</span> <input class="wide-20" type="text" required> <cite>Lorem ipsum dolor sit amet</cite> </li> <li><span>password</span> <div class="input wide-20"><input type="password" required><o class="password"></o></div> <cite class="co-red">Password error</cite> </li> <li><span>scaler</span> <scaler><input step="1" min="0" max="100" value="1"></scaler> <cite>Lorem ipsum dolor sit amet</cite> </li> <li><span>radio</span> <div class="parent"> <o class="radio"></o><span>radio</span> <o class="radio"></o><span>radio</span> <o class="radio"></o><span>radio</span> </div> <cite>Lorem ipsum dolor sit amet</cite> </li> <li><span>checkbox</span> <div class="parent"> <o class="checkbox"></o><span>checkbox</span> <o class="checkbox"></o><span>checkbox</span> <o class="checkbox checkbox-all"></o><span>checkbox all</span> </div> <cite>Lorem ipsum dolor sit amet</cite> </li> <li><span>toggle</span> <o class="toggle"></o> <cite>Lorem ipsum dolor sit amet</cite> </li> <li><span>progress</span> <progress class="wide-20" max="100" value="50"></progress> </li> <li><span>range</span> <input class="wide-20" type="range" min="0" max="100" step="0" value="50"> <cite>Lorem ipsum dolor sit amet</cite> </li> <li><span>file</span> <input class="wide-30" type="file"> <cite>Lorem ipsum dolor sit amet</cite> </li> <li><span>color</span> <input type="color"> <cite>Lorem ipsum dolor sit amet</cite> </li> <li><span>date</span> <input class="wide-20" type="date"> <cite>Lorem ipsum dolor sit amet</cite> </li> <li><span>datetime</span> <input class="wide-20" type="datetime-local"> <cite>Lorem ipsum dolor sit amet</cite> </li> <li><span>month</span> <input class="wide-20" type="month"> <cite>Lorem ipsum dolor sit amet</cite> </li> <li><span>week</span> <input class="wide-20" type="week"> <cite>Lorem ipsum dolor sit amet</cite> </li> <li><span>time</span> <input class="wide-20" type="time"> <cite>Lorem ipsum dolor sit amet</cite> </li> <li><span>select</span> <div class="select wide-20"><select><option selected disabled>select</option><option>select</option></select></div> <cite>Lorem ipsum dolor sit amet</cite> </li> <li><span>robot</span> <input class="wide-10" type="text"> <a class="code" uigg="color"><img uigg="color"></a> <cite>Lorem ipsum dolor sit amet</cite> </li> <li><span>code</span> <input class="wide-10" type="text"> <a class="btn code">get code</a> <cite>Lorem ipsum dolor sit amet</cite> </li> <li><span>message</span> <textarea class="wide"></textarea> </li> <li><span>editor</span> <div class="editor-simple"></div> </li> <li><span>images</span> <div class="upload"> <div class="ico upload-group"><input type="file" accept=".jpg,.jpeg,.png,.webp,.gif"><horn class="ico"></horn></div> <div class="ico upload-add"></div> </div> <cite>Lorem ipsum dolor sit amet</cite> </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 btn-submit">cancel</button><button class="btn btn-submit">submit</button></li> </form> </section>

effect display

view

fullscreen

code

Add the class to the DOM

class="fullscreen"

effect display

view

hop

code

Add the class to the DOM, if you need align right or align bottom, add attribute right or bottom or center to hop

effect display

view

horn

code

Add the class to the DOM, if you need align left, add attribute left to horn

effect display

view

language

To use the language plug-in, you need to create lang/ directory, create language json file in the directory, For example, English: en.json

set language cookie

Add the attribute to the DOM, json is the json file name in the lang/

lang-set="json"

get language cookie

Add the javascript to the DOM

getCookie('lang')

language mark

Add the attribute to the DOM, lang-name is the structure in json, lang to html, lang-placeholder to placeholder, lang-value to value, lang-content to content

lang="lang-name" lang-placeholder="lang-name" lang-value="lang-name" lang-content="lang-name"

effect display

view

<menu> <menu-cont> <li><a href="">one</a></li> <li><a>two</a> <menu-group> <a href="">one</a> <a href="">two</a> <a href="">three</a> </menu-group> </li> <li><a>three</a> <menu-group> <menu-list> <h6>group</h6> <a href="">one</a> <a href="">two</a> <a href="">three</a> </menu-list> <menu-list> <h6>group</h6> <a href="">one</a> <a href="">two</a> <a href="">three</a> </menu-list> </menu-group> </li> </menu-cont> </menu>

effect display

view

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

notice

code

Add the code to the DOM

effect display

view

notify

code

Run notify()

notify('notify')

If you need align bottom, add second value

notify('notify','bottom')

If you need auto close, add third value

notify('notify','bottom','5000')

effect display

view

page

code

Add the code to the DOM

effect display

view

pop

You can use the pop attribute to quickly bind buttons and 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, if you need pop align right, add right attribute to pop

<pop> <pop-sider> <pop-title><h3>title</h3><a class="close"></a></pop-title> <pop-cont>article</pop-cont> </pop-sider> </pop>

effect display

view

random

Warning: When the defined element is missing the default value, the remote value will be obtained automatically

code

Add the attribute to the DOM, When the element is img will be given src and ,Other elements will be given background-image

uigg="img" uigg="product" uigg="bg" uigg="avatar" uigg="color"

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

uigg="title" uigg="txt"

If you need emot, add the attribute to the DOM

uigg="emot"

effect display

view

rate

code

Add the code to the DOM, value is the default star

If you need edit it, add the edit attribute to the rate

edit

If you need other styles, you can add heart and thumb and circular to change the appearance of the rate

heart thumb circular

effect display

view

recording

code

Add the class to the DOM

class="recording"

effect display

view

reminder

code

Add the code to the DOM

effect display

view

scaler

code

Add the code to the DOM, you can add the step or min or max attribute to the input

effect display

view

smooth

code

Add the code to the DOM

effect display

view

step

code

Add the code to the DOM

If you need flex vertical arrangement, add the column attribute to the step

column

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

Run tip()

tip('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

If you need effective association, add the class to the DOM

class="parent"

effect display

view

top

code

Add the class to the DOM

class="top"

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

class="top btn"

effect display

view

touch

code

Add the javascript to the DOM

$('').touch('up',function(){}) $('').touch('down',function(){}) $('').touch('left',function(){}) $('').touch('right',function(){}) $('').touch('all',function(){})

effect display

view

name

name code

Add the code to the DOM

left name code

Add the code to the DOM

logo name code

Add the code to the DOM

search name code

Add the code to the DOM

effect display

view

nav

code

Add the code to the DOM

If you need the uigg style, add the uigg attribute to the nav and specify the background color uigg="#ccc"

uigg="#ccc"

effect display

view

muzak

code

Add the code to the DOM

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

pause

effect display

view

admin (Preview)

admin general template

We provide a common function management interface

login admin

chat (Preview)

chat general template

We provide a common function management interface

view

swiper

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

Swiper API

about loop

Amount of slides in loop mode should be at least 2x of slidesPerView value

code

Add the style and javascript to the head

CDN

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 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, 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 class="swiper-slide"></div> <div class="swiper-slide"></div> <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-thumb"> <div class="swiper-wrapper"> <div class="swiper-slide"></div> <div class="swiper-slide"></div> <div class="swiper-slide"></div> <div class="swiper-slide"></div> <div class="swiper-slide"></div> <div class="swiper-slide"></div> <div class="swiper-slide"></div> <div class="swiper-slide"></div> </div> </div> <script> var galleryThumbs = new Swiper('.gallery-thumb',{ spaceBetween: 10, slidesPerView: 4, loop: true, freeMode: true, watchSlidesProgress: true, }) var galleryTop = new Swiper('.gallery-top', { spaceBetween: 10, loop:true, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, thumbs: {swiper: galleryThumbs}, }) </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 swiper = 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 swiperLug = new Swiper('.lug-top',{ //effect : 'fade', }) $('#lug-1').click(function(){swiperLug.slideToLoop(0, 1000, false)}) $('#lug-2').click(function(){swiperLug.slideToLoop(1, 1000, false)}) $('#lug-3').click(function(){swiperLug.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">one</div> <div data-hash="two" class="swiper-slide">two</div> <div data-hash="three" class="swiper-slide">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

editor

You can go to tiny to see more parameters. UIGG only provides a few common models

tiny API

code

Add the javascript to the head

CDN

Select different editors according to requirements,Add the class to the DOM

class="editor" class="editor-simple" class="editor-upload" class="editor-all"

PHP upload

If you need upload image, you must download upload.zip to to your website directory and configure php

download

effect display

view

color

CSS functions

UIGG preset some common color functions

type	effect	function	color	background
purity		var(--fff)	co-fff	bg-fff
	var(--f7)	co-f7	bg-f7
	var(--eee)	co-eee	bg-eee
	var(--ddd)	co-ddd	bg-ddd
	var(--ccc)	co-ccc	bg-ccc
	var(--bbb)	co-bbb	bg-bbb
	var(--999)	co-999	bg-999
	var(--666)	co-666	bg-666
	var(--333)	co-333	bg-333
	var(--222)	co-222	bg-222
	var(--111)	co-111	bg-111
	var(--000)	co-000	bg-000
color		var(--brown)	co-brown	bg-brown
	var(--red)	co-red	bg-red
	var(--pink)	co-pink	bg-pink
	var(--purple)	co-purple	bg-purple
	var(--sapphire)	co-sapphire	bg-sapphire
	var(--blue)	co-blue	bg-blue
	var(--cyan)	co-cyan	bg-cyan
	var(--green)	co-green	bg-green
	var(--lime)	co-lime	bg-lime
	var(--yellow)	co-yellow	bg-yellow
	var(--orange)	co-orange	bg-orange
	var(--tomato)	co-tomato	bg-tomato
			bg-wheel
type	effect	function	effect	function
transparent		var(--000-1)		var(--fff-1)
	var(--000-2)		var(--fff-2)
	var(--000-3)		var(--fff-3)
	var(--000-4)		var(--fff-4)
	var(--000-5)		var(--fff-5)
	var(--000-6)		var(--fff-6)
	var(--000-7)		var(--fff-7)
	var(--000-8)		var(--fff-8)
	var(--000-9)		var(--fff-9)

ico

UIGG iconfont

UIGG iconfont 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 download

attribute

independent attribute

Common available attributes in UIGG

attribute	definition
	Exclusive function call of uigg framework
	Make components editable
	Sets the current value of the component
	Set the maximum value of the component
	Set the minimum value of the component
	Set the step value of the component
	Set media pause
	Set media play
	Flex vertical arrangement
	Set component disable
	Disable selection
	Object cover fills container
	Object contain fills container
	Set object centered content
	Set object left alignment
	Set object right alignment
	Set object top alignment
	Set object bottom alignment
	Force display object
	Force hidden objects
	Copy trigger value
	Copy trigger button
	Paragraph translation
	Language cookie settings
	Placeholder translation
	Value translation
	Content translation
	Define element color
	Appearance of rate
	Appearance of rate
	The title will be escaped as "clue"

label

label quick reference

UIGG exclusive label definition

label	definition
	Second tag, inheriting the underline of HTML, At the same time, it can serve as a support for an flex box
	Third tag, inheriting the underline of HTML, seconds in time component
	Icon definition
	Close button and close layer
	Lonely element
	Global toggle element
	Minute in time component
	Day in time component
	Hour in time component
	Year in time component
	Prompt text

lib

emot

Library related connections, from 1.svg to 100.svg

//ui.gg/lib/emot/1.svg

CDN

//cdn.jsdelivr.net/npm/uigg/emot/1.svg

font

Library related connections

//ui.gg/lib/font/font.css

CDN

//cdn.jsdelivr.net/npm/uigg/font/font.min.css

ico

Library related connections

//ui.gg/lib/ico/ico.css //ui.gg/lib/ico/ico.js //ui.gg/lib/ico/ico.json //ui.gg/lib/ico/ico.woff2

CDN

//cdn.jsdelivr.net/npm/uigg/ico/ico.min.css //cdn.jsdelivr.net/npm/uigg/ico/ico.min.js //cdn.jsdelivr.net/npm/uigg/ico/ico.json //cdn.jsdelivr.net/npm/uigg/ico/ico.woff2

Library related connections, category name and icon name, for example:

//ui.gg/lib/ico/svg/brand/uigg.svg

CDN

//cdn.jsdelivr.net/npm/uigg/ico/svg/brand/uigg.svg

editor

Library related connections

//ui.gg/lib/editor/editor.js //ui.gg/lib/editor/upload.zip

CDN

//cdn.jsdelivr.net/npm/uigg/editor/editor.min.js //cdn.jsdelivr.net/npm/uigg/editor/upload.zip

jquery

Library related connections

//ui.gg/lib/jquery.min.js

CDN

//cdn.jsdelivr.net/npm/jquery

animejs

Library related connections

//ui.gg/lib/anime.min.js

CDN

//cdn.jsdelivr.net/npm/animejs

swiper

Library related connections

//ui.gg/lib/swiper-bundle.min.css //ui.gg/lib/swiper-bundle.min.js

CDN

//cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css //cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js

media

Library related connections

//ui.gg/lib/media/aeolian.mp3 //ui.gg/lib/media/audio.mp3 //ui.gg/lib/media/bounce.mp3 //ui.gg/lib/media/boxing.mp3 //ui.gg/lib/media/brilliant.mp3 //ui.gg/lib/media/button.mp3 //ui.gg/lib/media/ding.mp3 //ui.gg/lib/media/drip.mp3 //ui.gg/lib/media/drum.mp3 //ui.gg/lib/media/dulcimer.mp3 //ui.gg/lib/media/error.mp3 //ui.gg/lib/media/notify.mp3 //ui.gg/lib/media/right.mp3 //ui.gg/lib/media/wave.mp3 //ui.gg/lib/media/video.mp4 //ui.gg/lib/media/loop.mp4

CDN

//cdn.jsdelivr.net/npm/uigg/media/aeolian.mp3 //cdn.jsdelivr.net/npm/uigg/media/audio.mp3 //cdn.jsdelivr.net/npm/uigg/media/bounce.mp3 //cdn.jsdelivr.net/npm/uigg/media/boxing.mp3 //cdn.jsdelivr.net/npm/uigg/media/brilliant.mp3 //cdn.jsdelivr.net/npm/uigg/media/button.mp3 //cdn.jsdelivr.net/npm/uigg/media/ding.mp3 //cdn.jsdelivr.net/npm/uigg/media/drip.mp3 //cdn.jsdelivr.net/npm/uigg/media/drum.mp3 //cdn.jsdelivr.net/npm/uigg/media/dulcimer.mp3 //cdn.jsdelivr.net/npm/uigg/media/error.mp3 //cdn.jsdelivr.net/npm/uigg/media/notify.mp3 //cdn.jsdelivr.net/npm/uigg/media/right.mp3 //cdn.jsdelivr.net/npm/uigg/media/wave.mp3 //cdn.jsdelivr.net/npm/uigg/media/video.mp4 //cdn.jsdelivr.net/npm/uigg/media/loop.mp4

images

Library related connections

//ui.gg/lib/images/avatar/ //ui.gg/lib/images/bg/ //ui.gg/lib/images/color/ //ui.gg/lib/images/img/ //ui.gg/lib/images/product/

qrcode

Library related connections

//ui.gg/lib/qr/mixice.com.svg //ui.gg/lib/qr/mssay.com.svg //ui.gg/lib/qr/ui.gg.svg //ui.gg/lib/qr/wechat.svg //ui.gg/lib/qr/wechat-mssay.svg

using UIGG

preset function

mobile terminal

internal

external

general library

Using UIGG

get UIGG

download zip

download design template

get gitHub

get npm

quote

unpkg

responsive rule

PC rule

mobile rule

mobile mode

unit conversion

layout preset

basic

absolute

wide

load

corner

shadow

adrift

return

Preset function

alert

code

effect display

alone

code

effect display

anime

code

effect display

button

code

effect display

clue

code

effect display

cookie

code

effect display

copy

code

effect display

countdown

code

effect display

crumb

code

effect display

disable

code

drop

code

effect display

empty

code

effect display

fold

code

effect display

font

web font

local font

effect display

form

filter

form

effect display

fullscreen

code

effect display

hop

code