Kirby Webpack
:muscle: A Kirby CMS starter-kit with modern frontend tools
Overview:
Kirby-webpack is a starter-kit for Kirby 3, a file-based CMS. It aims to provide frontend tools for developers, especially those more focused on front-end development. It includes features such as a Kirby Package Manager, a dev server with livereload, Webpack with support for SASS, PostCSS, Autoprefixer, ES6 transpilation with Babel, linting with ESLint, and the ability to generate a stats.json file for optimizing dependencies. This theme simplifies the installation process and provides a project structure that allows developers to easily work with Kirby and Webpack.
Features:
- Kirby Package Manager: A tool that eliminates the hassle of managing git submodules.
- Browsersync dev server: Provides livereload functionality for all website files.
- Built-in PHP Server: PHP is handled for you within the dev server.
- Webpack 4: Enables handling of JS and CSS assets, with support for SASS, PostCSS, and Autoprefixer.
- ES6 transpilation with Babel: Allows writing modern JavaScript code that is supported by older browsers.
- Linting with ESLint: Ensures code quality and adherence to standard presets.
- Stats.json generation: Generates a stats.json file for optimizing dependency tree.
- Multiple config files: Offers flexibility to create a custom workflow using the starter kit.
Summary:
Kirby-webpack is a powerful starter-kit for Kirby 3 that provides essential frontend tools for developers. It simplifies the installation process, offers features like livereload, webpack compilation, and ES6 transpilation, and allows for customization through multiple config files. With Kirby-webpack, developers can easily set up and work with Kirby CMS within a pre-configured npm and Webpack environment.
- LESS
Less CSS is a dynamic stylesheet language that extends the capabilities of CSS, allowing developers to write cleaner, more modular, and reusable stylesheets with features like variables, mixins, and nested rules.
- SCSS
SCSS is a preprocessor scripting language that extends the capabilities of CSS by adding features such as variables, nesting, and mixins. It allows developers to write more efficient and maintainable CSS code, and helps to streamline the development process by reducing repetition and increasing reusability.
- Eslint
ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.
- Webpack
Webpack is a popular open-source module bundler for JavaScript applications that bundles and optimizes the code and its dependencies for production-ready deployment. It can also be used to transform other types of assets such as CSS, images, and fonts.