spectre README

The project's README from github.com/picturepan2/spectre. As one markdown file: README.md.

Spectre.css

Reviewed by Hound

Spectre.css is a lightweight, responsive and modern CSS framework.

Spectre is a side project based on years of CSS development work on a large web service project. Spectre only includes modern base styles, responsive layout system, CSS components and utilities, and it can be modified for your project with Sass/Scss compiler.

Spectre.css is completely free to use. If you enjoy it, please consider donating via Paypal or via Patreon for the further development. ♥

Getting started

There are 5 ways to get started with Spectre CSS framework in your projects. You can either manually install or use NPM, Yarn and Bower.

Install manually

Download the compiled and minified Spectre CSS files. And include spectre.css located in /docs/dist in your website or Web app <head> part.

<link rel="stylesheet" href="spectre.min.css">

Install from CDN

Alternatively, you can use the unpkg or cdnjs CDN to load compiled Spectre.css.

<link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre.min.css">

Install with NPM

$ npm install spectre.css --save

Install with Yarn

$ yarn add spectre.css

Install with Bower

$ bower install spectre.css --save

Compiling custom version

You can compile your custom version of Spectre.css. Read the documentation.

Documentation and examples

Elements

Layout

Components

Utilities

Experimentals

Browser support

Spectre uses Autoprefixer to make most styles compatible with earlier browsers and Normalize.css for CSS resets. Spectre is designed for modern browsers. For best compatibility, these browsers are recommended:

Spectre supports Internet Explorer 10+, but some HTML5 and CSS3 features are not perfectly supported by Internet Explorer.

Designed and built with ♥ by Yan Zhu. Feel free to submit a pull request. Help is always appreciated.

spectre (picturepan2/spectre)

Searching Database…

11.3K ·GitHub
这是什么?Spectre.css 是一个轻量、响应式且现代的 CSS 框架,用于构建网页界面,提供基于 flexbox 的栅格系统、预制元素、组件和实用类。
这是完整的 JS 框架,还是只是 CSS?它是纯 CSS(由 Sass/Scss 编译而来),不包含 JavaScript;你只需引入样式表并使用其中的类即可。
我该如何把它添加到项目中?下载编译好的 spectre.css 并在 HTML 的 head 中引入,或通过 NPM、Yarn 或 Bower 安装。
使用它需要构建工具吗?不需要,你可以直接引入预编译的 CSS 文件,或从 unpkg 或 cdnjs 等 CDN 加载;只有在需要自定义构建时才需要 Sass 编译器。
它能在 Internet Explorer 这类旧浏览器中使用吗?它面向现代浏览器(最新版 Chrome、Edge、Firefox ESR、Safari、Opera),仅支持 IE10+,部分 HTML5/CSS3 特性无法完全正常工作。
这个可以免费使用吗,包括商用?可以,它基于 MIT 许可证完全免费,不过作者接受通过 Paypal 或 Patreon 的自愿捐赠。
CSS 文件有多小?Gzip 压缩后约 10KB,这正是其「轻量」设计最主要的卖点。
内置了哪些组件?它提供排版、按钮和表单等元素,flexbox 栅格和导航栏等布局组件,以及卡片、模态框、标签页、工具提示和分页等组件。
有实验性功能吗?有。「Experimentals」部分包括 360 度查看器、轮播、视差效果、滑块和时间线等,其中一些完全用 CSS 实现。
Spectre 为什么会被创建?它最初是一个业余项目,把一个大型网页服务项目中多年积累的 CSS 经验提炼成一个可复用的框架。
Size
6.4 MB
Stars
11.3K
Age
10y
Commits · 90 Days