如何自定义tachyons
As a bootcamp student moving into React, UI/UX and the responsiveness of the applications have become increasingly important.
作为进入React的训练营学生，UI / UX和应用程序的响应能力变得越来越重要。
Ensuring that the UI/UX is the best it can be has become a priority for our Web/Mobile projects. At the end of the day, the users of the tools we build will give the most weight to the usability of the app/website.
确保UI / UX达到最佳状态已成为我们的Web / Mobile项目的首要任务。 归根结底，我们构建的工具的用户将最重视应用程序/网站的可用性。
From previous projects, I have come to learn why writing Vanilla CSS is typically dreaded by programmers. It is very time-consuming and repetitive.
从以前的项目中，我开始学习了为什么程序员通常不喜欢编写Vanilla CSS。 这是非常耗时且重复的。
“A plethora of frameworks exist that attempt to solve these issues — most commonly Bootstrap, Bulma, Material UI, and Semantic. These frameworks offer a ton of options and I wanted something simple to get started quickly on my project. I found Tachyons, and it was the perfect fit for what I wanted: easy-to-learn, flexible, and simple.”
“存在许多试图解决这些问题的框架-最常见的是Bootstrap，Bulma，Material UI和Semantic。 这些框架提供了很多选择，我想要一些简单的方法来快速开始我的项目。 我找到了Tachyons ，它非常适合我想要的：易于学习，灵活且简单。”
Tachyons, like the hypothetical particle it was named after, is fast and lightweight. More importantly its design system is super easy to learn and implement. It achieves this by keeping all code in a single place (the html file) and through the use of Single Utility Classes (classes that do one thing). In other words, imagine a world where you can create fast loading, highly readable and super responsive interfaces with minimal CSS.
Tachyons就像它命名的假想粒子一样，既快速又轻巧。 更重要的是，其设计系统非常易于学习和实施。 它通过将所有代码都放在一个位置(html文件)并使用单个实用程序类(做一件事的类)来实现此目的。 换句话说，想象一个可以用最少CSS创建快速加载，高度可读和超响应界面的世界。
If you wanted to create an element using standard HTML/CSS/JavaScript, the process would look something like this:
如果要使用标准HTML / CSS / JavaScript创建元素，则过程如下所示：
The above involves keeping track of multiple files and ensuring that syntax is correct across multiple languages. With Tachyons, the above becomes…
以上内容涉及跟踪多个文件并确保语法在多种语言中都是正确的。 借助Tachyons，以上内容将成为……
如何使用TACHYONS (HOW TO USE TACHYONS)
Copy the line of code below and paste it in the head of the html file(s) you want to include tachyons in.
复制下面的代码行，并将其粘贴到要在其中包含tachyons的html文件的头部。
<link rel="stylesheet" href="https://unpkg.com/tachyons@4.10.0/css/tachyons.min.css"/>or install via npm
或通过npm安装
npm install --save-dev tachyons@4.10.0or grab all the source files and build+develop locally
或获取所有源文件并在本地构建+开发
git clone git@github.com:tachyons-css/tachyons.git
cd tachyons
npm install && npm start使用TACHYONS的示例按钮 (EXAMPLE BUTTON USING TACHYONS)
<button class="bw0 br2 bg-dwyl-teal pa2 white fw1 tc ttu tracked">do what you love</button>Adding the the above line of code to your html file would create the button below. I’m going to walk through what all of these classes mean in a minute. For now, let’s look at the result of this code:
将上面的代码行添加到html文件中，将在下面创建按钮。 我将在一分钟内逐步讲解所有这些课程的含义。 现在，让我们看一下这段代码的结果：
As you can see from the above, implementing design is simplified to adding predefined class names to the class of the element you are creating.
从上面可以看到，实现设计已简化为将预定义的类名添加到要创建的元素的类中。
Definition of each class:
每个类的定义：
bw0- "border width 0"bw0“边框宽度0”br2- "border radius 2"br2“边界半径2”bg-dwyl-teal- "background color dwyl teal" (this is an example of a custom color)bg-dwyl-teal“背景色dwyl蓝绿色”( 这是自定义颜色的示例 )pa2- "padding all 2"pa2“全部填充2”white- "text color white"white-“文字颜色为白色”fw1- "font weight 1"fw1“字体粗细1”tc- "text align center"tc“文字对齐中心”ttu- "text transform uppercase"ttu“文本转换为大写”tracked- "with letter spacing"tracked-“带字母间距”
Additional information on predefined class can be found in the style guide included here.
有关预定义类的其他信息，请参见此处提供的样式指南。
快乐黑客！！！ (HAPPY HACKING!!!)
RESOURCES
资源
翻译自: https://blog.prototypr.io/tachyons-the-css-framework-you-never-knew-you-needed-8361955a16f1
如何自定义tachyons
728
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
