starwars:

Now this is a podracing poster!

starwars:

Now this is a podracing poster!

클래스 명 짓기는 정말 힘들어

원문: Naming CSS Stuff Is Really Hard

CSS 아키텍쳐나 네이밍 컨벤션이 아닌 클래스 명 자체에 대한 글.

※ 사실 class는 CSS가 아니라 HTML. CSS에는 클래스 선택자만 있을 뿐…

클래스 명을 세가지 카테고리로 분류

기능에 따른 클래스 명

<button class="positive-button">메시지 전송</button>

단, 기능에 따라 클래스 명을 작성하는 게 항상 가능하지는 않음.

내용 기반 클래스 명

<button class="submit-button">메시지 전송</button>

하지만…

시각적인 클래스 명

<button class="green-button">메시지 전송</button>

단점

의미에 맞지 않는데?(not semantic)

정리

“Outside In” - 중요도에 따라 CSS 속성 정렬하기

원문: “Outside In” — Ordering CSS Properties by Importance

예)

선언 순서

  1. 레이아웃: position, float, clear, display
  2. 박스모델: width, height, margin, padding
  3. 비쥬얼: color, background, border, box-shadow
  4. 타이포그래피: font-size, font-family, text-align, text-transform
  5. 기타: cursor, overflow, z-index

코드 예제

.button {
    display:inline-block;
    margin:1em 0;
    padding:1em 4em;

    color:#fff;
    background:#196e76;
    border:0.25em solid #196e76;
    box-shadow:inset 0.25em 0.25em 0.5em rgba(0,0,0,0.3),
               0.5em 0.5em 0 #444;

    font-size:3em;
    font-family:Avenir, Helvetica, Arial, sans-serif;
    text-align:center;
    text-transform:uppercase;
    text-decoration:none;
}

Simian UI Montage

The Ferrari 330 P4 is One Sexy Beast

Barcelona GO!

mazeon:

DeLorean Time Machine (Back to the Future II)Shown at 300 percent.

mazeon:

DeLorean Time Machine (Back to the Future II)
Shown at 300 percent.

Behold, the Fold(요약)

멀티 스크린과 the fold(접히는 지점. 즉, 뷰포트가 끝나는 지점), 더 나아가 반응형 디자인에 대해 대화 형식으로 재미있게 풀어낸 글이 있어 요약하여 옮겨봅니다.

원문: Behold, the Fold

fold 옹호자: 이 내용은 fold 위에 있어야해.

Sophie: fold? fold는 신문에나 해당 사항이 있는 거지. 요런 기기가 아닌 이상 화면은 접히지 않아.

fold 옹호자: 그럼 화면 바깥의 내용은?

Sophie: fold 대신 수평선(그 이후로도 무언가 존재한다는 건 알지만 내용을 볼 수는 없는 선)이라고 치자. 이렇게 다양한 기기 해상도에서 그 기준을 정할 수 있어? 그래서 화면에 맞춰 디자인하는게 아니라 콘텐츠에 맞춰 디자인해야하는 거야. 이게 반응형 디자인이야.

fold 옹호자: 그치만 중요한 7가지 내용을 580px 내에 보이게 할 수는 없나?

Sophie: 할 수는 있는데 그건 박물관의 모든 전시물을 하나의 방 안에 쑤셔넣는 거랑 같아. 대신 사용자가 상단에서 하단으로 페이지를 보게 되므로 중요한 내용을 상단에 위치 시키고 디자인과 레이아웃으로 사용자를 하단으로 유도하도록 디자인해야해.

fold 옹호자: 사용자에게 스크롤하라고 하는게 괜찮은 건지 모르겠네…

Sophie: 스크롤은 숨 쉬는 것과 같아. 사용자는 스크롤하고 있다는 것도 의식 못하고 스크롤을 해. 의식적으로 스크롤을 할지 말지 결정을 해본 적 있어?

fold 옹호자: 와! 그렇게는 생각 안해봤네. 니 말이 다 맞아.

Sophie: 고맙워. 같이 일해서 즐거웠어.

fold 옹호자: 자, 이제 무한 스크롤 얘기를 해볼까?

[Sophie 서둘러 퇴장]

DESERT OUTLAW

trendgraphy:

Type Warp Animation by Roy Veldkamp
Twitter: @Trendgrafeed

trendgraphy:

Type Warp Animation by Roy Veldkamp

Twitter: @Trendgrafeed

(출처: trendgraphy, goodtypography에서)