mendokumentasikan sistem desain Anda dengan fraktal

Jan 29, 2026

Bagaimana caranya

Apakah Anda suka belajar lebih banyak tentang sistem desain? Maka jangan lewatkan insinyur senior UI Mina Markham. di Hasilkan New York. Pada tanggal 28 April, di mana ia akan membahas bagaimana ia menciptakan Pantuit, sistem desain yang memberi banyak aplikasi yang dihosting di HillaryClinton.com. Dan di pantai barat, di Hasilkan San Francisco pada 9 Juni, Stephanie Rewis. Akan berbagi beberapa pelajaran yang dia pelajari sambil membangun sistem desain Salesforce.

Sekarang, banyak dari kita yang terbiasa Gaya Panduan. . Tetapi ada jenis baru dokumentasi sistem desain yang mendapatkan uap: perpustakaan pola. Perbedaan utama antara keduanya adalah sumber utama dokumentasi alat.

Dokumentasi panduan gaya cenderung berasal dari file Markdown, sehingga untuk menunjukkan markup Penulis sering dipaksa untuk menyalin dan menempelkannya ke dalam penurunan. Ini hampir mustahil untuk dipelihara saat memasang banyak komponen bersama.

Perpustakaan pola, di sisi lain, memperlakukan file HTML komponen kami sebagai warga negara kelas satu. Setiap komponen mendapatkan halamannya sendiri, di mana ia menampilkan markup dan memberikan HTML langsung dari file HTML. Ini memastikan file dan dokumentasi HTML tidak pernah keluar dari sinkronisasi.

Pustaka pustaka sering dibangun menggunakan bahasa templating daripada HTML biasa. Templat dapat mencakup variabel dan logika lainnya, maka kita dapat lulus dalam berbagai set data, memungkinkan variasi komponen yang akan ditampilkan.

Dimungkinkan untuk menggabungkan beberapa template untuk membuat tampilan yang lebih kompleks, atau bahkan halaman penuh. File-file ini sangat fleksibel sehingga mereka bahkan dapat digunakan dalam produksi! Setiap perubahan yang dilakukan pada pustaka pola kami secara otomatis diambil oleh situs web kami, karena semua markup - untuk perpustakaan atau untuk produksi - berasal dari satu set templat kanonik.

Design systems will be covered at both Generate New York and San Francisco this year — Sistem desain akan tercakup di New York dan San Francisco tahun ini

Masukkan Fractal.

Dibuat oleh Clearleft, Fraktal. Membantu Anda membangun dan mendokumentasikan pustaka komponen web, dan mengintegrasikannya ke dalam proyek Anda. Dalam tutorial ini kita akan melihat lebih dekat cara kerjanya (unduh versi jadi demo di sini ).

Fraktal adalah modul node.js yang diinstal melalui NPM. Pertama, Anda ingin menginstal modul secara global sehingga Anda dapat menghasilkan proyek baru:

npm install --global @frctl/fractal

Dengan paket ini diinstal, buat proyek baru:

fractal new project-name

Perintah ini menyalakan panduan instalasi yang memandu Anda melalui proses pengaturan. Ini akan meminta Anda untuk judul proyek; nama-nama komponen, dokumentasi, dan folder publik; Dan jika Anda akan menggunakan git untuk kontrol versi. Setelah pertanyaan-pertanyaan itu selesai, fraktal akan menginstal semua modul yang diperlukan dan mengatur struktur folder seperti yang ditentukan.

Jika Anda ingin melewatkan instalasi global dan membuat proyek secara manual, instruksi pemasangan manual dapat ditemukan di sini .

Memutarnya

Sekarang Anda memiliki proyek fraktal yang sepenuhnya diinstal, memutarnya dengan melangkah ke folder proyek Nama proyek CD dan menjalankan perintah sync fraktal. Ini memulai server lokal, menonton file untuk perubahan dan secara otomatis memulai BrowserSync:

fractal start --sync

Dan seperti itu, Anda punya contoh fraktal yang berfungsi. Buka browser pilihan Anda dan navigasikan ke http: // localhost: 3000 untuk melihat awal proyek fraktal baru Anda. Untuk menghindari meminta semua orang untuk menginstal fraktal secara global, buat skrip di Anda package.json. yang memanggil biner fraktal.

 "Scripts": {
    "Fraktal": "./node_modules/.bin/fractal start --Sync"
}

Sekarang Anda dapat menggunakan NPM Run Fractal. tanpa harus menginstal sesuatu secara global.

Menambahkan komponen

Sekarang Anda sudah memulai proyek fraktal, saatnya menambahkan beberapa komponen. File starter datang dengan komponen yang disebut 'contoh', tetapi kita akan menyingkirkan itu dan membuat yang baru dari awal.

Salah satu hal terbaik tentang fraktal adalah Anda dapat mengatur komponen Anda namun Anda suka di dalam folder komponen, dan secara otomatis akan meniru organisasi dalam navigasi perpustakaan pola.

Untuk komponen pertama, kami akan membuat tombol primer baru di dalam a tombol folder . Untuk melakukan itu, buat dengan file templat di Komponen / Tombol / tombol primer / benteng primer.hbs . Fraktal mendukung template stang di luar kotak, jadi gunakan .hbs. Ekstensi File:


    & lt; tombol class = "tombol primer" & gt; {{text}} & lt; / gt;

Itu {{teks}} string di dalam tag tombol adalah placeholder variabel, dan ini memungkinkan Anda menggunakan kembali template, melewati nilai yang berbeda untuk teks dari file data.

Untuk membuat file data, gunakan nama dasar yang sama dengan file stang, tetapi dengan yang berbeda Yml. perpanjangan. Sekarang Tombol primer.config.yml. duduk di dalam Komponen / Tombol / Tombol primer Folder harus terlihat seperti ini:

 Judul: Tombol Primer
konteks:
    Teks: Klik Saya

Semua ini bersama-sama membuat komponen baru pertama Anda, tombol utama, anggota dari kategori tombol, dengan teks: 'Klik saya'.

Variasi komponen

Fraktal mendukung variasi komponen yang sama, memungkinkan kami untuk menampilkan komponen yang sama dengan berbagai kelas pemodifier atau atribut. Jadi katakanlah kami ingin memiliki opsi untuk menggunakan tombol bertema gelap. Kami dapat membuat file template baru yang disebut Tombol primer - Dark.Hbs Di sebelah templat asli kami (dasbor ganda menunjukkan variasi komponen ini). Dalam template ini kami akan menerapkan pengubah yang dapat kami kaitkan untuk melampirkan gaya baru.

 & lt; tombol class = "tombol primer" data-theme = "Dark" & gt; {{teks}} & lt; / gt;

Sekarang ketika kita menulis CSS kita, kita dapat memasukkan pemilih berikut untuk mengubah template ini dengan memodifikasi gaya.

. PRIMARY-TOMBOL [DATA-TEMA = "DARK"] {}

Variasi data

Sama seperti kita dapat mendefinisikan variasi dengan membuat beberapa file template, kita juga dapat membuat variasi dalam data kita. Kita bisa melakukan ini di dalam Tombol primer.config.yml. file dengan menambahkan array varian.

 Judul: Tombol Primer
konteks:
    Teks: klik saya
Varian:
- Nama: Unduh
    konteks:
Teks: Unduh Sekarang
- Nama: Instal
    konteks:
Teks: Instal sekarang

Ini akan menciptakan variasi baru bernama 'Unduh' dan 'Install', dengan teks berbeda yang diteruskan ke tombol. Contoh yang lebih praktis mungkin jika Anda menggunakan yang sama Tombol primer.hbs. template dalam fraktal serta produksi. Dalam hal ini, daripada membuat template baru untuk tema gelap Anda, Anda dapat melewati nilai tema sebagai variabel dan menggunakan variasi data untuk menampilkan semua tema tombol yang berbeda.

 & lt; tombol class = "tombol primer" data-theme = "{{theme}}" & gt; {{text}} & lt; / gt;

Judul: Tombol Primer
konteks:
    Teks: klik saya
    Tema: Light.
Varian:
- Nama: Tema Gelap
    konteks:
Teks: klik saya
Tema: Gelap

Menangani aset lain

Fraktal juga akan menangani file selain markup dan data. CSS, Javascript, gambar atau aset lain yang Anda tambahkan ke folder komponen akan ditampilkan di tab 'Aset'. Anda dapat menentukan a Readme.md. File untuk komponen sehingga Anda dapat menulis catatan tentang bagaimana komponen digunakan, atau menautkan ke bagian lain dari dokumentasi.

Langkah selanjutnya

Mengulangi contoh sebelumnya untuk semua komponen inti Anda menciptakan katalog yang berguna dari blok bangunan utama situs Anda. Tetapi kekuatan nyata dari perpustakaan pola berasal dari kemampuan untuk menggabungkan potongan-potongan ini bersama. Pastikan untuk memeriksa Dokumentasi fraktal. Untuk mempelajari bagaimana Anda dapat mulai membuat komponen yang lebih kompleks dengan menggabungkan elemen atom yang lebih kecil untuk membuat yang lebih besar.

Folder Docs adalah tempat yang tepat untuk menempatkan informasi panduan gaya tradisional dan catatan tambahan. Ini mungkin mencakup hal-hal seperti dokumentasi onboarding, pedoman tentang suara dan nada merek Anda, daftar warna dan variabel, dan sebagainya. Ini mengikuti navigasi berbasis folder yang sama dengan komponen, dan jika Anda mengatur file Anda dalam folder subjek, Anda akan menemukan menavigasi Dokumen fraktal angin sepoi-sepoi.

Fraktal juga mendukung sumber data yang lebih kompleks. Jika Anda perlu menghasilkan satu set besar data untuk templat, atau ingin menariknya dari beberapa API pihak ketiga, Anda dapat menggunakannya komponen-name.config.js. Untuk mengembalikan objek JavaScript sebagai pengganti data file YML.

Terakhir, fraktal memungkinkan Anda menggunakan sejumlah bahasa template yang berbeda.Pastikan untuk memeriksa daftar lengkap dalam dokumentasinya.Dan yang terpenting, bersenang-senang!

Pesan tiket Anda ke Menghasilkan hari ini!Di New York. Anda dapat belajar dari Mina Markham, yang membangun sistem desain untuk kampanye presiden Hillary Clinton, dan di San Fransisco Stephanie Rewis akan menjelaskan bagaimana Anda dapat arsitek dan membangun kerangka kerja CSS modern untuk 'sistem desain hidup' pada skala perusahaan.

Artikel ini awalnya diterbitkan dalam Edisi Majalah NET 285, Beli di sini

mendokumentasikan sistem desain Anda dengan fraktal

Masukkan Fractal.

Memutarnya

Menambahkan komponen

Variasi komponen

Variasi data

Menangani aset lain

Langkah selanjutnya

Bagaimana caranya - Artikel Terpopuler

Cara menggunakan REECT Spring ke Menghidupkan Komponen

8 Aturan Emas Desain Seluler

Kontrol versi master untuk tim jarak jauh

Cara Membangun Antarmuka ChatBot

4 langkah ke VDM yang lebih baik dengan ZBrush

Bagaimana cara menambahkan drama ke karya seni pastel Anda

Cara pindah antara DAZ Studio dan Zbrush

Buat salinan digital kualitas seni Anda

Kategori