콘셉트 매뉴얼 같이 만들어 봅시다. [kalei 편]

2871 단어 CSS

원래 스타일 매뉴얼은

  • 사이트에 정의된 스타일 리스트와 인코딩 규약 문서
  • 표기법으로 댓글을 쓰면 좋은 느낌으로 자동으로 생성되는 도구 몇 개.
  • 스타일 가이드를 만드는 장점

  • "그 반 이름이지", "이 사이트, 다른 반 있지"같은 경우에는 CSS를 하나하나 다 읽거나 찾아내지 마세요.
  • CSS 디자인에서 인기가 없는 부분을 발견할 수 있습니다.
    (명명 규칙의 규칙이 붕괴되고 같은 디자인이 다른 곳에서 재사용할 수 없는 반의 발견 등)
  • 스타일 가이드 도구

  • KSS · Knyle Style Sheets
    루비 위로 이동합니다.
    Giithub 자체도 이걸 사용하고 있습니다.
    서버 모드가 있습니다.
  • StyleDocco
    node.js가 필요합니다.문턱이 KSS보다 낮아서 cd지령을 알면 방법이 있을 거야.
    ※ 다만, 최근(2014년 4월 현재) 크롬에서 본 미리보기 기능은 좋지 않은 것 같습니다.상세한 것은 아래 문장을 보십시오.
    Styledocco는 크롬에서 iframe 부분을 볼 수 없어요!이 경우 즉각적인 해결 방법
  • Kalei Styleguide
    Ruby 및 Nodejs 같은 거 필요 없으니까 환경이 안 좋아도 누구나 사용할 수 있어요.
    다만 scss가 대응하지 않습니다.
  • 카레로 스타일링 가이드.


    1. github에서 파일을 가져옵니다.
    2. 서버에 올려 확인한다.동작이 잘 되면 오케이.
    3.css/styles.만지작거리다
    styles.css는 스타일 안내서의 맨 윗부분 화면이 됩니다.
    파일 이름을 변경하려면js에 적힌 스타일.css 위치를 변경합니다.
    CSS를 새로 추가하려면@import 파일을 읽기만 하면 왼쪽 메뉴에 추가됩니다.
    (참고로 상대 경로에서 서로 다른 계층의 물건을 읽으면 왼쪽 메뉴의 글씨체가 빨간색으로 변한다.)
    다음 두 가지는 디자인 스타일 가이드에 필요합니다.
    @import url("theme.css");
    @import url("highlight/styles/googlecode.css");
    
    CSS는 import 또는 의견 외에 직접 작성할 수 있습니다.
    (이유가 없다면 직접 쓰기보다는 개발용 환경에 깊이 들어가 상대적인 경로로 해당하는 CSS를 설정하는 것이 좋다)
    문서는 주석(/*~*/)에 표시됩니다.
    임시 이미지를 배치하고 싶은 경우PLACEHOLD.IT 사용하면 사이즈도 알기 편해요.
    예:
    <img src="http://placehold.it/350x150"> 또한 왼쪽 메뉴의 표시가 마음에 들지 않으면templates/style/menu입니다.수정됨). 개인적으로theeme.css 같은 걸 보여주기 싫어서 여기서 강제로 삭제합니다. 스타일 매뉴얼 작성 시 고려 사항 이렇게 말하기보다는 본래의 CSS 표기법이다. 스타일 매뉴얼을 만들 때 지나치게 부모 요소에서 지정하면 번거롭다. body #main .nav li a {   color: #333; } 바디의 지정이 없어도 너무 부모 요소로 지정하면 다른 곳에서 유용하기 어려워요. 해당 CSS 파일도 무거워집니다. 나는 가능한 한 학급 명칭을 붙이고 간단하게 지정해야 한다고 생각한다... 스타일 매뉴얼을 만들면 모듈에 대한 고려도 많기 때문에 (순서는 반대로) 프로젝트와 함께 제작하는 것이 좋다.(시간이 있으면.) 때때로 명명 규칙에서 영어의 맞춤법 오류, 이해하기 어려운 학급명, 부족한 요소 등이 나타난다.

    좋은 웹페이지 즐겨찾기