Advertisement
  1. Web Design
  2. Complete Websites

Mengatur Model Website Portofolio Behance Menggunakan LESS

by
Read Time:12 minsLanguages:
This post is part of a series called Build Your Own Behance-Powered Portfolio.
How to Use the Behance API to Build a Custom Portfolio Web Page
Bringing Our Behance Portfolio Alive With CSS Animation

Indonesian (Bahasa Indonesia) translation by Wasmia Mia (you can also view the original English article)

Dari bagian-bagian sebelumnya dari seri ini, kita mempelajari tentang Behance API, menggunakannya untuk menangkap potongan-potonga portofolio pengguna dan menampilkannya pada sebuah halaman website. Kali ini kita akan mengatur model halaman web, menampilkan potongan portofolio dengan cara yang cocok dan menarik.

Peralatan yang akan Digunakan

Untuk memulai, kita akan mempersiapkan peralatan kita:

Normalize

Kita akan menggunakan Normalize untuk membuat elemen dasar model yang lebih konsisten dengan browser yang berbeda-beda serta mengurangi kemungkinan yang tidak kita harapkan.

Perpustakaan LESS Mixins

Kita juga akan menggunakan LESS untuk mengatur model website kita. Prosesor apapun yang Anda pilih, tetap sangat direkomendasikan menggunakan LESS dalam alur kerja Anda. Saya adalah seseorang yang lebih suka menggunakan fungsi kontrol LESS seperti lighten() dan darken() daripada harus menjaring pilihan warna dari pengambil warna dengan aplikasi lain, untuk kemudian memberikan kita rentang varian warna.

Untuk membantu kita lebih jauh, kita akan menggunakan LESSHat untuk membantu kita menuliskan kode yang lebih sedikit (bahasa inggris: less) dengan koleksi Mixins-nya. Kita juga akan menggunakan Remixins yang dikembangkan oleh Christopher Ramírez. Remixins adalah koleksi Mixins untuk mengonversi px menjadi bentuk rem units. Koleksinya juga termasuk Mixins untuk menspesifikasi ukuran huruf, margin, padding, lebar and tinggi, dan posisi CSS (kirikananbawah, dan atas).

Sebagai tambahan, kita juga akan membutuhkan alat untuk menyatukan LESS pada CSS reguler. Pada tutorial kali ini, kita akan menggunakan sebuah aplikasi bernama Koala, yang tersedia untuk Windows, OSX, dan Ubuntu. Anda juga terntunya dapat menggunakan aplikasi untuk mengkompilasi lainnya yang lebih Anda sukai, tetapi untungnya, Anda akan tetap dapat mengikuti tutorial ini tanpa mengkhawatirkan platform apapun yang Anda gunakan.

Untuk mengetahui lebih jauh tentang LESS, silakan pelajari tutorial berikut ini:

Google Fonts

Sistem font default seperti Arial tidaklah menarik bagi saya kini. Sehingga, pada tutorial ini saya akan menggunakan Google Font. Saya memilih Cantata One untuk judulnya dan Open Sans untuk default badan teks. Hal ini merupakan selera pribadi, Anda bebas untuk tidak menggunakan Google Fonts atau dapat menggunakan alternatif lain yang Anda inginkan.

Foundation Icon Fonts

Kitaj uga akan menggunakan ikon font yang agak dekoratif untuk website kita. Kini kita memiliki ribuan pilihan untuk ikon font. Namun, selama pengamatan saya, saya terkejut ternyata hanya sedikit dari pilihan ini yang memasukkan ikon Behance dalam koleksinya. Bagaimanapun, untuk tutorial kita kali ini kita akan menggunakan Foundation Icon Fonts 3, karena ia memiliki ikon Behance dan juga tersedia melalui CDN.

Mengatur Perlengkapan dan Alat

Pada direktori root proyek kita, buatlah beberapa folder barubernama less dan css (yang akan menjadi folder hasil dari file LESS). Buatlah file baru bernama style.less dan dapatkan Remixins juga LESShat. Letakkan tiga file stylesheet LESS ini pada folder less. Pada tahap ini, daftar file dan folder kita pada direktori proyek akan terlihat seperti ini:

Kemudian tambahkan Normalize, Foundation Icon Fonts, dan stylesheet Google Font di dalam tag head, bersamaan dengan style.css, yang akan menjadi file hasil dari style.less.

Juga, buka aplikasi Koala (atau aplikasi apapun untuk mengkompilasi yang Anda sukai) dan tambahkan direktori proyek kita pada aplikasi tersebut.

Direktori pryek pada Koala

Menambahkan Font Ikon

Sebelum kita menuliskan style apapun, mari tambahkan beberapa ikon pada website kita. Pertama, kita akan menambahkan tanda lokasi peta di samping elemen lokasi pengguna dengan kelas fi-marker. Tambahkan kelas ini berdampingan dengan kelas profile-location seperti berikut ini:

Hal ini akan menambahkan elemen semu :before pada div, memasukkan ikon penanda pada Foundation Icons kita. Kemudian, kita akan menambahkan logo Behance pada bagian kaki dengan kelas fi-social-behance.

Mengatur Mixins dan Variabel

Mari buka style.less kita dan import lesshat.less dan remixins.less menggunakan tanda (reference).

Tanda (reference) telah diperkenalkan pada LESS 1,5. Artinya, LESS akan menggunakan file ini hanya sebagai referensi, ia tidak akan mengkompilasi dan menghasilkan konten pada file. Ini merupakan fitur yang luar biasa yang meminimalisir duplikasi dan model yang tidak diperlukan.

Di dalam style.less, kita akan menambahkan variabel berikut ini yang akan menyimpan palet warna dan kelompok jenis huruf dari website kita.

Meletakkan variabel ini pada satu tempat saja berfungsi sebagai pedoman model, juga membantu kita untuk menjaga model buatan kita lebih nyaman. Misalnya, jika ada sesuatu pada website yang ingin kita ganti, kita dapat dengan mudah mengubah nilai dengan variabel ini. Hal ini lebih aman untuk mengubah model daripada melakukan "Search and Replace"/”Cari dan Gantikan”.

Mulai Membuat Model

Model Elemen Dasar

Meskipun kita telah menambahkan Normalize yang telah men-standar-kan model elemen kita, masih ada beberapa model yang perlu kita ulik untuk mengikuti kebutuhan tertentu kita. Untuk memulai, kita akan mengubah box-sizing, atur semua elemen ukuran kotak (termasuk elemen semu) menjadi border-box. Hal ini akan memberikan kita dimensi yang lebih mudah dikontrol sebagai basis awal untuk memulai kerja.

Kita dapat menerapkan ini dengan Mixins .box-sizing dari perpustakaan LESSHat, seperti berikut ini:

Kemudian kita akan mengatur ukuran huruf html menjadi 62,5%, yang merupakan ukuran yang cukup dekat untuk membuat unit relatif lebih mudah diatur.

62,5% ini diukur berlawanan dengan standar browser yang 1em adalah 16px; sehingga 62,5% dari 16px sama dengan 10. Dengan melakukan ini kita akan dengan mudah mengetahui konversi rem pada px dengan mengalikannya 10. 1.2rem misalnya, akan sam dengan 12px dan seterusnya. Sebagai tambahan dari ini, jika kita lihat pada sumber remixins.less, kita akan menemukan ukuran huruf pada @base-font-size-px variabelnya diatur menjadi 10.

Anda dapat merujuk artikel ini lebih jauh pada unit relatif CSS:

Kita menggunakan elemen figure untuk menambahkan sampul foto portofolio. Tetapi elemen figure membawa nilai margin dari Normalize yang menyebabkan ada spasi putih yang tidak diinginkan atara gambar portofolio. Sehingga, di sini kita akan menghpus margin dari elemen figure.

Hack Clearfix

Menggunakan hack clearfix adalah metode yang sangat populer sebagai jalan lain pada permasalahan tata letak disebabkan elemen yang mengambang gagal menanggalkan anak-anak elemennya. Sehingga, di sini kita akan menambahkan tips clearfix oleh Nicolas Gallagher yang telah kami ubah menjadi LESS.

Jika Anda memperhatikan struktur HTML kami, kami telah menambahkan kelas clearfix pada beberapa elemen.

Model Body

Untuk body/badan, kita akan mengatur model font yang akan diterapkan pada seluruh halaman. Model ini termasuk ukuran font, warna font, ketebalan font, kelompok font, dan warna latar belakang. Di sini, kita akan menggunakan mixin .font-size() dari perpustakaan Remixins untuk menghasilkan ukuran font. Semua Mixins termasuk perpustakaan perpustakaan Remixins menghasilkan unit px cadangan, sangat membantu untuk browser yang tidak mendukung unit rem.

Setelah mnyimpan file, Koala akan secara otomatis mengkompilasi hasilnya. Dan kode di atas harusnya akan terlihat seperti ini pada CSS reguler.

Model Header

Selanjutnya, kita akan menambahkan style pada Header website, seperti berikut ini.

Ini terlihat seperti sebuah gumpalan sintaksis, jadi mari kita pecahkan satu per satu dan menelaah apa yang dilakukan. Pertama, kita menambahkan warna latar belakang pada Header dengan warna terseimpan pada variabel @bg-header. Kita menggunakan mixin .padding() dari Remixins untuk menambahkan padding pada bagian atas dan bawah Header, sehingga menghasilkan lebih banyak spasi putih vertikal. Kita jugam nambahkan text-align:center sehingga konten kita terlihat lebih beraturan.

Kita telah mengatur ukuran gambar avatar pengguna dengan Mixin .size() dan membuat bulatan menggunakan pengaturan radius tepi 50%. Anda dapat melihat model ini yang dinyatakan dengan .profile-avatar img.

Di bawah ini adalah pengaturan nama pengguna. Di sini kita mengatur ukuran huruf dengan sebuah mixin .font-size(). Kita telah menyebar variabel @color-name untuk warna font, dan melewati kelompok font dengan variabel @font-family. Terakhir, kita menambahkan font-weight: 400; untuk membuat font terlihat lebih tebal daripada font lainnya.

Selanjutnya, kita akan melihat pengaturan untuk area kreatif pengguna, yang kita targetnya dengan .profile-fields. Pada Behance, Anda dapat menambahkan keahlian atau bidang spesialisasi sesuka Anda. Yang artinya, aka nada pengguna yang memiliki daftar yang pendek, atau bahkan deskripsi yang sangat panjang. Saya kemudian memutuskan untuk mengatur lebar dengan sebuah max-width. Kita atur warna font menjadi 50% lebih ringan daripada latar belakang Header dengan lighten(@bg-header, 50%).

Selanjutnya, masing-masing bidang item dipisahkan oleh koma yang telah kita suplai melalui sebuah elemen semu :after. Bagaimanapun, secara logis, item terakhir seharusnya tidak ber-koma, sehingga kita telah memilih item terakhir dengan :last-child dan mengatur properti content menjadi kosong content:''.

Selanjutnya adalah pengarutan style untuk mengatur model lokasi pengguna. Di sini, kita mengatur warna sedikit lebih ringan daripada warna latar belakang, 30% tepatnya. Dan kita juga menambahkan sedikit jarak antar teks dan ikon penanda dari Foundation Icon Fonts dengan menambahkan margin-right pada elemen semu :before.

Setelah menambahkan style ini, Header akan terlihat seperti ini:

Mengatur Model Bagian-bagian Portofolio

Potongan berikut ini mengandung semua model untuk portofolio kita.

Banyak dari style di atas dekoratif. Tetapi berikut adalah beberapa hal kunci yang perlu dicatat:

Pertama, kita atur luas .portfolio-area menjadi 100%, tetapi pertahankan luas maksimal adalah 960px. Hal ini akan membuat luas beradaptasi dengan cantik pada ukuran tinjau yang lebih rendah. Juga, seperti yang Anda lihat di atas, kita mengatur luas .portfolio-item menjadi 33,33333333333333%. Hal ini dikarenakan kita akan menampilkan tiga item pada masing-masing baris. Angka 33,33333333333333% diambil dari hasil pembagian 100% dibagi 3.

Luas .portfolio-cover diatur menjadi 100%, ini akan mengisi luas bagian utama. .portfolio-image diatur dengan max-width:100% sehingga gambar tidak akan melampaui luas bagian utama berapapun ukurannya. Semua pengaturan luas ini akan membantu kita membuat website menjadi lebih mudah diatur.

Sekarang, bagian-bagian portofolio akan terlihat seperti ini.

Mengatur Footer (Kaki)

Selanjutnya, kita akan menambahkan style pada Footer. Footer biasanya polos dan sederhana; ia hanya terdiri dari teks “Powered by” dan ikon Behance dari Foundation Icon Font. Di bawah ini adalah semua pengaturan style untuk Footer.

Mirip dengan bagian portofolio, kita mengatur luas Footer menjadi 100% dan meluruskannya pada bagian tengah jendela browser dengan margin: 0 auto;. Kita juga meluruskan semua konten ke bagian tengah untuk membuatnya terlihat lebih teratur. Kita kemudian menyembunyikan teks di dalam .power-logo Menggunakan Metode Kellum dan menampilkan hanya logo Behance dengan warna logonya, biru #1769ff.

Catatan: Behance memiliki seluruh bagian developer pada Pedoman Branding mereka jika Anda ingin melihat-lihat.

Footer kemudian akan terlihat lumayan lengkap, seperti berikut ini.

Membuat Website Responsif

Kita memiliki tata letak yang mudah diatur, tetapi sekatang kita akan membuat halaman website kita menjadi responsif. Untungnya, website kita hanya terdiri dari satu halaman web dengan tata letak yang sangat sederhana. Sehingga, tidak akan mengharuskan kita untuk memasukkan kode yang cukup panjang untuk membuatnya responsif. Untuk memulai, kita akan menambahkan meta viewport (yang krusial) pada tag head.

Kemudian tambahkan Media Queries seperti berikut ini.

Media interaktif seperti ini akan menampilkan dua item dalam satu baris antara 959px dan 768px luas viewport, dan satu item dengan luas viewport 767px dan lebih rendah.

Website portofolio kita dalam ukuran viewport berbeda-beda

Selanjutnya...

Setelah mengatur estetika dari halaman web kita, maka yang tersisa untuk dilakukan selanjutnya adalah menambahkan beberapa sentuhan akhir yang mengagumkan. Selanjutnya dan merupakan bagian terakhir dari seri ini, kita akan membuat pengunjung web untuk dapat meng-klik pada thumbnail dan melihat versi yang lebih besar, juga kita akan menambahkan animasi CSS3 untuk meningkatkan pengalaman menjelajah di website kita.

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.