falcon-core

Falcon - An user interface design system for the web

An universal design system for web which supports multiple UI Frameworks like Angular, React, Vue etc. and vanilla html.

falcon-core consist of core atoms, set of components which are the building blocks for any web development.

Installation

// with npm
npm install @emtecinc/falcon-core

// with yarn
yarn add @emtecinc/falcon-core

Usage

Below are quick examples to get you started.

It shows how to use button falcon component in different frameworks.

More examples will be added later.

Note: All examples assume you have created the project with the respective stock cli. File name will differ if not the case, but usage will remain the same.

React

// App.js

import React from "react";
import "./App.css";
import "@emtecinc/falcon-core/lib/index.js";

function App() {
  return (
    <div className="App">
      <select-falcon value="Option 1">
        <option-falcon>Option 1</option-falcon>
        <option-falcon>Option 2</option-falcon>
      </select-falcon>
    </div>
  );
}

export default App;

// index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

Angular

// app.component.ts

import "@emtecinc/falcon-core/lib/index.js";

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  title = "angular-app";
}

// app.component.html

<button-falcon family="basic">Basic</button-falcon>
<button-falcon family="primary">PRIMARY</button-falcon>
<button-falcon family="secondary">SECONDARY</button-falcon>
<button-falcon family="success">SUCCESS</button-falcon>
<button-falcon family="info">INFO</button-falcon>
<button-falcon family="warning">WARNING</button-falcon>
<button-falcon family="basic" disabled>DISABLED</button-falcon>
<button-falcon family="danger">DANGER</button-falcon>

Vue

// main.js

import Vue from "vue";
import App from "./App.vue";
import "@emtecinc/falcon-core/lib/index.js";

Vue.config.productionTip = false;

new Vue({
  render: (h) => h(App),
}).$mount("#app");

// App.vue

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png" />
    <HelloWorld msg="Welcome to Your Vue.js App" />
  </div>
  <button-falcon family="basic">Basic</button-falcon>
  <button-falcon family="primary">PRIMARY</button-falcon>
  <button-falcon family="secondary">SECONDARY</button-falcon>
  <button-falcon family="success">SUCCESS</button-falcon>
  <button-falcon family="info">INFO</button-falcon>
  <button-falcon family="warning">WARNING</button-falcon>
  <button-falcon family="basic" disabled>DISABLED</button-falcon>
  <button-falcon family="danger">DANGER</button-falcon>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";

export default {
  name: "App",
  components: {
    HelloWorld,
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Examples

This is under construction. Link will be updated here soon.

Documentation

This is under construction. Link will be updated here soon.

License

This project is licensed under the terms of the GPL3 license.