Intro
Versi 2 ini adalah rewrite dari versi 1 serta penggantian stack yang digunakan untuk processing source code CSS & Javascript. Repository ini adalah kickstarter yang saya gunakan untuk setiap project PSD to HTML. Jika ingin tahu versi satu silahkan buka branch v1
Instalasi
Clone Repository
git clone http://github.com/ariona/frontend-kickstarter nama-project-anda
Install NPM Library
npm install # atau yarn install
Mulai dev task
npm run dev
Kenapa PostCSS?
Jika sebelumnya saya menggunakan SASS sebagai Preprocessor, kali saya lebih tertarik untuk menggunakan PostCSS dan bermigrasi sepenuhnya dari SASS.
Jadi bagaimana dengan fitur-fitur SASS yang selama ini mempermudah kita menulis CSS 😭? Tenang semua tergantikan dengan bantuan plugin PostCSS. Jadi meskipun menggunakan pure CSS tapi masih bisa menggunakan variable (Custom Properties), Nesting & lainnya
Kenapa Gulp & Webpack?
Gulp & Webpack itu dua tools yang berbeda, Gulp untuk task runner dan webpack sebagai module bundler javascript.
Karena sudah terbiasa dengan penulisan syntax ES6 ketika mengerjakan project React Native, kebiasaan ini jadi terbawa ketika menulis javascript untuk project non-react.
Usefull PostCSS Libraries
- lost, Plugin untuk membuat layout grid
- postcss-cssnext, Plugin agar kita bisa menggunakan syntax CSS terbaru tanpa harus memusingkan compatibility karena pada akhirnya akan dicompile ke CSS biasa. Ketika semua sudah jadi standar kita sudah pake standar tersebut sejak lama 😉
- postcss-nested, Plugin agar kita bisa melakukan nesting rule seperti dalam CSS Preprocessor (SASS/Less)
- postcss-nested-ancestors, Plugin extension untuk postcss-nested agar kita bisa memanggil parent selector
- postcss-partial-import, berbeda dengan import CSS, @import ini akan menggabungkan konten dari CSS yang di import
- postcss-utilities, Berisi beberapa utility/mixin yang paling sering digunakan, seperti clearfix, css triangle dll.