Skip to content

Latest commit

 

History

History
126 lines (80 loc) · 4.49 KB

README.md

File metadata and controls

126 lines (80 loc) · 4.49 KB
Raw

Undernet

CircleCI devDependencies Status dependencies Status npm version Code style Netlify Status

Undernet

A modular, configuration-first front-end framework. No strings.

What does Undernet include?

  • Style defaults for common page elements: buttons, form inputs, typography, and the like.
  • Flex grid for advanced layout options.
  • Interactive components powered by JavaScript.
  • Highly brandable and extendable.

The main site, https://undernet.io, is deployed using Netlify.

Install via npm or yarn

$ npm install -D undernet
$ yarn add -D undernet

Styles

See CSS documentation to setup a custom pipeline with Undernet's SCSS.

Components / JS

See JS documentation to learn how to setup and use Undernet's API for interactive components.

Currently available list of components:

Each require a specific HTML structure to allow for proper accessibility and interactivity for the user. Examples included in the links above.

Contribute

See CONTRIBUTING.md for more details on git flow and recommendations for pull requests/issues.

Fork and clone for development / contributing

First fork the project on Github. Then set up locally. Note that NPM is used for all scripts.

$ git clone git@github.com:USER_NAME/undernet.git
$ cd undernet/
$ npm run setup

The site is both a demo and marketing tool. It is built with my own webpack setup called Pulsar. It's basically just Webpack + React, so don't panic. :)

Run the dev server

$ npm run watch

Make a production build (mostly for sanity checks)

$ npm run build

Run Jest tests (for site + framework)

$ npm run test

Load tests on file save

$ npm run test:watch

Building the framework

The site itself is a demo of the framework, so you should be able to work on the framework source itself while the site runs in the background.

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 or an equivalent solution.

If you've already run npm run install, these commands should Just Work™.

$ npm run build:dist

The script processes the SCSS and JS, then compiles the output to the dist/ folder.

Rebuild assets on the fly

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

New releases

To make a release build for npm, run the following command, where the third keyword should be one of major, minor or patch:

$ npm version (major|minor|patch)

This will do a few things:

  1. Run the full test suite to ensure the library is stable.
  2. Increment the package by the version you specify, and tag it appropriately
  3. Run a custom node script to update appropriate files with the new version
  4. Build all package assets for publishing
  5. Create new content hashes to be used with cdn subresource integrity links in the docs
  6. Add all new build assets to the version commit and open a prompt for the release's commit message

The release commit is usually in this format: [Version X.X.X] This release does x, y, and z.

The commit will be ready to merge to master. After that, the repo can be published to npm. 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!