83

0

PaperCSS

不太正式的 CSS 框架,具有快速简便的集成。

PaperCSS 徽标

PaperCSS

不太正式的 CSS 框架,具有快速简便的集成。

快速开始

有几个选项可用:

  • 您可以下载最新版本
  • 克隆回购:git clone https://github.com/papercss/papercss.git
  • 使用 npm 安装:npm install papercss
  • 用纱线安装:yarn add papercss
  • 使用 CDN 导入(它会自动下载最新版本):
    • https://unpkg.com/papercss/dist/paper.min.css
    • https://unpkg.com/papercss/dist/paper.css

Status

构建状态 依赖项 对等依赖 开发依赖

框架内容

我们提供编译后的 CSS ( paper.css) 以及缩小的 CSS ( paper.min.css)。

您可以选择可能要使用的组件。只有被导入的组件 src/styles.scss才会被编译成 dist/paper.css.

您还可以使用以 SCSS 编写的原始源文件 src/

文档

您可以在getpapercss.com查看文档。那些直接来自 master分支;这意味着这些功能是稳定的,可以在您的项目中使用。

您还可以在develop.getpapercss.com查看开发分支,其中包括即将在主分支中推出的新功能。请注意,开发中的功能可以在没有任何预防的情况下被删除。

定制

您可以轻松自定义 PaperCSS、克隆 repo、运行 npm install.scsssrc/.

您可能想要进行更改的主要位置是 core/_config.scss,您可以在其中为您的 CSS 构建指定新的颜色或字体。

进行更改后,请务必构建新的 CSS 文件。通过运行 npm run css:build并从 dist/文件夹中获取它们来执行此操作。

贡献

这个项目是开源的,非常欢迎贡献。它也尽可能对初学者友好,所以如果你以前从未参与过任何 Git 项目,请不要害怕加入!如果您是新手并且在此过程中需要帮助,请随时与我们联系。

请在发送 PR 之前,确保您在 .editorconfigIDE 中正确使用该文件。如果您的 IDE 本身不支持 editorconfig文件,您可以使用扩展/包/模块。例如,在 Atom 中有editorconfig 包,还有Sublime TextVS CodeVim等。

一旦您准备好做出贡献,您应该遵循以下工作流程:

  • 分叉回购然后克隆它:git clone git@github.com:[your_username]/papercss.git
  • cd papercss然后安装依赖项:npm install
  • 将当前分支更改为 developgit checkout develop
  • 创建您将在其中编写代码的新分支:git checkout -b feature-thing develop. 请务必在您的新功能分支前面加上“feature-”
  • 写一些代码!
  • 要将 scss (in src/) 构建为 css (in dist/),请运行 npm run css:build. 注意:您将需要重新运行此命令以将最新更改包含在 src/.
  • 要预览您的更改,您可以运行 npm start. 这将启动一个 localhost服务器。
  • 检查以确保您的代码遵循样式规则 npm run stylelint
  • 一旦完成提交并将您的更改推送到您的 fork。linter 也作为预提交钩子运行。
  • 在原始 papercss 存储库上打开一个拉取请求。请务必附上有关您所做工作的任何图片和/或详细信息;这将对审稿人有很大帮助!
  • 当您的更改被批准后,它们将被合并到分支中,当我们达到有关功能和错误修复的里程碑时 develop,最终将合并到分支中。master查看Vincent Driessen 的博客文章GitFlow或#27以了解有关其工作原理的更多详细信息

注意:如果您有修补程序(通常是拼写错误和较小的文档调整),请从 master 分支创建修补程序分支,而不是 develop: git checkout -b hotfix-thing master。更改将合并到 master 和 development 以保持分支一致。

关于

PaperCSS 最初是由@rhyneav制作的,与其他所有 CSS 框架中的典型现代风格和干净页面不同。它是用 LESS 构建的,并在开源之前部署在单个 index.html 页面上。它已经进化了;CSS 源代码已用 SCSS 重写,文档现在使用 Hugo 构建(感谢一些出色的贡献者)。除了原始创建者之外,它还由@Fraham@TotomInc维护。

PaperCSS 的目标是在添加类时尽可能少。例如,一个按钮应该看起来像一个纸按钮。不需要添加诸如 paper-button. 因此,将 PaperCSS 添加到 Markdown 生成的页面应该会立即将其纸化。

随意将它用于线框图、Web 应用程序、博客或您能想到的任何其他东西!

如果您是 Git 或 SCSS 的新手,这将是一个让您大吃一惊的好项目。我很乐意帮助您完成拉取请求过程。

学分和许可证

ISC 许可下的代码和文档。

感谢 Tiffany Rayside 创造了 Imperfect Buttons,这是这个项目的灵感来源。https://codepen.io/tmrDevelops/pen/VeRvKX