This is a
playground to test code. It runs a full
Node.js environment and already has all of
npm’s 400,000 packages pre-installed, including
undernet with all
npm packages installed. Try it out:
This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.
A modular, configuration-first front-end framework. No strings.
What does Undernet provide?
The main site, https://undernet.io is run on Jekyll and hosted using Netlify.
$ npm install -D undernet
$ yarn add -D undernet
See Download documentation to learn how to include the framework in various pipelines, ranging from CDN to fine-tuned control with the NPM package or source code.
See CSS documentation to learn the patterns of Undernet's Sass and classes that power the core of the framework.
See JS documentation to learn about the JS API and its options, including components and utilities.
Currently available list of components:
Each component requires a specific HTML structure to allow for proper accessibility and interactivity for the user. Examples included in the links above.
In addition, there are focus trap and focus ring helpers to assist with accessible behavior for custom needs.
See CONTRIBUTING.md for details on git flow and recommendations for pull requests/issues.
To develop Undernet, it requires dependencies for the framework and the website, which is the demo itself. You'll need node, npm, and ruby. Make sure you have the version specified in
.ruby-version. I recommend installing with
rvm, or a combination of tools like
chruby (to manage versions) and
ruby-install (to install rubies).
$ git clone firstname.lastname@example.org:USER_NAME/undernet.git $ cd undernet/ $ gem install bundler $ npm run setup
The site is built with Jekyll. Example repos showcasing CDN, NPM + React, and raw source (Coming Soon™) will demonstrate how the framework can be used in various ways.
$ npm run watch
$ npm run watch:scripts
$ npm run build
$ npm run test
$ npm run test:watch
The framework source is built using babel, node-sass, and a few node scripts.
The build environment works in any unix environment where node and npm are available. If you're on Windows, that means you'll need WSL with node version 10.x or greater.
npm install if you haven't already. Then try building the lib and CSS dist:
$ npm run build:dist
If you're feeling brave, you can do a full release build to test that assets compile correctly into the
Make sure to run this with a clean tree state:
$ npm run build:dist:release
To continually reload fresh JS assets while running the site's dev server, run the below command in a separate terminal session.
$ npm run js:watch
To make a release build for npm, run the following command, where the third keyword should be one of
$ npm version (major|minor|patch)
This will do a few things:
The release commit should be in this format:
[Version X.X.X] This release does x, y, and z.
The state of the branch will be ready to push to
master and publish via
npm publish. I recommend using
npm publish --dry-run to confirm the output is what you expect. Then remove the flag and a new version is out in the world!