a lightweight framework designed for prototyping
php composer.phar create-project hce/microframework projectName
or
composer.phar create-project hce/microframework projectName
then
cd projectNamenpm install- Point your webserver to
projectName/publicfolder - Set
public/cssandpublic/jsas writable folders (create them if necessary) - Set
cacheas writable folder
-
Create a folder under
componentsnamed as you wish, for examplecomponent -
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 toresources/css/main.scss
.component {
color: red;
}- Make it dynamic with
script.js
App.Component = function () ...- Create a
datasetsfolder and place adefault.jsonfile
{
"text": "it.hce.microframework"
}- 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>- Create a folder under
publicfor your route, example:homepage - Create a
.jsonfile calledhomepage.jsoninside 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"
}
}
}
]
}
}
}- Run
gulp - Go to your webserver
http://www.your.host/homepage/homepage
- 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.
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