Download the PHP package hce/microframework without Composer

it.hce.microframework

a lightweight framework designed for prototyping

Install

• php composer.phar create-project hce/microframework projectName

or

• composer.phar create-project hce/microframework projectName

then

• cd projectName
• npm install
• Point your webserver to projectName/public folder
• Set public/css and public/js as writable folders (create them if necessary)
• Set cache as writable folder

Create a component

• Create a folder under components named as you wish, for example component

• Create a component template: template.blade.php

• Style it with a new file called _style.scss, add this entry to resources/css/main.scss

• Make it dynamic with script.js

• Create a datasets folder and place a default.json file

Create a template

• Create a template file under templates, for example: homepage.blade.php

Combine components inside templates

• Create a folder under public for your route, example: homepage
• Create a .json file called homepage.json inside that folder

name will be the internal name of the component componentName is the component's directory name in the filesystem dataSet is the loadding model

You can load a component more that once, just give it a different name

The JSON should follow this Schema:

See results

• Run gulp
• Go to your webserver http://www.your.host/homepage/homepage

Features

• Compile Sass on the fly

Add any entry to resources/css/main.scss and let PHP compile and minify it for you. Create a main.scss.lock to bypass this.

In order to boost your sass compiling performance please refer to: sassphp.

• Compile JS on the fly

All your components' JS and the list located at config/javascripts.json will be compiled under a unique main.js file. Create a main.js.lock to bypass this.

• Icon support

Save your SVG icons under resources/svg and they will be parsed by the icons factory. Include them using @include inline-svg($icon-name) in any scss file.

• All your common resources in one folder

Place audio, video, css, fonts, images, js, svgs in the resources folder, with gulp everything will be smartly copied in public

• Blade Support

The whole template engine is powered by Blade The components also use that engine to work

• Native responsive images support

add the following code to the blade template: @responsiveImage(['image' => $component->image, 'component' => 'componentName', 'attributes' => 'class="" alt="'.$component->articleTitle.'"']) the system will insert a tag with the image path, and create the appropriate srcset attribute according to the component's configuration. Responsive images can be created with the build-images Gulp task, based on a source image in the resoursces/images/scalable/componentName directory.

HCE Microframework Static Output

Usage

Compile the whole project as static output

php static-output.php and gulp;

cd static

Install the http-server (provided by node)

npm install http-server -g

Run the server

http-server

Open your browser@ localhost:8080