spectre vs_Spectre：轻量级CSS框架

spectre vs

Frameworks reduce development time for projects considerably. A few of them like Bootstrap are quite popular and offer a lot of features, but you might not need all that for your project. Today, we will focus on a new framework called Spectre. It is lightweight, modern, responsive and mobile friendly. It weighs around 6.8kb when served minified and gzipped. Besides the basic grid system, it also has a lot of other useful various components like tabs, modals and cards etc.

框架大大减少了项目的开发时间。 其中有一些类似Bootstrap的工具非常受欢迎，并提供了许多功能，但是您的项目可能不需要所有这些功能。 今天，我们将专注于一个名为Spectre的新框架。 它轻巧，现代，响应Swift且移动友好。 缩小并压缩后，重量约为6.8kb。 除了基本的网格系统之外，它还具有许多其他有用的各种组件，例如标签，模式和卡片等。

This tutorial will provide a brief overview of this framework, followed by some guidance to help you get started quickly.

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

安装 (Installation)

You can either download the minified Spectre.css file directly or use npm and Bower to install it. Once you are done, you can include the file in your project like regular stylesheets.

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

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

You can also create your own customized version of the framework by editing the Less files in the /src directory or by removing unneeded components from the spectre.less file. Then you can build your CSS file from the command line by using Gulp.

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

网格系统 (Grid System)

Spectre has a flexbox based responsive grid system with 12 columns. The width of each column is determined by its class name. Each class begins with col- and then is followed by a number which represents how many columns wide this particular element should be. For example, col-12 is 12 columns wide which gives it a width of 100% and col-3 is 3 columns wide or a quarter of col-12, which gives it a with of 25%. By default, the different columns will have some gap between them. You can collapse that gap by adding the class col-gapless to their container. Just like Bootstrap, it also offers classes like col-md-[1-12] , col-sm-[1-12] and col-xs-[1-12] to help you control the width of elements when the size of the viewport changes.

Spectre有一个基于flexbox的响应式网格系统，具有12列。 每列的宽度由其类名称确定。 每个类都以col-开头，然后是一个数字，代表该特定元素应该有多少列宽。 例如， col-12为12列宽，使其宽度为100％， col-3为3列宽或col-12的四分之一，其a为25％。 默认情况下，不同的列之间会有一些间隙。 您可以通过将class col-gapless添加到其容器中来消除这种差距。 就像引导，它也提供了类，如col-md-[1-12] ， col-sm-[1-12]和col-xs-[1-12] ，以帮助您控制元素的宽度时的大小视口将发生变化。

It also provides classes such as hide-xs, hide-sm and hide-md to hide elements on specific viewport sizes.

它还提供了诸如hide-xs ， hide-sm和hide-md类的类来隐藏特定视口大小的元素。

All the columns will show up as a single row when viewport width is less than 480px. The col-xs-* classes will be applicable to all elements with a width greater than 480px. Similarly, col-sm-* will be applicable to viewport width more than 600px and col-md-* will be applicable for viewport width more than 800px.

当视口宽度小于480px时，所有列将显示为一行。 col-xs-*类将适用于宽度大于480px的所有元素。 同样， col-sm-*将适用于大于600px的视口宽度，而col-md-*将适用于大于800px的视口宽度。

The following code snippet creates one column with width 33.333% (col-4), two columns with width 25% (col-3) and one column with width 16.66% (col-2).

以下代码段创建一列宽度为33.333％( col-4 )，两列宽度为25％( col-3 )和一列宽度为16.66％( col-2 )。

<div class="container">   
  <div class="columns">     
    <div class="column col-4">
      <div class="col-content">col-4</div>
    </div>       
    <div class="column col-3">
      <div class="col-content">col-3</div>
    </div>       
    <div class="column col-3">
      <div class="col-content">col-3</div>
    </div>     
    <div class="column col-2">
      <div class="col-content">col-2</div>
    </div>
  </div>
</div>

In the demo below, I have created a basic grid system as well as a nested one. As evident from the demo, it is not hard to create complex layouts.

在下面的演示中，我创建了一个基本的网格系统以及一个嵌套的网格系统。 从演示中可以明显看出，创建复杂的布局并不难。

See the Pen Spectre Framework Grid System by SitePoint (@SitePoint) on CodePen.

请参阅CodePen上的SitePoint ( @SitePoint )提供的Pen Spectre框架网格系统 。

基本要素 (Basic Elements)

Spectre includes some default styles for typographical elements like headings, paragraphs and blockquotes. The framework is also optimized for Asian fonts. It has a few classes like highlight or lead to make some sections of your text stand out. The following demo shows all these features at once:

Spectre包括一些印刷元素的默认样式，例如标题，段落和块引用。 该框架还针对亚洲字体进行了优化。 它具有一些类，例如highlight或lead ，使文本的某些部分突出。 以下演示一次展示了所有这些功能：

See the Pen Spectre – Typography by SitePoint (@SitePoint) on CodePen.

请参阅CodePen上的PenSpecter – SitePoint印刷术( @SitePoint )。

You can also add the class table to any <table> element. The framework will then apply basic styling to your table such as padding and border styles to give your table a cleaner default look. It will also style your table’s header row appropriately. You can use the class table-striped to make the table striped and enable hover styles by adding the class table-hover.

您还可以将类table添加到任何<table>元素。 然后，框架将对表格应用基本样式，例如填充和边框样式，以使表格具有更清晰的默认外观。 它还将适当设置表格标题行的样式。 您可以使用table-striped类使表变得带条纹，并通过添加class table-hover启用悬停样式。

This demo illustrates how easy it is to create fancy responsive tables using Spectre:

该演示演示了使用Spectre创建花式响应表是多么容易：

See the Pen Spectre – Tables by SitePoint (@SitePoint) on CodePen.

见笔表-幽灵由SitePoint( @SitePoint上) CodePen 。

There are a few classes available for buttons as well. To use the default button styles you need to add the btn class. You can control the size of buttons using the classes btn-sm, btn-lg and btn-block. The class btn-block will create full width buttons. To group multiple buttons together, you can use the btn-group class on their container.

还有一些按钮可用的类。 要使用默认的按钮样式，您需要添加btn类。 您可以使用btn-sm ， btn-lg和btn-block类来控制按钮的大小。 btn-block类将创建全角按钮。 要将多个按钮组合在一起，可以在其容器上使用btn-group类。

Spectre also has style rules for common form elements like labels, input fields and textareas giving them a clean and stylish look. To create a horizontal form, you need to add the form-horizontal class to the <form> element. You can then control the width of child elements using one of the classes from col-[1-12]. Please note that the form will be horizontal only if the viewport is at least 840px wide. Making the form elements bigger or smaller is just a matter of adding the classes input-sm/input-lg or select-sm/select-lg.

Spectre还对常见的表单元素(例如标签，输入字段和文本区域)具有样式规则，从而使它们看起来干净时尚。 要创建水平表单，需要将form-horizontal类添加到<form>元素。 然后，您可以使用col-[1-12]中的类之一来控制子元素的宽度。 请注意，仅当视口至少为840px宽时，表单才会为水平。 增大或减小表单元素仅需添加类input-sm/input-lg或select-sm/select-lg 。

You can also attach some text or a button to an input element by adding the class input-group to the input container. You will have to add the class input-group-addon to the accompanying text element and input-group-btn to the button element.

您还可以通过将类input-group添加到输入容器，将一些文本或按钮附加到输入元素。 您将必须将类input-group-addon到随附的text元素中，并将input-group-btn到button元素中。

A basic form is shown in this demo:

此演示中显示了一个基本形式：

See the Pen Spectre – Forms by SitePoint (@SitePoint) on CodePen.

见笔表格-幽灵由SitePoint( @SitePoint上) CodePen 。

导航 (Navigation)

Navigation is an integral part of even the most basic websites. Keeping this in mind, Spectre offers three navigation components — the navigation bar, vertical menu and breadcrumbs. The navigation bar can contain elements like a logo, navigation links, buttons and other elements like a search box. By default, the navbar will have a very minimal styling so you don’t have to put in a lot of effort to customize it. Here is the markup to create a basic navigation bar:

导航甚至是最基本的网站的组成部分。 牢记这一点，Spectre提供了三个导航组件-导航栏，垂直菜单和面包屑。 导航栏可以包含徽标，导航链接，按钮等元素以及搜索框之类的其他元素。 默认情况下，导航栏的样式非常简单，因此您无需花费很多精力对其进行自定义。 这是创建基本导航栏的标记：

<header class="navbar">
  <section class="navbar-section">
    <a href="#" class="navbar-brand">SitePoint</a>
  </section>
  <section class="navbar-section">
    <a href="#" class="btn btn-link">HTML5</a>
    <a href="#" class="btn btn-link">CSS3</a>
    <a href="#" class="btn btn-link">JavaScript</a>
    <a href="#" class="btn btn-primary">Sign Up</a>
  </section>
</header>

Besides the navigation bar, you can create vertical menus as well. This requires you to add the class menu to the respective container element. You can add the class menu-item to all the child elements in your menu. The framework uses this class to add its own styling consistent with the rest of the components. Different menu items can be separated using a divider or menu-header.

除了导航栏之外，您还可以创建垂直菜单。 这要求您将类menu添加到相应的容器元素。 您可以将类menu-item添加到menu-item所有子元素。 框架使用此类添加与其余组件一致的自己的样式。 可以使用divider或menu-header divider不同的菜单项。

You can also implement a breadcrumb menu using the breadcrumb class. All the child elements need to have the classname breadcrumb-item.

您还可以使用breadcrumb类实现面包屑菜单。 所有的子元素都必须具有类名breadcrumb-item 。

All three menus that we discussed in this section are shown in the demo below:

我们在本节中讨论的所有三个菜单显示在下面的演示中：

See the Pen Spectre – Menus by SitePoint (@SitePoint) on CodePen.

见笔幽灵-菜单由SitePoint( @SitePoint上) CodePen 。

模态和卡片 (Modals and Cards)

Two important components that we have not discussed up to this point are modals and cards. They are similar to their Bootstrap counterparts.

到目前为止，我们尚未讨论的两个重要组件是模式和卡片。 它们与Bootstrap对应项相似。

模态 (Modals)

You can add a modal class to container elements to create modals. Inside that container, you can add one actual modal container element with the class modal-container and a modal overlay element with the class modal-overlay. Inside your container, you can add actual elements with the modal-header, modal-content and modal-footer classes. You can control the size of your modals using the modal-sm class. The code below will create a basic modal for you:

您可以将modal类添加到容器元素以创建模态。 在该容器内，您可以使用modal-container类添加一个实际的模式容器元素，并使用modal-overlay类添加一个模式覆盖元素。 在容器内，您可以使用modal-header ， modal-content和modal-footer类添加实际元素。 您可以使用modal-sm类控制模态的大小。 以下代码将为您创建一个基本模式：

<div class="modal modal-sm active">
  <div class="modal-overlay"></div>
  <div class="modal-container">
    <div class="modal-header">
      <button class="btn btn-clear float-right" type="button"></button>
      <div class="modal-title">Modal title</div>
    </div>
    <div class="modal-body">
      <div class="content">
        <p>This is some text inside the Modal.</p>
      </div>
    </div>
    <div class="modal-footer">
      <button class="btn btn-primary" type="button">Close</button>
    </div>
  </div>
</div>

In the demo below, I have added the functionality to make the Modal appear and disappear. It is just a matter of adding and removing the active class.

在下面的演示中，我添加了使Modal出现和消失的功能。 只需添加和删除active类即可。

See the Pen Spectre – Modals by SitePoint (@SitePoint) on CodePen.

见笔幽灵-情态动词由SitePoint( @SitePoint上) CodePen 。

牌 (Cards)

Cards are flexible general purpose content containers. You can use them to store all kinds of things. They can be created by using the class card. The card itself can have children with classes card-header, card-content, card-footer or card-image based on their purpose. Here is a basic snippet to show markup of a typical card:

卡是灵活的通用内容容器。 您可以使用它们存储各种东西。 可以使用类card创建它们。 卡片本身可以根据其用途将孩子分为card-header ， card-content ， card-footer或card-image类。 这是显示典型卡标记的基本代码段：

<div class="card">
  <div class="card-image">
    <img class="img-responsive" src="img-path/bp.jpg">
  </div>
  <div class="card-header">
    <h2 class="card-title">Heading</h2>
    <p class="card-meta">Some Meta Data</p>
  </div>
  <div class="card-body">
    <p>Something related to the image or the heading goes here!</p>
  </div>
</div>

You can wrap the cards up in classes like col-6 and col-md-8 etc. to control their width. You can also put elements like buttons or labels inside the cards if needed. The CodePen demo below shows two cards with images at different positions:

您可以将卡包装在诸如col-6和col-md-8等类中，以控制其宽度。 如果需要，还可以在卡中放入按钮或标签之类的元素。 下面的CodePen演示显示了两张位置不同的图像卡：

See the Pen Spectre – Cards by SitePoint (@SitePoint) on CodePen.

见笔幽灵-卡由SitePoint( @SitePoint上) CodePen 。

更多组件 (More Components)

Other components like “toasts” are similar to the alerts in Bootstrap. A toast component can contain text and other icons. You can also optionally add a close button to them. Toasts may be used for different purposes. There are classes available to serve each of these purposes. For a success toast, you can use the class toast-success. This will make the toast green. Similarly, there are classes for error messages (toast-danger) and general information (toast-primary) as well.

其他组件(例如“敬酒”)类似于Bootstrap中的警报。 吐司组件可以包含文本和其他图标。 您还可以选择向它们添加关闭按钮。 吐司可用于不同目的。 有可用于这些目的的类。 对于成功的吐司，可以使用类toast-success 。 这将使吐司绿色。 同样，也有用于错误消息的类( toast-danger )和常规信息的类( toast-primary )。

Spectre also has other common components like badges, labels, pagination and tooltips as well. You can visit the official website to read about all these components.

Spectre还具有其他常见组件，例如徽章，标签，分页和工具提示。 您可以访问官方网站以了解所有这些组件。

Additionally, the framework also has utility classes like text-left, text-lowercase , float-left, centered to help you with minor layout adjustments. The utility class float-right can be seen in action in the modal demo above where it is applied on the little x button in the modal header.

此外，该框架还具有实用程序类，例如text-left ， text-lowercase ， float-left ，它们的centered为了帮助您进行较小的布局调整。 实用程序类float-right可以在上面的模式演示中看到，该模式在模式标题中的小x按钮上得到了应用。

One more useful class is loading, which can be added to buttons or divs to show a loading animation.

另一个有用的类是loading ，可以将其添加到按钮或div中以显示加载动画。

最后的想法 (Final Thoughts)

One nice thing about Spectre is that you don’t have to override a lot of default styles. The framework just provides minimal styling for elements which in itself is pretty decent. Considering the number of components that it offers, the size is also very reasonable. Spectre’s only downside is that it does not provide any JavaScript to add interaction to all its components. This means that you will have to write your own code to show or hide modal boxes and other such interactions, but it is not that hard to achieve.

关于Spectre的一件好事是，您不必重写许多默认样式。 该框架只是为元素提供了最小的样式，这些元素本身是相当不错的。 考虑到它提供的组件数量，尺寸也非常合理。 Spectre的唯一缺点是它不提供任何JavaScript来向其所有组件添加交互。 这意味着您将必须编写自己的代码来显示或隐藏模式框以及其他类似的交互，但这并不难实现。

The framework is definitely worth giving a try. What are your views on Spectre? Are you planning on using it in any of your projects? Let us know in the comments.

该框架绝对值得一试。 您对Spectre有何看法？ 您打算在任何项目中使用它吗？ 让我们在评论中知道。

翻译自: https://www.sitepoint.com/spectre-a-lightweight-css-framework/

spectre vs