Sepuluh Alat Panduan Gaya Hidup untuk Desainer Web - Terbaik dari
SEBUAH panduan gaya hidup adalah dokumentasi elemen dan pola UI dikumpulkan dari situs atau aplikasi dengan tujuan untuk memungkinkan pengembang untuk menggunakan gaya yang konsisten di seluruh proyek mereka. Di masa lalu, pengembang membuat panduan gaya secara manual, yang banyak pekerjaannya. Setelah beberapa saat, mereka mulai mengotomatiskan alur kerja, dan alat panduan gaya yang mengubah kode front-end menjadi perpustakaan UI yang terorganisasi dengan baik sudah mulai muncul.
Panduan gaya hidup berbeda dari panduan gaya kode, karena yang terakhir berisi aturan tentang cara menulis kode yang dapat dibaca dan dipelihara, sedangkan panduan gaya hidup koleksi pola ujung depan, seperti kelas CSS untuk tombol, widget, dan elemen tipografi. Panduan gaya kode memastikan konsistensi kode, sementara panduan gaya hidup memastikan konsistensi visual melintasi suatu situs.
Dalam posting ini, kami telah mengumpulkan 10 alat praktis yang dapat membantu Anda buat panduan gaya hidup Anda sendiri.
1. Stylify Me
Alat ini sangat menyenangkan: cukup tempel tautan situs web yang ingin Anda analisis, dan saksikan ketika panduan gayanya dihasilkan dalam satu klik mouse. Dengan Sesuaikan gaya saya, Anda dapat dengan cepat mendapatkan ikhtisar pola-pola situs, termasuk warna, font, ukuran dan jarak. Setelah prosesnya selesai, Anda bisa unduh panduan gaya dalam PDF.
2. Perakit
Perakit memungkinkan Anda untuk membangun toolkit UI Anda sendiri, mengatur sistem desain Anda, dan menghasilkan panduan gaya dari kode toolkit Anda. Jika Anda bekerja dalam tim, Anda dapat menulis dokumentasi di Markdown untuk membuatnya lebih mudah bagi pengembang lain untuk digunakan. Ini dapat membantu Anda mengatur desain / coding rutin Anda dengan cara yang Anda suka.
3. Frontify
Frontify termasuk semuanya, mulai dari mockup digital hingga wireframing. Mereka juga memiliki alat panduan gaya yang menawarkan proses desain minimalis bersih tanpa kerumitan. Anda dapat mendaftar secara gratis, dan memasukkan semua informasi yang diperlukan secara manual. Prosesnya harus mencakup palet warna, pilihan font, ikon, logo, mungkin slogan atau salinan web pilihan.
4. Aigis
Dengan Aigis, Anda dapat membuat panduan gaya dari file teks apa pun (mis. .css, .scss, .styl, .md). Anda juga dapat menulis dokumentasi di Penurunan Harga, dan menyesuaikan tema situs Anda.
5. Hologram
Hologram diciptakan oleh Trulia, dan merupakan solusi hebat untuk menghasilkan panduan gaya. Itu adalah permata Ruby itu parsing komentar di CSS Anda untuk menghasilkan panduan gaya yang luar biasa. Hologram memiliki sistem templating dengan beberapa gaya dasar dan navigasi untuk membuat panduan gaya Anda menghasilkan lebih mudah.
6. Bergaya
Dengan Gaya berpakaian, Anda dapat menulis panduan gaya CSS dengan mudah, karena ini adalah Generator panduan gaya berbasis penurunan harga. Ini akan bekerja dengan sebagian besar pengaturan pengembangan web, karena itu platform-netral. Membutuhkan sangat sedikit untuk menjalankannya. Juga, komentar yang perlu Anda tambahkan ke CSS Anda sangat minim. Anda dapat membuat dokumentasi CSS Anda di komentar CSS inline, atau sebagai file penurunan harga yang terpisah.
7. KSS
KSS (Knyle Style Sheets) terutama a spesifikasi dokumentasi dan format panduan gaya yang dimiliki sintaks komentar sendiri. KSS juga menyertakan pustaka Ruby yang diuraikan .kelancangan, .scss, dan .css file yang didokumentasikan dengan pedoman KSS menjadi panduan gaya yang rapi. KSS adalah untuk pengguna yang lebih maju dan tim profesional, karena menghasilkan panduan gaya dengannya membutuhkan pengetahuan pengkodean.
8. Generator Gaya Panduan SC5
Dengan SC5 Style Guide Generator Anda dapat membuat dan mengedit panduan gaya langsung di browser Anda. ini berdasarkan pada KSS dengan beberapa fitur keren yang disertakan, seperti UI bertenaga AngularJS yang membantu Anda melihat, mencari, dan menguji gaya Anda. SC5 menggunakan notasi dokumen yang sama dengan KSS. Ini mendukung SASS, KURANG, PostCSS dan stylesheet CSS murni.
9. Styledocco
StyleDocco adalah aplikasi Node.js berguna itu membuat panduan gaya dari stylesheet Anda. Anda dapat menginstalnya dengan npm. Dalam styleguide yang dihasilkan, StyleDocco menunjukkan pratinjau dengan gaya yang telah Anda terapkan dan contoh kode HTML.
Pada beranda StyleDocco, Anda dapat menemukan dua contoh panduan gaya, satu dihasilkan dari stylesheet standar, dan satu lagi dihasilkan dari situs Bootstrap. Contoh-contoh juga dapat membantu Anda mengambil sintaks dokumentasi yang digunakan SytleDocco.
10. Pola Lab
Lab Pola adalah kumpulan alat yang membantu Anda membuat sistem desain modular. Pattern Lab adalah generator situs statis khusus yang menyatukan semua elemen gaya di situs, dan membentuk templat serta halaman dari mereka. Ini dapat berfungsi sebagai proyek Anda perpustakaan pola dan panduan gaya frontend. Pattern Lab memungkinkan Anda melihat komponen gaya Anda secara bersamaan secara abstrak dan dalam konteks.
