SPSTRAP Document API

layout

alert

alert - round

<div class="sp--desc" theme="lg-primary-round" gap="xs">
                                round type xs
                            </div>
                            <div class="sp--desc" theme="lg-primary-round" gap="sm">
                                round type sm
                            </div>
                            <div class="sp--desc" theme="lg-primary-round" gap="md">
                                round type md
                            </div>
                            <div class="sp--desc" theme="lg-primary-round" gap="lg">
                                round type lg
                            </div>
                            <div class="sp--desc" theme="lg-primary-round" gap="xl">
                                round type xl
                            </div>
                            <div class="sp--desc" theme="lg-primary-round" gap="2xl">
                                round type 2xl
                            </div>
                            <div class="sp--desc" theme="lg-primary-round" gap="3xl">
                                round type 3xl
                            </div>

alert - fill

<div class="sp--desc" theme="lg-light-round" fill="light" gap="2xl">
                                fill light type
                            </div>

<br />
                            <div class="sp--desc" theme="lg-round" fill="primary" gap="2xl">
                                fill primary type
                            </div>

<br />
                            <div class="sp--desc" theme="lg-primary-bright-round" fill="primary-bright" gap="2xl">
                                fill primary type
                            </div>

bullet (with attribute)

<div class="sp--desc" theme="md">
                                <div class="sp--bullet" bullet="sameattr" gap="xs">
                                    <div class="sp--bullet-list" head="타이틀 1">
                                        내용
                                    </div>
                                    <div class="sp--bullet-list" head="타이틀 222">
                                        내용
                                    </div>
                                    <div class="sp--bullet-list" head="타이틀 333333">
                                        내용
                                    </div>
                                </div>
                            </div>

<br />
                            
                            <div class="sp--desc" theme="md">
                                <div class="sp--bullet" bullet="attr" gap="xs">
                                    <div class="sp--bullet-list" head="타이틀 1">
                                        민주평화통일자문회의의 조직·직무범위 기타 필요한 사항은 법률로 정한다.
                                    </div>
                                    <div class="sp--bullet-list" head="타이틀 222">
                                        나는 헌법을 준수하고 국가를 보위하며 조국의 평화적 통일과 국민의 자유와 복리의 증진 및 민족문화의 창달에 노력하여 대통령으로서의 직책을 성실히 수행할 것을 국민 앞에 엄숙히 선서합니다.
                                    </div>
                                    <div class="sp--bullet-list" head="타이틀 333333">
                                        민주평화통일자문회의의 조직·직무범위 기타 필요한 사항은 법률로 정한다. 모든 국민은 거주·이전의 자유를 가진다. 나는 헌법을 준수하고 국가를 보위하며 조국의 평화적 통일과 국민의 자유와 복리의 증진 및 민족문화의 창달에 노력하여 대통령으로서의 직책을 성실히 수행할 것을 국민 앞에 엄숙히 선서합니다.
                                        <br />
                                        국가는 전통문화의 계승·발전과 민족문화의 창달에 노력하여야 한다. 계엄을 선포한 때에는 대통령은 지체없이 국회에 통고하여야 한다. 환경권의 내용과 행사에 관하여는 법률로 정한다.
                                    </div>
                                </div>
                            </div>

alert - bullet (number)

<div class="sp--desc" theme="lg-light-round" gap="2xl">
                                <div class="sp--bullet" bullet="number" theme="dark" gap="md">
                                    <div class="sp--bullet-list">
                                        민주평화통일자문회의의 조직·직무범위 기타 필요한 사항은 법률로 정한다.
                                    </div>
                                    <div class="sp--bullet-list">
                                        나는 헌법을 준수하고 국가를 보위하며 조국의 평화적 통일과 국민의 자유와 복리의 증진 및 민족문화의 창달에 노력하여 대통령으로서의 직책을 성실히 수행할 것을 국민 앞에 엄숙히 선서합니다.
                                    </div>
                                    <div class="sp--bullet-list">
                                        민주평화통일자문회의의 조직·직무범위 기타 필요한 사항은 법률로 정한다. 모든 국민은 거주·이전의 자유를 가진다. 나는 헌법을 준수하고 국가를 보위하며 조국의 평화적 통일과 국민의 자유와 복리의 증진 및 민족문화의 창달에 노력하여 대통령으로서의 직책을 성실히 수행할 것을 국민 앞에 엄숙히 선서합니다.
                                        <br />
                                        국가는 전통문화의 계승·발전과 민족문화의 창달에 노력하여야 한다. 계엄을 선포한 때에는 대통령은 지체없이 국회에 통고하여야 한다. 환경권의 내용과 행사에 관하여는 법률로 정한다.
                                    </div>
                                </div>
                            </div>

alert - bullet (base)

<div class="sp--desc" theme="lg" gap="lg">
                                <div class="sp--bullet" bullet="circle" theme="dark" gap="xl">
                                    <div class="sp--bullet-list">
                                        민주평화통일자문회의의 조직·직무범위 기타 필요한 사항은 법률로 정한다.
                                    </div>
                                    <div class="sp--bullet-list">
                                        나는 헌법을 준수하고 국가를 보위하며 조국의 평화적 통일과 국민의 자유와 복리의 증진 및 민족문화의 창달에 노력하여 대통령으로서의 직책을 성실히 수행할 것을 국민 앞에 엄숙히 선서합니다.
                                    </div>
                                    <div class="sp--bullet-list">
                                        민주평화통일자문회의의 조직·직무범위 기타 필요한 사항은 법률로 정한다. 모든 국민은 거주·이전의 자유를 가진다. 나는 헌법을 준수하고 국가를 보위하며 조국의 평화적 통일과 국민의 자유와 복리의 증진 및 민족문화의 창달에 노력하여 대통령으로서의 직책을 성실히 수행할 것을 국민 앞에 엄숙히 선서합니다.
                                        <br />
                                        국가는 전통문화의 계승·발전과 민족문화의 창달에 노력하여야 한다. 계엄을 선포한 때에는 대통령은 지체없이 국회에 통고하여야 한다. 환경권의 내용과 행사에 관하여는 법률로 정한다.
                                    </div>
                                </div>
                            </div>

alert - bullet (circle)

<div class="sp--desc" theme="lg-primary-bright-round" fill="primary-bright" gap="2xl">
                                <div class="sp--bullet" bullet="circle" theme="dark" gap="md">
                                    <div class="sp--bullet-list">
                                        민주평화통일자문회의의 조직·직무범위 기타 필요한 사항은 법률로 정한다.
                                    </div>
                                    <div class="sp--bullet-list">
                                        나는 헌법을 준수하고 국가를 보위하며 조국의 평화적 통일과 국민의 자유와 복리의 증진 및 민족문화의 창달에 노력하여 대통령으로서의 직책을 성실히 수행할 것을 국민 앞에 엄숙히 선서합니다.
                                    </div>
                                    <div class="sp--bullet-list">
                                        민주평화통일자문회의의 조직·직무범위 기타 필요한 사항은 법률로 정한다. 모든 국민은 거주·이전의 자유를 가진다. 나는 헌법을 준수하고 국가를 보위하며 조국의 평화적 통일과 국민의 자유와 복리의 증진 및 민족문화의 창달에 노력하여 대통령으로서의 직책을 성실히 수행할 것을 국민 앞에 엄숙히 선서합니다.
                                        <br />
                                        국가는 전통문화의 계승·발전과 민족문화의 창달에 노력하여야 한다. 계엄을 선포한 때에는 대통령은 지체없이 국회에 통고하여야 한다. 환경권의 내용과 행사에 관하여는 법률로 정한다.
                                    </div>
                                </div>
                            </div>

alert - bullet (line)

<div class="sp--desc" theme="lg-light-round" fill="light" gap="2xl">
                                <div class="sp--bullet" bullet="line" theme="dark" gap="md">
                                    <div class="sp--bullet-list">
                                        민주평화통일자문회의의 조직·직무범위 기타 필요한 사항은 법률로 정한다.
                                    </div>
                                    <div class="sp--bullet-list">
                                        나는 헌법을 준수하고 국가를 보위하며 조국의 평화적 통일과 국민의 자유와 복리의 증진 및 민족문화의 창달에 노력하여 대통령으로서의 직책을 성실히 수행할 것을 국민 앞에 엄숙히 선서합니다.
                                    </div>
                                    <div class="sp--bullet-list">
                                        민주평화통일자문회의의 조직·직무범위 기타 필요한 사항은 법률로 정한다. 모든 국민은 거주·이전의 자유를 가진다. 나는 헌법을 준수하고 국가를 보위하며 조국의 평화적 통일과 국민의 자유와 복리의 증진 및 민족문화의 창달에 노력하여 대통령으로서의 직책을 성실히 수행할 것을 국민 앞에 엄숙히 선서합니다.
                                        <br />
                                        국가는 전통문화의 계승·발전과 민족문화의 창달에 노력하여야 한다. 계엄을 선포한 때에는 대통령은 지체없이 국회에 통고하여야 한다. 환경권의 내용과 행사에 관하여는 법률로 정한다.
                                    </div>
                                </div>
                            </div>

bullet sample design

<br />

<div class="sp--bullet" bullet="number" theme="dark" gap="md">
                                    <div class="sp--bullet-list">
                                        민주평화통일자문회의의 조직·직무범위 기타 필요한 사항은 법률로 정한다.
                                    </div>
                                    <div class="sp--bullet-list">
                                        나는 헌법을 준수하고 국가를 보위하며 조국의 평화적 통일과 국민의 자유와 복리의 증진 및 민족문화의 창달에 노력하여 대통령으로서의 직책을 성실히 수행할 것을 국민 앞에 엄숙히 선서합니다.
                                    </div>
                                    <div class="sp--bullet-list">
                                        민주평화통일자문회의의 조직·직무범위 기타 필요한 사항은 법률로 정한다. 모든 국민은 거주·이전의 자유를 가진다. 나는 헌법을 준수하고 국가를 보위하며 조국의 평화적 통일과 국민의 자유와 복리의 증진 및 민족문화의 창달에 노력하여 대통령으로서의 직책을 성실히 수행할 것을 국민 앞에 엄숙히 선서합니다.
                                        <br />
                                        국가는 전통문화의 계승·발전과 민족문화의 창달에 노력하여야 한다. 계엄을 선포한 때에는 대통령은 지체없이 국회에 통고하여야 한다. 환경권의 내용과 행사에 관하여는 법률로 정한다.
                                    </div>
                                </div>

</div>

Box Grid ( with --gap : global )

<div [class="sp--box"] grid="[4]" gap="[xl]" mobile="[2]" tablet="[3]">
                                <ul>
                                    <li>
                                        <img src="https://placeholder.pics/svg/400x400/eaeaea/fff">
                                    </li>
                                    <li>
                                        <img src="https://placeholder.pics/svg/400x400/cacaca/fff">
                                    </li>
                                    <li>
                                        <img src="https://placeholder.pics/svg/400x400/dadada/fff">
                                    </li>
                                    <li>
                                        <img src="https://placeholder.pics/svg/400x400/bababa/fff">
                                    </li>
                                    <li>
                                        <img src="https://placeholder.pics/svg/400x400/eaeaea/fff">
                                    </li>
                                    <li>
                                        <img src="https://placeholder.pics/svg/400x400/cacaca/fff">
                                    </li>
                                    <li>
                                        <img src="https://placeholder.pics/svg/400x400/dadada/fff">
                                    </li>
                                    <li>
                                        <img src="https://placeholder.pics/svg/400x400/bababa/fff">
                                    </li>
                                    <li>
                                        <img src="https://placeholder.pics/svg/400x400/eaeaea/fff">
                                    </li>
                                </ul>
                            </div>

Box Cover

<div class="sp--box" fill="full" gap="3xl-box" theme="white" round="md" shadow="darktop">
                                <ul>
                                    <li>
                                        그리드 형태가 아닌 일반 패딩 형태가 된다.
                                    </li>
                                </ul>
                            </div>

Box column row

Box fix - left

Box fix - right

Box fix - left, right

Box fix - multiple

Box fix - multiple (both)

Box full fix

Box auto grid ( container : fix size )

<!--
                                * grid="auto" 타입은 컨테이너의 크기가 UI를 결정한다.
                                * 내부 요소의 크기의 합 자체가 미디어 쿼리가 된다.
                                * 예를 들어 컨테이너가 1000이고 자식요소가 300 * 3 이다.
                                * 그럼 자식은 50 * 300 * 300 * 300 * 50 의 형태가 아닌,
                                * 333 * 333 * 333 형태가 된다. 
                                * flex-grow: 1; 화면 보다 작은경우에 대응
                                * flex-shrink: 1; 화면 보다 큰 경우에 대응
                                * 총 좌우 크기가 1000이지만, 1000에서는 반응하지 않으며,
                                * 원본 요소의 합인 900에서 코드가 반응한다.

* 화면을 줄여서 테스트 해보자.
                            -->
                            <div class="sp--box" [grid="auto"] vertical="middle" style="width:800px;">
                                <ul>
                                    <li>
                                        <img src="https://placeholder.pics/svg/200x200/cacaca/fff" style="width:100%;">
                                    </li>
                                    <li>
                                        <img src="https://placeholder.pics/svg/200x200/bababa/fff" style="width:100%;">
                                    </li>
                                    <li>
                                        <img src="https://placeholder.pics/svg/200x200/cacaca/fff" style="width:100%;">
                                    </li>
                                    <li>
                                        <img src="https://placeholder.pics/svg/1200x300/eaeaea/fff" style="width:100%;">
                                    </li>
                                </ul>
                            </div>

Box auto grid - multiple ( container : fix size )

<!--
                                * grid를 복합적으로 사용하는 예시다.
                                * 기본적으로 2단계 그리드 고정으로 하고,
                                * 모바일에서는 1단으로 보여주도록 마크업 한다. ( 최상단 컨테이너 )

* 내부의 컨테이너는 자동으로 만들어준다. 
                                * 그럼 최상단 컨테이너의 반응과 동시에 내부 컨테이너도 반응한다.
                                * 결론적으로 복합적인 플렉스 박스가 되는데, 이는 masonry 외 모든 레이아웃을 표현할 수 있다.

* 단언컨데 이 라이브러리는 최강입니다 ㅋㅋ
                            -->
                            
                            <div class="sp--box" [grid="2"] mobile="[1]" vertical="middle" style="width:800px;">
                                <ul>
                                    <li>
                                        
                                        <div class="sp--box" [grid="auto"] vertical="middle">
                                            <ul>
                                                <li>
                                                    <img src="https://placeholder.pics/svg/400x400/bbbbbb/fff" style="width:100%;">
                                                </li>
                                                <li>
                                                    <img src="https://placeholder.pics/svg/200x200/aaaaaa/fff" style="width:100%;">
                                                </li>
                                                <li>
                                                    <img src="https://placeholder.pics/svg/200x200/bbbbbb/fff" style="width:100%;">
                                                </li>
                                            </ul>
                                        </div>
                                    </li>
                                    <li>
                                        
                                        <div class="sp--box" [grid="auto"] vertical="middle">
                                            <ul>
                                                <li>
                                                    <img src="https://placeholder.pics/svg/200x200/ff3300/fff" style="width:100%;">
                                                </li>
                                                <li>
                                                    <img src="https://placeholder.pics/svg/200x200/ff6600/fff" style="width:100%;">
                                                </li>
                                                <li>
                                                    <img src="https://placeholder.pics/svg/400x400/ff9900/fff" style="width:100%;">
                                                </li>
                                            </ul>
                                        </div>
                                    </li>
                                </ul>
                            </div>

Box left and right ( only 2 element )

Box left and right ( multiple element )

<div class="sp--box" mobile="1" vertical="middle">
                                <ul>
                                    <li>
                                        <img src="https://placeholder.pics/svg/200x200/aaaaaa/fff" style="width:100%;">
                                    </li>
                                    <li>
                                        <img src="https://placeholder.pics/svg/200x200/bbbbbb/fff" style="width:100%;">
                                    </li>
                                    <li float="right">
                                        <img src="https://placeholder.pics/svg/200x200/cccccc/fff" style="width:100%;">
                                    </li>
                                </ul>
                            </div>

Class

name	description
.sp--box	박스 최상위 컨테이너

Attribute

name	description
grid	박스를 나눌 단위 mobile, tablet 옵션과 함께 사용해서 반응형 코드로 제작 가능.
vertical	top, middle, bottom 박스 내부 내용들의 세로 정렬
flex	박스 내부의 요소의 크기를 풀어준다. flex 기능은 써보는게 가장 좋겠다. 설명이 어렵다.