Seperti yang Anda ketahui, ini bukan waktu lahirnya internet dan orang-orang hampir melupakan situs web, memiliki teks paragraf tunggal dan beberapa hyperlink. Jika Anda ingin melanjutkan dengan standar web saat ini, Anda harus membuat situs web Anda menyenangkan daripada dapat dilihat terus terang. Terlepas dari bahasa pengkodean seperti HTML or PHP digunakan untuk membangun antarmuka pengguna, CSS akan menjadi alat Anda untuk membuat halaman web terlihat gaya. Ketika kita membandingkan halaman web dengan tubuh manusia, HTML berfungsi sebagai tulang Anda sedangkan CSS adalah sesuatu yang dekat dengan kulit dan otot, dibuat untuk memberi bentuk dan struktur.
Sama seperti semua hal lain di dunia desain dan pengembangan, CSS juga memperoleh pembaruan kecil dan besar sehingga cocok untuk mencapai CSS3, yang merupakan pasangan terbaik saat HTML5 menyertai perjalanan. Namun, bintang permainannya adalah tren atau pola CSS yang Anda pilih untuk digunakan! Seperti yang Anda ketahui, ada berbagai kerangka kerja CSS yang tersedia untuk Anda dengan tampilan dan fitur yang berbeda seperti: Bootstrap, Zurb dll. Apa yang kami perkenalkan kepada Anda hari ini adalah CSS murni, Kerangka CSS berbasis coolgrid sederhana dari Yahoo!, raksasa internet terkemuka. Untungnya, Anda dapat menggunakan kerangka kerja ini tanpa membayar sepeser pun.
CSS murni
Anda mungkin telah menggunakan kerangka kerja lain seperti Zurb Foundation untuk membangun halaman web dan situs web yang menarik. Menggunakan kerangka kerja CSS sangat berguna karena Anda bisa mendapatkan template untuk berbagai elemen di halaman seperti divisi, formulir, menu, dll. Ini adalah fungsi yang sama dari CSS murni oleh Yahoo! Daripada mengunduh dan menambahkan file ke folder 'CSS', CSS Murni dapat berfungsi seperti Google Font, di mana Anda harus menambahkan satu baris kode untuk mengintegrasikan kerangka kerja ke HTML. Karena kerangka kerja adalah yang terbaru, itu benar-benar responsif. Di atas semua itu, Pure CSS adalah salah satu kerangka kerja paling sederhana yang dapat Anda temukan di web. Anda dapat menggunakan kerangka kerja untuk memberi daya pada situs web Anda atau mengunduh modul khusus untuk bagian penataan seperti formulir, menu, dll. Ada enam modul individual yang tersedia gratis. Modul-modul Pure CSS adalah sebagai berikut, yang tampak berukuran ringan (kurang dari 2 Kb) saat diekstrak.
- Base: Elemen Halaman Web Dasar seperti judul, paragraf, tipografi
- Tombol: Berbagai tombol dengan efek seperti aktif, melayang, dll.
- Tabel: Tabel dasar tersedia dengan perbatasan dll.
- Menu: Horisontal, Vertikal, Dropdown.
- Kisi: Grid Responsif.
- Formulir: Input yang dikelompokkan, multi-kolom, dll.
LIHAT JUGA: Bookmarklet Pola Halus: Pratinjau Pola Latar Belakang di Situs Web Anda.
Mengapa Menggunakan CSS Murni
- Kode yang tidak digunakan lebih sedikit: Sangat biasa Anda dapat melihat sejumlah besar kode yang tidak digunakan saat menggunakan kerangka kerja css lainnya. Di sisi lain, dalam kasus CSS Murni, Anda tidak akan pernah menghadapi masalah ini karena Anda dapat menggunakan versi kerangka kerja tertentu dan menggunakannya untuk menata bagian halaman web tertentu. Tentu saja, lebih sedikit kode tampak hebat!
- Semua Di Dalam: Setidaknya di beberapa kerangka kerja lain, mereka menggunakan plugin dan kode JavaScript pihak ketiga untuk membuat dampak visual lebih baik. Namun, CSS Murni tidak menggunakan segala jenis plugin JS kecuali kasus yang digunakan dalam efek drop-down. Lebih sedikit kode pihak ketiga dapat memberi Anda pemuatan halaman yang lebih cepat dan kerapian dalam kode.
- Template: Jika Anda bukan ahli untuk merancang tata letak Anda sendiri untuk situs web Anda, CSS Murni dapat membantu di bagian itu. Situs web berisi sejumlah contoh tata letak, mencocokkan situs web dengan tujuan berbeda seperti pemasaran, halaman arahan, dll.
- Pembangun Kulit: Jika template dan gaya dapat memuaskan desainer kreatif dalam diri Anda, Anda dapat menggunakan pembuat kulit CSS Murni untuk membuat kulit Anda sendiri. Seperti yang bisa Anda tebak, pembuat skin tidak mempertimbangkan keahlian tingkat pengkodean Anda.
LIHAT JUGA: Ikon Font: Pro dan Kontra dari Font Awesome Generator.
Menggunakan CSS Murni
Seperti yang ditentukan sebelumnya, Pure CSS memiliki banyak fitur yang menguntungkan jika dibandingkan dengan kerangka kerja lain. Mengingat apa yang kami katakan sebelumnya, Anda dapat menggunakan CSS Murni melalui metode yang sama dari Google Font. Anda harus menambahkan satu baris tautan file eksternal untuk menghadirkan gaya ke halaman web Anda. Fitur ini cukup berguna ketika Anda harus membangun halaman web file tunggal dan ketika Anda tidak memiliki cukup ruang untuk meletakkan semua file css (Kurasa ini tidak akan pernah terjadi). Sebagai Yahoo! memutar roda proyek proyek, Anda tidak ingin tegang tentang kesalahan pemuatan atau kegagalan teknis.
Jika Anda ingin menggunakan template CSS lengkap dari Pure CSS, Anda dapat menambahkan kode berikut ke halaman web utama. Anda juga dapat mengklik tautan file CSS dan mengunduh file CSS untuk menggunakannya.
[html]
[/ html]
Jika Anda hanya ingin menggunakan versi CSS tertentu seperti menu, formulir, dll. Ada kode khusus yang tersedia bersama dengan file CSS khusus. Daftar URL adalah sebagai berikut:
Menggunakan skin builder Pure CSS juga merupakan tugas yang lebih mudah karena Anda dapat mengontrol properti elemen menggunakan tombol kontrol intuitif halaman skin builder. Namun, kami menyarankan Anda harus mengunduh file CSS untuk memahami nama elemen. Seperti yang kami katakan, menempatkan file kurang dari 2 Kb ini tidak akan menghabiskan ruang disk Anda.
Situs web CSS Murni diatur sedemikian rupa sehingga bahkan seorang pemula dapat memasukkan elemen berbasis CSS Murni di situs web mereka. Anda dapat melihat bilah sisi sederhana di sisi kiri, mencantumkan bagian seperti formulir, tombol, dll. Di setiap halaman, pratinjau tersedia bersama dengan kode HTML untuk membawa efek itu ke situs web Anda. Oleh karena itu, sangat mudah untuk menyisipkan elemen tersebut di halaman web Anda. Ditampilkan di bawah ini adalah pratinjau dan kode dari formulir jenis login tunggal.
Kesimpulan
Saat menganalisis semua fitur Pure CSS, ini adalah salah satu kontribusi optimal Yahoo! untuk merancang dunia. Yahoo! Antarmuka Pengguna, umumnya dikenal sebagai YUI mendukung semua string yang melekat pada CSS Murni menjadikan kerangka kerja yang terbaik ketika ada perbandingan. Selain menggunakan elemen yang telah ditentukan sebelumnya, Anda juga dapat menyesuaikan CSS Murni. Anda harus mengarahkan diri Anda ke situs web CSS Murni untuk menggunakan dan mempelajari lebih lanjut tentang kerangka kerja yang ringkas. Beri tahu kami pendapat Anda tentang kerangka kerja ini setelah memeriksa contoh dan menggunakannya di proyek Anda.
rakesh kumar
Terima kasih telah memposting ulasan luar biasa tentang css murni ini. Karena saya mencoba mengembangkan tema wordpress saya sendiri untuk komunitas, saya pikir css baru dari yahoo.com ini dapat banyak membantu saya.
Hari
Saya merasa itu sangat berguna. Akan mengeksplorasi masing-masing nanti.
Cassie
Wow. Ini sangat menarik. Terima kasih telah berbagi informasi ini.
Raymond Sam
Apakah Anda akan merekomendasikan Pure over Bootstrap atau Foundation pada saat ini? Saya menemukan Bootstrap sedikit kurang optimal didokumentasikan sebagai pengguna pertama kali.
Sajesh
Halo Abhijith N Arjunan, saya harus memberi tahu Anda bahwa Anda telah melakukan pekerjaan dengan baik dan terima kasih telah mencerahkan pengetahuan dan keterampilan saya.
Santosh
Artikel bagus Abhijit. Saya menggunakan PureCSS untuk membuat tema untuk sistem manajemen konten baru yang disebut PyroCMS. Lihat [PyroPure]).
Sangat menyenangkan mengembangkan tema. Saya pikir itu jauh lebih ringan daripada kerangka kerja lain di luar sana. Penataannya juga sangat dapat disesuaikan.
Erwin
Wow.. Ini adalah sesuatu yang menarik untuk dipelajari, saya tahu saya tidak berbakat dalam pemrograman dan desain, tetapi menarik untuk dilakukan. PureCSS mungkin sesuatu yang saya butuhkan, sangat.
Adam
Halo Saya telah menggunakan kemurnian (PureCss) dari Yahoo pada 3 proyek dan itu benar-benar kerangka kerja ringan yang luar biasa sehingga dapat dikatakan, dibandingkan dengan Bootstrap atau yayasan fokusnya adalah ringan dan membawa kembali desain ke pengembang dan mengandalkan kit UI 300kb bahwa Anda tidak menggunakan 70% elemen, dan jika Anda mengambil bagian dari Bootstrap masih membutuhkan Java masih di bagian 200kb. Belum lagi setiap situs web terlihat Bootstrappy, itulah sebabnya saya tidak akan pernah menggunakan Bootstrap untuk membangun situs web atau fondasi Zurb semuanya berat dan Anda perlu menggunakan kisi 12 kolom mereka yang menjadi sangat membosankan. Saya melihat situs situs web mereka semua terlihat bagus dan keren namun mereka hanya terlihat sangat kotak dan baik Bootstrap-foundation, Yahoo PureCss adalah kit UI yang luar biasa, cepat, mudah digunakan, modifikasi dan yang terbaik, bekerja sangat cepat dengan WordPress sebagai tema! Saya menggunakannya untuk 4 proyek WordPress dengan YUI PureCss dan klien kagum setelah beralih dari Bootstrap, pemberitahuan pertama adalah kecepatan situs, kedua, desain FLAT yang indah secara default.