• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

ipfs-shipyard/ipfs-css: The single-purpose css class names and font-face config ...

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称:

ipfs-shipyard/ipfs-css

开源软件地址:

https://github.com/ipfs-shipyard/ipfs-css

开源编程语言:

HTML 56.9%

开源软件介绍:

ipfs-css

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

/* ---- font ----- */
.sans-serif { font-family: 'Inter', 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 and SCSS files and the web-fonts are available from your node_modules/ipfs-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 '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 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 ipfs.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://gateway.ipfs.io/ipfs/QmQYzfzGKAeBWgarrmTSsG2PJ8AFfFEBprhVBFaudcFTof

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
QmQYzfzGKAeBWgarrmTSsG2PJ8AFfFEBprhVBFaudcFTof

Pin the CID to ipfs-cluster (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 release.

# 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

Contribute

Contributions are more than welcome! Check out the currently open issues and start hacking on anything that sounds interesting. Issues are labeled with a variety of tags to help you find a good fit — you may wish to start with the help-wanted tag.

To contribute to IPFS in general, check out the wide variety of opportunities here.

The IPFS community believes that our mission is best served in an environment that is friendly, safe, and accepting, and free from intimidation or harassment. To that end, we ask that everyone involved in IPFS read and respect our code of conduct.

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 font family © The Inter Project Authors ([email protected]) 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.




鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
decentraland/editor-legacy: 发布时间:2022-06-22
下一篇:
ipfs/go-ipfs-routing: go-ipfs-routing provides go-libp2p-routing implementations ...发布时间:2022-06-22
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap