https://github.com/quarkgui/quarkgui
:art: A webpack GUI framework based on atomic design
https://github.com/quarkgui/quarkgui
atomic framework front-end gui gui-template gui-toolkit js responsive sass typescript web webpack
Last synced: 11 months ago
JSON representation
:art: A webpack GUI framework based on atomic design
- Host: GitHub
- URL: https://github.com/quarkgui/quarkgui
- Owner: quarkGUI
- License: gpl-3.0
- Created: 2016-05-29T12:09:27.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2019-02-10T18:08:42.000Z (about 7 years ago)
- Last Synced: 2025-04-14T16:11:22.151Z (12 months ago)
- Topics: atomic, framework, front-end, gui, gui-template, gui-toolkit, js, responsive, sass, typescript, web, webpack
- Language: JavaScript
- Homepage: https://quarkGUI.github.io/
- Size: 7.88 MB
- Stars: 5
- Watchers: 1
- Forks: 0
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# quarkGUI
[](https://travis-ci.org/quarkGUI/quarkGUI)
[](https://badge.fury.io/js/quark-gui)
[](https://badge.fury.io/bo/quark-gui)
Webpack GUI framework based on atomic design
## Clone or install quarkGUI
### Clone:
- Clone the repository: `git clone https://github.com/quarkGUI/quarkGUI.git`
### Install:
- Install with [npm](https://www.npmjs.com): `npm install quark-gui`
- Install with [yarn](https://github.com/yarnpkg/yarn): `yarn add quark-gui`
- Install with [Bower](https://bower.io): `bower install quark-gui`
- After installation copy file with Sass variables: `cp -r node_modules/quark-gui/setup/** ./`
## Run with development environment
```
npm run dev
```
## Build for production
```
npm run build
```
## Modules
### Atoms
- Buttons
- [Action button](src/modules/00-atoms/buttons/action-button.md)
- [Button](src/modules/00-atoms/buttons/button.md)
- [Toggle button](src/modules/00-atoms/buttons/toggle-button.md)
- Form elements
- [Checkbox](src/modules/00-atoms/form-elements/checkbox.md)
- [Input field](src/modules/00-atoms/form-elements/input-field.md)
- [Radio button](src/modules/00-atoms/form-elements/radio-button.md)
- [Select list](src/modules/00-atoms/form-elements/select-list.md)
- Media
- [Image](src/modules/00-atoms/media/image.md)
- Sections
- [Grid item](src/modules/00-atoms/sections/grid-item.md)
### Molecules
- Buttons
- [Button row](src/modules/01-molecules/buttons/button-row.md)
- Form elements
- [Checkbox](src/modules/01-molecules/form-elements/checkbox.md)
- [Date picker](src/modules/01-molecules/form-elements/date-picker.md)
- [Input field](src/modules/01-molecules/form-elements/input-field.md)
- [Radio button](src/modules/01-molecules/form-elements/radio-button.md)
- [Select list](src/modules/01-molecules/form-elements/select-list.md)
- Lists
- [Dragable list](src/modules/01-molecules/lists/dragable-list.md)
- [List item](src/modules/01-molecules/lists/list-item.md)
- Menus
- [Action bar menu](src/modules/01-molecules/menus/action-bar-menu.md)
- Messaging
- [Modal](src/modules/01-molecules/messaging/modal.md)
- Navigation
- [Breadcrumbs](src/modules/01-molecules/navigation/breadcrumbs.md)
- [List navigation](src/modules/01-molecules/navigation/list-navigation.md)
- [Primary navigation](src/modules/01-molecules/navigation/primary-navigation.md)
- [Sidebar navigation](src/modules/01-molecules/navigation/sidebar-navigation.md)
- Sections
- [Grid](src/modules/01-molecules/sections/grid.md)
### Organisms
- Cards
- [Card](src/modules/02-organisms/cards/card.md)
- Global
- [Footer](src/modules/02-organisms/global/footer.md)
- [Header](src/modules/02-organisms/global/header.md)
- [Sidebar](src/modules/02-organisms/global/sidebar.md)
- Lists
- [List](src/modules/02-organisms/menus/list.md)
- Menus
- [Action bar](src/modules/02-organisms/menus/action-bar.md)