https://github.com/romgrk/web-toolkit

A web UI framework based on GTK's Adwaita theme
https://github.com/romgrk/web-toolkit

css gtk javascript react ui ui-design ui-kit

Last synced: 4 days ago
JSON representation

A web UI framework based on GTK's Adwaita theme

• Host: GitHub
• URL: https://github.com/romgrk/web-toolkit
• Owner: romgrk
• Created: 2020-12-27T05:52:13.000Z (almost 4 years ago)
• Default Branch: master
• Last Pushed: 2021-05-20T22:31:42.000Z (over 3 years ago)
• Last Synced: 2024-10-26T20:39:29.923Z (18 days ago)
• Topics: css, gtk, javascript, react, ui, ui-design, ui-kit
• Language: JavaScript
• Homepage: https://romgrk.github.io/web-toolkit/docs
• Size: 33.7 MB
• Stars: 210
• Watchers: 10
• Forks: 7
• Open Issues: 9
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


  web-toolkit





  A GTK inspired React UI framework



This is a web toolkit using GTK's default theme, Adwaita. The framework is currently

usable but is to be considered in **alpha** state, as a few parts are still raw and

the API is subject to change until the 1.0.0 release.



  Installation •

  Demo •

  📖 Docs •

  Help Wanted •

  License



## Why

There are quite a few alternatives, such as bootstrap, material-ui, semantic-ui or

ant-design. I've however found that most of them fail in one way or another to

satisfy what I'm looking for in a UI framework. Most important than anything, I

want something that looks stunning by default, while being functional.

## Showcase

![demo-1](https://raw.githubusercontent.com/romgrk/web-toolkit/master/static/demo-1.png)

![demo-2](https://raw.githubusercontent.com/romgrk/web-toolkit/master/static/demo-2.png)

![demo-3](https://raw.githubusercontent.com/romgrk/web-toolkit/master/static/demo-3.png)

![demo-4](https://raw.githubusercontent.com/romgrk/web-toolkit/master/static/demo-4.png)

## Installation

```

npm install web-toolkit

```

```javascript

import React from 'react'

import {

  Box,

  Button,

  Input,

  Paned,

} from 'web-toolkit'

import 'web-toolkit/lib/index.css'

function App() {

  return (

    


      

        

          I'm a sidebar

        

        

          

            

            Submit

          

        

      

    

  )

}


export default App

```

At the moment, the [source code](https://github.com/romgrk/web-toolkit/blob/master/packages/web-toolkit/src/demo/App.js)

for the [live demo](https://romgrk.github.io/web-toolkit/) is the best place to understand how to use the framework.

Some [documentation](https://romgrk.github.io/web-toolkit/docs) is also available

but is a work in progress and not complete yet.

## Help Wanted!

I need help to make this into a production-ready library.

Come help me! Checkout the open issues or [ask here](https://github.com/romgrk/web-toolkit/issues/2)

if you're unsure how you can help.

## Roadmap

All of the required components for a first usable version have been implemented. Some

more complex components are being implemented, and the documention still needs to be

completed. While the components are usable, most of them are missing accessibility

ARIA attributes and may need fine-tuning for keyboard usage.

## Contributions

To start coding, clone the project, go to `./packages/web-toolkit`, run `pnpm install`,

then run `pnpm start` to spawn the dev server. You need to have `sassc` installed.

**IMPORTANT**: This project uses [pnpm](https://pnpm.js.org/) for development.

## License

MIT