https://github.com/codhek/voila
A simple and easy to grasp front-end framework that lets you modularise and stuff logic into your static HTML :sunglasses:
https://github.com/codhek/voila
cli custom-parser frontend-framework modular-framework npm-package
Last synced: 10 months ago
JSON representation
A simple and easy to grasp front-end framework that lets you modularise and stuff logic into your static HTML :sunglasses:
- Host: GitHub
- URL: https://github.com/codhek/voila
- Owner: CodHeK
- Created: 2019-01-25T18:45:04.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2019-02-11T06:41:33.000Z (almost 7 years ago)
- Last Synced: 2025-03-23T21:23:34.556Z (11 months ago)
- Topics: cli, custom-parser, frontend-framework, modular-framework, npm-package
- Language: JavaScript
- Homepage:
- Size: 109 KB
- Stars: 22
- Watchers: 1
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
 
[Link to the presentation](https://drive.google.com/file/d/1XnWTu-PowXnXtUk1_Bp1mdJavCoPA6zg/view?usp=sharing)
VoilaJS is a SAML ( Syntactically awesome markup language ) which boosts your static front-end development process by allowing you to write your HTML in the form of modules, very similar to React but, with a much less steeper learning curve! ( All you need to know is to write `JSON` and that's easy! :stuck_out_tongue:)
The best part is HTML just became programmable :stuck_out_tongue: !! But how ?
What we thought was, CSS has it's programmable counter-part ( SASS ) why not HTML ? Guess what, now it has one, we call it SAML ( full form above ).
Just like other front-end frameworks, we too have out our own CLI to bootstrap your starter code.
## Installation :
#
```
$ npm i -g voila-cmd
```
Next, we need to initialize a project, it's simple!
```
$ voila init
```
This generates a `voila.json` file in your project directory and also a `config.js` file where you write all your HTML logic, sound's weird saying that doesn't it! :stuck_out_tongue:
```
{
title: 'forms',
description: 'forms',
css: 'Bootstrap',
entry: 'index.html',
author: '',
License: 'ISC',
git: false,
config: 'config.js'
}
```
You can also add `git repository` to your project, voila automatically initializes a empty git repository with the needed files in `.gitignore`.
```
$ cd directory
```
```
exports.root = [
{
div: [
{
id: 'root',
//ADD YOUR ELEMENTS HERE
div: [
{
class: 'col-md-3'
}
],
h1: [
{
class: 'title1',
value: 'first h1'
},
{
class: 'title2',
value: 'second h1'
}
]
}
]
}
]
```
Above, is an example of a simple configuration, ( configurations need to be written in the `JSON` format ).
This `JSON` gets compiled to the `HTML` below:
```
first h1
second h1
```
Once, you've written your own `configuration`, voila needs to parse and compile it into `HTML`, to do that run...
```
$ voila load
```
We have built our own `parser` that parses the `JSON` configurations and converts them into it's equivalent `HTML` syntax.
This `HTML` is can be viewed by starting the `server`, just run ...
```
$ voila start
```
## Writing HTML in Component Style :
- config.js
```
const { main } = require('./components/main');
const { navbar } = require('./components/navbar');
let Main = main();
let Navbar = navbar();
exports.root = [
{
div: [
{
id: 'root',
//ADD YOUR ELEMENTS HERE
Navbar,
Main
}
]
}
]
```
- main.js
```
module.exports.main = () => {
return [
{
class: 'container',
div: [
{
class: 'starter-template',
h1: [
{
value: 'Bootstrap starter template'
}
],
p: [
{
class: 'lead',
value: 'Use this document as a way to quickly start any new project.
All you get is this text and a mostly barebones HTML document.'
}
]
}
]
}
]
}
```
- navbar.js
```
module.exports.navbar = () => {
return [
{
class: 'navbar navbar-expand-md navbar-dark bg-dark fixed-top',
a: [
{
class: 'navbar-brand',
value: 'Logo'
}
],
button: [
{
class: 'navbar-toggler',
type: 'button',
span: [
{
class: 'navbar-toggler-icon',
}
]
}
]
}
]
}
```
## Examples :
#
We have added 2 examples one for `Bootstrap` and other for `Materialize` :
```
$ git clone this repository / download zip
```
```
$ cd example
```
```
$ voila start
```
View your static webpage server on `http://localhost:(port)`