🍴 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.
Add @helia/css
to your project via npm:
npm install @helia/css
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>
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.
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;
}
While helia.css
contains everything you need, if you prefer variables for fonts, colors and gradients, these are there for you in theme.scss
.
See: https://dweb.link/ipfs/bafybeiebays3i7aem7tptga3kilzux7f5gz6czl4dietazgutcjhozjviu
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)
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.