Quickstart

Hello World

• LiveReload

  LiveReload should already be working. Try changing Hello World in /site/templates/sections/main.latte to Hello Universe and see if the browser reloads automatically.

  See docs for further details.

• Latte

  Latte is a great template engine by Nette - the folks behind TracyDebugger! See Getting Started with Latte and also Why I love the Latte Template Engine.

  See docs for further details.

• UIkit

  UIkit is loaded in /site/templates/_init.php and ready to use. You can go ahead and copy and paste examples from their docs.

  You can also modify UIkit LESS variables easily. Just edit /site/templates/styles/_custom.less and change the color for muted background to a light red:

  @global-muted-background: #f7a3a3;

  LiveReload should automatically reload the page and UIkit LESS files should automatically be compiled to CSS.

  See docs for further details.

• TailwindCSS

  To use TailwindCSS, you need to install it first. All you have to do is run this command in the root directory of your project:

  npm install -D

  This will install all dependencies listed in package.json and add the npm run build command that will compile TailwindCSS to CSS for the browser.

  Note: If livereload is enabled RockFrontend will automatically load the file /site/livereload.php on every reload. This file will then run npm run build via PHP's exec function. You can remove this file if you want to use your own build scripts or watchers.

  Tailwind Example: Try adding class='bg-red-500 p-5' to the Hello World heading in /site/templates/sections/main.latte.

  See docs for further details.