hce/microframework

a lightweight framework designed for prototyping

Friday, November 10, 2017
by MarcoBoffo
Repository
5 Watchers
3 Stars
28 Installations

CSS
0 Dependents
0 Suggesters
1 Forks
0 Open issues
27 Versions
0 % Grown

The README.md

it.hce.microframework

a lightweight framework designed for prototyping, _(*1)

Install

php composer.phar create-project hce/microframework projectName

or, _(*2)

composer.phar create-project hce/microframework projectName

then, _(*3)

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, _(*4)
Create a component template: template.blade.php, _(*5)

<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')


</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, _(*6)

You can load a component more that once, just give it a different name, _(*7)

The JSON should follow this Schema:, _(*8)

{
  "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., _(*9)

In order to boost your sass compiling performance please refer to: sassphp., _(*10)

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., _(*11)

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., _(*12)

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, _(*13)

Blade Support

The whole template engine is powered by Blade The components also use that engine to work, _(*14)

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., _(*15)

HCE Microframework Static Output

Usage

Compile the whole project as static output, _(*16)

php static-output.php and gulp;, _(*17)

cd static, _(*18)

Install the http-server (provided by node), _(*19)

npm install http-server -g, _(*20)

Run the server, _(*21)

http-server, _(*22)

Open your browser@ localhost:8080, _(*23)

The Versions

10/11 2017

dev-master

9999999-dev

a lightweight framework designed for prototyping

project microframework

a lightweight framework designed for prototyping

hce/microframework

The README.md

it.hce.microframework

Install

Create a component

Create a template

Combine components inside templates

See results

Features

HCE Microframework Static Output

Usage

The Versions

dev-master

The Requires

by Marco Gatto Boffo

1.5.0

The Requires

by Marco Gatto Boffo

1.4.1

The Requires

by Marco Gatto Boffo

1.4.0

The Requires

by Marco Gatto Boffo

1.3.1

The Requires

by Marco Gatto Boffo

1.3.0

The Requires

by Marco Gatto Boffo

1.2.2

The Requires

by Marco Gatto Boffo

1.2.1

The Requires

by Marco Gatto Boffo

1.2.0

The Requires

by Marco Gatto Boffo

1.1.3

The Requires

by Marco Gatto Boffo

1.1.2

The Requires

by Marco Gatto Boffo

1.1.1

The Requires

by Marco Gatto Boffo

1.1.0.x-dev

The Requires

by Marco Gatto Boffo

0.1.x-dev

The Requires

by Marco Gatto Boffo

by Paolo Mioni

0.1.4

The Requires

by Marco Gatto Boffo

by Paolo Mioni

1.0.0

The Requires

by Marco Gatto Boffo

0.1.2

The Requires

by Marco Gatto Boffo

0.1.1

The Requires

by Marco Gatto Boffo

0.0.9

The Requires

by Marco Gatto Boffo

0.0.8

The Requires

by Marco Gatto Boffo

0.0.7

The Requires

by Marco Gatto Boffo

0.0.6