Pure

모든 웹사이트에서 사용할 수 있는 작은 반응형의 CSS 모듈 모음.

<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.2.0/pure-min.css">

시작하기 GitHub에서 보기

기본 1.2KB

그리드 0.7KB

폼 1.7KB

버튼 0.8KB

테이블 0.6KB

메뉴 1.1KB

최소용량의 CSS

Pure는 어처구니 없을 정도로 작다. 반응형 스타일, 디자인 혹은 쉬운 사용 등이 빠지지않고도 축소(minified)되고 압축(gzipped)된 용량이 4.2KB*이다. 모바일 기기를 염두에 두고 있기에 파일 사이즈를 작게 유지하고 CSS의 매 라인을 세심하게 작성하는게 중요했다. 부분만 사용하고 싶다면 더 용량을 줄일 수도 있다.

* 확실하게 말해둘 것이 있다 :) 위의 숫자들은 각각의 모듈 사이즈고, 한번에 묶으면 더 압축될 수 있다.

CSS 기반

Pure는 Normalize.css 기반으로 만들어졌으며, 순수 HTML 엘리먼트의 스타일과 레이아웃, 그리고 보편적으로 사용되는 대부분의 UI 컴포넌트가 제공된다. 불필요한 것이 없는 딱 필요한 것이다.

모바일에서 염두해야할 것

Pure는 박스가 없는 반응형이라, 엘리먼트들이 모든 사이즈에 맞춰질 수 있다. Skin Builder를 통해 당신만의 스타일을 커스텀할 수도 있다.

적용하기 위해서

Pure는 최소한의 스타일만 가지고 있고, 어플리케이션에 필요한 스타일이 있다면 최상위에 두도록 권장한다. 사용자가 작성한 것을 우선하도록 설계되었고, 쉽게 덥어쓸 수 있다.

Create responsive layouts.

그리드, 메뉴, 그리고 다른 것들을 사용하면 모든 스크린 크기의 아름다운 반응형 디자인을 쉽게 만들 수 있다. 시작하기 쉽게 만들어놨다. 조금 다른 레이아웃을 직접 보고, 든든한 후원자와 함께 다음 웹 프로젝트를 시작해보자.

레이아웃 보기

자신만의 룩앤필을 만들자.

다른 프레임워크들과는 다르게, Pure의 디자인은 관대하고 간단하며 플랫하다. 우리는 기존 룰을 덮어씌우는 것보다 새로운 CSS룰을 추가하는게 더 쉽다고 믿는다. CSS 몇줄만 추가하면 웹 프로젝트에서 Pure의 외관을 커스텀할 수 있다.

Pure 확장하기

번역이 구리다.

오역/오타 등이 있거나 문장 자체가 매끄럽지 못하다거나 단어 사용이 일관되지 못하다거나 컨벤션 등에 대해 더 좋은 의견이 있다면 이슈에 등록하거나 Pull Request를 통해 의견을 반영할 수 있다.

You make me complete.

이 사이트는 Pure v0.2.0를 사용해서 <3으로 만들어졌다.

이 사이트의 모든 코드는 다른 명시가 없다면 BSD License를 따른다.