gran-style
GRAN-STYLE
Design System for JS, Angular, React e Vue!!!
VANILLA JAVASCRIPT
npm i gran-style
<head>
...
<script type="module" src="/node_modules/gran-style/dist/gran-style/gran-style.esm.js"></script>
<link rel="stylesheet" href="/node_modules/gran-style/dist/gran-style/gran-style.css">
...
</head>
<body>
<gs-app id="MY_APP">
<div slot="header">MY APP HEADER</div>
<div slot="menu">MY APP MENU</div>
<div slot="content">MY APP CONTENT</div>
</gs-app>
</body>
ANGULAR
npm i gran-style
main.ts
...
import { applyPolyfills, defineCustomElements } from 'gran-style/loader';
...
applyPolyfills().then(() => {
defineCustomElements(window);
});
app.module.ts
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
...
@NgModule({
...
schemas: [
CUSTOM_ELEMENTS_SCHEMA
],
})
...
app.component.html
<body>
<gs-app #app>
<div slot="header">MY APP HEADER</div>
<div slot="menu">MY APP MENU</div>
<div slot="content">MY APP CONTENT</div>
</gs-app>
</body>
REACT
npm i gran-style
VUE
npm i gran-style