Advertisement
  1. Web Design
  2. Complete Websites

Membangun Modular Dashboard Interface menggunakan Pure

by
Read Time:9 minsLanguages:

Indonesian (Bahasa Indonesia) translation by Sonny Satria Abdullah (you can also view the original English article)

Hari ini, kita akan membuat sebuah dashboard yang indah, minimal menggunakan Pure (Lihat pada proyek GitHub), Perpustakaan mini-CSS modul baru dari Yahoo!. Kita akan berbicara tentang dan menggunakan beberapa prinsip-prinsip SMACSS (Scalable dan Arsitektur Modular untuk CSS). Kami juga akan menggunakan ikon dari WeLoveIconFonts.com.

Catatan: Sebelum kita melangkah lebih jauh, terdapat penekanan minimal pada grafik untuk dashboard yang akan kita ciptakan. Grafik terbaik dibuat dengan sesuatu yang lebih menitikberatkan JavaScript, dan untuk menjaga fokus pada CSS dan JavaScript yang minimal, tutorial ini secara umum akan menghindari teknik Menggambar grafik.


Sekilas mengenai Pure

Pure dibangun oleh tim di Yahoo! dan YUI menjadi rangkaian modul yang sangat ringan (kurang dari 6k). Pikirkan ini sebagai perpanjangan Normalize yang juga mencakup gaya untuk hal-hal yang sangat umum seperti garis-garis, form, tombol, tabel, dan menu.

pure-basepure-basepure-base

Tim YUI dibangun murni menjadi titik awal, bukan solusi lengkap. Dari titik awal ini, mereka mengharapkan pengembang untuk mengembangkan dan membangun custom CSS mereka sebagai perluasan dari titik dasar ini.

Untuk alasan ini, banyak dari apa yang kita ajarkan dalam tutorial ini adalah teknik untuk memperluas dasar-dasar library seperti Pure sesuai interaksi aplikasi, seperti ketika menggunakan sebuah dashboard.


Sekilas mengenai SMACSS

SMACSS, singkatan untuk Scalable and Modular Architecture for CSS, dan buah otak dari Jonathan Snook, adalah perangkat latihan yang dirancang untuk membangun CSS yang mudah dipahami, mudah untuk dikembangkan, dan menghindari perang spesifikasi CSS.

pure-smacsspure-smacsspure-smacss

Hal ini selanjutnya dibantu dengan tidak menggunakan ID untuk styling dan membatasi kumpulan pemilah sebanyak mungkin. Ide dasarnya adalah bahwa CSS dapat dikategorikan sebagai base, layout, modules, states, dan themes. Penataan CSS di sekitar kategori dan mengikuti Convension penamaan yang menyinggung kategori ini membuat SMACSS dapat dibaca dan segera bermakna. Hal ini menghindari class names yang memiliki gaya  sewenang-wenang yang terkait dengan mereka. Ide dasar dari pengelompokan kategori mengikuti penamaan Convension ini.

  • Base: tidak memiliki nama (elemen default, tidak memiliki kelas)
  • Layout: .layout, .grid, .grid-column, .grid-column.five.columns
  • Modules: .btn (nama module), .btn-default, .btn-calltoaction; .modal, .modal-header
  • State: .is-hidden, .is-active (termasuk perubahan JavaScript-trigger class)
  • Theme: .theme-background, .theme-border, .font-1, .font-2

Jenis kelas tersebut menggambarkan fungsi dan kategorinya. Aturan-aturan dari SMACSS yang lebih sebagai "Panduan" dan pola berpikir; Lihat melalui source pada Pure CSS untuk melihat contoh SMACSS dalam bertindak.


Menyelam lebih dalam

Pertama, mari kita membuat sebuah project directory sederhana menggunakan HTML5 Boilerplate, dan drop Pure di tempat Normalize.css. Untuk tutorial ini, kita akan menggunakan link YUI CDN dari Pure, <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.1.0/pure-min.css"> . Kita juga akan drop di Font Awesome, koleksi font ikon Twitter, dan menambahkan baris ke dalam CSS kita (instruksi diambil dari weloveiconfonts). Di seluruh markup, Anda akan melihat ikon didefinisikan dengan kelas-kelas seperti "fontawesome-calendar".

Kita sudah siap untuk mulai menggunakan alat-alat ini dalam desain! Mari kita mulai dengan mendefinisikan beberapa kerangka CSS untuk menahan element kita di dalamnya. Mari kita tempatkan ini dalam 'body'.

Kami telah memutuskan untuk menggunakan palet warna yang kami temukan di colourlovers disebut Yellow Tree Frog oleh user LJK.

pure-frogpure-frogpure-frog

Untuk sekarang, kita akan referensikan mereka dalam komentar di bagian atas file CSS.

Saran: Anda bisa mendapatkan keuntungan dari memulai dengan menggunakan kata kunci warna CSS dan find/replace kode hex kemudian sehingga Anda tidak perlu menyalin dan menyisipkan kode hex terus-menerus.


Mendefinisikan Menu

PureCSS memberikan kita modul menu drop-in yang dapat kita gunakan untuk mendefinisikan sebuah menu untuk dashboard kita. Kita mulai dengan menggunakan penamaan module berbasis kelas, mengikuti pedoman SMACSS.

Perhatikan bahwa menu ini tidak akan berfungsi untuk tutorial ini. Lihat pada halaman, kita bisa melihat menu kita telah dibuat dengan default styling secara horisontal. Mari kita lanjutkan dan mengubah latar belakang menu hitam semi-transparan.

Disini, kita melihat Adopsi Convension yang digunakan oleh SMACSS dan Pure. Kita mendefinisikan dua kelas baru, 'pure-menu-blackbg' dan 'pure-menu-fixed', dan kemudian sub-style yang dibutuhkan untuk mendukung kelas tersebut. Kita juga melihat beberapa penolakan kelas mendasar (seperti kelas 'pure-menu' yang ada untuk mengubah berat font).

pure-menupure-menupure-menu

Membuat modul Dashboard

Selanjutnya, kita akan menciptakan sebuah modul dashboard. Kita akan menggunakan beberapa gaya dasar untuk bagian "block" dashboard tingkat dasar.

Sekarang kita memiliki modul dasar yang ditetapkan, kita akan memperpanjang ini dengan menciptakan kelas baru dengan awalan 'dasbor-piece'. Pertama, kita akan menciptakan latar belakang warna kelas.

Selanjutnya, kita akan mendefinisikan markup untuk potongan dashboard berbeda. Kami menyertakan logo Envato inline SVG, yang akan diregangkan ke seluruh lebar grid.

pure-envato-logopure-envato-logopure-envato-logo

Ada banyak hal untuk menutupi markup. Pertama, kita menggunakan 'pure-u-1-3' (dan kelas pure - u-* lainnya) di dalam sebuah grid baris elemen, 'pure-g-r'. Kelas-kelas ini adalah bagian dari sistem grid murni. Untuk benar-benar memahami hal ini, Periksa dokumentasi lengkap YUI grid; konsep dasarnya adalah bahwa grid kelas pure-u-1-3 adalah 1/3 lebar grid penuh; kelas murni-u-3-4 akan menjadi 3/4 lebar grid. Modul dengan logo di dalamnya memiliki kelas pure-u-1, yang memungkinkan untuk direntangkan selebar penuh grid.

Unsur-unsur lain dari potongan-potongan dashboard yang digunakan untuk menunjukkan berbagai jenis metrik. Peraturan CSS tersebut digunakan untuk menunjukkan metrik ini dan bagian internal lainnya dari potongan-potongan dashboard.

pure-modulespure-modulespure-modules

Kita juga mendefinisikan kelas bar horizontal dan vertikal secara terpisah dari modul dashboard-content.

Akhirnya, kita menggunakan lebih banyak module built-in dari Pure untuk membuat sebuah tabel yang bergaya untuk modul "events", dan kita gunakan kembali kelas horizontal bar untuk modul cuaca. Kami memperluas kelas-kelas ini dengan CSS yang telah disesuaikan juga. Berikut adalah markup untuk dua modul terakhir.

Dan kelas-kelas perluasan tabel Pure.

Akhirnya, kami ingin sedikit rapatkan bagian atas modul cuaca sehingga lebih sesuai dengan modul events. Kami melakukannya dengan hanya memanfaatkan kelas tambahan "weather" dan menyesuaikan bagian sisi atas. Bersama dengan bagian-bagian terakhir ini, kita akan menambahkan beberapa footer styling sederhana untuk mencocokkan nav menu bagian atas.


Memperluas responsif

Pure dilengkapi dengan elemen built-in responsif grid. Mereka didefinisikan dengan selector berikut.

Selector ini tampak rumit (silakan lihat di 30 penyeleksi CSS yang Anda harus ingat untuk penjelasan lebih dalam) poin yang pertama untuk mengarahkan ke direct children dari elemen ".pure-g-r". Anak-anak itu kemudian harus memiliki kelas atribut yang dimulai dengan awalan "pure-u". Fiuh..

Hal itu merujuk, misalnya pada, div ini:

Selektor ini digunakan dalam queri @media untuk meruntuhkan grid. Namun, elemen unit ini runtuh hingga 100% di bawah 767px. Kami ingin mengubah ini untuk memungkinkan unsur-unsur runtuh ke 50% di antara 480 dan 767. Kami melakukannya dengan queri-queri @media berikut.


Sepercik JavaScript

Dalam 'main.js', kita akan menulis beberapa JavaScript untuk memastikan semua modul dalam satu baris pada ketinggian yang sama.

JavaScript ini mendefinisikan fungsi yang berulang melalui masing-masing elemen dengan kelas "dashboard-piece" di setiap baris, dan kemudian menemukan modul tertinggi di baris tersebut. Hal ini kemudian mengatur semua elemen dalam baris tersebut dengan ketinggian dari elemen tertinggi di baris.


Kesimpulan

Tutorial ini hanya menunjukkan beberapa modul yang didefinisikan dalam Pure. Dengan pola seperti yang digunakan dalam tutorial ini, Anda dapat membuat CSS dengan pengaturan mudah, dapat terbaca, dan terukur. Menggunakan sebuah perpustakaan kecil seperti Pure memungkinkan Anda untuk memanfaatkan solusi terdokumentasi yang kuat, teruji, dan terbaik untuk masalah umum.

Apa lagi yang bisa Anda lakukan dengan Pure? Beri tahu kami di komentar!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.