Saat ini tidak ada standarisasi folder pada Component Based Development atau CBD dalam perancangan aplikasi web. Sebagai alternatifnya kita bisa menggunakan Atomic Design . Atomic Design ini dibuat oleh Brad Frost yang dijelaskan pada https://blog.kamathrohan.com/atomic-design-methodology-for-building-design-systems-f912cf714f53 .
Konsep dari Atomic Design dapat dilihat pada gambar https://miro.medium.com/v2/resize:fit:1080/format:webp/1*U-jFHRJxePDHHBWtd19M8g.png .
Lapisan-lapisan pada atomic design adalah
- Sub-atomic
Pada lapisan sub-atomic ini berisi semua variabel dan seting yang digunakan dalam aplikasi. Pada sub-atomic ini kita akan menemukan warna, tipografi dan spacing.
- Atoms
Atoms merupakan komponen-komponen yang mendefinisikan elemen-elemen HTML seperti button, icon dan input.
- Molecules
Molecules ini terbuat dari dua atau lebih atoms atau HTML murni. Contoh molecule adalah input dengan label dan error.
- Organims
Organism ini merupakan komponen UI (User Interface) yang berdiri sendiri misalnya form login, slideshow dan footer.
- Templates
Template ini merupakan layout yang mendefinisikan struktur tampilan yang bisa digunakan oleh banyak halaman.
- Pages
Pages atau halaman ini merupakan tempat di mana data ditampilkan dengan elemen HTML. organisms, dan atoms
Kunjungi https://www.proweb.co.id/jasa-pembuatan-website untuk jasa pembuatan website anda .
Atomic Design pada Vue.js