认识Cutestrap，一个轻量级CSS框架

tech2022-12-16 102

Cutestrap is a brand new CSS framework. This article presents Cutestrap’s features and puts the framework to the test by using it to build a simple one-page HTML template.

Cutestrap是一个全新CSS框架。本文介绍了Cutestrap的功能，并通过使用它来构建简单的一页HTML模板，对该框架进行了测试。

Cutestrap的功能 (Cutestrap’s Features)

Like most successful web development boilerplates and frameworks, Cutestrap decreases development time and cuts down on repetitive tasks. According to the catchy definition on its documentation page, Cutestrap by Tyler Childs is “A sassy, opinionated CSS Framework. A tiny alternative to Bootstrap.” It is a nice starting point for quick prototyping of websites and apps.

像大多数成功的Web开发样板和框架一样，Cutestrap减少了开发时间并减少了重复性任务。根据其文档页面上醒目的定义， Tyler Childs的 Cutestrap是“一个活泼，自以为是CSS框架。 Bootstrap的微小替代品。” 这是快速制作网站和应用程序原型的理想起点。

For all its small file size, Cutestrap is not just a blank starter template with some basic reset styles. It comes bundled with a choice of typefaces, a color palette, and some definite views on how form fields and a few other elements should look.

尽管文件很小，但Cutestrap不仅仅是具有一些基本重置样式的空白入门模板。它捆绑了一些字体，调色板和一些有关表单域和其他元素外观的明确视图。

On the other hand, Cutestrap is miles away from offering the huge number of features and components that full-blown frameworks like Bootstrap and Foundation bring to the table.

另一方面，Cutestrap距离提供诸如Bootstrap和Foundation之类的成熟框架带来的大量功能和组件还很遥远。

Cutestrap’s key features:

Cutestrap的主要功能：

Super tiny – only 8kb of CSS code

极小-仅8kbCSS代码

Easy customization, even easier if you use Sass

轻松自定义，如果使用Sass甚至更容易

Great CSS organization using the BEM methodology

使用BEM方法的出色 CSS组织

Consistent vertical rhythm of typographic elements

印刷元素的垂直节奏一致

KSS-generated documentation to facilitate turning Cutestrap documentation into your project’s living styleguide

由KSS生成的文档，有助于将Cutestrap文档转变为项目的生活风格指南

Let’s install Cutestrap to find out more.

让我们安装Cutestrap了解更多信息。

安装Cutestrap (Installing Cutestrap)

You can take the traditional route and simply download cutestrap.zip from the framework’s homepage. Alternatively, you can integrate Cutestrap into your project using npm:

您可以采用传统方法，只需从框架的主页下载cutestrap.zip即可。另外，您可以使用npm将Cutestrap集成到您的项目中：

npm install cutestrap

or bower:

或凉亭：

bower install cutestrap

自定义Cutestrap (Customizing Cutestrap)

You can change pretty much everything in Cutestrap either by using its Sass version or its compiled counterpart.

您可以使用Cutestrap的Sass版本或已编译的对应版本来更改Cutestrap中的几乎所有内容。

In this regard, Cutestrap is not different from other popular CSS frameworks. If you prefer vanilla CSS, you can include cutestrap.css (or its minified version in production) directly in your project and then override Cutestrap CSS rules from your custom stylesheet document.

在这方面，Cutestrap与其他流行CSS框架没有什么不同。如果您喜欢香草CSS，则可以直接在项目中包含cutestrap.css (或其在生产中的cutestrap.css版本)，然后从自定义样式表文档中覆盖Cutestrap CSS规则。

Opting for the Sass alternative gives you more flexibility and speed. One way you can set up your project is by creating a partial file where you can store your custom variables, including what you want to override from the framework. Next, you can create a custom.scss file where you can reference the file containing your custom variables and the original cutestrap/dist/scss/cutestrap.scss file using @import statements:

选择Sass替代品可为您提供更大的灵活性和速度。设置项目的一种方法是创建一个局部文件，您可以在其中存储自定义变量，包括要从框架中覆盖的变量。接下来，您可以创建一个custom.scss文件，在其中可以使用@import语句引用包含自定义变量的文件以及原始的cutestrap/dist/scss/cutestrap.scss文件：

//custom variables @import "custom-variables"; //original Cutestrap @import "path-to-framework-folder/cutestrap"; //custom Sass code goes here

The order in which you write the @import statements is important. In fact, including custom-variables.scss before cutestrap.scss ensures that all Cutestrap variable values you override in your custom file will take effect in the compiled CSS output.

编写@import语句的顺序很重要。实际上，在cutestrap.scss之前包含custom-variables.scss可以确保您在自定义文件中覆盖的所有Cutestrap变量值都将在编译后CSS输出中生效。

Your custom Sass code goes below the @import statements.

您的自定义Sass代码位于@import语句下方。

Cutestrap框架包含什么？ (What’s Included in the Cutestrap Framework?)

Besides some smart default styles, Cutestrap offers a grid system, beautiful typography, common website components like buttons and form fields, and a few handy utility classes.

除了一些智能的默认样式外，Cutestrap还提供了网格系统，漂亮的字体，常见的网站组件(如按钮和表单域)以及一些方便的实用程序类。

Let’s look closer.

让我们仔细看看。

格 (Grid)

Cutestrap offers a super simple grid built using flexbox.

Cutestrap提供了使用flexbox构建的超简单网格。

Here’s the code for a two-column grid:

这是两列网格的代码：

<div class="wrapper"> <div class="grid"> <div> Column 1 </div> <div> Column 2 </div> </div> </div>

To control the width of the content area, Cutestrap offers a choice of three CSS classes:

为了控制内容区域的宽度，Cutestrap提供了以下三个CSS类的选择：

.wrapper for a maximum width of 960px

.wrapper ，最大宽度为960px

.wrapper-small for a maximum width of 640px

.wrapper-small ，最大宽度为640px

.wrapper-large – for a maximum width of 1200px

.wrapper-large –最大宽度为1200px

If you use the grid without enclosing it inside the .wrapper container, your content will span the entire width of the screen, which may or may not be the result you’re after.

如果使用网格时未将其封闭在.wrapper容器内，则内容将跨越屏幕的整个宽度，这可能是您追求的结果，也可能不是。

The grid itself only needs a container element with a class of .grid. Columns inside this element will be evenly distributed throughout the available space. No need to add classes for rows and columns.

网格本身仅需要一个带有.grid类的容器元素。该元素内的列将均匀分布在整个可用空间中。无需为行和列添加类。

The code sample above is for two columns, therefore each column takes up half of the available space:

上面的代码示例是针对两列的，因此每一列占用一半的可用空间：

If I add four columns, each column will occupy 25% of the available space:

如果我添加四列，则每一列将占据可用空间的25％：

<div class="wrapper"> <div class="grid"> <div> Column 1 </div> <div> Column 2 </div> <div> Column 3 </div> <div> Column 4 </div> </div> </div>

This is what the snippet above looks like in the browser:

这是上面的代码段在浏览器中的样子：

As you can see, columns don’t wrap to the next line. In order to create a new row, you’ll need a new .grid container:

如您所见，列不会换行到下一行。为了创建新行，您需要一个新的.grid容器：

<div class="wrapper"> <div class="grid"> <div> Column 1 Row 1 </div> <div> Column 2 Row 1 </div> <div> Column 3 Row 1 </div> </div> <div class="grid"> <div> Column 1 Row 2 </div> <div> Column 2 Row 2 </div> <div> Column 3 Row 2 </div> </div> </div>

Here’s how the markup above renders in the browser:

这是上面的标记在浏览器中的呈现方式：

But how does Cutestrap handle a responsive layout? This is a common layout pattern where columns are stacked one on top of the other on a small screen and flow into a grid layout on desktop screens.

但是，Cutestrap如何处理响应式布局？这是一种常见的布局模式，其中列在一个小屏幕上一个接一个地堆叠，然后在桌面屏幕上流入网格布局。

You can quickly achieve this using the grid modifier classes below:

您可以使用下面的网格修改器类快速实现此目的：

.grid--medium – columns are stacked on small screens. They start flowing into a grid layout only when the screen size hits 600px

.grid--medium –列堆叠在小屏幕上。仅当屏幕尺寸达到600像素时，它们才开始流入网格布局

.grid--large – same pattern as .grid–medium, but the columns start arranging themselves into a grid when the screen is a minimum of 960px wide

.grid--large -与.grid-中相同的模式，但是当屏幕的最小宽度为960px时，列开始排列成网格

Here’s the basic code:

这是基本代码：

<div class="wrapper"> <div class="grid grid--medium"> <div> Column 1 </div> <div> Column 2 </div> </div> </div>

So far you’ve only seen examples of equal column grids. To add columns of different widths, just use one of the following column modifier classes:

到目前为止，您仅看到了相等的列网格的示例。要添加不同宽度的列，只需使用以下列修饰符类之一：

.column--light – apply this class to a column to make it half the width of the default column

.column--light –将此类应用于列以使其成为默认列宽度的一半

.column--heavy – apply this class to a column to make it double the width of the default column

.column--heavy –将此类应用于列以使其两倍于默认列的宽度

The two classes above achieve their goal by changing the flex-grow property which determines the amount of space allocated to the item inside the flex container.

上面的两个类通过更改flex-grow属性来实现其目标，该属性确定分配给flex容器内的项目的空间量。

Here’s a quick example:

这是一个简单的例子：

Column 2 will be half the width of Column 1 on screens wider than 600px:

在宽于600像素的屏幕上，第2列将是第1列宽度的一半：

<div class="wrapper"> <div class="grid grid--medium"> <div> Column 1 </div> <div class="column--light"> Column 2 </div> </div> </div>

This is how the code above renders in the browser on wider screens:

这是上面的代码在浏览器中在更宽的屏幕上呈现的方式：

Here’s how the same code is displayed when viewed on small screens:

这是在小屏幕上查看时相同代码的显示方式：

To see the Cutestrap grid in action, head over to the live demo on CodePen.

要查看正在运行的Cutestrap网格，请转到CodePen上的实时演示。

See the Pen Cutestrap Grid by SitePoint (@SitePoint) on CodePen.

见笔Cutestrap网格由SitePoint( @SitePoint上) CodePen 。

版式 (Typography)

Typographic elements in Cutestrap are sized using rem units based on a font-size of 62.5% on the root html element, which goes up to 78.125% for viewports larger than 960px. The baseline of 2.4rem results in a harmonious vertical rhythm, which enhances the appearance of content on the webpage.

Cutestrap中的印刷元素使用rem单位调整大小，其根html元素上的字体大小为62.5％，对于大于960px的视口，字体大小最大为78.125％。 2.4rem的基线导致和谐的垂直节奏，从而增强了网页上内容的外观。

Cutestrap offers styling for level 1 through to level 6 headings, as well as paragraph, blockquote, and table elements. Here’s the live demo on CodePen.

Cutestrap提供了从1级到6级标题以及段落，块引用和表格元素的样式。这是CodePen上的现场演示。

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

请参阅CodePen上 SitePoint( @SitePoint )的Pen Cutestrap 印刷术。

The default CSS font stack for headings and body copy includes the following typefaces:

标题和正文的默认CSS字体堆栈包括以下字体：

Avenir

阿维尼尔 Avenir Next

下一个 Helvetica Neue

Helvetica Neue Segoe UI

Segoe UI Verdana

Verdana sans serif

无衬线字体

You can easily change this using regular CSS or Sass.

您可以使用常规CSS或Sass轻松更改此设置。

For instance, to use Merriweather Sans for body copy and Merriweather for headings, add this snippet to your custom CSS document:

例如，要将Merriweather Sans用作正文，将Merriweather用作标题，请将此代码段添加到自定义CSS文档中：

body { font-family: 'Merriweather Sans', sans-serif; } h1, h2, h3, h4, h5, h6 { font-family: 'Merriweather', serif; }

To do the same using Cutestrap Sass files, simply replace the values of the $base-font variable for body copy and the $heading variable for headings with your own chosen fonts. You’ll find these variables in the variables/_type.scss file inside Cutestrap’s scss folder.

要使用Cutestrap Sass文件执行相同的操作，只需用您自己选择的字体替换主体复制的$base-font变量和$heading的$heading变量。您可以在Cutestrap的scss文件夹中的variables/_type.scss文件中找到这些变量。

纽扣 (Buttons)

Cutestrap applies distinctive styles to button elements, submit/input elements, and link elements with a class of .btn.

Cutestrap将独特的样式应用于按钮元素，提交/输入元素以及具有.btn类的链接元素。

In addition, the framework offers two variations of the default .btn class: .btn--secondary and .btn--link.

此外，该框架提供了默认.btn类的两个变体： .btn--secondary和.btn--link 。

<button>Button</button> <input type="button" value="Input Button" class="btn"> <button class="btn--secondary">Secondary</button> <a href="#" class="btn btn--link">Button Link</a>

Check out the CodePen demo.

查看CodePen演示。

See the Pen Cutestrap Button Styles by SitePoint (@SitePoint) on CodePen.

见笔Cutestrap按钮样式由SitePoint( @SitePoint上) CodePen 。

形式 (Forms)

Cutestrap builds form fields using a unified markup structure and CSS styling, which give them a consistent appearance across browsers.

Cutestrap使用统一的标记结构和CSS样式构建表单字段，这使它们在浏览器中具有一致的外观。

Below is the markup for a simple form:

以下是简单表格的标记：

<form> <label class="textfield"> <input type="text"> <span class="textfield__label">Name</span> </label> <label class="textfield"> <input type="email"> <span class="textfield__label">Email</span> </label> <label class="radio"> <input type="radio" name="designer"> <span class="radio__label">Designer</span> </label> <label class="radio"> <input type="radio" name="developer"> <span class="radio__label">Developer</span> </label> <label class="select"> <select> <option value="Location" disabled selected>Location</option> <option value="EU">EU</option> <option value="US">US</option> <option value="Australia">Australia</option> </select> <span class="select__label" for="select">Location</span> </label> <button type="submit">Subscribe</button> </form>

Here’s how the markup displays in the browser:

标记在浏览器中的显示方式如下：

To see the live code, checkout the demo on CodePen.

要查看实时代码，请在CodePen上查看演示。

See the Pen Cutestrap Form Controls by SitePoint (@SitePoint) on CodePen.

见笔Cutestrap窗体控件由SitePoint( @SitePoint上) CodePen 。

实用程序类 (Utility Classes)

Cutestrap offers a small number of handy utility classes to do things like aligning text, clearing floats, increasing or decreasing font-size, and more.

Cutestrap提供了一些方便的实用程序类来执行诸如对齐文本，清除浮点数，增大或减小font-size等操作。

The full list of Cutestrap utility classes is available on the Cutestrap documentation page.

Cutestrap实用程序类的完整列表可在Cutestrap文档页面上找到。

放在一起：让我们编写一个演示页面 (Putting It All Together: Let’s Code a Demo Page)

The HTML demo for this article includes all of Cutestrap’s key features discussed so far. The code I’m going to present here is limited to those features only. You’re free to examine the details on CodePen.

本文HTML演示包括到目前为止讨论的Cutestrap的所有关键功能。我将在此处提供的代码仅限于这些功能。您可以随意检查CodePen上的详细信息。

See the Pen HTML Template with Cutestrap by SitePoint (@SitePoint) on CodePen.

见笔HTML模板与Cutestrap由SitePoint( @SitePoint上) CodePen 。

Here’s the HTML code for the hero section:

这是英雄部分HTML代码：

<div class="hero"> <div class="wrapper"> <article class="ta-center">  <h1 class="section-title">Title</h1> <p class="fs-large">Tagline</p> </article>  </div>  </div>

The hero section is full-width but uses the .wrapper class to control the maximum width and centering of the display area.

英雄部分为全角，但使用.wrapper类控制显示区域的最大宽度和居中。

The section title and tagline are centered with .ta-center, and the tagline’s font size is made bigger using .fs-large. Both are handy Cutestrap utility classes to control the display of text content.

该部分的标题和标语为中心与.ta-center ，和标语的字体大小使用由更大.fs-large 。两者都是方便的Cutestrap实用程序类，用于控制文本内容的显示。

The Portfolio section is a responsive three-column grid of images running along two rows. Here’s the code:

投资组合部分是沿着两行运行的响应式三列图像网格。这是代码：

To achieve a responsive layout, the Portfolio section uses the .grid--medium modifier class: the content is stacked on small screens; on screens wider than 640px, the content is displayed in a three-column grid.

为了获得响应式布局，“投资组合”部分使用.grid--medium修饰符类：将内容堆叠在小屏幕上；将内容堆叠在小屏幕上。在640像素以上的屏幕上，内容以三列网格显示。

The demo’s three-column footer uses the same structure:

该演示的三栏式页脚使用相同的结构：

The About section has a responsive two-column layout. The mobile view displays the columns stacked one on top of the other, the desktop view displays the columns side by side, with the right column being narrower than the left column.

“关于”部分具有响应式两列布局。移动视图将一列堆叠在另一个列上，桌面视图并列显示列，其中右列比左列窄。

You achieve the responsive layout using the .grid--medium modifier class as above. The .column--light class applied to the second column is all you need to make it narrower:

您可以使用.grid--medium修饰符类来实现响应式布局。您只需要将第二列的.column--light类缩小范围即可：

<div class="about"> <div class="wrapper"> <div class="grid grid--medium">  <article> Content in wider column </article>  <article class="column--light"> Content in narrower column </article> </div> </div> </div>

The Contact section displays just a centered form element. To avoid having the form span the regular width of the page, and lacking ready-made classes to offset columns, I’ve used the .wrapper-small class. This results in a centered container that constrains the form element within narrower boundaries with respect to the regular width of the webpage.

联系人部分仅显示居中的表单元素。为了避免表单跨越页面的常规宽度，并且缺少现成的类来偏移列，我使用了.wrapper-small类。这导致居中的容器，该容器将表单元素相对于网页的常规宽度限制在较窄的边界内。

The relevant markup looks like this:

结论 (Conclusion)

In this article, I’ve introduced Cutestrap, a brand new CSS framework.

在本文中，我介绍了全新CSS框架Cutestrap。

Cutestrap has a number of interesting features, but its biggest plus for me is its easy learning curve: it took me just over an hour to learn how to use the framework and build the demo page that accompanies this article. Partly, this is due to the fact that Cutestrap is tiny: the framework doesn’t support older browsers, it just provides styles for a few key elements, the grid doesn’t allow for the offsetting or nesting of columns (although I love its simplicity), and JavaScript interactive components aren’t included. The Sass code is excellently organized but minimal, not even a mixin in sight.

Cutestrap具有许多有趣的功能，但对我来说，最大的好处就是它的易学曲线：我花了一个多小时来学习如何使用该框架并构建本文附带的演示页面。部分原因是因为Cutestrap很小：框架不支持较旧的浏览器，它仅提供一些关键元素的样式，网格不允许列的偏移或嵌套(尽管我喜欢它的列)简单性)，并且不包含JavaScript交互式组件。 Sass代码组织得很好，但是数量很少，甚至看不到mixin。

Is this a good thing? That depends on what you need as a starting point for your project.

这是一件好事吗？这取决于您需要什么作为项目的起点。

The ecosystem of open source CSS frameworks has become very competitive. Being tiny is not enough. Even the big players like Bootstrap and Foundation, which have often been the target of criticism for causing unnecessary code bloat, have become highly modularized so that picking and choosing only what you need is often just a matter of enabling or disabling the use of a Sass variable.

开源CSS框架的生态系统已经变得非常有竞争力。很小是不够的。即使是像Bootstrap和Foundation这样的大型公司，也经常成为引起不必要的代码膨胀的批评对象，但它们也已经高度模块化，因此仅选择和选择所需的内容通常只是启用或禁用Sass的问题。变量。

However, I need to remind myself that Cutestrap is very young, still a baby really – I’ve just noticed that its initial commit on GitHub at the time of writing this article is only about a month old. This means that the framework has plenty of time to develop and mature.

但是，我需要提醒自己，Cutestrap还很年轻，还是个婴儿–我刚刚注意到，在撰写本文时，它对GitHub的最初提交只有一个月左右。这意味着该框架有足够的时间来开发和成熟。

If you’ve tried Cutestrap and would like to suggest a new feature or send a pull request, head over to the project’s page on GitHub and get involved.

如果您尝试过Cutestrap并想提出新功能或发送请求请求，请转到GitHub上的项目页面并参与。

Have you used Cutestrap in your development work? What did you build? I can’t wait to hear from you!

您在开发工作中使用过Cutestrap吗？你建造了什么？我等不及要收到您的来信！

翻译自: https://www.sitepoint.com/getting-to-know-cutestrap-a-lightweight-css-framework/

相关资源：jdk-8u281-windows-x64.exe

最新回复(0)