https://github.com/dashed/system-ui

Fallbacks for the W3C CSS generic system-ui font-family.
https://github.com/dashed/system-ui

css css-in-js css3 font system-ui

Last synced: 28 days ago
JSON representation

Fallbacks for the W3C CSS generic system-ui font-family.

• Host: GitHub
• URL: https://github.com/dashed/system-ui
• Owner: dashed
• License: mit
• Created: 2017-10-28T14:58:56.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2019-05-13T14:06:09.000Z (about 7 years ago)
• Last Synced: 2025-03-06T18:50:21.170Z (about 1 year ago)
• Topics: css, css-in-js, css3, font, system-ui
• Language: JavaScript
• Homepage:
• Size: 9.77 KB
• Stars: 1
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

          
system-ui [![Build Status](https://travis-ci.org/dashed/system-ui.svg)](https://travis-ci.org/dashed/system-ui) [![npm version](https://img.shields.io/npm/v/system-ui.svg?style=flat)](https://www.npmjs.com/package/system-ui)

=========

[![Greenkeeper badge](https://badges.greenkeeper.io/dashed/system-ui.svg)](https://greenkeeper.io/)

> Fallbacks for the W3C CSS generic [`system-ui`](https://www.w3.org/TR/css-fonts-4/#system-ui-def) font-family.

>

> Adapted from: https://github.com/JLHwung/postcss-font-family-system-ui

## Install

```sh

$ yarn add system-ui

# npm v5+

$ npm install system-ui

# before npm v5

$ npm install --save system-ui

```

## Usage

```js

import system_ui from "system-ui";

import { injectGlobal } from "styled-components";

// system_ui == "system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue"

injectGlobal`

  body {

    font-family: ${system_ui}, sans-serif;

    font-size: 16px;

    color: #000;

  }

`;

```

Chores

======

- Build: `yarn build`

- Pretty: `yarn pretty`

License

=======

MIT.