Kirby Starterkit
This repo is my own starterkit for Kirby 3 projects. It works with Webpack and BrowserSync and allows to work with SCSS and ES6. Featuring Kirby CMS and SCSS Starterkit.
Requirements
Installation
- In Terminal, go to your production folder:
cd path/to/my/folder
- Clone this repository with the submodules
git clone https://github.com/sinanatra/kirby-starterkit NAME-OF-MY-FOLDER
cd NAME-OF-MY-FOLDER
git clone --depth=1 https://github.com/sinanatra/scss-starterkit.git src/scss
rm -rf ./src/scss/.git
- Install and update Kirby
composer install
cd www/kirby
composer update
cd ../..
- Install dependencies with npm
npm install
-
Ttype
npm run start
now, openhttp://localhost:3000
and to start coding. The browser will reload at every saved change. -
At the end of your coding process, you can run the
npm run build
command.
Folder structure
After the installation, your folder will more or less look like that:
node_modules/
src/
vendor/
www/
.babelrc
.browserslistrc
CHANGELOG.md
composer.json
composer.lock
LICENCE
package-lock.json
package.json
postcss.config.js
README.md
webpack.config.js
You will apply the changes to the following files/folders:
-
www
folder and its subfolders: the main folder for Kirby coding. Kirby documentation will be really useful to help you here. -
src
folder and its subfolders: every file that is here will be compile to thewww/assets
folder. You will already findscss
andjs
folders where you can code your stylesheets (with SCSS/CSS) and your scripts (with JS). You might have to addfonts
andimages
folders for font and image files that are linked to your CSS files. Inscss
folder, you will already find my SCSS Starterkit, very useful if you want to configure your website easily.