0.1.1 • Published 4 years ago

@nl-design-system/nl-design-system v0.1.1

Weekly downloads
-
License
UNLICENSED
Repository
gitlab
Last release
4 years ago

NL Design System component library

Prerequisites

  • Node 4.x or higher
  • NPM 3.x or higher, run npm install npm -g to update

Basic usage

NL Design System is a modular library. Which means you only include the components you need, this keeps your project lightweight and improves page loads. However, there are some files which each project must include:

  • A project must include dist/core/base.css and dist/core/grid.css.

The core contains the basic settings for typography, skiplinks, navigation, etc.

  • A project may include any component from the components folder

Components contain styling and scripts for page headers and footers, quotes, spinners, highlights, etc.

Components are structured by folders. When using a component, you must include all files from the component folder.

As an alternative, you can include dist/core/uno.css which is a concatenated version of all css (not recommended)

Development

Prerequisites

  • Node 4.x or higher
  • NPM 3.x or higher, run npm install npm -g to update
  • Grunt, run npm install -g grunt-cli

Install dependencies

Make sure you have node version 4.x or higher installed. On Windows download from phantomjs.org, put it in c:\JAVA\phantomjs and adding c:\JAVA\phantomjs\bin to PATH.

npm install
(cd _docs/ && npm install)

Examples

Run the following command to get an overview of the design system:

npm start

A browser will open and navigate to http://localhost:5000

Test

  • Run grunt test for all tests
  • Run grunt test:unittest for all unittests
  • Run grunt test:a11y for all accessibility tests
  • Run grunt test:visual for visual tests

Theme

  • Create a theme containing the required files and variables (see the example theme)
  • Place your theme in the themes folder
  • Run grunt theme --theme=<theme-name> to set your theme. replace <theme-name> with the name of your theme folder

Build

  • Run grunt build, generated code will be placed in ./dist

If you get an error that PhantomJS was not found (Windows, then follow these instructions

Release

New releases shall be created from the master branch.

  • Make sure all tests pass before merging, run grunt test
  • Merge the latest changes from develop using git merge develop
  • Run grunt release --bump=major|minor|patch. Default bump is patch Follow the Semantic versioning strategy
    • Alternatively, run grunt release --bump-to=##VERSION## to release to a specific version
  • Run grunt build
  • Run npm publish

Your updated package will be published to artifactory.

Structure

The project is divided in 2 parts, components and core. You must include the css files located in the core folder, you may include any css or javascript file located in the components folder.

Source layout

The source layout is the same as the build. The core folder follows the ITCSS folder structure, see this blogpost for more information.

  • components holds all components, each component can be included separately
  • core holds the core of UNO
    • generic contains generic css like font-face and a reset
    • elements provides basic styling on an element level, no classes here!
    • objects contains layout styling
    • components contains class-based styling only, overrides the basic elements only components which belong to the UNO core should be placed here, other components should be placed outside the core folder!
    • trumps overrides components, only for very specific styling
  • settings contains variables which can be used by both core and components
  • tools contains mixins which can be used by both core and components

The source folder also includes a settings and a tools folder. These folders contain variables and mixins which can be included and used in any core or component scss file.

Notes

  • All .scss files prefixed with a _ are included in other .scss files. These files will not be exported to the dist folder.
  • Components may not include files from the core folder.
  • Core files may not include files from the src/components folder.

Contributing

If you've found a bug or if you have a feature request, please create an issue on JIRA, or even better, create a merge request with a fix!

Commit message convention

When committing a new feature or a bugfix, please follow the commit convention in at least one of your commits:

<type>(<scope>): <subject>
<BLANK LINE>
<body>
<BLANK LINE>
<footer>

Any line of the commit message cannot be longer 100 characters! This allows the message to be easier to read on github as well as in various git tools.

A commit message consists of a header, a body and a footer, separated by a blank line.

Message header

The message header is a single line that contains a description of the change containing a type, an optional scope and a subject.

type

This describes the kind of change that this commit is providing.

  • feat (feature)
  • fix (bug fix)
  • docs (documentation)
  • style (formatting, missing semi colons, …)
  • refactor
  • test (when adding missing tests)
  • chore (maintain)

scope (optional)

Scope can be anything specifying place of the commit change.

subject

This is a very short description of the change.

  • use imperative, present tense: “change” not “changed” nor “changes”
  • don't capitalize first letter
  • no dot (.) at the end

Revert

If the commit reverts a previous commit, its header should begin with revert:, followed by the header of the reverted commit. In the body it should say: This reverts commit <hash>., where the hash is the SHA of the commit being reverted.

Message body

Explain motivation for the change and contrasts with previous behavior.

Message footer

Breaking changes

All breaking changes have to be mentioned as a breaking change block in the footer, which should start with the word BREAKING CHANGE: with a space or two newlines. The rest of the commit message is then the description of the change, justification and migration notes.

Example

fix(navigation): Main menu renders correctly on IE42

By updating the flux capacitor, the main menu renders correctly on the
currently supported browsers

BREAKING CHANGE: Update the flux capacitor to v 3.0.0

For more information check the following document: https://docs.google.com/document/d/1QrDFcIiPjSLDn3EL15IJygNPiHORgU1_OOAqWjiDU5Y/edit

systemjswhen
0.1.1

4 years ago

0.1.0

4 years ago