Homeworks

Getting Started CSS Basic
GRID TYPOGRAPHY MODAL ICON FORM
INPUT BUTTON CHECKBOX RADIO TOGGLE
TABLE PAGINATION BREADCRUMB TAB DROPDOWN ACCORDION PROGRESS LABEL BADGE TOOLTIP STEP NOTIFICATION TIMELINE COLOR
CSS Advanced
Download View on GitHub
1

MARKUP GUIDE

OVERVIEW 

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="src/css/homeworks.css">
    <script src="vender/jquery-1.12.1.js"></script>
    <script src="src/js/homeworks.js"></script>
</head>
<body>
    <div class="works-sider">
        <h1 class="works-sider-logo">
            <!-- Logo Image -->
        </h1>
        <a href="#" class="works-sider-menu active"><!-- 1 Depth Menu --></a>
        <a href="#" class="works-sider-menu"><!-- 1 Depth Group Menu --></a>
        <div class="works-sider-group">
            <a href="#" class="works-sider-menu">
                <span><!-- 2 Depth Menu --></span>
            </a>
            <a href="#" class="works-sider-menu">
                <span><!-- 2 Depth Group Menu --></span>
            </a>
            <div class="works-sider-group works-sider-sub-group">
                <a href="#">
                    <span><!-- 3 Depth Menu --></span>
                </a>
            </div>
        </div>
    </div>
    <div class="works-wrapper works-theme-dark">
        <div class="works-header">
            <div class="works-header-inner">
                <div class="works-header-menu">
                    <a class="works-menu" href="#" menu="true" ripple="dark">
                        <i class="fa fa-bars" aria-hidden="true"></i>
                    </a>
                    <a class="works-menu works-nav-menu" href="#" ripple="dark">
                        <i class="fa fa-ellipsis-h" aria-hidden="true"></i>
                    </a>
                </div>
                <div class="works-navs">
                    <div class="works-header-button">
                        <a href="#" class="btn btn-sm btn-primary btn-material">
                            <!-- Header Quick Button1 -->
                        </a>
                        <a href="#" class="btn btn-sm btn-primary btn-material">
                            <!-- Header Quick Button2 -->
                        </a>
                    </div>
                    <a href="#" class="btn-action">
                        <!-- Header Circle Font Icon -->
                    </a>
                </div>
            </div>
        </div>
        <div class="works-body">
            <div class="works-content">
                <div class="works-container">
                	<h1><!-- Primary Title --></h1>
                    <div class="works-section works-section-padding">
                    	<h2><!-- Section Title --></h2>
                    </div>
                </div>
                <div class="works-footer">
                    <a href="#" class="floating floating-primary floating-top" ripple="true">
                    	<!-- Floating -->
                    </a>
                    <div class="works-copyright">
                        <span><!-- Copyrights --></span>
                        <span><!-- Additional footer contents --></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
전체적인 레이아웃은 아래와 같은 구조를 따릅니다.
View Source를 눌러 소스를 참고하십시요, BODY의 내용은 SECTION을 이용하여 구성됩니다.
SIDER
HEADER
CONTENT
SECTION
SECTION
SECTION
FOOTER

HEADER 

<div class="works-header-inner">
	<div class="works-header-menu">
		<a class="works-menu" href="#" menu="true" ripple="dark">
			<i class="fa fa-bars" aria-hidden="true"></i>
		</a>
		<a class="works-menu works-nav-menu" href="#" ripple="dark">
			<i class="fa fa-ellipsis-h" aria-hidden="true"></i>
		</a>
	</div>
	<div class="works-header-action works-header-menu">
		<a href="#" class="works-menu active" ripple="dark">MENU 1</a>
		<a href="#" class="works-menu" ripple="dark">MENU 2</a>
		<a href="#" class="works-menu" ripple="dark">MENU 3</a>
	</div>
	<div class="works-navs">
		<div class="works-header-button">
			<a href="#" class="btn btn-sm btn-primary btn-material" ripple="true">
				PRIMARY BUTTON
			</a>
			<a href="#" class="btn btn-sm btn-cobalt btn-material" ripple="true">
				SECONDARY BUTTON
			</a>
		</div>
		<a href="#" class="btn-action">
			<i class="pe-7s-search"></i>
		</a>
		<a href="#" class="btn-action btn-bell">
			<i class="pe-7s-bell"></i>
			<span class="bubble">1</span>
		</a>
	</div>
</div>
HEADER는 웹 페이지 최상단에 게시되는 메뉴 영역입니다.
.works-header 클래스를 사용하셔서 해당 영역을 구성 가능합니다.
자세한 부분은 위쪽 버튼을 클릭하셔서 샘플코드를 참고해주세요.
메뉴는 아래 샘플과 같이 일반 GNB 메뉴(Global Navigation Button)와 PRIMARY, SECOND BUTTON이 들어갑니다.
추가적으로 디자인 분리를 위해 ICON CIRCLE BUTTON을 추가하실 수 있습니다.
버튼 엘리먼트들에게 ripple 옵션을 사용하시면 누를 때 웨이브 효과를 주실 수 있습니다. *권장
MENU 1 MENU 2 MENU 3
PRIMARY BUTTON SECONDARY BUTTON
1

SIDER 

<div class="works-sider">
    <h1 class="works-sider-logo">
        <img src="http://homeworks.igaworks.com/main/src/images/logo_basic_v1.png" alt="Homeworks" />
    </h1>
    <a href="#" class="works-sider-menu active">PRIMARY MENU #1</a>
    <a href="#" class="works-sider-menu works-sider-group-menu">PRIMARY MENU #2</a>
    <div class="works-sider-group">
        <a href="#" class="works-sider-menu" ripple="true">
            <span>SECONDARY MENU #1</span>
        </a>
        <a href="#" class="works-sider-menu works-sider-group-menu" ripple="true">
            <span>SECONDARY MENU #2</span>
        </a>
        <div class="works-sider-group works-sider-sub-group">
            <a href="#" class="works-sider-menu" ripple="dark">
                <span>THIRD MENU #1</span>
            </a>
            <a href="#" class="works-sider-menu" ripple="dark">
                <span>THIRD MENU #2</span>
            </a>
            <a href="#" class="works-sider-menu" ripple="dark">
                <span>THIRD MENU #3</span>
            </a>
            <a href="#" class="works-sider-menu" ripple="dark">
                <span>THIRD MENU #4</span>
            </a>
            <a href="#" class="works-sider-menu" ripple="dark">
                <span>THIRD MENU #5</span>
            </a>
        </div>
        <a href="#" class="works-sider-menu" ripple="true">
            <span>SECONDARY MENU #3</span>
        </a>
        <a href="#" class="works-sider-menu" ripple="true">
            <span>SECONDARY MENU #4</span>
        </a>
        <a href="#" class="works-sider-menu" ripple="true">
            <span>SECONDARY MENU #5</span>
        </a>
        <a href="#" class="works-sider-menu" ripple="true">
            <span>SECONDARY MENU #6</span>
        </a>
        <a href="#" class="works-sider-menu" ripple="true">
            <span>SECONDARY MENU #7</span>
        </a>
    </div>
    <a href="#" class="works-sider-menu">PRIMARY MENU #3</a>
</div>
SIDEBAR는 웹 페이지 좌측에 게시되는 메뉴 영역입니다.
.works-sider 클래스를 사용하셔서 해당 영역을 구성 가능합니다.
자세한 부분은 위쪽 버튼을 클릭하셔서 샘플코드를 참고해주세요.
HOMEWORKS™에서는 총 3단계 깊이의 메뉴 종류를 지원합니다.
아래 샘플을 확인하시면 메뉴 중 일부가 그룹을 가지고 있는 것을 확인 가능합니다.
버튼 엘리먼트들에게 ripple 옵션을 사용하시면 누를 때 웨이브 효과를 주실 수 있습니다. *권장

Homeworks

PRIMARY MENU #1 PRIMARY MENU #2
SECONDARY MENU #1 SECONDARY MENU #2
THIRD MENU #1 THIRD MENU #2 THIRD MENU #3 THIRD MENU #4 THIRD MENU #5
SECONDARY MENU #3 SECONDARY MENU #4 SECONDARY MENU #5 SECONDARY MENU #6 SECONDARY MENU #7
PRIMARY MENU #3

BODY 

<div class="works-body">
    <div class="works-content">
        <div class="works-container">
            <h1 class="works-title">
                <span>TITLE</span>
                <span class="header-buttons pull-right">
                    <a href="#" class="btn btn-primary" ripple="dark">SECTION BUTTON</a>
                </span>
            </h1>
            <div class="works-section works-section-transparent">
                <div class="row row-compact">
                    <div class="col-md-6 col-pd">
                        <div class="works-section works-section-padding">
                            <h2 class="section-title">DRIVEN SECTION TITLE</h2>
                            <div class="works-article">
                                DRIVEN SECTION #1
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 col-pd">
                        <div class="works-section works-section-padding">
                            <h2 class="section-title">DRIVEN SECTION TITLE</h2>
                            <div class="works-article">
                                DRIVEN SECTION #2
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="works-section">
                <div class="works-section works-section-padding">
                    SECTION CONTENTS #1
                </div>
            </div>
            <div class="works-section">
                <div class="works-section works-section-padding">
                    SECTION CONTENTS #2
                </div>
            </div>
        </div>
    </div>
</div>
BODY는 웹 페이지 콘텐츠를 보여주는 메인 영역입니다.
.works-body 클래스를 사용하셔서 해당 영역을 구성 가능합니다.
BODY 내부의 콘텐츠는 모두 section과 로 구성됩니다.
아래 샘플을 참고하시기 바랍니다.

TITLE SECTION BUTTON

DRIVEN SECTION TITLE

DRIVEN SECTION #1

DRIVEN SECTION TITLE

DRIVEN SECTION #2

GROUP TITLE 1

SECTION CONTENTS #1

GROUP TITLE 2

SECTION CONTENTS #2

GROUP TITLE 3

SECTION CONTENTS #3
SECTION CONTENTS #2 
<div class="works-body">
    <div class="works-content">
        <div class="works-footer">
            <a href="#" class="floating floating-primary floating-top" ripple="true">
                <i class="pe-7s-angle-up"></i>
            </a>
            <div class="homeworks-char">HomeWorks</div>
            <div class="works-copyright">
                <span>Lisense Under <a href="https://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache 2.0</a></span>
                <span>Version <strong class="homeworks-version"></strong></span>
            </div>
        </div>
    </div>
</div>
FOOTER는 웹 페이지 하단에 게시되는 영역입니다.
상단 페이지 이동을 돕는 플로팅 버튼과, 카피라이터, 연락 정보와 버전에 대한 내용을 기재하실 수 있습니다.
.works-footer 클래스를 이용하여 해당 영역을 구성 가능하며, 해당 영역은 구조상 .works-body 하위에 포함되어야 합니다.
HomeWorks
Lisense Under Apache 2.0 Version
HomeWorks
Lisense Under Apache 2.0 Version