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

@seemusic/styles

v0.0.2-rc.1

Published

看见音乐 CSS 公共库

Downloads

5

Readme

看见音乐 CSS 公共样式库

一般情况下,成体系的网站设计规范,大多会有 原子设计(Atomic Design) 的影子。

这个项目,专注于把看见音乐下各个子项目的设计规范,拆解成基础的 CSS 资源,方便项目引用。

典型场景

星球发行和看见音乐,共用公司主品牌蓝色 #0040FF,但是具体到页面、组件,不同时期的版本又有明显自定义区别。

每个项目中都独立设定一遍色值的话,会给维护带来很多困难,也很容易出错。

另外类似 Barlow Condensed 这样的字体实现,如果没有公共调用方式,则后来者去寻求字体实现方案会耗费大量时间。

边界

内涵(包含什么)

  • 最底层的色彩变量
  • 公共字体调用
  • 通用公共样式,如排版规范,包含文字颜色、字体、字号、行高等
  • 仅对上述内容进行 CSS 变量映射 后,提供给其他组件调用的公共配置样式文件,如 ElementPlus 的自带色彩覆盖

外延(不包含什么)

  • 业务组件样式,如页头、页脚。这些应该交由组件库实现(组件库可以引用这里的基础配置)
  • 复合组件样式,视作同业务组件
  • 页面级样式
  • 第三方组件/组件库的自定义样式,如 SwiperElementPlus,这些应该创建独立的子项目维护,并且需要有完整的预览

切分基本原则

一般情况下,组件/组件库之类,需要提供完整的样式预览,不会放在此项目内。

比如 ElementPlus 自定义皮肤,此项目中允许以 theme 的形式提供基础 变量配置文件,如

@import "../colors/seemusic.scss";

:root {
  --el-color-primary: var(--seemusic-primary);
  --el-text-color-regular: var(--seemusic-text-normal);

  --el-disabled-bg-color: var(--seemusic-bg-disabled);
  --el-disabled-border-color: var(--seemusic-border-disabled);
  --el-disabled-text-color: var(--seemusic-text-disabled);

  --el-color-danger: var(--seemusic-danger);
}

但是具体到某个组件(比如 ElButton)的样式覆写,必须放到独立的项目中,因为要提供 storybook 预览。