Pure를 개발하던 때의 목표 중 하나는 아주아주 확장가능하게 만드는 것이었다. Pure를 추가하고 위에 CSS를 조금 쓰기만 하면, 브라우져를 통해 앱이나 사이트가 아주 개성있게 보일 수 있다. 제일 좋은 점은, 모바일 사용자나 느린 네트워크의 사용자들에게 유용하게도 CSS 파일 크기가 아주 작다는 것이다.

스타일 가이드

SMACSS 기반

Pure는 반응형 모듈들로 나누어져있다. 처음부터 우리는 CSS를 작성하는데 컨벤션으로 SMACSS를 적용했다. SMACSS에 처음이라면, 특히 모듈 규칙 부분을 읽어보면 좋다.

클래스이름 컨벤션

Pure의 컨벤션 중 하나는 모든 모듈이 모듈에 따라 공통된 기본 클래스이름을 가져야하고, 특정 하위모듈에서 특정 표현 규칙을 클래스이름을 붙인다. 모든 클래스들은 충돌을 피하기 위해 접두사인 pure-로 시작한다. 우리는 표현에 대한 클래스이름을 쓰지 않으려고 한ㄷ. 뭔가를 pure-form-horizontal이라 부르는 대신에 pure-form-aligned라고 부르려고 한다. 클래스이름과 스타일이 너무 강하게 엮이면 유지보수에 좋지 않다.

예를 들어보자면, 쌓인 폼의 HTML과 CSS를 보자:

Stacked Form: HTML

쌓인 폼은 두개의 클래스이름이 추가되는데, pure-form과 pure-form-stacked이다.

<form class="pure-form pure-form-stacked">
    ...
</form>

쌓인 폼: CSS

두개의 클래스이름은 다른 목적으로 쓰인다. 하나는 모든 폼에 대한 공통 규칙을 적용하기 위해 쓰이고, 다른 하나는 쌓인 폼을 위한 특정 규칙을 정의하기 위해 쓰인다.

/*
모든 Pure 폼이 갖는 기본 규칙. .pure-form <inputs>, <fieldsets>, 그리고 <legends>에 대한 스타일 규칙도 포함되고, 수직 정렬같은 레이아웃 규칙도 포함된다.
*/
.pure-form { ... }

/*
쌓인 폼을 적용하기 위한 특정 규칙. 쌓인 효과를 주기 위해 하위의 <input> 엘리먼트들을 display: block으로 만드는 규칙이 포함된다.
*/
.pure-form-stacked  { ... }

Pure 확장하기

Pure를 확장할 때, 이런 컨벤션을 추천한다. 예를 들어, 새로운 타입의 폼을 만들고 싶으면 이렇게 HTML과 CSS를 작성하면 좋다:

<form class="pure-form pure-form-custom">
    ...
</form>

/* 선택자에 대한 커스텀 스타일을 추가 */
.pure-form-custom { ... }

대부분이 하려는 공통적인 한가지는 버튼을 좀 다르게 보이려고 스타일하는 일이다. Pure 버튼 문서에 모듈 구조를 적용해서 사이즈와 스타일을 수정해 버튼을 어떻게 만들지에 대한 몇가지 예제가 있다.

Skin Builder 사용하기

Skin Builder는 CSS를 작성하지 않고 룩앤필을 커스텀하기 위한 좋은 방법이다. 그냥 색깔 하나 선택하고 Skin Builder를 보면 Pure의 모든 컴포넌트에 스킨을 입히는 마법을 보여준다. 생성된 CSS를 스타일시트에 복사 붙여넣기로 빠르게 사용할 수 있다.

Skin Builder 실행하기

Pure 기반으로 작성

아래의 서드파티 모듈들은 Pure 기반으로 작성되었다.

Typography

웹 타이포그라피를 위한 간단한 스타일링

그 외

이미지, 섬네일, 뱃지, 문단 메뉴, 그리고 알림의 간단한 스타일링

Pure + Bootstrap + JavaScript

Pure는 Bootstrap이나 jQuery를 포함한 다른 라이브러리들과 같이 잘 작동한다. 개발자라면 Pure를 기본 CSS 프레임워크로 사용하면서, bootstrap이나 jQuery같은 필요한 특정 모듈을 포함해 사용할 수도 있다. 이렇게 쓰면 몇가지 장점들이 있다:

• 웹사이트나 웹앱의 CSS가 엄청나게 줄어든다 — 어떤 경우에서는 최대 5배 축소!

• 맨 위에 추가만 하면 Pure의 가장 미니멀한 스타일을 적용할 수 있다. 어떤 스타일도 다시 다시 작성할 필요가 없다!

• Bootstrap CSS를 하나만 쓸 때처럼 그 생태계의 장점을 얻을 수 있다.

예를 들어, 여기 Bootstrap Modal이 있다. Pure CSS 묶음을 포함해 만들었고, 단지 Bootstrap의 modal.css와 jQuery 플러그인만 추가했을 뿐이다.

Pure + Bootstrap Modal 실행하기