https://github.com/newdesignfile/foundations

A semantic, BEM-based UI framework.
https://github.com/newdesignfile/foundations

colors design design-system desktop effects foundations mobile spacings typography ui-design

Last synced: about 1 month ago
JSON representation

A semantic, BEM-based UI framework.

• Host: GitHub
• URL: https://github.com/newdesignfile/foundations
• Owner: NewDesignFile
• Created: 2023-02-05T14:19:48.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2024-08-08T10:02:35.000Z (5 months ago)
• Last Synced: 2024-11-19T07:46:53.566Z (about 2 months ago)
• Topics: colors, design, design-system, desktop, effects, foundations, mobile, spacings, typography, ui-design
• Language: SCSS
• Homepage: https://new-ui.com/docs/getting-started/installation
• Size: 131 KB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# New UI Foundations

## Install

Install New UI Foundations from your terminal via npm.

```

npm i @new-ui/foundations

```

To get started quickly, you can use the CDN files.

```html

```

## Usage

```scss

// Place this at the top of your SCSS/CSS file

@import "@new-ui/foundations";

```

## Usage Guide

- Tokens defined in the figma file matches variables declared in CSS

- All classes associated with the design system are prefixed with a global namespace followed by a hyphen: `nu-`

- In addition to a global namespace, we added prefixes to each class to make it more apparent what job that class is doing using BEM syntax

  * `c-` for UI components, such as `.nu-c-h1` or `.nu-c-card`

  * `l-` for layout-related styles, such as `.nu-l-grid__item` or `.nu-l--two-column`

  * `u-` for utilities, such as `.nu-u-mb-` or `.nu-u-margin-bottom-pt2`

  * `is-` and has- for specific states, such as `.nu-is-active` or `.nu-is-disabled`. These state-based classes - would apply to

  * `js-` for targeting JavaScript-specific functionality, such as `.js-modal-trigger`. No styles are bound to these classes; they’re reserved for behavior only. For most cases, these `js-` classes would toggle - state-based classes to an element.

## Guides

- [Get a Figma copy](https://www.figma.com/community/file/1325646289622213496/new-ui)

- [Read our getting started guide](https://new-ui.com/docs/getting-started/installation)