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 dependenciesnpm 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)

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 to http://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