Menggabungkan Underscores.me + Bourbon

Sebagai pengembang WP theme, tentunya ingin bekerja dengan efisien, cepat dan hasilnya tetap baik. Setelah memilih milih, akhirnya saya tentukan memilih Starter theme underscores.me. Karena saya lebih suka SASS untuk CSS, saya akhirnya memilih Bourbon setelah sebelumnya mencoba Bootstrap.

Some Like it Neat

Eits, ternyata sudah ada yang persis seperti ini. Some Like It Neat! (saya singkat SLIN aja ya…). Saya menyukai simpelnya struktur CSS/SASS bawaan underscores. ‘SLIN’ ini sepertinya mencoba memodifikasi dari underscores, yang membuat saya (dan penggunanya) ‘lari’ dari penggunaan underscores.me sendiri. Saya pengennya tetep berpatokan pada underscore aja, tapi saya modifikasi SASSnya aja supaya bisa menggunakan Bourbon.

Underscores + Bourbon

Penggabungan Bourbon ke SASS nya underscores, kurang lebih mirip dengan SLIN.  Jadi masih mengadopsi SASS bawaan underscores dan dibagian Normalize diubah menjadi berikut:

/*--------------------------------------------------------------
1.0 Normalize, Bourbon Neat & Bitters
--------------------------------------------------------------*/
@import "bourbon/bourbon";
@import "mixins/mixins-master";
@import "base/grid-settings";
@import "neat/neat";
@import "base/base";
@import "normalize";

Catatan: grid-settings diload sebelum neat sesuai ‘petunjuk’ dari bourbon. Btw, Saya masih bingung dengan normalize.css. Apakah harus ditempatkan sebelum atau sesudah Bourbon. Yang tahu, share ya …

Catatan lagi: Saya menggunakan compiler PrePros, karena saya bekerja menggunakan Windows dan gak mau ribet install Grunt dkk. Jadi semua file bourbon dimasukan ke directory SASS-nya underscores.

Bagian ini dibuang @import "variables-site/variables-site"; Karena Bourbon punya base/base.scss sebagai penggantinya.

Kemudian ada modifikasi file mixins-master.scss. Semua isinya dikosongkan, untuk di isi kalau ada custom function SASS yang dibuat sendiri. Tentunya error yang muncul kemudian di SASS nya harus dikoreksi satu satu ya. Gak banyak kok.

Berikutnya, saya membuang

@import "typography/typography";
@import "elements/elements";
@import "forms/forms";

Semua ini sudah ada terdefinisikan juga di bourbon, tujuannya biar ‘gak berantem’ aja.

Terakhir, modifikasi module clearing.

.clear,
.entry-content,
.comment-content,
.site-header,
.site-content,
.site-footer {
@include clearfix;
}

Karena kata CSSMojo, Modern Clearfix ya seperti ini. Udah gak musim :before :after.

Dan jreng … Starter Theme underscores.me sudah bergabung dengan Bourbon. Tapi karena belum  diapa-apakan, so pasti tetep berantakan dong seperti tampilan awal underscores.me hihihi …

Mau dikasih nama apa ya Starter Theme modifikasi ini? ‘Something Like That”? Ah sudahlah … Ntar jadi kayak SLIN lagi dong.

Hasil yang jadinya mana?

Theme yang saat menulis artikel ini, adalah hasil dari otak atik di atas. Gak aneh aneh, namanya juga masih awal mencoba.  Tapi untuk kerjaan buat client,  sudah dicoba menggunakan dengan refills.bourbon.io supaya lebih cantik lagi.

Kenapa gak milih Bootstrap aja?

Harus diakui, Bootstrap memang super komplit. Tapi ada yang mengganjal. Underscore dibuat dengan tujuan minimal, komponen per komponen. Saya rasa agak sedikit bertentangan dengan bootstrap yang menyediakan semuanya sekaligus. Saya merasa Bourbon agak lebih cocok, karena mengakomodasi penggunaan komponen demi komponen juga.

Silahkan share juga pendapatnya di komentar ya …

Leave a Reply