Десять життєвого стилю Керівництво Інструменти для веб-дизайнерів - Кращий з

A провідник стилю життя є документація елементів і шаблонів інтерфейсу користувача зібрані з сайту або програми з метою дозволити розробникам використовувати узгоджені стилі по всьому проекту. У минулому розробники створювали стильові напрямні вручну, що дуже багато роботи. Через деякий час вони почали автоматизувати робочий процес, а також інструменти керування стилями, які перетворюють код переднього кінця добре організовані бібліотеки UI почали з'являтися.

Напрямки життя стилю відрізняються від Керівництво стилю коду, як останні містять правила про те, як писати читається і підтримуваний код, а живі напрямні є колекції шаблонів інтерфейсу, такі як класи CSS для кнопок, віджетів і типографічних елементів. Напрямки кодового стилю забезпечують узгодженість коду, в той час як живі провідники забезпечують візуальна послідовність на сайті.

У цій посаді ми зібрали 10 зручних інструментів, які можуть допомогти вам генерувати власний довідник стилю життя.

1. Стиліфікуйте Мене

Цей інструмент дуже веселий: просто вставте посилання на веб-сайт, який ви хотіли б проаналізувати, і спостерігайте за тим, як його стильний посібник створюється одним клацанням миші. С Стиліфікуйте Мене, Ви можете швидко отримати огляд шаблонів сайту, включаючи кольори, шрифти, розміри та інтервали. Після завершення процесу ви можете завантажити керівництво по стилю в PDF.

2. Виробник

Виробник дозволяє створювати власний інструментарій для користувача інтерфейсу, організовувати систему проектування та генерувати посібник з стилю з вашого коду інструментів. Якщо ви працюєте в команді, ви можете написати документацію в Markdown, щоб полегшити її використання іншим розробникам. Це може допомогти вам організувати ваш дизайн / кодування так, як вам подобається.

3. Frontify

Frontify включає в себе все, від цифрових макетів до каркасу. Вони також володіють інструментом «Стильний керівництво», який пропонує чистий мінімалістичний процес проектування без жодних труднощів. Ви можете зареєструватися безкоштовно і вручну ввести всю необхідну інформацію. Процес повинен включати кольорову палітру, вибір шрифту, піктограми, логотипи, можливо слогани або бажану веб-копію.

4. Aigis

С Aigis, Ви можете створювати напрямні стилів з будь-яких текстових файлів (напр. .css, .scss, .стил, .md). Можна також написати документацію в Markdown і налаштувати тему сайту.

5. Голограма

Голограма був створений компанією Trulia і є чудовим рішенням для створення напрямних стилів. Це каменя Ruby аналізує коментарі у вашому CSS для того, щоб генерувати дивовижні напрямні. Голограма має систему шаблонів з деякими основними стилями та навігацією, щоб зробити ваш провідник стилів ще простішим.

6. Стиль

С Styledown, Ви можете легко писати напрямні в стилі CSS, оскільки це a Генератор керівництва стилем Markdown. Вона буде працювати з більшістю установок веб-розробки, оскільки вона нейтральна до платформи. Це вимагає дуже мало, щоб отримати його і працює. Крім того, коментарі, які потрібно додати до свого CSS, дуже мінімальні. Ви можете створити свою документацію CSS у вбудованих коментарях CSS або як окремий файл Markdown.

7. КСС

KSS (Таблиці стилів Knyle) в першу чергу a специфікації документації і формат керівництва стилю, який має власний синтаксис коментарів. KSS також включає бібліотеку Ruby, що аналізує .sass, .scss, і .css файли, задокументовані Керівництвом KSS, в охайному керівництві. KSS призначений для більш просунутих користувачів і професійних команд, оскільки створення посібника з стилю вимагає кодування знань.

8. Генератор стилів SC5

З Генератор стилів SC5 Ви можете створювати та редагувати напрямні стилів безпосередньо у вашому браузері. це є на основі KSS з деякими цікавими функціями, зокрема, наприклад, користувальницький інтерфейс AngularJS, який допомагає переглядати, шукати і перевіряти стилі. SC5 використовує ту ж позначку документа, що й KSS. Він підтримує SASS, LESS, PostCSS і чисті таблиці стилів CSS.

9. Styledocco

StyleDocco це зручний додаток Node.js, який створює напрямні стилів з таблиць стилів. Ви можете встановити його за допомогою npm. У створеному стильному стилі StyleDocco показує попередній перегляд із застосованими стилями і приклад HTML-коду.

На домашній сторінці StyleDocco можна знайти два приклади керівництва стилю, один з них, згенерований з таблиці стилів за промовчанням, а інший - з сайту Bootstrap. Приклади також можуть допомогти вам підібрати синтаксис документації, який використовує компанія SytleDocco.

10. Лабораторія зразків

Шаблон лабораторії - це набір інструментів, які допоможуть вам створити модульна конструкція системи. Lab Lab - це користувальницький статичний генератор сайтів, який скріплює всі елементи стилю на сайті і формує з них шаблони та сторінки. Він може служити вашим проектом бібліотека зразків і довідник стилю frontend. Шаблон Lab дозволяє бачити компоненти стилю одночасно абстрактно і в контексті.