• Stars
    star
    295
  • Rank 135,587 (Top 3 %)
  • Language
  • Created over 5 years ago
  • Updated almost 5 years ago

Reviews

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

Repository Details

Grommet Design Kit

alt text

Grommet Design Kit

The Grommet Design Kit provides a set of sticker sheets and templates to help bootstrap your design process.


alt text

Grommet

The Grommet Design Kit is designed to work specifically with grommet.io, Grommet is a react-based framework that provides accessibility, modularity, responsiveness, and theming in a tidy package. It's also the de-facto UI framework HPE uses to build apps and websites. All of our component design files works especially well when paired with grommet! Go check it out and tell your devs!

To learn more, visit grommet.io


alt text

Sketch (Mac only)

There are two ways to use the Sketch Component Library; One, by manually downloading the Sketch file that contains the entire symbol library (best for folks that want to enhance the design and contribute ideas to the grommet theme) or, Two, add the Sketch Library (read-only) version that automagically updates from the Cloud! The later, being better for folks that just want to use the standard elements and ensure they're always up to date.

Download the Sketch Component Library

Click the link to add to you your Sketch app, Sketch Component Library

If you don't see this window, goto the Menubar and navigate to, Sketch/ Preferences.../ Libraries or use shortcut command + , and add it manually with the + button. (see below) alt text


alt text

Adobe XD

Adobe XD is a great alternative to Sketch (Mac only) for users looking for design and prototyping in the Adobe and Microsoft ecosystems.

Download the XD Components


alt text

Framer X

The closet we have to parity between the designer and developer. Framer X takes Sketch libraries to the next level by not only having design components but coded components in the same design tool, providing the closest fidelity to the running app.

Download the Framer X Components


alt text

Figma

For teams that want a web based solution, Figma is a great alternative as it can be run in any modern browser and it has a bunch of cool features to check out. From asset creation to comments on the designs, its a great way to work collaboratively with the components...

Open the file on Figma

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

jsx-to-string

Parse your React JSX component to string
JavaScript
121
star
5

grommet-ferret

Example application using grommet
JavaScript
120
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