menu
sentiment_satisfiedUsing ume
  • get ume
  • featured_play_listPreset function
  • anew
  • browser title
  • calculation
  • font
  • form
  • fullscreen
  • menu
  • mix
  • page
  • return
  • smooth
  • switch
  • tab
  • table
  • title
  • phone_androidMobile terminal
  • bar
  • name
  • play
  • touch
  • dvrInternal components
  • calendar
  • pop
  • settings_input_hdmiExternal components
  • scrollreveal
  • swiper
  • appsGeneral library
  • color
  • ico
  • icons
  • sentiment_satisfiedUsing ume

    get ume


    download zip

    You can download ume from the official website

    ume download
    get gitHub

    You can also get ume from gitHub

    gitHub
    quote

    You also refer to files directly from the web

    <link rel="stylesheet" href="https://ume.ee/ume/styles/ume.css"> <link rel="stylesheet" href="https://ume.ee/ume/styles/animate.min.css"> <link rel="stylesheet" href="https://ume.ee/ume/styles/swiper.min.css"> <script src="https://ume.ee/ume/js/jquery.min.js"></script> <script src="https://ume.ee/ume/js/less.min.js"></script> <script src="https://ume.ee/ume/js/scrollreveal.min.js"></script> <script src="https://ume.ee/ume/js/swiper.min.js"></script> <script src="https://ume.ee/ume/js/ume.js"></script>

    featured_play_listPreset function

    anew


    code

    Add the class to the DOM

    class="anew"
    effect display
    view

    browser


    code

    Add the javascript to the page, you can customize the title in browsertitle()

    <script> $(document).ready(function(){ browsertitle(); }); </script> view

    calculation


    code

    Add the code to the DOM

    <section class="flex"> <a class="icons calc-reduce">remove</a> <input class="calc-answer" type="text" value="1"> <a class="icons calc-add">add</a> </section>
    effect display
    view

    font


    code

    Add the class to the DOM

    class="font-hei" 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-helvetica" class="font-tahoma" view

    form


    code

    Add the code to the DOM

    <section class="form"> <form> <li><span>account</span> <input class="lag" type="text"> <cite>Lorem ipsum dolor sit amet</cite> </li> <li><span>password</span> <input class="med" type="password"> <cite class="co-red">Password error</cite> </li> <li><span>time</span> <div class="input sml"><input type="text" class="calendar"><i class="icons">today</i></div> <span>to</span> <div class="input sml"><input type="text" class="calendar"><i class="icons">today</i></div> <cite>Lorem ipsum dolor sit amet</cite> </li> <li><span>checkbox</span> <i class="radio"></i>radio <i class="radio"></i>radio <i class="checkbox"></i>checkbox <cite>Lorem ipsum dolor sit amet</cite> </li> <li><span>select</span> <div class="select sml"> <select><option>select</option><option>select</option></select> <i class="icons">expand_more</i> </div> <cite>Lorem ipsum dolor sit amet</cite> </li> <li><span>robot</span> <input class="min" type="text"> <em class="code center bg-333 co-666">OOOO</em> <cite>Lorem ipsum dolor sit amet</cite> </li> <li><span>code</span> <input class="min" type="text"> <a href="" class="btn bg-orange code">get code</a> <cite>Lorem ipsum dolor sit amet</cite> </li> <li><span>message</span> <textarea class="max"></textarea> </li> <li><span>upload</span> <div class="upload"> <div class="upload-group" style="background-image: url(../user/list/0.jpg);"> <a class="icons">close</a> </div> <div class="upload-group"><i class="icons">add</i><input type="file"></div> </div> </li> <li class="resolve"><i class="checkbox"></i>I've read and agreed<a>"User agreement"</a></li> <li class="resolve"><button class="btn bg-red">cancel</button><button class="btn bg-blue">submit</button></li> </form> </section>
    effect display
    view

    fullscreen


    code

    Add the class to the DOM

    class="fullscreen icons"
    effect display
    view

    mix


    code

    Add the class to the DOM

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

    page


    code

    Add the code to the DOM

    <section class="page"> <a href="" class="icons">first_page</a> <a href="" class="icons">chevron_left</a> <a href="">1</a> <a href="">2</a> <a href="" class="active">3</a> <a href="">4</a> <a href="">5</a> <span>1/12</span> <a href="" class="icons">chevron_right</a> <a href="" class="icons">last_page</a> <input type="text"> <a href="" class="icons">keyboard_return</a> </section>
    effect display
    view

    return


    code

    Add the class to the DOM

    class="return"

    smooth


    code

    Add the code to the DOM

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

    switch


    code

    Add the code to the DOM

    <i class="radio"></i> <i class="radio"></i> <i class="checkbox"></i> <i class="checkbox-circle"></i> <i class="checkbox-cancel"></i> <i class="collect"></i> <i class="star"></i> <i class="visibility"></i> <i class="toggle"></i>
    effect display
    view

    tab


    code

    Add the code to the DOM

    <section class="tab"> <div class="tab-list"> <li class="active"><a>one</a></li> <li><a>two</a></li> <li><a>three</a></li> </div> <div class="tab-cont"> <div class="tab-group animated fadeIn active"> one </div> <div class="tab-group animated fadeIn"> two </div> <div class="tab-group animated fadeIn"> three </div> </div> </section>
    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

    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>
    effect display
    view

    phone_androidMobile terminal

    bar


    code

    Add the code to the DOM

    <section class="space"></section> <section class="bar animated fadeInUp"> <li><a href=""><i class="icons">home</i><span>home</span></a></li> <li><a href=""><i class="icons">apps</i><span>apps</span></a></li> <li><a href=""><i class="icons">shopping_cart</i><span>shop</span></a></li> <li><a href=""><i class="icons">account_circle</i><span>user</span></a></li> </section>
    effect display
    view

    name


    code

    Add the code to the DOM

    <section class="name block animated fadeInDown"> <a href="" class="icons">chevron_left</a> <h2>name</h2> <a href="" class="icons">menu</a> </section>
    effect display
    view

    play


    code

    Add the code to the DOM

    effect display
    view

    touch


    code

    Add the code to the DOM

    <div class="touch-left"></div> <div class="touch-right"></div> <div class="touch-up"></div> <div class="touch-down"></div> <div class="touch-all"></div> <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

    dvrInternal components

    calendar


    code

    Add the code to the DOM

    <input type="text" class="calendar">
    effect display
    view

    pop


    pop center code

    Add the code to the DOM

    <section class="pop animated fadeIn"> <x class="close"></x> <div class="full center"> <div class="pop-main animated zoomIn"> <div class="pop-title"> <h3>title</h3> <a class="icons close">close</a> </div> <div class="pop-cont"> article </div> <div class="pop-control"> <a href="" class="btn bg-red">previous</a> <a href="" class="btn bg-orange">cancel</a> <button class="btn bg-green">submit</button> <a href="" class="btn bg-blue">confirm</a> </div> </div> </div> </section>
    pop choice code

    Add the code to the DOM

    <section class="pop animated fadeIn"> <x class="close"></x> <div class="pop-choice animated fadeInUp"> <div class="pop-title"> <h3>title</h3> <a class="icons close">close</a> </div> <div class="pop-cont"> article </div> <div class="pop-control"> <a href="" class="btn bg-red">previous</a> <a href="" class="btn bg-orange">cancel</a> <button class="btn bg-green">submit</button> <a href="" class="btn bg-blue">confirm</a> </div> </div> </section>
    pop sider code

    Add the code to the DOM

    <section class="pop animated fadeIn"> <x class="close"></x> <div class="pop-sider animated fadeInLeft"> <div class="pop-title"> <h3>title</h3> <a class="icons close">close</a> </div> <div class="pop-cont"> article </div> </div> </section>
    effect display
    view

    settings_input_hdmiExternal components

    scrollreveal


    You can write more cool effects to go to scrollreveal API. Here, ume provides only a few basic effects

    Scrollreveal API
    code

    Add the class to the DOM

    class="scroll-top" class="scroll-bottom" class="scroll-left" class="scroll-right" class="scroll-scale" class="scroll-opacity" class="scroll-rotate"
    effect display
    view

    swiper


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

    Swiper API
    swiper banner code

    Add the code to the DOM

    <section class="swiper-container swiper-banner"> <div class="swiper-wrapper"> <div class="swiper-slide">one</div> <div class="swiper-slide">two</div> <div class="swiper-slide">three</div> </div> <div class="swiper-pagination"></div> <div class="swiper-button-next icons"></div> <div class="swiper-button-prev icons"></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-container swiper-list"> <div class="swiper-wrapper"> <div class="swiper-slide">one</div> <div class="swiper-slide">two</div> <div class="swiper-slide">three</div> <div class="swiper-slide">four</div> <div class="swiper-slide">five</div> <div class="swiper-slide">six</div> <div class="swiper-slide">seven</div> <div class="swiper-slide">eight</div> </div> <div class="swiper-pagination"></div> <div class="swiper-button-next icons"></div> <div class="swiper-button-prev icons"></div> <script> var swiper = new Swiper('.swiper-list', { slidesPerView: 4, slidesPerGroup: 4, //Scroll by group loop: true, loopFillGroupWithBlank: true, pagination: { el: '.swiper-pagination', clickable: true, }, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, breakpoints: { 320: { slidesPerView: 2, spaceBetween: 15 }, 720: { slidesPerView: 3, spaceBetween: 20 }, 960: { slidesPerView: 4, spaceBetween: 30 }, }, }); </script> </section>
    swiper vertical code

    Add the code to the DOM

    <section class="swiper-container swiper-vertical"> <div class="swiper-wrapper"> <div class="swiper-slide">one</div> <div class="swiper-slide">two</div> <div class="swiper-slide">three</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> <div class="swiper-container gallery-top"> <div class="swiper-wrapper"> <div class="swiper-slide" style="background-image:url(../user/list/0.jpg)"></div> <div class="swiper-slide" style="background-image:url(../user/list/1.jpg)"></div> <div class="swiper-slide" style="background-image:url(../user/list/2.jpg)"></div> <div class="swiper-slide" style="background-image:url(../user/list/3.jpg)"></div> <div class="swiper-slide" style="background-image:url(../user/list/4.jpg)"></div> <div class="swiper-slide" style="background-image:url(../user/list/5.jpg)"></div> </div> <div class="swiper-button-next icons"></div> <div class="swiper-button-prev icons"></div> </div> <div class="swiper-container gallery-thumbs"> <div class="swiper-wrapper"> <div class="swiper-slide" style="background-image:url(../user/list/0.jpg)"></div> <div class="swiper-slide" style="background-image:url(../user/list/1.jpg)"></div> <div class="swiper-slide" style="background-image:url(../user/list/2.jpg)"></div> <div class="swiper-slide" style="background-image:url(../user/list/3.jpg)"></div> <div class="swiper-slide" style="background-image:url(../user/list/4.jpg)"></div> <div class="swiper-slide" style="background-image:url(../user/list/5.jpg)"></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 animate code

    Add the code to the DOM

    <section class="swiper-container swiper-animate"> <div class="swiper-wrapper"> <div class="swiper-slide"><p class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">swiper</p></div> <div class="swiper-slide"><p class="ani" swiper-animate-effect="bounceInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">swiper</p></div> <div class="swiper-slide"><p class="ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1.5s" swiper-animate-delay="0s">swiper</p></div> </div> <div class="swiper-pagination"></div> <div class="swiper-button-next icons"></div> <div class="swiper-button-prev icons"></div> <script> var mySwiper = new Swiper('.swiper-animate', { pagination: { el: '.swiper-pagination', clickable: true, }, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, on:{ init: function(){ swiperAnimateCache(this); this.emit('slideChangeTransitionEnd'); }, slideChangeTransitionEnd: function(){ swiperAnimate(this); //this.slides.eq(this.activeIndex).find('.ani').removeClass('ani'); //Run only once }, }, }); </script> </section>
    swiper tab code

    Add the code to the DOM

    <section> <div class="swiper-tab-btn"> <a class="default" id="swiper-btn-1">1</a> <a id="swiper-btn-2">2</a> <a id="swiper-btn-3">3</a> <a id="swiper-btn-4">4</a> <a id="swiper-btn-5">5</a> </div> <div class="swiper-container swiper-tab"> <div class="swiper-wrapper"> <div class="swiper-slide">one</div> <div class="swiper-slide">two</div> <div class="swiper-slide">three</div> <div class="swiper-slide">four</div> <div class="swiper-slide">five</div> </div> </div> <script> var mySwiper = new Swiper('.swiper-tab',{ loop: true, //effect : 'fade', }); $('#swiper-btn-1').click(function(){ mySwiper.slideToLoop(0, 1000, false); }) $('#swiper-btn-2').click(function(){ mySwiper.slideToLoop(1, 1000, false); }) $('#swiper-btn-3').click(function(){ mySwiper.slideToLoop(2, 1000, false); }) $('#swiper-btn-4').click(function(){ mySwiper.slideToLoop(3, 1000, false); }) $('#swiper-btn-5').click(function(){ mySwiper.slideToLoop(4, 1000, false); }) </script> </section>
    effect display
    view

    appsGeneral library

    color


    view

    ico


    view

    icons


    view