grommet



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

Download Sketch Sticker Sheet

Axure Stencils

En el Axure Stencil encontrarás empaquetados todos los elementos de ese estilo. Podrás arrastrarlos y pegarlos en tus prototipos.

Download Axure Stencils

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 .

Download Balsamiq Assets

¿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:

raw

<!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