NGX CSS - Library

About

NGX CSS Framework An angular abstraction for Squid CSS

Table of contents

• Example
• Usage
  • Install
  • Use Form Errors Variables
• Development
  • Write Documentation
  • Deploy to NPM
• Documentation

Exemple

See an exemple of all components here

Usage

Install

1. Install

1npm install @squidit/css @squidit/ngx-css --save

2. Add css and toast js files to your angular.json

1{
2  // ...,
3  "assets": [
4    // This object inside assets Array
5    {
6      "glob": "**/*",
7      "input": "./node_modules/@squidit/css/dist/fonts",
8      "output": "./assets/fonts" // Output fonts
9    },
10    "src/assets" // Default assets
11  ],
12  "styles": [
13    "src/styles.scss"
14  ],
15  "scripts": [
16    "node_modules/@squidit/css/src/js/components/toast.js" // JS includes
17  ]
18  // ...
19}

3. Add to your style.scss main file

1$fontsFolderPath: '/assets/fonts'; // Overwrite default font path
2@import '@squidit/css/src/scss/squid.scss'; // Import all Framework Styles

4. Import SquidCSSModule in your *.module.ts

1import { SquidCSSModule } from '@squidit/ngx-css'
2
3@NgModule({
4  // ...
5  imports: [
6    // ...
7    NgxSquidModule
8  ]
9  // ...
10})

Use form erros variables

To use the errors handled in form components, you need to follow the steps below

1. Install ngx-translate and follow the initial Setup

2. On you .json files from each language follow the same structure (need one for each supported language of your application):

1{
2  // ...
3  "forms": {
4    "search": "Search",
5    "searchSelectEmpty": "There are no options to select",
6    "fileSize": "File too large",
7    "required": "Required field",
8    "minimumRequired": "The minimum number of selected tags must be greater than or equal to {{ minTags }}",
9    "email": "Invalid email",
10    "url": "Invalid URL. Attention: URL must start with https://",
11    "date": "Invalid Date",
12    "phone": "Invalid phone number",
13    "minValueAllowed": "Min value allowed is: {{ min }}",
14    "maxValueAllowed": "Max value allowed is: {{ max }}",
15    "rangeDate:": "Date outside valid range"
16  }
17  // ...
18}

Development

1. Install npm dependences npm install

2. Run npm start to watch angular library (src directory)

3. In another window run start:application

This launches an angular pattern that is contained in the application folder. Just use the components inside it, and every change in the files in the src folder will be automatically reflected in the application.

Write Documentation

We use compodoc to write docs with jsDocs

Run start:docs and the compodoc will serve the docs. For each change it is necessary to run the command again

Deploy to NPM

Just draft a new release here on Github and an actions will starts

**Important to use the same tag as package.json

Documentation

See Docs here