https://github.com/ncpa0/adwavecss

GTK/Adwaita inspired CSS framework for web.
https://github.com/ncpa0/adwavecss

Last synced: about 1 month ago
JSON representation

GTK/Adwaita inspired CSS framework for web.

• Host: GitHub
• URL: https://github.com/ncpa0/adwavecss
• Owner: ncpa0
• License: mit
• Created: 2023-08-14T10:34:17.000Z (over 1 year ago)
• Default Branch: master
• Last Pushed: 2024-09-04T15:46:10.000Z (4 months ago)
• Last Synced: 2024-11-08T19:52:46.511Z (2 months ago)
• Language: SCSS
• Size: 5.28 MB
• Stars: 9
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# ADWaveCSS

Adwaita/GTK inspired CSS for the web.

See [examples here](https://ncpa0.github.io/adwave-docs).

## Usage

CSS styles are located in the `dist/styles.css` file. If used with esbuild or webpack and css loader or something similar it can be imported like this from a JavaScript file:

```js

import "adwavecss/dist/styles.css";

```

## Components

See docs for all components [here](./docs/README.md).

### JavaScript class name bindings

```js

import ADWave from "adwavecss";

// Primary button

const button = document.createElement("button");

button.classList.add(ADWave.Button.button);

button.classList.add(ADWave.Button.primary);

// Switch

const switchElem = document.createElement("div");

const knob = document.createElement("div");

switchElem.classList.add(ADWave.Switch.switch);

knob.classList.add(ADWave.Switch.knob);

switchElem.appendChild(knob);

const toggleSwitch = () => {

  switchElem.classList.toggle(ADWave.Switch.active);

};

```