Ebook Mengembangkan CSS Framework Sendiri [Bahasa indonesia]

Melanjutkan dari post sebelumnya yang membahas BEM CSS convention, seperti sudah saya sampaikan pada tulisan sebelumnya bahwa akan coba saya jelaskan step by step pembuatan framework css sederhana Awesome-BEMCSS maka pada post kali ini penjelasan akan saya coba buat dalam bentuk ebook yang bisa Anda download gratis di bagian bawah post ini nanti.

Pada pembuatan framework ini, akan banyak digunakan beberapa tools yang mungkin akan terdengar susah dipahami bila belum terbiasa namun terasa mudah bila sudah paham, oleh itu saya akan menyarankan untuk sedikit membaca mengenai beberapa tools yang akan digunakan di ebook tersebut, seperti :
– NodeJS dan NPM (*baca instalasi dan basic usage nya)
– SASS (*baca basic SASS di official page nya)
– Grunt (*baca get starter nya saja cukup)

Ebook ini dapat di download secara gratis disini : http://mazipanneh.com/blog/download-ebook-programming/
Demikian sharing dari saya, semoga bermanfaat

Awesome BEM CSS – Simple CSS Framework with BEM Convention

Sebelum membahas tentang Awesome-BEMCSS itu apa, saya akan coba bahas sedikit mengenai BEM.

BEM atau yang merupakan singkatan dari Block-Element-Modifier sesungguhnya bukanlah sebuah CSS Framework layaknya bootstrap atau foundation yang sering kita dengar di dunia per-CSS-an. 

BEM hanya sebuah aturan dalam penamaan class di dalam CSS,  sebagaimana beberapa aturan-aturan lain yang mungkin kita kenal seperti OOCSS, atomic, SMACSS, dll.

BEM sendiri mengusung konsep yang sederhana namun mudah dipahami meskipun tidak terlalu mudah pada saat implementasi (*paling tidak saya merasa kesulitan pada awalnya).

BEM seperti kepanjangan dari namanya, membagi konsep aturannya ke dalam 3 bagian Block-Element-Modifier.

HTML – Membuat Form Input Biodata Sederhana

Setelah belajar mengenai bagian-bagian yang biasa digunakan dalam form pada postingan sebelumnya.

maka sekarang kita akan berusaha mempraktekan ilmu yang sudah kita pelajari kemarin.

berikut adalah contoh dari pembuatan form sederhana.

HTML – Membuat Text Area

Text area biasa digunakan untuk memberikan sebuah komentar panjang dallam nsebuah form.

Berikut contoh coding sederhananya.

<form>
Pesan dan Kesan<br>
<textarea name=pesan rows=5 cols=40></textarea>
</form>

bisa disave dengan extensi dot html atau htm saja(.htm/.html).

HTML – Membuat Input Drop Down

Yang dimaksud input drop down adalah suatu cara untuk sebuah pilihan seperti radio button dimana user hanya bisa memilih satu pilihan saja, namun kali ini disajikan dengan tampilan yang dropdown (baca: bisa ditarik kebawah)

Berikut contoh coding sederhananya.

<form>
Kota kelahiran    :<br>
<select name=kota>
<option value=”jkt”>Jakarta</option><br>
<option value=”ygt”>Yogyakarta</option><br>
<option value=”sbg”>Subang</option><br>
<option value=”bdg”>Bandung</option><br>
</select>
</form>

 

bisa disave dengan extensi dot html atau htm saja(.htm/.html).