it.hce.microframework

a lightweight framework designed for prototyping

Install

php composer.phar create-project hce/microframework projectName

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

<div class="component">{{$component->text}}</div>

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

.component {
    color: red;
}

Make it dynamic with script.js

App.Component = function () ...

Create a datasets folder and place a default.json file

{
  "text": "it.hce.microframework"
}

Create a template

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

<!DOCTYPE html>
<html>
<head>
    <title>hce microframework</title>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
    <link rel="stylesheet" href="{{$GLOBAL->css}}">
    <link href='https://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>
</head>
<body class="home">

@include('components.logo.template')

<script src="{{$GLOBAL->js}}"></script>
</body>
</html>

Combine components inside templates

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

{
  "templateName": "homepage",
  "components": [
    {
      "name": "logo",
      "componentName": "logo",
      "dataSet": "default"
    },
    {
      "name": "subLogo",
      "componentName": "subLogo",
      "dataSet": "sub"
    }
  ]
}

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:

{
  "type": "object",
  "properties": {
    "templateName": {
      "type": "string",
      "default": "homepage",
      "required": true
    },
    "components": {
      "type": "array",
      "required": true,
      "items": [
        {
          "type": "object",
          "required": true,
          "properties": {
            "name": {
              "type": "string",
              "required": true
            },
            "componentName": {
              "type": "string",
              "required": true
            },
            "dataSet": {
              "type": "string",
              "required": true,
              "default": "default"
            }
          }
        }
      ]
    }
  }
}

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

HCESrl/it.hce.microframework