https://github.com/adisreyaj/zigzag-ui

https://github.com/adisreyaj/zigzag-ui

Last synced: 3 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/adisreyaj/zigzag-ui
• Owner: adisreyaj
• Created: 2022-01-14T09:36:17.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2022-11-21T16:43:14.000Z (about 2 years ago)
• Last Synced: 2024-10-14T04:44:45.864Z (3 months ago)
• Language: TypeScript
• Size: 480 KB
• Stars: 4
• Watchers: 2
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Zigzag

## Getting Started

### 1. Submodule setup

```sh

git submodule add https://github.com/adisreyaj/zigzag.git

```

### 2. Install deps

Install peer dependencies manually

```sh

npm i @floating-ui/dom

npm install

```

### 3. Include styles

Include the style in the `angular.json` config.

```json

{

  "styles": [

    "zigzag/projects/zigzag/styles/components/index.scss"

  ]

}

```

### 4. Update Tailwind config

Update the tailwind config to also include code from zigzag.

Also add the colors used by the components.

```js

module.exports = {

  content: [

    ...

    'zigzag/**/*.{ts,html}', //<-- add this

  ],

  theme: {

    extend: {

      colors: {

        primary: 'var(--primary)',

        'primary-transparent-10': 'var(--primary-transparent-10)',

      },

    },

  },

  plugins: [require('@tailwindcss/line-clamp')],

};

```

### 5. Add CSS Variables

Add required CSS Variables to the `styles.scss` file.

```

:root {

  --primary: hsl(207, 82%, 42%);

  --primary-transparent-10: hsla(207, 82%, 42%, 10%);

}

```