@nib-components/prototype v1.1.0
@nib-components/prototype
A single script and style bundle for rapid prototyping. Includes react
, react-dom
and almost all our components.
Caution: NEVER use it in a real application!
Using it in production will add a lot of unnecessary bloat to your app and result in sub-optimal page-load times.
Usage
CodePen
Create a new CodePen from our template CodePen.
Roll-your-own
<html class="flexbox">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>nib Prototype</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800|Roboto:300,400,700"/>
</head>
<body>
<div id="app"/>
<script src="https://unpkg.com/@nib-components/prototype/dist/prototype.js"></script>
<script type="text/babel">
ReactDOM.render(
<Padding all={6}>
<Heading size={1}>Hello World!</Heading>
<Margin top={3}>
<PrimaryButton>Click me!</Button>
</Margin>
</Padding>,
document.getElementById('app')
);
</script>
</body>
</html>
Packages that have a single default export will be accessible on the
window
using their display name e.g.@nib-components/heading
will be accessible viawindow.Heading
(or justHeading
)Packages that do not have a single default export will be accessible on the
window
using their package name and will require a little extra effort to use with react e.g.@nib-components/table
will be accessible viawindow.table
(or justtable
and usable like:const {Table, Row, Cell} = table; <Table>...</Table>
Updating
When changes have been made to any of the components in the DLS, or a new component has been added to the DLS, this repo will require updating. To update this repo:
Install the latest versions of all the DLS components
npm-check -u
is a helpful utility for updating package versionsMake sure you save the updated versions in
package.json
Edit the version in
package.json
and increase the minor versionBumping the minor version also means resetting the patch version e.g.
0.2.3
to0.3.0
- Commit and push your changes
- Run
npm publish
- Update the template CodePen to use the most recently published version of this package from
unpkg.com
Settings > JavaScript
and update the version number in the URLUse the exact version number so existing CodePens will continue working regardless of recent breaking changes.
Change log
1.1.0
update
- bump all components to use monorepo components.
1.0.0
update
- remove css dependency and bump all components to use styled-components versions.
5 years ago
5 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago