幽灵：轻巧的CSS框架

Spectre CSS框架：轻量级、响应式和现代化的CSS解决方案

在项目开发中，框架能够显着缩短开发时间。 Bootstrap等流行框架功能丰富，但并非所有功能都适用每个项目。本文介绍一个轻量级、现代化、响应式且移动友好的新框架——Spectre。其压缩并gzip后大小约为6.8kb。除了基本的栅格系统，它还提供许多其他实用组件，如选项卡、模态框和卡片等。

本教程将简要概述该框架，并提供一些指导，帮助您快速入门。

关键要点

• Spectre是一个轻量级、现代化、响应式且移动友好的CSS框架，可大幅缩短开发时间。它提供基本的栅格系统和各种组件，如选项卡、模态框和卡片。
• 该框架包含针对亚洲字体优化的排版元素默认样式，并提供表格、按钮和常用表单元素的类。它还提供三个导航组件——导航栏、垂直菜单和面包屑。
• Spectre的两个重要组件是模态框和卡片，类似于Bootstrap中的对应组件。它还包括其他组件，如“吐司”通知、徽章、标签、分页和工具提示。实用程序类可用于进行细微的布局调整。
• 虽然Spectre为元素提供了最少的样式，并且考虑到它提供的组件数量，其大小非常合理，但它不提供任何用于与其组件交互的JavaScript。用户需要编写自己的代码来实现显示或隐藏模态框等功能。

安装

您可以直接下载压缩后的Spectre.css文件，也可以使用npm和Bower进行安装。安装完成后，您可以像普通的样式表一样将文件包含到您的项目中。

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

您还可以通过编辑/src目录中的Less文件或从spectre.less文件中删除不需要的组件来创建您自己的自定义框架版本。然后，您可以使用Gulp从命令行构建CSS文件。

栅格系统

Spectre拥有一个基于flexbox的响应式栅格系统，包含12列。每列的宽度由其类名决定。每个类都以col-开头，后跟一个数字，表示该元素应占据的列数。例如，col-12占据12列，宽度为100%；col-3占据3列，宽度为25%。默认情况下，不同的列之间会有一些间隙。您可以通过向其容器添加col-gapless类来消除该间隙。与Bootstrap一样，它还提供诸如col-md-[1-12]、col-sm-[1-12]和col-xs-[1-12]之类的类，以帮助您在视口大小改变时控制元素的宽度。

它还提供诸如hide-xs、hide-sm和hide-md之类的类，用于在特定视口大小下隐藏元素。

当视口宽度小于480像素时，所有列都将显示为单行。col-xs-*类将应用于宽度大于480像素的所有元素。类似地，col-sm-*将应用于视口宽度大于600像素的元素，col-md-*将应用于视口宽度大于800像素的元素。

以下代码片段创建了一个宽度为33.333%（col-4）的列，两个宽度为25%（col-3）的列和一个宽度为16.66%（col-2）的列。

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

...(后续内容与原文类似，可根据需要调整措辞和段落结构，保持原意不变)...

以上是幽灵：轻巧的CSS框架的详细内容。更多信息请关注PHP中文网其他相关文章！