Start simple™

Kirby flavored SEED3000 ✨

KirbyCMS Documentation

Note: This is my personal "getting started" package for things I build on the web. Sometimes we need some help from our friends, and this time, it's Kirby. Covers basically what you need to get something going– an experiment, prototype, a single page site, or the beginnings of something grand. I hope you find this useful! Enjoy.

Important note: Kirby is free to try, but you need a license when you deploy. Trust me, it's good. Flexible, versatile, uncluttered.

• Basic setup to get you started
• Running Kirby 2.4.1
• No frills
• Runs on gulp
• Compresses images
• Clean and easy media queries via Rupture
• Autoprefix, because yolo
• ES6 support
• Live reload
• Module up with Webpack
• Cute log messages with emojis (that's right!)

I've been trying to look for a simple and straight-forward setup when building stuff on Kirby– found none! So here's something packaged up that I've made for my own use and sharing with you all! I hope you find it useful.

What this does not attempt to accomplish:

• This does not attempt to change the world, or revolutionise anything, it's just a starter kit you guys. Use it as you wish! Improve it! Build on top of it!
• It will not automatically build amazing things for you, you have to do it. But this does get rid of the 'setup' and 'plumbing' noise and allows you to just jump in.
• This starter HAS NOT altered Kirby in any way. It's Vanilla, you can do all your magic on top, add plugins etc.

Start simple!

A) Install yarn (https://yarnpkg.com/lang/en/) npm install -g yarn

1. Clone this repo git clone git@github.com:ezekielaquino/KirbySeed3000.git [optional folder name]

2. cd to wherever you cloned it then run yarn to install dependencies

3. Run npm run dev (A browser will open up with a little welcome message)

4. Start coding

5. When you're ready to deploy, just run npm run prod, this minifies/compresses/use all templates/css/images

NOTE:

• to go to panel go to localhost:8080/panel. DO NOT use the proxied url! it will result in errors!
• to enable installation to work initially, panel.install is set to true in site/config/config.php
• DELETE the lines indicated in the comment in config.php after you've created your account

• Constantly a [WIP]

• Kirby! (http://getkirby.com)
• Want Kirby plugins? Google 'kirby plugins!' :)
• Be stylish with your CSS via Stylus (http://stylus-lang.com/)
• HTML? You can also do Twig when you make templates! (http://twig.sensiolabs.org/)
• Rupture makes media queries super clean and easy (https://github.com/jescalan/rupture)

    // In stylus– note the nesting
    .some-div {
      position: absolute;
      width: 300px;
      height: 300px;
  
      // see how clean and easy, see docs on usage!
      +below(600px) {
        width: 100px;
        height: 100px;
      }
    }
  

• ES6! Use arrow functions, imports and all that new syntax jazz

Notes on images: Put all image image assets in source/images. When using images in html/templates/css while in dev just use images/**/filename.xxx as the src. It will be automatically be changed to sources/images/**/filename (when in dev) or assets/img/**/filename (in prod). Forget about paths, Just... images.

The is completely free but I'd love to know if you have found it useful or improved it in any way! Drop me a line at ezekielaquino@gmail.com or via @the_ezekiel on Twitter! or better yet, pay it forward and Share it on Twitter!

This project is licensed under the MIT License - see the LICENSE.md file for details