Ten Panduan Gaya Gaya Hidup untuk Pereka Web - Terbaik
A panduan gaya hidup ialah dokumentasi unsur dan corak UI dikumpulkan dari tapak atau aplikasi dengan tujuan untuk membolehkan pemaju menggunakannya gaya konsisten merentasi keseluruhan projek mereka. Pada masa lalu, pemaju mencipta panduan gaya secara manual, yang banyak kerja. Selepas beberapa ketika, mereka mula mengautomasikan alur kerja, dan alat panduan gaya yang mengubah kod hadapan perpustakaan UI yang teratur telah mula muncul.
Panduan gaya hidup adalah berbeza dari panduan gaya kod, kerana yang terakhir mengandungi peraturan tentang cara menulis kod yang boleh dibaca dan dipelihara, sementara panduan gaya hidup adalah koleksi corak front-end, seperti kelas CSS untuk butang, widget, dan elemen tipografi. Panduan gaya kod memastikan kod konsisten, manakala gaya gaya hidup memastikan konsistensi visual di seluruh tapak.
Dalam jawatan ini, kami telah mengumpulkan 10 alat berguna yang boleh membantu anda menjana panduan gaya hidup anda sendiri.
1. Stylify Me
Alat ini sangat menyeronokkan: hanya tampal pautan laman web yang ingin anda analisis, dan tonton sebagai panduan gaya dihasilkan dalam satu klik tetikus. Dengan Stylify Me, anda dengan cepat boleh mendapatkan gambaran keseluruhan corak tapak, termasuk warna, fon, saiz dan jarak. Setelah proses selesai, anda boleh muat turun panduan gaya dalam PDF.
2. Fabricator
Fabricator membolehkan anda membina toolkit UI anda sendiri, menyusun sistem reka bentuk anda, dan menghasilkan panduan gaya dari kod toolkit anda. Jika anda bekerja dalam satu pasukan, anda boleh menulis dokumentasi di Markdown untuk memudahkan pemaju lain untuk menggunakannya. Ia boleh membantu anda susun rutin reka bentuk / pengekodan anda dalam cara yang anda suka.
3. Teruskan
Frontify termasuk segala-galanya dari mockups digital hingga wireframing. Mereka juga mempunyai alat panduan gaya yang menawarkan proses reka bentuk minimalis yang bersih tanpa kerumitan. Anda boleh mendaftar secara percuma, dan memasukkan semua maklumat yang diperlukan secara manual. Proses itu harus termasuk palet warna, pilihan font, ikon, logo, mungkin slogan atau salinan web pilihan.
4. Aigis
Dengan Aigis, anda boleh menjana panduan gaya dari mana-mana fail teks (mis. .css, .scss, .styl, .md). Anda juga boleh menulis dokumentasi di Markdown, dan menyesuaikan tema tapak anda.
5. Hologram
Hologram telah dicipta oleh Trulia, dan merupakan penyelesaian yang baik untuk menjana panduan gaya. Ia adalah permata Ruby yang parses komen dalam CSS anda untuk menjana panduan gaya yang hebat. Hologram mempunyai sistem templat dengan beberapa gaya asas dan navigasi untuk menjadikan panduan gaya anda menjana lebih mudah.
6. Styledown
Dengan Styledown, anda boleh menulis panduan gaya CSS dengan mudah, kerana ia adalah Penjana panduan gaya berasaskan markdown. Ia akan berfungsi dengan kebanyakan pembangunan web, kerana ia adalah platform yang neutral. Ia memerlukan sedikit untuk mendapatkannya dan berjalan. Juga, komen yang anda perlukan untuk menambah CSS anda sangat minima. Anda boleh membuat dokumentasi CSS anda sama ada dalam ulasan CSS sebaris, atau sebagai fail Markdown berasingan.
7. KSS
KSS (Lembaran Gaya Knyle) adalah terutamanya a spesifikasi dokumentasi dan format panduan gaya yang ada sintaks yang mengulas sendiri. KSS juga termasuk perpustakaan Ruby yang menghuraikan .sass, .scss, dan .css fail yang didokumenkan dengan garis panduan KSS ke dalam panduan gaya yang kemas. KSS adalah untuk pengguna yang lebih maju dan pasukan profesional, kerana menghasilkan panduan gaya dengannya memerlukan pengetahuan pengekodan.
8. SC5 Style Guide Generator
Dengan Penjana Panduan Gaya SC5 anda boleh mencipta dan menyunting panduan gaya secara langsung dalam penyemak imbas anda. Ia adalah berdasarkan KSS dengan beberapa ciri yang menarik termasuk, seperti UI berkuasa AngularJS yang membantu anda melihat, mencari dan menguji gaya anda. SC5 menggunakan notasi dokumen yang sama seperti KSS. Ia menyokong SASS, KURANG, PostCSS dan gaya CSS tulen.
9. Styledocco
StyleDocco adalah aplikasi Node.js yang berguna mencipta panduan gaya dari stylesheets anda. Anda boleh memasangnya dengan npm. Dalam styleguide yang dijana, StyleDocco menunjukkan pratonton dengan gaya yang telah anda gunakan dan contoh kod HTML.
Di halaman rumah StyleDocco, anda boleh menemui dua contoh panduan gaya, satu yang dihasilkan dari lembaran gaya lalai, dan satu lagi yang dihasilkan dari laman Bootstrap. Contoh-contoh ini juga boleh membantu anda mengambil sintaks dokumentasi menggunakan SytleDocco.
10. Makmal Corak
Makmal Corak adalah koleksi alat yang membantu anda membuat sistem reka bentuk modular. Makmal Corak adalah penjana laman statik tersendiri yang menyusun semua elemen gaya di tapak, dan membentuk templat dan halaman dari mereka. Ia boleh berfungsi sebagai projek anda corak perpustakaan dan panduan gaya frontend. Makmal Corak membolehkan anda melihat komponen gaya anda pada masa yang sama abstrak dan dalam konteks.
