npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2025 – Pkg Stats / Ryan Hefner

jvase

v1.0.4

Published

Jvase is a CSS framework. only CSS!

Downloads

8

Readme

Jvase


当前版本:v1.0.3


当我们面对一个web项目时,往往会涉及到许多CSS文件,而书写CSS本来是一种简单、重复、无聊的工作,Jvase 就是为了解决这些问题、提交工作效率而生的。

Jvase遵循渐进式的设计原则,比如一个按钮,默认是没有圆角的,如果要实现圆角效果,只需要添加.use-radius类便可实现。

如果要实现其它效果呢? 同样添加相应的类即可!

<p>
    <button class="btn">Button</button>
    <code>.btn</code>
</p>
<p>
    <button class="btn use-radius">Button</button>
    <code>.btn .use-radius</code>
</p>
<p>
    <button class="btn use-radius use-info">Button</button>
    <code>.btn .use-radius .use-info</code>
</p>
<p>
    <button class="btn use-radius use-info use-invert">Button</button>
    <code>.btn .use-radius .use-info .use-invert</code>
</p>

修饰语法

Jvase中有大量的修饰语法,这些语法的规则都是统一的 .use-*,这些语法涉及到颜色、尺寸、形状等各方面。

不同颜色:
<hr>
<p>
    <button class="btn use-radius use-info use-invert"">Button</button>
    <code>.use-info</code>
</p>
<p>
    <button class="btn use-radius use-success use-invert"">Button</button>
    <code>.use-success</code>
</p>
<p>
    <button class="btn use-radius use-warn use-invert"">Button</button>
    <code>.use-warn</code>
</p>
<p>
    <button class="btn use-radius use-danger use-invert"">Button</button>
    <code>.use-danger</code>
</p>


<hr>
不同尺寸:
<hr>
<p>
    <button class="btn use-small">Button</button>
    <code>.use-small</code>
</p>
<p>
    <button class="btn">Button</button>
    <code>.btn</code>
</p>
<p>
    <button class="btn use-medium">Button</button>
    <code>.use-medium</code>
</p>
<p>
    <button class="btn use-large">Button</button>
    <code>.use-large</code>
</p>

浏览器兼容性

尽可能兼容所有现在浏览器,使其显示结果保持一致。

|IE |Edge |Chrome |Firfox |Safari |Opera | |-------|-------|-------|-------|-------|-------| |9+ |12+ |13+ |16+ |8+ |29+ |

Issue

你可以在Github Issue 上提交Bug或者讨论问题

捐赠


Wechat      Alipay