Natural Preference for Minification
Meet npm Pro: unlimited public & private packages + package-based permissions.Learn more »

ipfs-css

0.13.1 • Public • Published

ipfs-css

The single-purpose css class names and @font-face config to IPFS up your UI.

/* ---- font ----- */
.sans-serif { font-family: 'Inter UI'system-ui, sans-serif; }
.montserrat { font-family: 'Montserrat''Verdana'system-ui, sans-serif; }
.monospace { font-family: Consolas, monaco, monospace; }
 
/* ---- color ----- */
.navy { color: #0b3a53; }
.navy-muted { color: #244e66; }
.aqua { color: #69c4cd; }
.aqua-muted { color: #9ad4db; }
 
/* ...and (just a little) more! */

Pairs well with tachyons.

Install

Add ipfs-css to your project via npm

npm install ipfs-css

Usage

Once you've installed ipfs-css from npm, the css file and the web-fonts are available from your node_modules/ipfs-css directory.

If you are set up with a build process that let's you import css files directly from node_modules, then you can just add the following to your css file.

@import 'tachyons'/* Optional, jolly good tho */
@import 'ipfs-css';

The file includes font-face definitions and single purpose css class names that you can compose freely, to create your lovely UI.

<header class='pa2 bg-navy'>
  <h2 class='ma0 montserrat aqua'>
    OH HAI! It's so nice to see you again.
  </h2>
</header>

CSS in JS

You can import the theme.json file which can be used with a ThemeProvider component.

All the css atoms are generated from that, so you can be sure you're using the same values.

Less

ipfs.css is regular css file, so you can import it normally. Each declaration has a single-purpose so if you prefer to compose your rules outside the dom, you can safely use them as mixins:

.my-lovely-widget {
  .aqua;
  .bg-navy;
  .montserrat;
}

Icons

See: https://ipfs.io/ipfs/QmVrEsy8JjQAugWm48XvFopi9mEKgxcTXdFmEZ6VR2q6rx/

Colors

Releasing

First, clean and build the css and the docs.

# Clean then build your local workspace
$ npm run clean
$ npm run build

Next, with IPFS running locally, add the docs to IPFS, to get the new CID.

# Add the docs to IPFS to get the CID
$ npm run -s deploy:docs
Qma9198EYULiyHwVNVcwxenQqWmJgHNhXqRAGn11wg9c9g

Pin the CID to ipfs-cluster, either via #pinbot on IRC, or your preferred method. Update the README.md with the new docs link.

Then bump the version, push to github and publish to npm. If you are adding an icon, that's a minor release. Fixing an issue with an existing icon would be a patch. Changing any of the color values would be at least a minor. Changing the naming scheme for the css classes would be a major.

# use npm to bump the version and tag
$ npm version minor
 
# Push the changes back to the repo
$ git push origin master
$ git push --tags
 
# PUBLISH!
$ npm publish

License

The Monserrat font family © The Montserrat Project Authors (https://github.com/JulietaUla/Montserrat) is used under the SIL Open Font License, Version 1.1.

The Inter UI font family © The Inter UI Project Authors (me@rsms.me) is used under the SIL Open Font License, Version 1.1.

The home icon © Icons8 is under their Free License

All other documents and icons are CC-BY-SA 3.0 license © 2018 Protocol Labs Inc.

Code is under the MIT © 2018 Protocol Labs Inc.

Keywords

none

Install

npm i ipfs-css

DownloadsWeekly Downloads

177

Version

0.13.1

License

MIT

Unpacked Size

2.56 MB

Total Files

142

Last publish

Collaborators

  • avatar
  • avatar
  • avatar
  • avatar