프론트엔드

부트스트랩보다 간단한걸 찾는 그대에게, spectre.

CyberI 2016. 8. 8. 13:04

평안하신가요

어느덧 세월은 흐르고 흘러 16년도도 8월입니다. 

여기 적혀있는 글이 조금이나마 도움이 되었으면 좋겠습니다.

css framework를 소개하고자 합니다.

spectre 라고 하고, 일반적으로는 스펙터 라고 읽습니다.

불안, 유령이라는 사전적 의미를 가지고 있습니다.

스펙터의 장점과 단점을 추려본다면,

(뒤이어 나올 스펙터의 테이블 class를 적용하여 장단점 테이블을 만들어 보았습니다.)

 장점

단점 

  - 가볍습니다.

   - 초기모델이라 기본적인 것만 있습니다.

  - javascript 코드가 없습니다, 

     쉬워서 접근성이 좋습니다.

    (기능에 따라서 조금은 있을 수 있습니다)

   - 부트스트랩(bootstrap)이라는 

      강력한 툴이 이미 존재합니다.

   - 무료입니다.

 


별건 없지만, 그에 못지않게 해준것도 별게 없습니다.

간단하게 쓰고 싶을때 쓰면 되겠습니다. 

스펙터는 어떤 기능이 있는지 모아보겠습니다.

 - asian font 지원 ( 한자, 일본어, 한글폰트 )
 - 테이블, form 태그 관련 input button들
 - 반응형 화면, 그리드! ( 보고있나 부트스트랩 )
 - avatar ( 사용자 프로필 같은, )
 - 자동완성 ( js파일을 추가한다면 )
 - modal ( 모달창, 팝업되어 나오는 새창같지만 새창은 아닌 )
 - 툴팁, 뱃지( 버튼의 한쪽에 떠있는 그런 )
 - 메뉴, 네비게이션 스타일
 - 쪽수 매기기(paging)
 - javascript loading bar (로딩바, 생각보다 자주쓰이고 유용합니다)


등이 있습니다.

이제부터 이 기능들을 자세하게 살펴볼건데, 

스펙터 프로젝트가 가지고 있는 샘플페이지를 각색해서 살펴보겠습니다.


출발~~ㄹ


getting started

3가지 방법이 있지만 가장 쉬운 세번째 방법을 추천드립니다.

Install manually

깃허브 주소입니다. (약 27KB):

Download Spectre.css

Install with NPM
$ npm install spectre.css
Install with Bower
$ bower install spectre.css

And include it in your website or Web app <head>

<link rel="stylesheet" href="dist/spectre.min.css" />


typography


헤딩태그들을 기본적으로 이렇게 정의해 두었습니다.

Typography sets default styles for headings, paragraphs, blockquote, lists and code elements.


headings

H1 Title 5rem

H2 Title 4rem

H3 Title 3rem

H4 Title 2.4rem

H5 Title 2rem
H6 Title 1.6rem
<h1>H1 Title</h1>
<h2>H2 Title <small class="label">4rem</small></h2>

paragraphs
텍스트에 하이라이트를 줄 수 있습니다.
주고 싶은 단어를 span태그로 감싸고 클래스를 줍니다.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

<p>Lorem ipsum dolor sit amet, <span class="highlight">consectetur</span> adipiscing elit. Praesent risus leo, <a href="#">dictum in vehicula sit amet</a>, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.</p>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>

optimized for asian fonts

일본어, 한자, 한국어 폰트를 지원합니다.

"Helvetica Neue", "Microsoft YaHei", "Malgun Gothic" (맑은 고딕)등등


你好, こんにちは, 안녕하세요


Chinese (Simplified), 간체

革命不是请客吃饭，不是做文章，不是绘画绣花，不能那样雅致，那样从容不迫，“文质彬彬”，那样“温良恭俭让”。革命就是暴动，是一个阶级推翻一个阶级的暴烈的行动。

Japanese

祇園精舎の鐘の声、諸行無常の響きあり。沙羅双樹の花の色、盛者必衰の理をあらはす。おごれる人も久しからず。ただ春の夜の夢のごとし。たけき者も遂にはほろびぬ、ひとへ‌​に風の前の塵に同じ。

Korean

나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로, 어리석은 백성들이 말하고자 하는 바가 있어도, 끝내 제 뜻을 펴지 못하는 사람이 많다. 내가 이를 불쌍히 여겨, 새로 스물 여덟 글자를 만드니, 사람마다 하여금 쉽게 익혀, 날마다 씀에 편하게 하고자 할 따름이다.



tables

깔끔한 테이블 스타일!


name duration genre release date
The Shawshank Redemption 2h 22min Crime, Drama 14 October 1994 USA
The Godfather 2h 55min Crime, Drama 24 March 1972 USA
Schindler's List 3h 15min Biography, Drama, History 4 February 1994 USA
Se7en 2h 7min Crime, Drama, Mystery 24 March 1972 USA

<table> 태그에 css를 추가하고 구분하고 싶은(짝수) tr에 클래스를 추가해주면 됩니다.


Add the class table to any <table> element. The class will add padding, border and emphasized table header. Use table-striped to <table> to add zebra striped style. For hoverable table rows, you can add the class table-hover to enable hover style.

Use the class selected to make <tr> element highlighted. 

<table class="table table-striped table-hover">
    <thead>
        <tr>
            <th>name</th>
            <th>duration</th>
            <th>genre</th>
            <th>release date</th>
        </tr>
    </thead>
    <tbody>
        <tr class="selected">
            <td>The Shawshank Redemption</td>
            <td>2h 22min</td>
            <td>Crime, Drama</td>
            <td>14 October 1994</td>
        </tr>
    </tbody>
</table>


buttons

간단하게 로딩바를 표현해줍니다.

로딩바만 사용하고 싶다면 div에 loading 클래스만 추가하시면 됩니다

<button class="btn">default button</button>
<button class="btn btn-primary">primary button</button>
<button class="btn btn-link">link button</button>

<!-- a button with loading state -->
<button class="btn loading">button</button>

forms

회원가입 form은 이걸로 퉁칠 수 있을 것 같습니다

<form>
    <!-- form input control -->
    <div class="form-group">
        <label class="form-label" for="input-example-1">Name</label>
        <input class="form-input" type="text" id="input-example-1" placeholder="Name" />
    </div>
    <!-- form radio control -->
    <div class="form-group">
        <label class="form-label">Gender</label>
        <label class="form-radio">
            <input type="radio" name="gender" />
            <i class="form-icon"></i> Male
        </label>
        <label class="form-radio">
            <input type="radio" name="gender" checked />
            <i class="form-icon"></i> Female
        </label>
    </div>
    <!-- form select control -->
    <div class="form-group">
        <select class="form-select">
            <option>Choose an option</option>
            <option>Slack</option>
            <option>Skype</option>
            <option>Hipchat</option>
        </select>
    </div>
    <!-- form switch control -->
    <div class="form-group">
        <label class="form-switch">
            <input type="checkbox" />
            <i class="form-icon"></i> Send me emails with news and tips
        </label>
    </div>
    <!-- form textarea control -->
    <div class="form-group">
        <label class="form-label" for="input-example-3">Message</label>
        <textarea class="form-input" id="input-example-3" placeholder="Textarea" rows="3"></textarea>
    </div>
    <!-- form checkbox control -->
    <div class="form-group">
        <label class="form-checkbox">
            <input type="checkbox" />
            <i class="form-icon"></i>  Remember me
        </label>
    </div>
</form>

가로버전을 원한다면 클래스를 하나 추가해주면 된다고 하네요!

뒷부분에 언급하겠지만 col-sm-3 같이 반응형 화면분할이 가능합니다.


If you want to have a horizontal form, add the class form-horizontal to the <form> container. And add the class col-[1-12] to the child elements for form row layout. Please note form-horizontal only works in viewports that are at least 840px wide.

<form class="form-horizontal">
    <div class="form-group">
        <div class="col-sm-3">
            <label class="form-label" for="input-example-1">Name</label>
        </div>
        <div class="col-sm-9">
            <input class="form-input" type="text" id="input-example-1" placeholder="Name" />
        </div>
    </div>
    <!-- form structure -->
</form>

유효성 검사도 지원합니다.

To use form validation styles, add is-success and is-danger to the controls or add has-success and has-danger to parent elements.

<form>
    <!-- form validation styles -->
    <div class="form-group has-success">
        <label class="form-label" for="input-example-1">Name</label>
        <input class="form-input is-success" type="text" id="input-example-1" placeholder="Name" />
    </div>
</form>

media


클래스를 추가하여 이미지나 영상을 배치할 수 있습니다.


Add the class img-responsive to <img> elements. The images will scale with the parent sizes.

src속성에 링크를 걸어주면 유용하게 사용할 수 있습니다.

For responsive video, add a container with the class video-responsive. Insert any YouTube, Youku or other iframe/embed video inside the container. The ratio is 16:9 by default. You may add .video-responsive-4-3 for 4:3 ratio video container.

<img src="img/osx-el-capitan.jpg" class="img-responsive rounded" />

<div class="video-responsive">
    <iframe src="https://www.youtube.com/embed/vBfBa-gCMQk" width="560" height="315" frameborder="0" allowfullscreen></iframe>
</div>


responsive grid

부트스트랩을 아신다면 익숙한 그리드입니다.

화면 넓이가 바뀌면 비율이 같이 줄어들거나 줄바꿈을 해줍니다.

xs, sm, md 순으로 점차 커집니다.


Spectre provides a neat responsive layout grid system. There are .col-xs-[1-12], .col-sm-[1-12] and .col-md-[1-12] available for flexible grid across mobile, tablet and desktop viewport usage.

  • For window width less than 480px, all columns will show as a single row.
  • col-xs-[1-12] apply to window width greater than or equal to 481px.
  • col-sm-[1-12] apply to window width greater than or equal to 601px.
  • col-md-[1-12] apply to window width greater than or equal to 841px. 
<div class="container">
    <div class="columns">
        <div class="column col-xs-6">col-xs-6</div>
        <div class="column col-xs-3">col-xs-3</div>
        <div class="column col-xs-3">col-xs-3</div>
    </div>
</div>

특정 사이즈를 숨기고자 하면 .hide~~ 클래스를 적용하면 가능합니다.

For hiding elements on specific viewport sizes, there are classes .hide-xs, .hide-sm, .hide-md, .hide-lg and .hide-xl available.

  • hide-xs hides elements when the viewport is smaller than or equal to 480px.
  • hide-sm hides elements when the viewport is smaller than or equal to 600px.
  • hide-md hides elements when the viewport is smaller than or equal to 840px.
  • hide-lg hides elements when the viewport is smaller than or equal to 960px.
  • hide-xl hides elements when the viewport is smaller than or equal to 1280px.

Spectre also has a responsive web test tool Responsive Resizer. You can use it locally in the directory /tools/resizer or online.

Responsive Resizer


avatars

Avatars are user profile pictures.

01

02

03

.avatar 클래스를 태그에 추가하면 되고, 가능한 사이즈는 4가지 정도가 있습니다.

Add the class avatar to <img> element. There are 4 additional sizes available, including avatar-xl (64px), avatar-lg (48px), avatar-sm (24px), and avatar-xs (16px). By default, the avatar size is 32px.


와, 사진이 없는 유저는 이니셜로 표시 할 수도 있네요. .data-initial 클래스를 추가합니다.

For users who don't have profile pictures, you may use their initials for avatars. Add the class avatar and avatar size class to <div> element. The attribute data-initial is the name appear inside the avatar.

<figure class="avatar avatar-xl">
    <img src="img/avatar-1.png" />
</figure>

<figure class="avatar avatar-xl">
    <img src="img/avatar-1.png" />
    <img src="img/avatar-5.png" class="avatar-icon" />
</figure>

<figure class="avatar avatar-xl" data-initial="YZ" style="background-color: #5764c6;"></figure>


chips

작은 블럭안에서 텍스트와 이미지를 표시하기에 좋습니다.

Crime
Drama
Biography
Mystery


Add a container element with the class chip. And add child text elements with chip-name or icons with icon.

<div class="chip-sm">
    <span class="chip-name">Crime</span>
    <button class="btn btn-clear"></button>
</div>

<div class="chip-sm">
    <span class="icon icon-favorite_border"></span>
    <span class="chip-name">Drama</span>
    <button class="btn btn-clear"></button>
</div>

<div class="chip-sm">
    <img src="img/avatar-1.png" class="avatar" />
    <span class="chip-name">Yan Zhu</span>
    <button class="btn btn-clear"></button>
</div>


autocomplete

자동완성 기능으로 이전에 입력했던 데이터를 추천해줍니다

Autocomplete form component provides suggestions while you type. It is often used for tags and contacts input.



자동완성 기능을 자유롭게 이용하기위해서는 JS 파일이 필요합니다.

스펙터에서는 스크립트가 없지만 사용하고자하는 JS 파일을 추가해주시기 바랍니다.


Add a container element with the class form-autocomplete. There are 2 parts of it, one is form-autocomplete-input, another is form-autocomplete-list. Spectre.css does not include JavaScript code, you will need to implement your JS to interact with the autocomplete. The autocomplete HTML structure is exampled below. 

<div class="form-autocomplete">
    <!-- autocomplete input container -->
    <div class="form-autocomplete-input">
        <!-- autocomplete chips -->
        <div class="chip-sm">
            <img src="img/avatar-1.png" class="avatar" />
            <span class="chip-name">Yan Zhu</span>
            <button class="btn btn-clear"></button>
        </div>
        <div class="chip-sm selected">
            <img src="img/avatar-2.png" class="avatar" />
            <span class="chip-name">Yan Zhu</span>
            <button class="btn btn-clear"></button>
        </div>
        <!-- autocomplete real input box -->
        <input class="form-input" type="text" placeholder="typing here" />
    </div>
    <!-- autocomplete suggestion list -->
    <ul class="form-autocomplete-list">
        <!-- autocomplete list chips -->
        <li class="form-autocomplete-item">
            <div class="chip hand">
                <div class="chip-icon">
                    <img src="img/avatar-4.png" class="avatar" />
                </div>
                <div class="chip-content">
                    Steve Rogers
                </div>
            </div>
        </li>
        <li class="form-autocomplete-item">
            <div class="chip hand">
                <div class="chip-icon">
                    <img src="img/avatar-3.png" class="avatar" />
                </div>
                <div class="chip-content">
                    Yan Zhu
                </div>
            </div>
        </li>
    </ul>
</div>



tooltips

마우스 오버시 관련 설명이 나타나는 툴팁입니다.

툴팁은 이미 간단하게 구현하는 소스가 많이 돌아다니고 있지만

스펙터에서는 더욱 간단하게 클래스 추가만으로 사용할 수 잇습니다.


Tooltips provide context information labels that appear on hover and focus.

Tooltip component is built entirely in CSS.

Add the class tooltip and the attribute data-tooltip, which contains the tooltip content, to non self closing elements. And add the class name tooltip-right, tooltip-bottom or tooltip-left to define the position of a tooltip. By default, the tooltip appears above the element.

<button class="btn tooltip" data-tooltip="Lorem ipsum dolor sit amet">top tooltip</button>
<button class="btn tooltip tooltip-right" data-tooltip="Lorem ipsum dolor sit amet">right tooltip</button>


badges

알림 기능을 구현할 때 유용할 것 같은 css 입니다.


Badges are often used as unread number indicators.

Notifications
Notifications
Notifications
Notifications

Add the class badge to non self closing elements. And add the attribute data-badge to define the content of a badge. The badge will appear in the top-right direction of the element.

<span class="badge" data-badge="99">
    Notifications
</span>


menus



modals

모달창 입니다.

Modals are flexible dialog prompts.

Modal title

This is the content inside the modal.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.

Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.

Cupcake ipsum

Jelly-o sesame snaps halvah croissant oat cake cookie. Cheesecake bear claw topping. Chupa chups apple pie carrot cake chocolate cake caramels.

De braaaiiiins apocalypsi gorger omero prefrontal cortex undead survivor fornix dictum mauris. Hi brains mindless mortuis limbic cortex soulless creaturas optic nerve.

Candy ipsum

Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar.

Caerphilly swiss fromage frais. Brie cheese and wine fromage frais chalk and cheese danish fontina smelly cheese who moved my cheese cow.

클래스를 추가하는 것만으로 모양은 구현되지만

자유롭게 사용하려면 JS 코드가 필요합니다.


Add a container element with the class modal. And add a real container modal-container and overlay modal-overlay inside it. You can add child elements with the class name modal-header, modal-content and modal-footer - any or all of them.

Spectre.css does not include JavaScript code, you will need to implement your JS to interact with modals. To make a modal appear, add the class active to the modal container

<div class="modal active">
    <div class="modal-overlay"></div>
    <div class="modal-container">
        <div class="modal-header">
            <button class="btn btn-clear float-right"></button>
            <div class="modal-title">Modal title</div>
        </div>
        <div class="modal-body">
            <div class="content">
                <!-- content here -->
            </div>
        </div>
        <div class="modal-footer">
            <button class="btn btn-link">Close</button>
            <button class="btn btn-primary">Share</button>
        </div>
    </div>
</div>

cards

카드형 박스로, 컨텐츠를 담을때 유용한 프레임입니다.


마찬가지로 css만 추가해주면 됩니다.

Add a container element with the class card. And add child elements with the class name card-image, card-header, card-content and/or card-footer. The card-image can be placed in any position.

<div class="card">
    <div class="card-image">
        <img src="img/osx-el-capitan.jpg" class="img-responsive" />
    </div>
    <div class="card-header">
        <h4 class="card-title">Microsoft</h4>
        <h6 class="card-meta">Software and hardware</h6>
    </div>
    <div class="card-body">
        To make a contribution to the world by making tools for the mind that advance humankind.
    </div>
    <div class="card-footer">
        <button class="btn btn-primary">Do</button>
    </div>
</div>

GitHub Repo | Back to top | version: 0.1.25

Designed and built with love by Yan Zhu. Licensed under the MIT License.


.맺음말 {
    도움이 되셨다면 : 댓글하나 부탁드려요;
}


저작자표시

'프론트엔드' 카테고리의 다른 글

마이크로 서비스 아키텍처를 위한 Frontend 개발패턴  (0) 2016.10.12
CSS Naming Conventions BEM  (0) 2016.08.17
Event 기반 Microservices - Event Sourcing 및 CQRS  (0) 2016.08.05
ajax 개미지옥 callback hell !!!  (0) 2016.07.15
Raphael로 웹에 낙서를 해봅시다. -TEXT편-  (0) 2016.07.14
댓글

티스토리툴바