guide v11x

메인구성

자주 활용하는 class를 정리하여 통일감을 주었습니다.

레이아웃 Class를 적용 후 /fine_include/designStyle/루트에 Class.inc(레이아웃 Class와 동일) 문서를 추가하여 사용해주세요.

Class

레이아웃 Class
Class	비고
.user-container	사이트본문 (옵션 보기)
.index-wrap	레이아웃 부모
.index-width	사용자 가로크기 (옵션 보기)
.index-width	관련 class	`.index-max-width` `.index-min-width`
.index-grid	레이아웃 시스템 (옵션 보기)
.index-grid	관련 class	`.index-grid-container` (부모) `.index-item` `.grid-[1 ~ 12]`
.index-row	수동형 레이아웃(구형설계호환)
.index-row	관련 class	`.index-col` `.index-column` `.index-columns`
.index-sticky	따라다니는 콘텐츠 (옵션 보기)
.box-skin	박스 (옵션 보기)
	옵션 class	`.line` `.bg` `.radius` `.header-bg`
	관련 class	`.header` `.container` `.content`
.box-margins	여백 (옵션 보기)
.box-margins	관련 class	`.box-solid` `.box-dashed` `.box-dotted`

Naming

이름	비고
A00	PC용 레이아웃 (뉴스)
B00	PC용 레이아웃 (매거진)
C00	PC용 레이아웃 (영상)
M00	Mobile용 레이아웃

Layouts

콘텐츠1

콘텐츠2

<div class="index-grid-container">
    <div class="index-width">
        <article class="index-grid">
            <section class="index-item grid-1"></section>
            <section class="index-item grid-2"></section>
        </article>
    </div>
</div>

스킨

자동구성 (/fine_skin/edit/layout/스킨폴더명)

layout.json

{    
    "name": "col2",
    "title": "2단",    
    "column": 2
}

layout.php

<div class="index-grid-container <?php $editLayout->getCustomCss()?>">
    <div class="index-width">
        <div class="index-grid">
            <div class="index-item grid-1">
                <?php $editLayout->panel();?>
            </div>
            <div class="index-item grid-2">
                <?php $editLayout->panel();?>
            </div>
        </div>
    </div>
</div>

수동구성 (/fine_skin/edit/[section, list, view...]/스킨폴더명)

section.layout.json

{ 
    "edit": "section", 
    "name": "skin1", 
    "title": "메인", 
    "description": "", 
    "default_layout": { 
        "1": "default", 
        "2": "default", 
        "3": "default"
    },
    "fix": true
}

adminSection.html

<?php echo $edit->getEditCssSource(); ?>
<div id="idx-skin" class="index-wrap">						
    <div class="index-width">
        <?php $editLayout->edit(1);?>
        <div class="index-grid">
            <div class="index-item grid-1">
                <?php $editLayout->edit(2);?>
            </div>
            <div class="index-item grid-2">
                <?php $editLayout->edit(3);?>
            </div>
        </div>
    </div>
</div>

adminViewSection.html

<?php
$HTML = $edit->getEditCssSource()."
    <div id="idx-skin" class="index-wrap">						
        <div class="index-width">
";
$HTML .= $editLayout->view(1);
$HTML .= "       
        <div class="index-grid">
            <div class="index-item grid-1">
";
$HTML .= $editLayout->view(2);
$HTML .= "
            </div>
            <div class="index-item grid-2">
";
$HTML .=  $editLayout->view(3);
$HTML .= "
            </div>
        </div>
    </div>
</div>
";
?>

Sticky

하단 기준 Custom Css

.index-grid {
    align-items: flex-end;
}

.index-item.grid-2 {
    position: sticky;
    z-index: 5;
    bottom: 0;
    left: 0;
}

Custom Functions

`.user-container`

--nd-user-container-width:       var(--nd-index-width);

`.index-width`, `.index-max-width`, `.index-min-width`

--nd-index-width:               1080px;

`.index-grid-container`

--nd-grid-width:                auto;
--nd-grid-margin:               0;
--nd-grid-padding:              0;
--nd-grid-bg:                   transparent;

`.index-grid`

--nd-grid-inner-width:          auto;
--nd-grid-inner-margin:         0;

`.index-item.grid-[1 ~ 12]`

--nd-grid[1~12]-width:                  auto;
--nd-grid[1~12]-padding:                0;
--nd-grid[1~12]-margin:                 0;
--nd-grid[1~12]-bg:                     transparent;
--nd-grid[1~12]-border-width:           0;
--nd-grid[1~12]-border-style:           solid;
--nd-grid[1~12]-border-color:           transparent;

`.index-sticky`

--nd-sticky-zindex:                 unset;
--nd-sticky-top:                    0;
--nd-sticky-right:                  unset;
--nd-sticky-bottom:                 unset;
--nd-sticky-left:                   0;
--nd-sticky-width:                  auto;

`.box-skin`

--nd-box-skin-padding:              0;
--nd-box-skin-bg:                   transparent;
--nd-box-skin-border:               0;
--nd-box-skin-border-radius:        0;

/* container */
--nd-box-skin-container-gap:        0;

/* title */
--nd-box-skin-title-margin-bottom:  1rem;
--nd-box-skin-title-padding:        0;
--nd-box-skin-title-font-family:    inherit;
--nd-box-skin-title-font-size:      1.25rem;
--nd-box-skin-title-font-weight:    700;
--nd-box-skin-title-line-height:    1.2;
--nd-box-skin-title-letter-spacing: inherit;
--nd-box-skin-title-text-align:     inherit;
--nd-box-skin-title-color:          #000;
--nd-box-skin-title-bg:             transparent;

/* more */
--nd-box-skin-icon-content:         normal;
--nd-box-skin-icon-display:         block;
--nd-box-skin-icon-position:        absolute;
--nd-box-skin-icon-zindex:          auto;
--nd-box-skin-icon-top:             auto;
--nd-box-skin-icon-right:           auto;
--nd-box-skin-icon-bottom:          auto;
--nd-box-skin-icon-left:            auto;
--nd-box-skin-icon-padding:         0;
--nd-box-skin-icon-font-size:       .8em;
--nd-box-skin-icon-font-weight:     400;
--nd-box-skin-icon-line-height:     1.5;
--nd-box-skin-icon-color:           currentColor;
--nd-box-skin-icon-bg:              transparent;
--nd-box-skin-icon-white-space:     nowrap;
--nd-box-skin-icon-transform:       none;

`.box-margins`

--nd-box-margins-border-width:      0;
--nd-box-margins-border-style:      none;
--nd-box-margins-border-color:      transparent;

Class 작명 규칙 기본 레이아웃 스킨 Sticky 선택자 변수

Class

Naming

Layouts

스킨

자동구성 (/fine_skin/edit/layout/스킨폴더명)

layout.json

layout.php

수동구성 (/fine_skin/edit/[section, list, view...]/스킨폴더명)

section.layout.json

adminSection.html

adminViewSection.html

Sticky

하단 기준 Custom Css

Custom Functions

.user-container

.index-width, .index-max-width, .index-min-width

.index-grid-container

.index-grid

.index-item.grid-[1 ~ 12]

.index-sticky

.box-skin

.box-margins

`.user-container`

`.index-width`, `.index-max-width`, `.index-min-width`

`.index-grid-container`

`.index-grid`

`.index-item.grid-[1 ~ 12]`

`.index-sticky`

`.box-skin`

`.box-margins`