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
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";