Poradnik dla dziesięciu projektantów stylów życia - Best of

ZA przewodnik po stylu życia jest dokumentacja elementów i wzorów interfejsu użytkownika zbierane z witryny lub aplikacji w celu umożliwienia programistom korzystania spójne style w całym projekcie. W przeszłości programiści tworzyli podręczniki stylów ręcznie, co jest dużym nakładem pracy. Po pewnym czasie zaczęli automatyzować przepływ pracy i narzędzia do stylu, które przekształcają kod frontonu dobrze zorganizowane biblioteki interfejsu użytkownika zaczęły się pojawiać.

Przewodniki stylu życia różnią się od przewodniki w stylu kodu, ponieważ te ostatnie zawierają zasady dotyczące pisania czytelnego i konserwowalnego kodu, podczas gdy przewodniki stylu życia są kolekcje wzorców frontonu, takie jak klasy CSS dla przycisków, widżetów i elementów typograficznych. Zapewniają przewodniki stylu kodu spójność kodu, podczas gdy przewodniki stylu życia zapewniają spójność wizualna w witrynie.

W tym poście zebraliśmy 10 przydatnych narzędzi, które mogą ci pomóc wygeneruj własny przewodnik po stylu życia.

1. Stylify Me

To narzędzie jest bardzo zabawne: wystarczy wkleić link do strony, którą chcesz przeanalizować, i obserwować, jak jego przewodnik po stylach jest generowany jednym kliknięciem myszy. Z Stylify Me, można szybko uzyskać przegląd wzorców witryny, w tym kolory, czcionki, rozmiar i odstępy. Po zakończeniu procesu możesz pobierz przewodnik po stylach w formacie PDF.

2. Wykonawca

Łgarz pozwala zbudować własny zestaw narzędzi interfejsu użytkownika, zorganizować system projektowania i wygenerować przewodnik stylu z kodu zestawu narzędzi. Jeśli pracujesz w zespole, możesz napisać dokumentację w Markdown, aby ułatwić innym programistom korzystanie. To może ci pomóc zorganizuj swoją procedurę projektowania / kodowania w taki sposób, jaki lubisz.

3. Frontify

Frontify obejmuje wszystko, od cyfrowych makiet po wireframing. Mają także narzędzie do stylizacji, które oferuje czysty, minimalistyczny proces projektowania bez żadnych kłopotów. Możesz zarejestrować się za darmo i ręcznie wprowadzić wszystkie niezbędne informacje. Proces powinien obejmować paletę kolorów, wybór czcionek, ikony, logo, ewentualnie hasła lub preferowaną kopię internetową.

4. Aigis

Z Aigis, możesz generować przewodniki stylu z dowolnych plików tekstowych (np. .css, .scss, .styl, .md). Możesz także napisać dokumentację w Markdown i dostosować motyw swojej witryny.

5. Hologram

Hologram został stworzony przez Trulia i jest doskonałym rozwiązaniem do generowania przewodników po stylach. To klejnot rubinowy analizuje komentarze w swoim CSS w celu wygenerowania niesamowitych przewodników po stylu. Hologram ma system szablonów z kilkoma podstawowymi stylami i nawigacją, dzięki czemu przewodnik po stylu będzie jeszcze łatwiejszy.

6. Styledown

Z Styledown, możesz z łatwością pisać poradniki w stylu CSS, ponieważ jest to Generator stylu oparty na Markdown. Będzie działał z większością ustawień tworzenia stron internetowych, ponieważ jest neutralny dla platformy. To wymaga bardzo niewiele, aby go uruchomić i uruchomić. Ponadto komentarze, które musisz dodać do swojego CSS, są bardzo minimalne. Możesz stworzyć swoją dokumentację CSS w komentarzach CSS lub w osobnym pliku Markdown.

7. KSS

KSS (Knyle Style Sheets) jest przede wszystkim a specyfikacja dokumentacji i format przewodnika stylu, który ma jego własna składnia komentowania. KSS zawiera również bibliotekę Ruby, która analizuje .sass, .scss, i .css pliki udokumentowane wytycznymi KSS w zgrabny przewodnik po stylu. KSS jest przeznaczony dla bardziej zaawansowanych użytkowników i profesjonalnych zespołów, ponieważ generowanie przewodnika po stylach wymaga znajomości kodowania.

8. Generator przewodników po stylach SC5

Z Przewodnik po przewodniku stylów SC5 możesz tworzyć i edytować przewodniki stylu bezpośrednio w przeglądarce. To jest na podstawie KSS zawiera kilka fajnych funkcji, takich jak interfejs użytkownika zasilany AngularJS, który pomaga przeglądać, wyszukiwać i testować swoje style. SC5 używa tej samej notacji dokumentu co KSS. Obsługuje arkusze stylów SASS, LESS, PostCSS i czyste CSS.

9. Styledocco

StyleDocco to przydatna aplikacja Node.js, która tworzy przewodniki stylu z arkuszy stylów. Możesz zainstalować go za pomocą npm. W wygenerowanym wzorniku stylów StyleDocco wyświetla podgląd z zastosowanymi stylami i przykładem kodu HTML.

Na stronie głównej StyleDocco można znaleźć dwa przykłady przewodnika po stylach, jeden wygenerowany z domyślnego arkusza stylów, a drugi wygenerowany ze strony Bootstrap. Przykłady mogą również pomóc w wyborze składni dokumentacji używanej przez SytleDocco.

10. Laboratorium wzorców

Laboratorium wzorców to zbiór narzędzi, które pomogą Ci stworzyć modułowy system projektowania. Pattern Lab to niestandardowy statyczny generator witryn, który łączy wszystkie elementy stylu w witrynie oraz tworzy z nich szablony i strony. Może służyć jako projekt biblioteka wzorów i przewodnik po stylach frontendu. Laboratorium wzorców umożliwia jednoczesne wyświetlanie elementów stylu abstrakcyjnie i w kontekście.