JUI는 JENNIFER UI의 약자로 오픈소스로 공개되어 있습니다. 

기본적인 정보는 아래에 정리해두었습니다.


JUI Document page : http://seogi1004.github.io/jui/ko/

JUI GitHome : https://github.com/seogi1004/jui

라이선스 : MIT


Document Page, Github 웹페이지 들어가보시면 알 수 있는데요. 정말 예쁜  jQuery 기반의 UI입니다.

사용방법은 도큐먼트 페이지에 자세히 나와있지만 그래도 정리하는 포스팅이니깐 간단한 예제를 통해 확인해보죠.


1. 일단 다운로드죠.


2. html 페이지에 css를 불러와주세요.


    - 압축풀고, CSS 파일을 불러와주세요. 

    - 다만 jQuery를 기반으로 하니깐 jQuery를 먼저 불러와주세요. 


    <script src="jquery/jquery-2.1.3.min.js"></script>

    <link rel="stylesheet" href="jui.min.css">


3. 사용해봅시다.


    - jui를 사용하기 위해서는 먼저 사용하고자 하는 부분의 엘리먼트에 class='jui' 값을 주어야 합니다.

      class='jui'를 작성한 엘리먼트 하위에서도 모두 사용 가능합니다. 

      jui document page에서는 body에 class='jui'를 입력함으로써 body 아래에 있는 모든 엘리먼트에서 jui를 사용할 수 있도록 했습니다. 


    - jui에서는 Typography, Form, Icon, Button, Group, Vertical Group....... 등등을 지원하고 있는데요. 

      Document page에 존재하는 Button을 그대로 따라해봅시다. 


<html>

<head>

    <script src="jquery/jquery-2.1.3.min.js"></script>

    <link rel="stylesheet" href="jui.min.css">

</head>

<body>

        <div class='jui'>

    <a class="btn btn-black-gray btn-flat btn-rect">button</a>

       <a class="btn btn-black-gray">button</a>

    <a class="btn btn-purple">button</a>

</div>

</body>

</html>

요런 이쁜 버튼이 너무나 간단하게!! 뙇!! 만들어지네요.




  1. ui 2015.04.07 15:16

    자료 감사합니다

+ Recent posts