[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-cats-ngidenet":3,"blog-detail-ngidenet-list-css-framework-selain-bootstrap-yang-wajib-kamu-cek":20},{"items":4},[5,9,13,17],{"name":6,"slug":7,"count":8},"Digital Marketing","digital-marketing",41,{"name":10,"slug":11,"count":12},"Programming","programming",56,{"name":14,"slug":15,"count":16},"Tips","tips",75,{"name":18,"slug":19,"count":8},"Web Development","web-development",{"id":21,"slug":22,"title":23,"short_text":24,"excerpt":24,"cover":25,"cover_image":25,"cover_alt_text":25,"category":18,"tags":26,"published_at":27,"created_at":28,"full_text":29,"meta_title":25,"meta_description":30,"faqs":31,"images":32,"views_count":33},415,"list-css-framework-selain-bootstrap-yang-wajib-kamu-cek","List css framework selain Bootstrap yang wajib kamu cek!","Agus Yusida August 25, 2017 Buat kamu para frontend developer pasti tidak asing lagi dengan istilah css framework bukan? CSS framework adalah library CSS yang digunakan untuk membuat standarisasi layo",null,[],"2019-09-21T16:00:00Z","2026-07-14T04:39:37.890139Z","\u003Cimg alt=\"Go to the profile of Agus Yusida\" src=\"http:\u002F\u002F0.gravatar.com\u002Favatar\u002Fc0b0eeb94d5a7fd159a09fd4a506d27b?s=96&d=mm&r=g\"\u002F>  Agus Yusida August 25, 2017\u003Cp>Buat kamu para frontend developer pasti tidak asing lagi dengan istilah css framework bukan? CSS framework adalah library \u003Cstrong>CSS\u003C\u002Fstrong> yang digunakan untuk membuat standarisasi layout dan tema html dari website. Dengan \u003Cstrong>CSS framework\u003C\u002Fstrong> kita bisa membuat \u003Cem>front-end\u003C\u002Fem> website dengan lebih cepat mengingat beberapa layout dan komponennya sudah disediakan.\u003C\u002Fp>\u003Cp>Bootstrap CSS Framework adalah salah satu CSS Framework yang terkenal dan mungkin paling banyak dipakai saat ini. Menurut data dari \u003Ca href=\"http:\u002F\u002Fwww.w3tech.com%2C\u002F\">www.w3tech.com,\u003C\u002Fa> “\u003Cstrong>Bootstrap is used by 20.7%\u003C\u002Fstrong> of all the websites” . Dengan market share yang lumayan besar itu, tentu saja CSS Framework ini sangat wajib untuk dicoba dan dipelajari oleh para \u003Cem>front-end developer\u003C\u002Fem>.  \u003C\u002Fp>\u003Cp>Namun kali ini kita mau membahas CSS Framework apa saja sih yang kira-kira wajib dipelajari selain Boostrap?\u003C\u002Fp>\u003Ch3>1. \u003Ca href=\"http:\u002F\u002Fbulma.io\u002F\">Bulma\u003C\u002Fa> — A modern CSS framework based on Flexbox\u003C\u002Fh3>\u003Cfigure>\u003Cimg alt=\"\" src=\"data:image\u002Fgif;base64,R0lGODlhAQABAIAAAAAAAP\u002F\u002F\u002FyH5BAEAAAAALAAAAAABAAEAAAIBRAA7\"\u002F>\u003C\u002Ffigure>\u003Cp>Dengan total bintang lebih dari 18,000 di repo githubnya, Bulma menjadi CSS framework yang cukup diminati di tahun 2017 ini. Dirancang dengan dasar \u003Cem>flexbox\u003C\u002Fem>, SASS, modular, flat dan sangat mudah untuk di implementasikan.\u003C\u002Fp> \u003Cp>Dari segi dokumentasinya juga sangat lengkap, jadi kalian tidak usah takut kebingungan lagi saat mencoba framework ini. Penamaan \u003Cem>class-class \u003C\u002Fem>nya mirip dengan Boostrap jadi buat kalian yang mau migrasi dari \u003Cstrong>Boostrap\u003C\u002Fstrong> ke \u003Cstrong>Bulma\u003C\u002Fstrong> akan lebih mudah.\u003C\u002Fp>\u003Cp>GIthub : \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fjgthms\u002Fbulma\">https:\u002F\u002Fgithub.com\u002Fjgthms\u002Fbulma\u003C\u002Fa>\u003Cbr\u002F>Dokumentasi : \u003Ca href=\"http:\u002F\u002Fbulma.io\u002F\">http:\u002F\u002Fbulma.io\u003C\u002Fa>\u003C\u002Fp>\u003Ch3>2. \u003Ca href=\"https:\u002F\u002Fmilligram.github.io\u002F\">Milligram\u003C\u002Fa> — A minimalist CSS framework\u003C\u002Fh3>\u003Cfigure>\u003Cimg alt=\"\" src=\"data:image\u002Fgif;base64,R0lGODlhAQABAIAAAAAAAP\u002F\u002F\u002FyH5BAEAAAAALAAAAAABAAEAAAIBRAA7\"\u002F>\u003C\u002Ffigure>\u003Cp>Diposisi kedua kita punya Miligram. Dari namanya framework satu ini mempunyai kelebihan yaitu ukurannya yang sangat kecil yang hanya \u003Cstrong>2kb gzipped. \u003C\u002Fstrong>Namun jangan salah, dengan ukuran sekecil itu, framework ini sudah memiliki fitur yang lengkap seperti heading, form, button dan fungsi umum lainnya yang dibutuhkan dalam merancang sebuah tampilan website. \u003C\u002Fp>\u003Cp>Framework ini memang di desain untuk memiliki performa yang lebih cepat dan lebih produktif untuk kamu para \u003Cem>frontend\u003C\u002Fem> developer. \u003C\u002Fp>\u003Cp>Github : \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fmilligram\u002Fmilligram\">https:\u002F\u002Fgithub.com\u002Fmilligram\u002Fmilligram\u003C\u002Fa>\u003Cbr\u002F>Dokumentasi : \u003Ca href=\"http:\u002F\u002Fmilligram.io\u002F\">http:\u002F\u002Fmilligram.io\u002F\u003C\u002Fa>\u003C\u002Fp>\u003Ch3>3. \u003Ca href=\"http:\u002F\u002Ffoundation.zurb.com\u002F\">Foundation\u003C\u002Fa> ~ The most advance responsive front-end framework in the world\u003C\u002Fh3>\u003Cfigure>\u003Cimg alt=\"\" src=\"data:image\u002Fgif;base64,R0lGODlhAQABAIAAAAAAAP\u002F\u002F\u002FyH5BAEAAAAALAAAAAABAAEAAAIBRAA7\"\u002F>\u003C\u002Ffigure>\u003Cp>Foundation pertama kali dibuat tahun 2008 dengan nama ZURB style guide. Dengan umur yang sudah sangat lama, tentunya framework yang satu ini sudah sangat dewasa dilihat versi terakhir saat artikel ini dibuat adalah versi 6. Jika css framework biasanya digunakan untuk membuat desain web yang responsive, maka Foundation juga bisa digunakan untuk membuat email, mobile dan web template. Jika kalian ingin belajar Foundation, maka dokumentasinya sudah sangat lengkap dan dukungan komunitas juga sangat besar seperti di situr stackoverflow.com\u003C\u002Fp>\u003Cp>Github : \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fzurb\u002Ffoundation-sites\">https:\u002F\u002Fgithub.com\u002Fzurb\u002Ffoundation-sites\u003C\u002Fa>\u003C\u002Fp>\u003Cp>Dokumentasi : \u003Ca href=\"http:\u002F\u002Ffoundation.zurb.com\u002Fsites\u002Fdocs\u002F\">http:\u002F\u002Ffoundation.zurb.com\u002Fsites\u002Fdocs\u002F\u003C\u002Fa>\u003C\u002Fp>\u003Ch3>4. \u003Ca href=\"http:\u002F\u002Fsemantic-ui.com\u002F\">Semantic UI\u003C\u002Fa> — User Interface is the language of the web\u003C\u002Fh3>\u003Cfigure>\u003Cimg alt=\"\" src=\"data:image\u002Fgif;base64,R0lGODlhAQABAIAAAAAAAP\u002F\u002F\u002FyH5BAEAAAAALAAAAAABAAEAAAIBRAA7\"\u002F>\u003C\u002Ffigure>\u003Cp>Satu hal yang menarik dari sematik adalah \u003Cem>frontend framework\u003C\u002Fem> yang bisa diintegrasikan dengan framework lainnya. Jadi kamu bisa memasang tema framework lain seperti \u003Cstrong>bootstrap, google material, github\u003C\u002Fstrong> atau yang lainnya dengan sangat mudah. Ada ribuan pilihan tema lainnya, baik dari komunitas atau official dari Foundation. Fitur-fitur yang bisa kamu gunakan seperti form, dropdown, menu, tab dan lainnya sangat mudah di implementasikan. Buat kalian yang baru belajar frontend framework, sematic ui bisa menjadi pilihan yang pas karena penamaannya sangat \u003Cem>human friendly.\u003C\u002Fem>\u003C\u002Fp>\u003Cp>Github: \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fsemantic-org\u002Fsemantic-ui\u002F\">https:\u002F\u002Fgithub.com\u002Fsemantic-org\u002Fsemantic-ui\u002F\u003C\u002Fa>\u003C\u002Fp>\u003Cp>Dokumentasi : \u003Ca href=\"https:\u002F\u002Fsemantic-ui.com\u002F\">https:\u002F\u002Fsemantic-ui.com\u002F\u003C\u002Fa>\u003C\u002Fp>\u003Ch3>5. \u003Ca href=\"http:\u002F\u002Fmaterializecss.com\u002F\">Materialize\u003C\u002Fa> ~ A modern responsive front-end framework based on Material Design\u003C\u002Fh3>\u003Cfigure>\u003Cimg alt=\"\" src=\"data:image\u002Fgif;base64,R0lGODlhAQABAIAAAAAAAP\u002F\u002F\u002FyH5BAEAAAAALAAAAAABAAEAAAIBRAA7\"\u002F>\u003C\u002Ffigure>\u003Cp>Sesuai namanya, framework ini dibuat berdasarkan gaya google material design. Ada beberapa komponen umum yang sudah disediakan seperti \u003Cem>form\u003C\u002Fem>, \u003Cem>button\u003C\u002Fem>, \u003Cem>cards\u003C\u002Fem> dan \u003Cem>icons\u003C\u002Fem>. Selain itu ada tambahan fitur-fitur khas material design seperti \u003Cem>drag-out mobile menus\u003C\u002Fem>, \u003Cem>material-based design shadows\u003C\u002Fem>, \u003Cem>colors\u003C\u002Fem>, \u003Cem>typography\u003C\u002Fem>, animasi \u003Cem>ripple-effect\u003C\u002Fem> , dan SASS mixins. Jadi buat kalian yang mau membuat frontend website atau aplikasi dengan gaya material design, framework ini wajib dicoba.\u003C\u002Fp>\u003Cp>Github: \u003Ca href=\"https:\u002F\u002Fgithub.com\u002FDogfalo\u002Fmaterialize\">https:\u002F\u002Fgithub.com\u002FDogfalo\u002Fmaterialize\u003C\u002Fa>\u003C\u002Fp>\u003Cp>Dokumentasi: \u003Ca href=\"http:\u002F\u002Fmaterializecss.com\u002F\">http:\u002F\u002Fmaterializecss.com\u002F\u003C\u002Fa>\u003C\u002Fp>\u003Cp>Itulah beberapa top \u003Cem>front-end\u003C\u002Fem> css framework yang bisa kalian pilih sebagai alternatif dari \u003Cstrong>Boostrap\u003C\u002Fstrong>. Dilihat dari list diatas dapat disimpulkan trend css framework akan semakin \u003Cem>sematic\u003C\u002Fem>,  dokumentasi yang bagus, flat design, fleksibel dan juga harus mudah digunakan dan dimengerti oleh orang-orang yang baru belajar. Namun tetap tidak mengesampingkan dari segi kemampuan dan fitur-fitur yang disediakan.\u003C\u002Fp>\u003Cp>Jadi apa front-end framework apa yang menjadi pilihan kamu? Ingat komen dibawah ya dan jangan lupa like & share ^^\u003C\u002Fp> Please follow and like us:\u003Ca href=\"http:\u002F\u002Fwww.specificfeeds.com\u002Fwidgets\u002FemailSubscribeEncFeed\u002FUmN5cWduWHlmN09VS1JQcFMrLzFJODRBMlMxY3R4RWlzQnFqb2REQlVwRWxodzRTT3NLYTNxQ2FUbzFvSkJTM2hFMU9SOVdWdGNiSlF0N3ZFMjdqR1A0U2VoL0tFYXdjb1JOUnRldUlqd2ZHYU84K2lvQXZ4aHNXQ3hYZ2g2N018RlF5OExKZXdlaW1QWllodDc3c3ZscmliQ1pDaTFBSFdTWUQ3MElieVNIST0=\u002FOA==\u002F\">\u003Cimg src=\"data:image\u002Fgif;base64,R0lGODlhAQABAIAAAAAAAP\u002F\u002F\u002FyH5BAEAAAAALAAAAAABAAEAAAIBRAA7\"\u002F>\u003C\u002Fa>\u003Ca href=\"http:\u002F\u002Ftwitter.com\u002Fshare\">\u003C\u002Fa>\u003Ca href=\"https:\u002F\u002Fwww.pinterest.com\u002Fpin\u002Fcreate\u002Fbutton\u002F?url=&media=&description=\">\u003C\u002Fa> Tags: Boostrap Css Framework","Agus Yusida August 25, 2017 Buat kamu para frontend developer pasti tidak asing lagi dengan istilah css framework bukan? CSS framework adalah library CSS yang d",[],[],0]