@helia/css

🍴 Forked from https://github.com/ipfs-shipyard/ipfs-css

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

Pairs well with tachyons.

Table of contents

• Install
• Usage
  • CSS in JS
  • Less
  • SCSS
• Icons
• Colors
• License
• Contribute

Install

Add @helia/css to your project via npm:

npm install @helia/css

Usage

Once you've installed @helia/css from npm, the CSS and SCSS files and the web-fonts are available from your node_modules/@helia/css directory.

If you are set up with a build process that lets 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 '@helia/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

helia.css is a 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;
}

SCSS

While helia.css contains everything you need, if you prefer variables for fonts, colors and gradients, these are there for you in theme.scss.

Icons

See: https://dweb.link/ipfs/bafybeiebays3i7aem7tptga3kilzux7f5gz6czl4dietazgutcjhozjviu

Colors

License

Licensed under either of

• Apache 2.0, (LICENSE-APACHE / http://www.apache.org/licenses/LICENSE-2.0)
• MIT (LICENSE-MIT / http://opensource.org/licenses/MIT)

Contribute

Contributions welcome! Please check out the issues.

Also see our contributing document for more information on how we work, and about contributing in general.

Please be aware that all interactions related to this repo are subject to the IPFS Code of Conduct.

Unless you explicitly state otherwise, any contribution intentionally submitted for inclusion in the work by you, as defined in the Apache-2.0 license, shall be dual licensed as above, without any additional terms or conditions.