Code Monkey home page Code Monkey logo

ngx-cbp-theme's Introduction

NGX CBP Theme: Tarkik Solutions Fork

Angular native artifacts for consuming CBP Theme for Angular 5/6/7/next applications.

Goals

  • Provides abstraction for CBP Theme so that other Angular CBP applications do not have to repeat this gap-bridging between CBP Theme and Angular Material.
  • Deliver styling from CBP Theme to other CBP Angular applications so that CBP Theme can evolve and styling changes are delivered with simple upgrade in most cases.
  • Provides for progression from Bootstrap to Material specifications as CBP Theme evolves. (This should cause shrinking of this library.)
  • No more jQuery ๐Ÿ˜

Target Applications

Library Development Goals and Guidelines

  • Consumption of this library should require minimal setup i.e. most complexity and difficulties must be fought and absorbed in here keeping angular-cli spirit.
  • Must inherit certain (see styles below) styles from US-CBP/cbp-theme
  • Must not mix any other UI libraries than Angular/Material
  • Expose SCSS artifacts.
  • Provide angular native components only when styling overriding is not an option OR consuming a material component requires more effort to comply with CBP Style Guide.
  • Provide angular native component ony when Angular/Material does not have equivalent component.
  • Styles
    • Styles should be prefixed with cbp and mat when overriding.
    • Markups should not use any other namespaces than the ones specified.
    • Must expose individual styles for further customization.

Quick Start

We have a Kitchen Sink Application Built in. When testing new components, you'll need to manually add the required component, module, html/scss files, as well as update the corresponding imports/exports/providers/declarations found in the demo.module.ts.

In a terminal:

  • make sure you have node v6.2.* and angular-cli installed
  • cd to your repo
  • Clone the repo: git clone [email protected]:tarkiksolutions/ngx-cbp-theme.git
  • npm install
  • ng build
  • Copy the scss in: scripts/copy-assets.js
  • Serve the the application: ng serve

To Publish

  • ensure that Kitchen Sink builds and runs with no issues/tests passing
  • contact tenji240 for publishing rights
  • in projects/ngx-cbp-theme/package.json, update the name of the package to be ngx-cpb-theme-alt and increment the version number
  • cd to root directory, and run the node scripts node scripts/copy-assets.js && node scripts/prepare-package.js
  • build the project ng build
  • cd into dist/ngx-cpb-theme
  • Check in package.json that the name is ngx-cbp-theme-alt and the version number has increased
  • npm publish
  • Note: in the future instructions will move to npm run ready for the build process. this runs linting, builds, unit tests, e2e etc. Need to fix the tests first

Contributing

To get started developing, see contributing readme here.

How to integrate the CBP Theme

To get started developing, see tutorial readme here.

License

Please refer to License.md

ngx-cbp-theme's People

Contributors

dave-r avatar tenji240 avatar yogeshgadge avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.