npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

@x3r5e/global-web-styles

v0.2.3

Published

Global Web Styles

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

dlevydlevy

Keywords

Readme

Global Web Styles

NPM npm (scoped) Libraries.io dependency status for latest release, scoped npm package npm

Global web styles are degined to be the foundation of all CSS styles across a website or web application. The styles are opinionated, but are also minimal by design. In this particular package, the only opinions are:

  1. The Font: Roboto
  2. Box Sizing: border-box

These global styles are written in a such a way that they can be overridden at any time, for any HTML element(s).

Installation

Installation is easy; simply install the npm package in your project:

npm install --save @x3r5e/design-tokens

Usage

This package contains just one CSS file. There are a variety of ways to import CSS files into your website or web app. Below are just a few options.

Use the HTML <link> Element

The HTML External Resource Link Element (<link>) is the easiest way to pull in a CSS file. In your index.html file, add the following <link> inside of your <head> element:

<link
    rel="stylesheet"
    href="./relative-path-to-node_modules/@x3r5e/global-web-styles/dist/index.css"
/>

Use CSS Modules

If you want to import the CSS file into a JavaScript file using CSS Modules, add the following import statement:

import "@x3r5e/global-web-styles";

The CSS file is the main export of the package, so the above import statement is similar to importing a CSS file such as:

import "index.css";

As a reminder, CSS Modules is not a part of JavaScript. This means that you will need to use a bundler such as Webpack, and potentially plugin(s) that understand CSS Modules as well.

FAQ

Does the @x3r5e/react-components package come with @x3r5e/global-web-styles by default?

No, @x3r5e/react-components does not come with @x3r5e/global-web-styles by default. In theory, you could choose to create your own global styles instead of using this opinionated package. If you choose to go this route, we insist that you at least use box-sizing: border-box for all of your elements. If you don't use border-box, the React components might render in unexpected ways that lead to layout issues on your page. The main reason to not use this package is if you want to use your own font(s). Because this package imports font(s) by default, you would end up downloading multiple sets of fonts and some font(s) might never get used. Downloading assets that are never used is poor practice. We chose to include a font as part of this package because the font works well stylistically with the component styles. If you decide to use your own font, or otherwise decide not to use this package, be sure to take a look at the index.css file in the dist directory of this package to make sure that you include important global styles such as box-sizing: border-box.

Contributing

We are not currently accepting contributions to this repository.