Skip to content

Latest commit

 

History

History
171 lines (116 loc) · 5.19 KB

README.md

File metadata and controls

171 lines (116 loc) · 5.19 KB
Raw

David UI Angular - 1.0.0

The right choice for fast and easy UI development using tailwind css

David UI Angular is a comprehensive Angular framework that leverages the power of Tailwind CSS to provide a rich set of UI components, making it easy to build stylish web applications.

david-ui-angular-thumb
Table of Contents

Installation

To get started with David UI Angular, simply install it via npm or yarn.

  npm install david-ui-angular

Getting Started

Follow these steps to integrate David UI Angular into your Angular project:

  1. Import the styles: In your project's styles.css or styles.scss, import David UI Angular's styles along with Tailwind CSS and you also need to import the @angular/cdk styles:
@import "<path-to-node_modules>/david-ui-angular/styles/_styles.scss";
@import "@angular/cdk/overlay-prebuilt.css";

OR You can add the link of style sheet in your angular.json style's list

"styles": [
              "src/styles.scss",
              "./node_modules/david-ui-angular/styles/_styles.scss"
            ],
  1. Import the david-ui-angular modules into your app.module.ts file
import { DUIButton } from "david-ui-angular";

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, DUIButton],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

then you can import and use the component in your html file like shown below.

<dui-button>Click Me</dui-button>
  1. After this you need to add below line into the content array of you tailwind.config.js file
"./node_modules/david-ui-angular/**/*.{html,ts,js,mjs}"

For detailed usage and documentation, please visit our official documentation.

Techs

DUI-Angular uses a number of open source libraries to work properly:

  • [Angular 16] - Angular Framework verion ^16.2.0!
  • [Tailwind Css] - Uses Tailwind Css v ^3.3.3 for styling UI.
  • [Bundle-Scss] - For bundling scss files

And of course david-ui-angular itself is open source library.

Contribution

You can contribute to the package by following the steps below:

  1. Fork the project
  2. Create your feature branch (git checkout -b feature/AmazingFeature)
  3. Commit your changes (git commit -m 'Add some AmazingFeature')
  4. Push to the branch (git push origin feature/AmazingFeature)
  5. Open a pull request
  6. Wait for the pull request to be reviewed
  7. Get your pull request merged
  8. Celebrate 🎉
  9. Repeat

DUI-Angular requires Node.js v18+ to run.

Install the dependencies and devDependencies and start the server.

npm i
ng serve

Build Library

npm run build-library

There are two applications inside project folder consumer and david-ui-angular as name indicate one is the consumer of the library to test the library and also contains the documentation, while the other is the library itself which has components and all.

Steps to deploy the documentation

Run this command in the root folder

ng build consumer

The output directory for the documentation will be 'dist/consumer'

License

This project is licensed under the MIT License. For more details, please see the LICENSE file.

Contact

If you have any questions about this project, please feel free to reach out to us at daviduiorg@gmail.com

Code scaffolding

Run ng generate component component-name --project david-ui-angular to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module --project david-ui-angular.

Note: Don't forget to add --project david-ui-angular or else it will be added to the default project in your angular.json file.

Build

Run ng build david-ui-angular to build the project. The build artifacts will be stored in the dist/ directory.

Publishing

After building your library with ng build david-ui-angular, go to the dist folder cd dist/david-ui-angular and run npm publish.

Running unit tests

Run ng test david-ui-angular to execute the unit tests via Karma.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.