• This repository has been archived on 04/Sep/2020
  • Stars
    star
    120
  • Rank 285,442 (Top 6 %)
  • Language
    JavaScript
  • License
    Apache License 2.0
  • Created over 8 years ago
  • Updated over 4 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Example application using grommet

Grommet Example App: Ferret

Build Status Code Climate Dependency Status devDependency Status

Warning

grommet-ferret uses grommet version 1. The grommet team is no longer actively supporting version 1 of grommet. We recommend using version 2 instead.

Demo

Live demo of an example application using grommet and grommet-addons.

Login credentials:

Username - enter any string that looks like an email address

Password - enter any string (it is not used or stored anywhere)

How To

This app demonstrates an application using Grommet. We demonstrate UI routing and some important patterns like Login, Resource Management (including WebSocket connections), and Search.

This application must have back-end data to perform login operations and manage resources. By default, it provides mock backend data. The application can also be modified to point to a real backend server.

IMPORTANT: Be sure to run npm install and the remaining commands in the grommet-ferret folder.

To run this application, execute the following commands:

  1. Go to the grommet-ferret folder
    $ cd grommet-ferret
  1. Install NPM modules
    $ npm install
  1. Create the NPM distribution
    $ npm run build

    This step will create the **dist** folder with content ready to be deployed in NPM.
  1. Start Ferret in production mode
    $ npm run start

    This step will start a front-end dev server that provides mock backend data by default. 
  1. Start Ferret in development mode
    $ npm run start:dev

    This step will also start a front-end dev server that provides mock backend data by default.  
    Additionally, it also monitors the source code and restarts the server when any changes are 
    detected.

NOTE: - if prompted for Login Credentials in your development environment, see information in the Demo section above.

More Repositories

1

grommet

a react-based framework that provides accessibility, modularity, responsiveness, and theming in a tidy package
JavaScript
8,298
star
2

grommet-icons

Iconography for Grommet and React.js
JavaScript
328
star
3

grommet-starter-new-app

A tutorial to show how to use Grommet with create-react-app.
JavaScript
315
star
4

design-kit

Grommet Design Kit
295
star
5

jsx-to-string

Parse your React JSX component to string
JavaScript
121
star
6

grommet-design

Grommet design resources, including design sticker sheets, application templates, and icons.
109
star
7

grommet-starter-existing-app

A tutorial to show how to plug Grommet in an existing app.
JavaScript
82
star
8

grommet-standalone

Sample app using Grommet without the development stack.
JavaScript
78
star
9

hpe-design-system

HPE Design System
JavaScript
45
star
10

grommet-designer

JavaScript
36
star
11

grommet-site

Site for Grommet v2
JavaScript
32
star
12

grommet-docs

Website project for Grommet framework (http://grommet.io)
JavaScript
30
star
13

grommet-people-finder

People finder app that uses LDAP server to look for users, groups and locations.
JavaScript
30
star
14

grommet-cms

Grommet CMS - A content management system with world class UX
JavaScript
30
star
15

grommet-cli

Deprecated, use create-react-app for v2 instead. Command Line interface for grommet
JavaScript
28
star
16

html-jsx-loader

DEPRECATED: html loader module to convert HTML to JSX for webpack
JavaScript
26
star
17

react-desc

Add a schema to your React components based on React PropTypes
JavaScript
21
star
18

grommet-theme-hpe

Hewlett Packard Enterprise grommet theme
JavaScript
21
star
19

grommet-react-app

Integration of Grommet with create-react-app
JavaScript
20
star
20

grommet-addons

Higher order components and utilities based on core grommet components.
JavaScript
17
star
21

grommet-toolbox

[DEPRECATED] Developer Environment for Grommet applications
JavaScript
13
star
22

grommet-infographic

Grommet Infographic Template
JavaScript
12
star
23

grommet-cms-boilerplate

Grommet CMS Boilerplate
JavaScript
12
star
24

grommet-vending

JavaScript
12
star
25

grommet-theme-designer

JavaScript
11
star
26

github-org-stats

Gather statistics for your github organization
JavaScript
11
star
27

micro-frontend

A proof of concept for using React + Grommet in a micro frontend architecture.
JavaScript
11
star
28

nextjs-boilerplate

A boilerplate for using Next.js Framework, React library and the Grommet Component Library.
JavaScript
10
star
29

grommet-index

UI and example server for searching, filtering, and displaying mass quantities of items.
JavaScript
10
star
30

grommet-sample

Sample app of migrating Grommet v1 to v2
JavaScript
8
star
31

react-formify

[DEPRECATED] An uncontrolled react Form component with validation capabilities.
JavaScript
8
star
32

grommet-drone-ui

Grommet UI for Drone CI
JavaScript
7
star
33

grommet-swagger

Swagger API browser built using grommet
JavaScript
7
star
34

grommet-sub-page

Grommet Sub Page Template
JavaScript
6
star
35

grommet-cms-content-blocks

Content blocks for the grommet-cms
JavaScript
5
star
36

grommet-icons-site

Website for grommet-icons library
JavaScript
5
star
37

grommet-sandbox

Grommet component samples for use with CodeSandbox
JavaScript
5
star
38

grommet-templates

Higher order abstraction composite components built from Grommet core components.
JavaScript
5
star
39

grommet-todo

Todo application created on top of Grommet framework
JavaScript
5
star
40

grommet-vertical-narrative

Grommet Vertical Narrative Infographic Template
JavaScript
5
star
41

babel-plugin-grommet

Babel plugin to transform member style imports into default imports
JavaScript
4
star
42

grommet-primary-page

Grommet Primary Page Template
JavaScript
4
star
43

v2-launch-slides

Grommet version 2 launch party slides
TypeScript
4
star
44

grommet-tabular

An exploration of interacting with data in different ways.
JavaScript
4
star
45

grommet-tv

A TV interface prototype built with grommet
JavaScript
4
star
46

next-sample

Sample app using Grommet 2.0
JavaScript
4
star
47

grommet-v1

A mapping of v1 component signatures to v2 implementations
JavaScript
4
star
48

grommet-presentation

A library with a set of components to make presentations on top of Grommet UX framework
JavaScript
4
star
49

grommet-slides

Grommet based slide viewer.
TypeScript
3
star
50

grommet-blog

An oddly simple blog implementation
JavaScript
3
star
51

grommet-details-page

Grommet Details Page Template
JavaScript
3
star
52

image-library

Sample App used for training
PostScript
2
star
53

csun2016

Presentation for CSUN 2016
JavaScript
2
star
54

slide

JavaScript
2
star
55

grommet-bower

Bower distribution of Grommet
JavaScript
2
star
56

grommet-styles

Independent styles for Grommet apps
JavaScript
2
star
57

grommet-tools

A website for Grommet No-Code tools
JavaScript
2
star
58

grommet-publisher

build documentation
JavaScript
2
star
59

grommet-interns-onboard

A hub to onboard the interns of 2021
JavaScript
2
star
60

grommet-simple

Minimalist project without the entire dev stack
JavaScript
2
star
61

grommet-theme-hp

HP Inc. grommet theme
JavaScript
2
star
62

grommet-theme-dxc

DXC Technologies grommet theme
JavaScript
1
star
63

grommet-leaflet

Example of using leafletjs.org maps with react and grommet
JavaScript
1
star
64

grommet-chat

JavaScript
1
star
65

grommet-exp

TypeScript
1
star
66

grommet-ldap-server

A node-only ldap server for Grommet people finder
JavaScript
1
star
67

grommet-vagrant

A vagrant box to make developing with grommet easier.
Shell
1
star
68

grommet-images

JavaScript
1
star
69

grommet-exp-vite

TypeScript
1
star
70

hpe-design-tokens

CSS
1
star
71

grommet-theme-nineties

1990s theme
JavaScript
1
star
72

grommet-email

Produce grommet styled HTML for use in email contexts.
JavaScript
1
star
73

grommet-passport

A Grommet based login utility for HPE Passport.
JavaScript
1
star
74

grommet-exp-theme

TypeScript
1
star
75

grommet-stats-site

DataViz showcase for grommet-org-stats
JavaScript
1
star
76

grommet-weather

Simple weather app using Grommet.
JavaScript
1
star