openbazaar-css v0.11.0
openbazaar-css
The single-purpose css class names and @font-face config to OpenBazaar 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 openbazaar-css
to your project via npm
npm install openbazaar-css
Usage
Once you've installed openbazaar-css from npm, the css file and the web-fonts are available from your node_modules/openbazaar-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 'openbazaar-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
openbazaar.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/QmTiZFUkqh1taZfhxam5YyG51b4gVoym5948bnCvSnoerk/
Colors
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.
5 years ago