웹 디자이너를위한 10 가지 생활 스타일 가이드 도구 -
에이 생활 스타일 가이드 ~이다. UI 요소 및 패턴 문서화 개발자가 사용할 수 있도록 사이트 또는 응용 프로그램에서 수집 한 정보 전체 프로젝트에서 일관된 스타일. 과거에는 개발자가 수동으로 스타일 가이드를 만들었으므로 많은 작업이 필요했습니다. 잠시 후, 그들은 워크 플로우를 자동화하기 시작했고, 프론트 엔드 코드를 잘 조직 된 UI 라이브러리 나타나기 시작했다..
생활 스타일 가이드는 코드 스타일 가이드, 후자에는 읽기 쉽고 유지 보수가 가능한 코드를 작성하는 방법에 대한 규칙이 들어 있기 때문에 생활 스타일 가이드는 버튼, 위젯 및 인쇄상의 요소를위한 CSS 클래스와 같은 프론트 엔드 패턴 모음. 코드 스타일 가이드가 보장합니다. 코드 일관성, 생활 스타일 가이드가 보장하는 동안 시각적 일관성 사이트 전체.
이 게시물에서 우리는 당신을 도울 수있는 편리한 도구 10 개를 모았습니다. 나만의 생활 스타일 가이드 만들기.
1. 나를 세련되게해라.
이 도구는 많은 재미를 가지고 있습니다. 분석하려는 웹 사이트의 링크를 붙여 넣기 만하면 스타일 가이드가 마우스 클릭 한 번으로 생성되므로 볼 수 있습니다. 와 나를 스타일있게, 색상, 글꼴, 사이징 및 간격을 포함하여 사이트 패턴의 개요를 빠르게 얻을 수 있습니다. 프로세스가 완료되면 PDF로 스타일 가이드를 다운로드하십시오..
2. Fabricator
제작자 자신 만의 UI 툴킷을 만들고, 디자인 시스템을 구성하며, 툴킷 코드에서 스타일 가이드를 생성 할 수 있습니다. 팀에서 일하는 경우 다른 개발자가 쉽게 사용할 수 있도록 Markdown에 설명서를 작성할 수 있습니다. 그것은 당신을 도울 수 있습니다. 디자인 / 코딩 루틴 구성 네가 좋아하는 방식으로.
3. 앞을 내다
Frontify 디지털 모형에서 와이어 프레임까지 모든 것을 포함합니다. 그들은 또한 번거 로움없이 깨끗하고 최소한의 디자인 과정을 제공하는 스타일 가이드 도구를 가지고 있습니다. 무료로 등록하고 필요한 모든 정보를 수동으로 삽입 할 수 있습니다. 색상 팔레트, 글꼴 선택, 아이콘, 로고, 가능한 구두 또는 기본 웹 사본이 프로세스에 포함되어야합니다..
4. 아이기스
와 아이 기스, 모든 텍스트 파일에서 스타일 가이드를 생성 할 수 있습니다 (예 :. .CSS, .scss, .스타일, .MD). Markdown에서 문서를 작성하고 사이트 테마를 사용자 정의 할 수도 있습니다..
5. 홀로그램
홀로그램 Trulia가 만들었으며 스타일 가이드를 생성하는 훌륭한 솔루션입니다. 루비 보석입니다. CSS의 주석을 분석합니다. 멋진 스타일 가이드를 생성합니다. 홀로그램은 기본 스타일과 네비게이션이있는 템플리트 시스템을 사용하여 스타일 가이드를보다 쉽게 생성 할 수 있습니다..
6. 스타일 지정
와 스타일 지정, CSS 스타일 가이드를 쉽게 작성할 수 있습니다. Markdown 기반 스타일 가이드 생성기. 그것은 플랫폼 중립적 인 것처럼 대부분의 웹 개발 설정에서 작동합니다. 그것을 시작하고 실행하는 데는 거의 필요하지 않습니다. 또한 CSS에 추가해야 할 의견은 거의 없습니다. 인라인 CSS 주석 또는 별도의 Markdown 파일로 CSS 문서를 만들 수 있습니다.
7. KSS
KSS (Knyle Style Sheets) 주로 문서화 명세 스타일 가이드 형식은 자체 주석 구문. KSS는 또한 루비 라이브러리를 포함하고 있습니다. .축축한, .scss, 과 .CSS KSS 지침에 따라 문서화 된 파일을 깔끔한 스타일 가이드로 만듭니다. KSS는 고급 사용자와 전문 팀을 위해 스타일 정보를 생성하려면 코딩 지식이 필요합니다..
8. SC5 스타일 가이드 생성기
와 더불어 SC5 스타일 가이드 생성기 브라우저에서 스타일 가이드를 직접 만들고 편집 할 수 있습니다. 그것은 KSS 기준 스타일을보고 검색하고 테스트하는 데 도움이되는 AngularJS 기반 UI와 같은 멋진 기능이 포함되어 있습니다. SC5는 KSS와 동일한 문서 표기법을 사용합니다. SASS, LESS, PostCSS 및 순수 CSS 스타일 시트를 지원합니다..
9. Styledocco
스타일 도코 편리한 Node.js 앱입니다. 스타일 시트에서 스타일 가이드를 만듭니다.. npm으로 설치할 수 있습니다. 생성 된 스타일 가이드에서 StyleDocco는 적용한 스타일과 HTML 코드의 예를 보여주는 미리보기를 보여줍니다.
StyleDocco의 홈 페이지에는 기본 스타일 시트에서 생성 된 스타일 가이드와 Bootstrap 사이트에서 생성 된 스타일 가이드의 두 가지 스타일 예제가 있습니다. 이 예제는 SytleDocco가 사용하는 문서 구문을 선택할 때도 도움이 될 수 있습니다..
10. 패턴 실험실
패턴 실험실 다음과 같은 도구를 만드는 데 도움이되는 도구 모음입니다. 모듈 식 설계 시스템. 패턴 랩은 사용자 지정 정적 사이트 생성기로 사이트의 모든 스타일 요소를 연결하고 템플릿 및 페이지를 만듭니다. 프로젝트의 역할을 할 수 있습니다. 패턴 라이브러리 과 프론트 엔드 스타일 가이드. Pattern Lab을 통해 스타일 구성 요소를 동시에 볼 수 있습니다. 추상적으로 과 문맥.
