por 
HP aporta esta herramienta Open Source, que es un framework preparado especialmente para desarrollar aplicaciones orientadas a una buena experiencia del usuario para empresas y que puede descargarse desde Github.
Para comenzar a utilizarlo, encontrás una guía con elementos de estilo, cada uno en un paquete distinto. Dentro de cada uno, contendrá ese núcleo de elementos que podrás utilizar en tus apps, checkboxes, botones, status icons y mucho mas.
Adobe Illustrator Sticker Sheet
En el archivo Adobe Illustrator encontrarás empaquetados todos los elementos diseñados por Adobe.
Download Adobe Illustrator Sticker Sheet
Sketch Sticker Sheet
En el archivo Sketch encontrarás empaquetados todos los elementos diseñados por Sketch
Axure Stencils
En el Axure Stencil encontrarás empaquetados todos los elementos de ese estilo. Podrás arrastrarlos y pegarlos en tus prototipos.
Balsamiq Assets
En la Balsamiq assets encontrarás empaquetados todos los elementos de ese estilo. Podrás arrastrarlos y pegarlos en tus mockups desde tu librería Balsamiq asset .
¿Cómo sería hacer la aplicación Hola Mundo?
La manera más fácil de comenzar a utlizar el framework, es escribir la app básica llamada Hola Mundo, utilizando solamente HTML. Utilizaremos también Javascript . Sólo deben abrir un archivo html nuevo y copiar y pegar:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:400italic,400,700" rel="stylesheet" type="text/css">
<link href="http://grommet.io/assets/0.2.2/css/grommet.min.css" rel="stylesheet" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/JSXTransformer.js"></script>
<script src="http://grommet.io/assets/0.2.2/grommet.min.js"></script>
</head>
<body>
<div id="content"></div>
<script type="text/jsx">
var HelloWorldDashboard = React.createClass({
render: function () {
return (
<Grommet.Section>
<p>Hello from a Grommet page!</p>
<p>Now, come back to the <a href="http://grommet.io/docs/hpe/documentation#understanding-grommet">Hello World</a> guide to continue your Grommet exploration.</p>
</Grommet.Section>
);
}
});
var App = React.createClass({
render: function() {
return (
<Grommet.App>
<Grommet.Header primary={true}>
<Grommet.Title>Hello World</Grommet.Title>
</Grommet.Header>
<HelloWorldDashboard />
</Grommet.App>
);
}
});
var element = document.getElementById("content");
React.render(React.createElement(App), element);
</script>
</body>
</html>
Enlace | Gromment.io
