Skip to content

Instantly share code, notes, and snippets.

@tzkmx

tzkmx/grommet_hello_world.html

Forked from grommetux/grommet_hello_world.html
Created May 31, 2016 23:05
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tzkmx/2a9f33cfe82f99bdc815c9355e1c556e to your computer and use it in GitHub Desktop.
Save tzkmx/2a9f33cfe82f99bdc815c9355e1c556e to your computer and use it in GitHub Desktop.
Download ZIP
Grommet Hello World app
Raw
grommet_hello_world.html
<!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/latest/css/grommet.min.css' rel='stylesheet' type='text/css'>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.2/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script src="http://grommet.io/assets/latest/grommet.min.js"></script>
</head>
<body>
<div id="content"></div>
<script type="text/babel">
var HelloWorldDashboard = React.createClass({
render: function () {
return (
<Grommet.Tiles fill={true}>
<Grommet.Tile align="start">
<p>Hello from a Grommet page!</p>
<p>Now, come back to the <a href="http://grommet.io/docs/documentation#understanding-grommet">Hello World</a> guide to continue your Grommet exploration.</p>
</Grommet.Tile>
</Grommet.Tiles>
);
}
});
var App = React.createClass({
render: function() {
return (
<Grommet.App>
<Grommet.Header direction="row" justify="between" large={true} pad={{horizontal: 'medium'}}>
<Grommet.Title>Hello World</Grommet.Title>
</Grommet.Header>
<Grommet.Section pad={{horizontal: 'medium'}}>
<HelloWorldDashboard />
</Grommet.Section>
</Grommet.App>
);
}
});
var element = document.getElementById('content');
ReactDOM.render(React.createElement(App), element);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment