Flora

material design framework

Learn flora : https://github.com/AzerothA/Flora/wiki

Build

npm run build

Install

npm install flora-web

TODO list

• [x] Easy to use components
• [x] Flora Routers
• [ ] Virtual dom
• [ ] Easy to use Events
• [ ] Dark theme

Build flora project

For build flora projects use Webpack OR flora-cli

https://webpack.js.org/

Build with flora-cli

flora build

Create flora project with flora-cli

flora new myApp

Install required packages

flora sync

Example javascript code

import { Component, render } from "flora-web";

class Main extends Component {
    constructor(props) {
        super(props);
        this.data = {
            hello: "Hello World",
        };
    }
    onComponentMount() {
        this.data = {
            hello: "OKOK",
        };
        globalStyle("*", {
            margin: "0",
            padding: "0",
        });
    }
    html() {
        return `
            <h1>Hello World</h1>
        `;
    }
}

const main = new Main();
render(main, document.querySelector("body"));

Use component

import Comp from "./Comp";
class App extends Component {
    constructor(props) {
        super(props);
    }
    html() {
        // This function must be return a string example `<div></div>`
        return `
            ${new Comp({
                content: "Html element OR Component",
                style: { background: "red" },
            }).html()}
        `;
    }
}

Flora standard components

import all FSC from components module

import { Button, Header } from "flora-web";