Kaligraphi
Agnostic Graphic Library based on angular CDK.
Online Demo with last build available here : https://kalidea.github.io/kaligraphi/
How To Use
Installation
- install package and dependencies
npm i @kalidea/kaligraphi lodash-es luxon @angular/cdk
- add main module to your app.module.ts :
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { KaligraphiModule } from '@kalidea/kaligraphi'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, BrowserAnimationsModule, KaligraphiModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
- add library styles :
- with library compiled stylesheet :
@import '~@kalidea/kaligraphi/styles/styles.css'
- with library mixin in sass/scss :
@import ~@kalidea/kaligraphi/styles/parameters @import ~@kalidea/kaligraphi/styles/kaligraphi +kaligraphi($kal-parameters)
- with library compiled stylesheet :
Customization
- override default sass $parameters :
@import ~@kalidea/kaligraphi/styles/parameters @import ~@kalidea/kaligraphi/styles/kaligraphi $parameters: deep-map-merge($parameters, ( 'input': ('border' : ('radius': '5px' )))) +kaligraphi($parameters)
- use only some composants style
@import ~@kalidea/kaligraphi/styles/parameters @import ~@kalidea/kaligraphi/styles/kaligraphi +kal-input($parameters) +kal-select($parameters) +kal-checkbox($parameters) +kal-textarea($parameters)
Development
Code style
use typescript-code-style.xml file to provide consistency accross development
Playground
-
npm run serve:playground
for a dev server. Navigate tohttp://localhost:4200/
-
npm run build:playground
for a production build
Library
-
npm run build:lib
to build library -
npm run dev:lib
to build library with hot reload
Link
Kaligraphi
- ng build @kalidea/kaligraphi --watch
- npm run copy:styles
- cd dist/kalidea/kaligraphi
- npm link
Project
- npm link @kalidea/kaligraphi