- Easy to use
- Quick setup
- Composer PSR-4 autoloading
- Makes use of a MVC system using PHP
- Works with both Windows and Linux
- Made to work with the latest versions of PHP, Composer, Node.js, npm and Sass
- Includes a bunch of npm scripts for compiling Sass and TypeScript, as well as live-reloading
- Comes with example pages and a default landing page
- A collection of handy TypeScript functions
Read more about Simpl here.
Before you can start using Simpl you will need to make sure you have the following installed:
- PHP (tested with version 8.3.8)
- Composer (tested with version 2.7.7)
- Node.js (tested with version 22.3.0)
- npm (tested with version 10.8.1)
Download the latest version of Simpl from here and extract the folder. Next, copy the src folder to your localhost folder. For localhost management I recommend using WAMP or XAMPP if you're on Windows, or plain Apache if you're on Linux.
Next, rename the src folder to the name of your project and open this folder in an IDE to your liking, I recommend using PhpStorm or Microsoft Visual Studio Code.
Simpl makes use of PSR-4 autoloading, for this to work you will have to run composer install in the root folder of your project. This will install the required packages and create the vendor folder. It will also install the phpdotenv package, which is used for loading environment variables from the .env file.
Next, a few npm packages will need to be installed. You can do this by running npm install in the root folder of your project, this will also run the build script, which will compile the default Sass and TypeScript files.
Now if you open your browser and go to your localhost url of this project, you should see the default landing page. If the page doesn't have any styling there is a chance there was an issue compiling the Sass files, you can try to fix this by running the build script again manually using npm run build.
Simpl comes with a few add-ons, these are optional and can be added to Simpl by downloading them from here and extracting them to the src folder. When asked to overwrite files, click No and manually copy the code in the files to the existing files. Each add-on has a README.md file with instructions on how to install it.
Now you're all set up and ready to start coding! This is the framework in a nutshell:
The following scrips are included in the package.json file:
build:sass: Compiles the Sass filesbuild:js: Bundles themain.jsfile using Rollup and minifies it using the Terser pluginbuild: Runs both build commandswatch:sass: Watches the Sass files for changes and recompiles themwatch:js: Watches themain.jsfile for changes and rebundles it and minifies itwatch: Runs both watch commandslive: Runs the browser sync server to automatically reload the page when a file is changeddev: Runs the live server and watches the files for changes
After changing the styling or TypeScript of your website you will have to run the build script to compile the files. This will compile the Sass and TypeScript files and save them to the public folder. This can also be done automatically by running the watch script.
To make your website automatically reload when a file is changed you can run the live script. This will start the browser sync server and automatically reload the page when a file is changed. Important: Before running the live-reload script you will have to change the url in the script, it's located in the package.json file. Change this url to your localhost.
Alternatively you can run the dev script, this will start the live server and watch the files for changes.
Config files for the PHP framework are located in the app/Config folder. Here you can find the app.php file, which contains the configuration for the framework.
Feel free to add your own config files here as each .php file in this folder will be loaded automatically on page load.
In the app folder you can find the Controllers, Models and Pages folders.
The Controllers folder contains an AppController and a PageController by default, these contain the main functions for the framework.
The Models folder contains a PageModel by default, this contains an obj and a url property, these hold the current Page object if it exists and the current page name, subpages and parameters of the url. These can be accessed at all times in any view by using $this->.
The Pages folder contains a Page class for each view that requires PHP code. See these as specific controllers for each view. A Page is not required for each view, if a view doesn't require PHP code, you don't need to create a Page for it.
There is also a LogController in the Controllers folder, this is used for logging errors and warnings. You can use this controller to log errors and warnings in your own code. There will be stored in the app/Logs folder.
You can find the HTML code in the views folder, here you can find the home.phtml file, as well as a parts folder containg the header.phtml and footer.phtml files.
The styling is located in the scss folder. Here each view has its own stylesheet, as well as stylesheets for the parts like the header and footer. In the config folder you can find stylesheets for things like variables, mixins and breakpoints. All of these stylesheets are imported in the main.scss file, which is the main stylesheet.
The TypeScript code is located in the ts folder. Simpl makes use of Rollup to bundle the TypeScript files, because of this you are able to create multiple TypeScript files and import them in the main.ts file.
The public folder contains the compiled Sass and JavaScript files, these are the files that are used in the website. Here you can also find things like images and fonts.
If you need more information about the framework and its features, you can find the documentation here (page under construction).
Download the latest version of Simpl from here.
Or clone the repository using git clone https://github.com/IJuanTM/simpl.
- Make Simpl website
- Write documentation
- Add more add-ons
- Improve the form validation system
- Initial release
- Ready for use with PHP 8.3.0
- Updated composer and npm packages
- Added remember me functionality to the auth system
- Fixed a small issue with the manifest file
- Updated the-new-css-reset
- Updated Font Awesome icons
- Quick update to PHP 8.3.1
- Changed some constants to environment variables
- Updated .htaccess file and fixed an issue with the URL builder
- Updated npm packages
- Tested with PHP 8.3.2
- Fix for error when the
Logsdirectory doesn't exist
- Switched to TypeScript instead of JavaScript
- Small fixes to npm scripts
- Updated Font Awesome icons
- Newer database collation in database example file
- Updated npm packages
- Support for PHP 8.3.8
- npm
- npm-run-all
- sass
- rollup
- @rollup/plugin-commonjs
- @rollup/plugin-node-resolve
- @rollup/plugin-terser
- browser-sync
Simpl is licensed under the GNU General Public License v3.0.
Feel free to use, modify, and redistribute Simpl, but please give credit to the original author.