Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. Complete Websites
Webdesign

Menetapkan Model Laman Web Portfolio Behance Menggunakan LESS

by
Difficulty:IntermediateLength:LongLanguages:
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

Malay (Melayu) translation by Robi'ah Ar Ro'yi (you can also view the original English article)

Dari bahagian sebelumnya dalam siri ini, kita belajar tentang Behance API, menggunakannya untuk menangkap kepingan portfolio pengguna dan memaparkannya di halaman laman web. Kali ini kami akan menubuhkan model laman web, memaparkan keping portfolio dengan cara yang sesuai dan menarik.

Peralatan yang hendak digunakan

Untuk memulakan, kami akan menyediakan peralatan kami: 

Menormalkan

Kami akan menggunakan Normalize untuk mewujudkan elemen asas model yang lebih konsisten dengan pelayar yang berbeza serta mengurangkan peluang yang tidak kami harapkan.

Perpustakaan KALUNG Campuran

Kami juga akan menggunakan LESS untuk menyediakan model laman web kami. Mana-mana pemproses yang anda pilih, masih sangat disyorkan untuk menggunakan LESS dalam aliran kerja anda.  Saya seorang yang suka menggunakan fungsi kawalan LESS seperti lighten() dan darken() dan bukannya mengambil pilihan warna dari pemetik warna dengan aplikasi lain, kemudian memberikan kami variasi warna.

Untuk membantu kami lebih jauh, kami akan menggunakan LESSHat untuk membantu kami menulis lebih sedikit kod (Bahasa Inggeris: LESS) dengan koleksi Mixinsnya. Kami juga akan menggunakan Remixin yang dibangunkan oleh Christopher Ramírez.  Remix adalah koleksi Mixins untuk menukar px ke unit rem . Koleksi ini juga termasuk Mixins untuk menentukan ukuran huruf , margin padding lebar dan tinggi , dan kedudukan CSS ( kiri kanan bawah , dan atas ).

Di samping itu, kami juga akan memerlukan alat untuk menyatukan LESS pada CSS biasa. Dalam tutorial ini, kami akan menggunakan aplikasi yang dipanggil Koala , yang tersedia untuk Windows, OSX dan Ubuntu.  Anda juga dapat menggunakan aplikasi untuk menyusun lebih banyak lagi yang anda suka, tapi mujurlah, anda masih dapat mengikuti tutorial ini tanpa perlu risau tentang platform apa pun yang anda gunakan.

Untuk mengetahui lebih lanjut mengenai LESS, sila semak tutorial berikut:

Google Font

Sistem font lalai seperti Arial tidak merayu kepada saya sekarang. Jadi, dalam tutorial ini saya akan menggunakan Google Font.  Saya memilih Cantata One untuk tajuknya dan Open Sans untuk teks badan lalai. Ini adalah rasa peribadi, anda bebas untuk tidak menggunakan Google Font atau boleh menggunakan alternatif lain yang anda mahukan.

Ikon Ikon Asas

Kami juga akan menggunakan ikon font agak hiasan untuk laman web kami.Kini kami mempunyai beribu-ribu pilihan untuk ikon fon. Walau bagaimanapun, semasa pemerhatian saya, saya terkejut bahawa beberapa pilihan ini termasuk ikon Behance dalam koleksinya.  Walau bagaimanapun, untuk tutorial kami kali ini kami akan menggunakan Yayasan Icon Font 3 , kerana ia mempunyai ikon Behance dan juga boleh didapati melalui CDN.

Sediakan Peralatan dan Alat

Dalam direktori akar projek kami, buat beberapa folder baru dan LESS terkategori (yang akan menjadi folder hasil fail LESS). Buat fail baru yang dipanggil style.less dan dapatkan Remixin juga LESShat .  Masukkan ketiga fail gaya LESS dalam LESS folder. Pada ketika ini, senarai fail dan folder dalam direktori projek akan kelihatan seperti ini:

Kemudian tambah Normalize, Font Icon Asas, dan font Font Google di dalam tag head , bersama dengan style.css , yang akan menjadi hasil fail style.less .

Juga, buka aplikasi Koala (atau mana-mana aplikasi untuk menyusun yang anda suka) dan tambahkan direktori projek kami ke aplikasinya.

Direktori objek pada Koala

Menambah Ikon Ikon

Sebelum kita menulis sebarang gaya, mari tambahkan beberapa ikon di laman web kami. Pertama, kami akan menambah tanda lokasi peta di sebelah unsur lokasi pengguna dengan kelas fi-marker . Tambah kelas ini bersama kelas lokasi profile-location seperti ini:

Ini akan menambah elemen palsu :before pada div , memasukkan ikon penanda pada Ikon Yayasan kami. Kemudian, kami akan menambah logo Behance di kaki dengan kelas fi-social-behance .

Tetapkan Mixins dan Variabel

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

(reference) telah diperkenalkan di LESS 1.5. Iaitu, LESS akan menggunakan fail ini sebagai rujukan, ia tidak akan menyusun dan menjana kandungan pada fail itu. Ini adalah ciri yang menakjubkan yang meminimumkan duplikasi dan model yang tidak perlu.

Dalam style.less, kami akan menambah pembolehubah berikut yang akan menyimpan palet warna dan kumpulan font laman web kami.

Meletakkan pembolehubah ini dalam satu tempat hanya berfungsi sebagai panduan model, ia juga membantu kami memastikan model kami lebih selesa. Sebagai contoh, jika terdapat sesuatu di laman web yang ingin kami ganti, kami boleh menukar nilai dengan pembolehubah ini dengan mudah. Ia adalah lebih selamat untuk menukar model daripada melakukan "Mencari dan Ganti" / "Cari dan Ganti".

Mula Cipta Model

Model Elemen Asas

Walaupun kami telah menambahkan Normalize yang telah menyeragamkan model elemen kami, masih ada beberapa model yang kami perlukan untuk mengikuti keperluan khusus kami.  Untuk memulakan, kami akan menukar saiz kotak , tetapkan semua elemen saiz kotak (termasuk elemen pseudo) ke kotak border-box . Ini akan memberi kita dimensi yang lebih mudah dikawal sebagai asas permulaan untuk memulakan kerja.

Kita boleh menggunakan ini dengan Mixbox. Ukuran kotak dari perpustakaan LESSHat, seperti berikut:

Kemudian kami akan menetapkan saiz fon ke 62.5% html , yang merupakan ukuran yang cukup dekat untuk menjadikan unit ini lebih mudah diurus.

62.5% diukur berbeza dengan pelayar standard yang 1em ialah 16px; jadi 62.5% daripada 16px sama dengan 10. Dengan melakukan ini kita akan dengan mudah mengetahui penukaran rem pada px dengan mengalikannya 10. 1.2rem misalnya, ia akan sam dengan 12px dan sebagainya.  Sebagai tambahan kepada ini, jika kita melihat sumber remixins.less, kita akan menemui saiz fon dalam pemboleh ubah @base-font-size-px set kepada 10.

Anda boleh merujuk rencana ini ke unit CSS relatif:

Kami menggunakan elemen figure untuk menambah liputan foto portfolio. Tetapi unsur figure membawa nilai margin Normalize yang menyebabkan ruang putih yang tidak diingini antara imej portfolio. Oleh itu, di sini kita akan menutup margin dari elemen figure.

Clearfix Hack

Menggunakan penjelasan jelas hack adalah kaedah yang sangat popular sebagai satu lagi cara masalah susun atur kerana elemen terapung yang gagal melepaskan anak-anak elemen. Jadi, di sini kami akan menambah petua untuk penjelasan yang jelas oleh Nicolas Gallagher yang telah kami ubah menjadi LESS.

Sekiranya anda melihat struktur HTML kami, kami telah menambah kelas clearfix kepada beberapa elemen.

Gaya Badan

Untuk body/badan , kami akan menetapkan model fon untuk digunakan pada keseluruhan halaman. Model-model ini termasuk saiz fon, warna fon, ketebalan font, kumpulan font, dan warna latar belakang.  Di sini, kami akan menggunakan campuran .font-size() dari perpustakaan Remix untuk menjana saiz fon.Semua Mixins termasuk perpustakaan perpustakaan Remix menghasilkan unit sandaran px , sangat berguna untuk penyemak imbas yang tidak menyokong unit rem .

Setelah menyimpan fail, Koala secara automatik akan menyusun hasilnya. Dan kod di atas harus kelihatan seperti ini dalam CSS biasa.

Model Tandukan

Seterusnya, kami akan menambah gaya di laman web Header, seperti yang berikut.

Ia kelihatan seperti gumpalan sintaksis, jadi mari pecahkannya satu persatu dan periksa apa yang dilakukannya. Pertama, kami tambahkan warna latar belakang kepada Header dengan warna yang disimpan dalam variable @bg-header .  Kami menggunakan .padding() dari Remixins untuk menambah padding di bahagian atas dan bawah Header, menghasilkan lebih banyak jarak putih menegak. Kami juga menambah text-align:center supaya kandungan kami kelihatan lebih teratur.

Kami telah menetapkan saiz imej avatar pengguna dengan Mixin .size() dan membuat bulatan menggunakan tetapan radius kelebihan 50%. Anda boleh melihat model ini yang diisytiharkan dengan .profile-avatar img .

Berikut ialah tetapan nama pengguna. Di sini kita tetapkan saiz fon dengan mixin .font-size() .  Kami telah menyebarkan pembolehubah @color-name kepada warna fon, dan melepasi kumpulan fon dengan pembolehubah @font-family . Akhir sekali, kami menambah font-weight: 400; untuk menjadikan font kelihatan lebih tebal daripada fon lain.

Seterusnya, kami akan melihat tetapan untuk kawasan kreatif pengguna, yang kami sasarkan dengan .profile-fields . Di Behance, anda boleh menambah kepakaran atau bidang pengkhususan yang anda suka.  Yang bermaksud, pengguna aka nada yang mempunyai senarai ringkas, atau bahkan keterangan yang sangat panjang. Saya kemudian memutuskan untuk menetapkan lebar dengan lebar max-width . Kami menetapkan warna font menjadi 50% lebih ringan daripada latar belakang Header dengan lighten(@bg-header, 50%) .

Seterusnya, setiap medan item dipisahkan oleh koma yang kami telah dibekalkan melalui elemen pseudo :after . Walau bagaimanapun, secara logiknya, item terakhir tidak seharusnya mempunyai koma, jadi kami telah memilih item terakhir dengan :last-child dan menetapkan content sebagai content:'' kosong content:'' .

Seterusnya ialah pengarutan gaya untuk menetapkan model lokasi pengguna.Di sini, kami menetapkan warna sedikit lebih ringan daripada warna latar belakang, 30% tepat.  Dan kita juga menambah sedikit jarak antara penanda ikon dan teks Ikon Ikon Asas dengan menambahkan margin-right pada elemen palsu :before .

Selepas menambah gaya ini, Tajuk akan kelihatan seperti ini:

Menetapkan Seksyen Portfolio Model 

Coretan berikut mengandungi semua model untuk portfolio kami.

Banyak gaya di atas adalah hiasan. Tetapi inilah beberapa perkara penting untuk diperhatikan:

Mula-mula, kami menetapkan kawasan kawasan .portfolio-area ke 100%, tetapi menyimpan kawasan maksimum ialah 960px. Ini akan menjadikan kawasan yang boleh disesuaikan dengan saiz tinjauan yang rendah.  Juga, seperti yang anda lihat di atas, kami menetapkan keluasan .portfolio-item kepada 33.33333333333333%. Ini kerana kami akan memaparkan tiga item pada setiap baris. Nombor 33,33333333333333% diambil dari bahagian 100% dibahagikan dengan 3.

Kawasan .portfolio-cover ditetapkan kepada 100%, ia akan mengisi seksyen luas bahagian utama.  .portfolio-image ditetapkan dengan max-width:100% sehingga imej tidak akan melampaui ukuran mana-mana bahagian utama.Semua tetapan yang luas ini akan membantu kami menjadikan laman web lebih mudah diurus.

Sekarang, bahagian portfolio akan kelihatan seperti ini.

Menetapkan Footer (Kaki)

Seterusnya, kami akan menambah gaya kepada Footer. Footer biasanya mudah dan mudah; ia hanya terdiri daripada teks "Dikuasai oleh" dan ikon Behance dari Icon Icon Fon. Berikut adalah semua tetapan gaya untuk Footer.

Sama dengan bahagian portfolio, kami menetapkan kawasan Footer menjadi 100% dan menyelaraskannya ke tengah tetingkap penyemak imbas dengan margin: 0 auto; .  Kami juga menyelaraskan semua kandungan ke pusat untuk menjadikannya kelihatan lebih teratur. Kami kemudian menyembunyikan teks di dalam .power-logo Menggunakan Kaedah Kellum dan memaparkan hanya logo Behance dengan warna logo, biru #1769ff .

Nota: Behance mempunyai semua bahagian pembangun dalam Garis Panduan Penjenamaan mereka jika anda ingin melihat.

Footer kemudian akan kelihatan agak lengkap, seperti berikut.

Mewujudkan Laman Web yang Responsif

Kami mempunyai susunan yang mudah untuk ditetapkan, tetapi sekarang kami akan membuat halaman kami responsif. Nasib baik, laman web kami hanya terdiri daripada satu halaman web dengan susunan yang sangat mudah.  Oleh itu, ia tidak memerlukan kami memasuki kod yang cukup lama untuk menjadikannya responsif. Untuk bermula, kami akan menambah meta viewport (yang penting) ke tag head .

Kemudian tambahkan Pertanyaan Media seperti ini.

Medium interaktif seperti ini akan menunjukkan dua item berturut-turut di antara kawasan paparan 959px dan 768px, dan satu item dengan kawasan paparan 767px dan bawah.

Laman web portfolio kami dalam saiz viewport yang berbeza

Baca lebih lanjut ...

Selepas menetapkan estetika halaman web kami, maka semua yang masih dilakukan seterusnya adalah menambah beberapa sentuhan akhir yang menakjubkan. Selain itu dan merupakan bahagian terakhir siri ini, kami akan membuat pelawat web dapat mengklik pada imej kecil dan melihat versi yang lebih besar, dan kami akan menambah animasi CSS3 untuk meningkatkan pengalaman melayari laman web kami.

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.