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 🙏

© 2024 – Pkg Stats / Ryan Hefner

yue.css

v0.4.0

Published

Readable content stylish.

Downloads

8

Readme

yue.css

yue.css is a typography stylesheet for readable content. It was created for my blog at first since I always designed a new theme for my blog. But later it becomes the offical stylesheet for yuehu site.

yue.css is not a reset stylesheet.

It is designed for article content, and only article content. If you are looking for a reset css, you are watching the wrong repository.

Installation

Install with npm:

$ npm install yue.css

However, if you don't fancy npm, you can just grab the css file from GitHub. There is no dependency of this project.

API

For readable content, wrapper them under the .yue class, and everything would be ok now:

<div class="yue">
    <h1>Heading</h1>
    <p>Paragraph of contents...</p>
</div>

Tags

yue.css only supports selected tags which are commonly used in an article.

Tag Name | Description ---------- | ----------------------------- h1 - h6 | headings for title p | paragraph a | anchor links strong b | emphasis in bold style em i | emphasis in italic style img | image figure | figure wrapper for images figcaption | figcaption in figure hr | separator blockquote | style for quotes ul ol li | ordered and unordered list pre | code block code tt | inline code table .. | tables (not well designed) iframe | embed iframe style

Headings

Headings are tags <h1>, <h2>, <h3>, <h4>, <h5> and <h6>. But the most commonly used tags are <h1>, <h2>, and <h3>.

Emphasis

Emphasis works on something important or valuable. <b> and <i> are not designed for this purpose, you should always use <strong> and <em>.

Links & Images

Links are the soul of internet. Fork it on GitHub.

art of human body

Images can be wrappered in a <figure> tag:

art of human body

List

There is ordered list <ol> and unordered list <ul>.

  • Unordered list is tagged in <ul>
  • Another item of unordered list
    1. An ordered list in un ordered list
    2. Another ordered item
  • Unordered list can has unordered list children
    • Item of the children
    • Another item of the children

  1. Ordered list is tagged in <ol>
  2. Each item is tagged in <li>

Note

yue.css has no target language, however it looks great in both English and Chinese.

yue.css 并不是为某一特定语言设计的,但是它确实在英文和中文上表现出色。

License

MIT.