quarkGUI

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: npm install quark-gui

• Install with yarn: yarn add quark-gui

• Install with Bower: 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
  • Button
  • Toggle button
• Form elements
  • Checkbox
  • Input field
  • Radio button
  • Select list
• Media
  • Image
• Sections
  • Grid item

Molecules

• Buttons
  • Button row
• Form elements
  • Checkbox
  • Date picker
  • Input field
  • Radio button
  • Select list
• Lists
  • Dragable list
  • List item
• Menus
  • Action bar menu
• Messaging
  • Modal
• Navigation
  • Breadcrumbs
  • List navigation
  • Primary navigation
  • Sidebar navigation
• Sections
  • Grid

Organisms

• Cards
  • Card
• Global
  • Footer
  • Header
  • Sidebar
• Lists
  • List
• Menus
  • Action bar