by ZAYDEK
由ZAYDEK
卡玛哈玛(AAA) (KAMEHAMEHAAAA ?)
免费课程：升级？ 使用布尔玛CSS (Free Course: Level Up ? With Bulma CSS)
自Bootstrap以来最好CSS框架 (The best CSS framework since Bootstrap)
Before I get to the article, I just want to share that I’m building a product, and I would love to collect some data about how to better serve web developers. I created a short questionnaire to check out before or after reading this article. Please check it out — thanks! And now, back to our regular scheduled programming.
在开始阅读本文之前，我只想分享我正在开发的产品，并且我希望收集一些有关如何更好地为Web开发人员提供服务的数据。 在阅读本文之前或之后，我创建了一个简短的问卷调查表以进行检查。 请检查一下-谢谢！ 现在，回到我们的常规计划编程。
认识布尔玛CSS！ 免费课程？ ^ h ERE (Meet Bulma CSS! Free course ? here)
Apart from being the second longest-standing character in Dragon Ball Z, Bulma is a modern CSS framework based on Flexbox from Jeremy Thomas @jgthms. And Bulma is gaining adoption fast with 150K+ downloads a month and 26K+ stars on GitHub. OK…tell me more. ?
除了是《七龙珠Z》中历史最久的角色之外， Bulma是基于Jeremy Thomas @jgthms的Flexbox的现代CSS框架。 Bulma每月获得15万次下载，并在GitHub上获得26,000多颗星 ，从而Swift获得采用。 好...告诉我更多。 ？
With Bulma, we can create beautiful and responsive websites with ease. Jeremy designed Bulma as a reusable set of Sass patterns to kickstart new projects. Don’t know Sass? Sass *compiles* to CSS. And once Flexbox became standardized, Jeremy used it to power what we now know as Bulma.
使用布尔玛，我们可以轻松创建美观且响应Swift的网站。 Jeremy将Bulma设计为可重复使用的Sass模式集，以启动新项目。 不认识萨斯吗？ Sass *编译*为CSS。 一旦Flexbox标准化，杰里米(Jeremy)就用它来推动现在称为布尔玛(Bulma)的事物。
In this article, I detail *how* Bulma works and *what* we can build with it.
在本文中，我详细介绍了布尔玛的工作方式以及可以用它构建的内容。
我还在Scrimba上教过Bulma CSS，我们在这些网站上建立了这些网站。 它是免费的- 单击此处注册 ！ ？ (I also taught Bulma CSS on Scrimba, where we build these websites. It’s free — click here to enroll! ?)
Scrimba.com是用于前端开发的平台，该网站将网站记录为事件而不是视频，并且可以对其进行编辑。 ？ (Scrimba.com is a platform for front-end development, where websites are recorded as events — not videos — and can be edited. ?)
布尔玛如何运作？ (How does Bulma work?)
Bulma is 4.5K lines of Sass and 9.5K lines when compiled to CSS. What in the heck is all this code doing?! Bulma addresses 90% of common website patterns, like columns, forms, components, modifiers, layouts, and elements. The code is *also* responsive and can be further themed and customized.
当编译为CSS时，布尔玛为Sass的4.5K行和9.5K的行 。 这些代码到底在做什么？！ Bulma解决了90％的常见网站模式，例如列 ， 表单 ， 组件 ， 修饰符 ， 布局和元素 。 该代码*也*响应，并且可以进一步主题化和自定义。
Bulma doesn’t solve all problems, but can be *far* more productive than hand-coding Sass or CSS. And because Bulma compiles to CSS, it’s adaptable to JavaScript frameworks and libraries like Angular, React, and Vue. In short, Bulma works *like* Bootstrap but without JavaScript.
Bulma并不能解决所有问题，但与手工编码Sass或CSS相比，可以*远远*更有效率。 而且由于Bulma可以编译为CSS，因此可以适应Angular，React和Vue等JavaScript框架和库。 简而言之，布尔玛的工作原理类似于Bootstrap，但没有JavaScript 。
Unlike Bootstrap, Bulma relies on CSS — not JavaScript. But like Bootstrap, ships with its own CSS Reset. Now, let’s walk through how Bulma works from first principles. I’m assuming you’re familiar with HTML/CSS but no more, thus this is what classic CSS looks like:
与Bootstrap不同，Bulma依赖CSS，而不是JavaScript。 但是像Bootstrap一样，它也带有自己的CSS Reset 。 现在，让我们逐步了解布尔玛如何根据第一原理进行工作。 我假设您熟悉HTML / CSS，但是，这就是经典CSS的样子：
Note: While this isn’t Bulma, it does demonstrate *how* Bulma works.
注意：虽然这不是布尔玛，但确实演示了布尔玛的工作原理。
<!DOCTYPE html><html> <head> … <style>p { line-height: 2;}</style> </head> <body> <p> A long time ago in a galaxy far far away… </p> </body></html>Here we defined a p in our HTML, and in our CSS defined all p’s as having double-spaced lines, for example line-height: 2. Wait — what if we don’t want all ps to be double-spaced? Or what if we want some but not *all* to be double-spaced? Then we can instead opt-in to CSS using classes:
在这里，我们在HTML中定义了p ，在CSS中将所有p定义为具有双倍行距的行，例如line-height: 2 。 等待-如果我们不希望所有p都加倍间隔怎么办？ 或者，如果我们希望某些而不是“全部”是双倍行距怎么办？ 然后我们可以使用类来选择加入CSS：
<!DOCTYPE html><html> <head> … <style>.double-spaced { line-height: 2;}</style> </head> <body> <p class="double-spaced"> A long time ago in a galaxy far far away… </p> </body></html>So we defined a class named double-spaced that we opt into versus having elements inherit CSS, like in the first example. And this is more sensible because it makes it harder for us to later overwrite our CSS. Still, we can go even further to make it harder, and we can make our class conditional:
因此，我们定义了一个名为double-spaced类，与第一个示例一样，我们选择加入该类，让元素继承CSS。 这是更明智的做法，因为这使我们以后很难覆盖CSS。 尽管如此，我们可以进一步加倍努力，使我们的课程成为有条件的：
<!DOCTYPE html><html> <head> … <style>p.double-spaced { line-height: 2;}</style> </head> <body> <p class="double-spaced"> A long time ago in a galaxy far far away… </p> </body></html>And now double-spaced requires the presence of a p element. This is conditional CSS, and we can go even further! We can use just classes, for example class-1.class-2 to create conditional classes. This is one of the techniques Bulma uses to create HTML/CSS contracts.
现在， double-spaced要求存在一个p元素。 这是有条件CSS ，我们可以走得更远！ 我们可以只使用类，例如class-1.class-2来创建条件类 。 这是布尔玛用于创建HTML / CSS合同的技术之一。
*AHEM* Are we just writing CSS in our HTML now…?
* AHEM *我们现在只是在用HTML编写CSS吗？
(ง •̀_•́)ง
(ง•̀_•́)ง
The difference here is that Bulma emphasizes common patterns using semantics — not one-to-one CSS rules. This means we use Bulma to describe relationships — not rules — and therefore is more powerful. Also, Bulma’s new documentation is amazing and takes a lot of the guesswork out of CSS.
此处的区别在于Bulma强调使用语义的通用模式，而不是一对一CSS规则。 这意味着我们使用布尔玛来描述关系而不是规则，因此功能更强大。 另外，Bulma的新文档非常了不起，并且消除了CSS的大量猜测。
In addition to conditional classes, Bulma defines plentiful HTML/CSS contracts, which leads to more flexible CSS and more idiomatic code. And this is great for sharing code across teams. These contracts detail the relationship of classes to one another. Here’s a simple example of an HTML/CSS contract:
除了条件类之外，Bulma还定义了很多HTML / CSS契约，从而带来了更灵活CSS和更多惯用的代码。 这非常适合在团队之间共享代码。 这些合同详细说明了类之间的关系。 这是HTML / CSS合同的简单示例：
<section class="section"> <div class="container"> ... </div></section>Given enough well-designed classes and contracts, we can create all kinds of beautiful and responsive websites backed with Bulma. Check out the expo! ⭐️ Now, before we get ahead of ourselves, let’s start with a “Hello World” and then the following slide — that’s no slide, it’s a website.
有了足够设计周到的课程和合同，我们就可以创建各种以布尔玛为后盾的精美且响应Swift的网站。 看看博览会！ ⭐️现在，在我们超越自己之前，让我们从“ Hello World”开始，然后是下一张幻灯片– 这不是幻灯片，而是网站 。
And in the near future, I’ll be releasing two ✌️ more articles detailing how we can build a beautiful blog and a Tesla launch page with Bulma! For updates, Follow me on Medium ✍️ and Twitter. ? I do, however, teach these in the free interactive Scrimba course. Click here to enroll for free! ?
在不久的将来，我将再发表两篇✌️更多文章，详细介绍我们如何与布尔玛建立一个漂亮的博客和一个特斯拉发布页面 ！ 对于更新，跟随我的中等 ✍️和Twitter的 。 ？ 但是，我确实在免费的互动式Scrimba课程中教授这些内容。 点击此处免费注册！ ？
And without further ado…
事不宜迟...
“你好，世界” (“Hello World”)
Now that we understand how Bulma works, let’s learn how to “Hello World”:
现在我们了解了布尔玛的工作方式，让我们学习如何“ Hello World”：
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Hello Bulma!</title> <link rel="stylesheet" href="https://…/bulma.min.css"> <script defer src="https://…/all.js"></script> </head> <body> <section class="section"> <div class="container"> <h1 class="title"> Hello World </h1> <p class="subtitle"> My first website with <strong>Bulma</strong>! </p> </div> </section> </body></html>Come back — don’t be scared! ? All Bulma websites start from this template. Let’s focus on the head element first; the link pointing to bulma.min.css loads Bulma, and the script pointing to all.js loads Font Awesome icons. Note: Bulma supports all icon font libraries.
回来-不要害怕！ ？ 所有布尔玛网站均从其模板开始。 首先让我们关注h ead元素； 的升ink指向至b ulma.min.css负载布尔玛，并且S cript指向ll.js负载˚F ONT真棒图标。 注意： Bulma支持所有图标字体库。
And Bulma prefers to use HTML5 elements, for example section versus div where appropriate. It’s more readable and idiomatic. Wait — what if the client’s browser is outdated and thus doesn’t acknowledge HTML5 elements? Bulma takes care of that, too!
而且Bulma更喜欢使用HTML5元素 ，例如在适当的地方使用section与div 。 它更具可读性和惯用性。 等待-如果客户端的浏览器已过时，因此不承认HTML5元素怎么办？ 布尔玛也照顾这一点！
/* bulma.css#L312 */article,aside,figure,footer,header,hgroup,section { display: block;}Thanks Bulma! ? This guarantees that HTML5 elements are rendered as block elements despite the client’s browser. OK — let’s review the body:
谢谢布尔玛！ ？这保证了尽管客户端使用了浏览器，HTML5元素仍呈现为块元素。 好的-让我们回顾一下ody:
<section class="section"> <div class="container"> <h1 class="title"> Hello World </h1> <;p class="subtitle"> My first website with <strong>Bulma<;/strong>! </p> </div></section>When I first learned Bulma, I (╯°□°)╯︵ ┻━┻ because it’s so terse. But once I calmed down, I began to recognize an emergent pattern: the shape of our website’s tree. And it’s much simpler than I thought:
当我第一次学习布尔玛时，我(╯°□°)╯︵┻━┻因为它是如此的简洁，但是当我冷静下来之后，我开始认识到一种新兴的模式：我们网站树的形状，它比我简单得多。思想：
.section | .container / \.title .subtitle / \ ... ...Ahhhh. Where .section defines the start of new content, .container is a wrapper class for content (like text) and is used for responsive design. And .title and .subtitle are for aesthetics. Having done so, Bulma took care of dozens of details like best practices and responsive design. ??
啊 .section定义了新内容的开始， .container是内容(如文本)的包装类，用于响应式设计。 .title和.subtitle是为了美观。 这样做之后，布尔玛照顾到了许多细节，例如最佳实践和快速响应设计。 ??
超越“ Hello World”？ (Beyond “Hello World” ?)
Think of Bulma as lego pieces with modifiers, like color variants. And so, composing this website requires just a few pieces and modifiers, such as .columns, .media, .icon — that’s it. Though the code *is* more complex, that’s because it’s code. The composition of the website is what’s simple:
将布尔玛(Bulma)视为带有修饰符的乐高积木，例如颜色变体。 因此，组成这个网站只需要几个步骤和修饰符，例如.columns ， .media和.icon 。 尽管代码*更复杂*，但这是因为它是代码。 该网站的组成很简单：
.column | .media / \.media-left .media-content / \ .icon .content / \ ... ...The above is what one Bulma column looks like as a tree. And in code:
以上是布尔玛的一棵树的样子。 并在代码中：
…<div class="column"> <article class="media notification is-info"> <figure class="media-left"> <span class="icon is-medium"> <i class="fab fa-2x fa-css3-alt"></i> </span> </figure> <div class="media-content"> <div class="content"> <h1 class="title is-size-4"> Bulma </h1> <p class="is-size-5"> <strong>Bulma</strong> is a modern CSS framework... </p> </div> </div> </article></div>…Note: Modifiers such as .notification, .is-info, .is-medium, and so on help personalize our website. Some modifiers are conditional and require another class, and some are general-use. You can learn more about them here. And for an interactive playground of the complete website, click here. ?
注意 ： .notification ， .notification .is-info ， .notification .is-medium等修饰符有助于个性化我们的网站。 有些修饰符是有条件的，需要另一类，有些则是通用的。 您可以在此处了解有关它们的更多信息。 有关完整网站的交互式游乐场， 请单击此处 。 ？
Bulma is fascinating! We can design beautiful and responsive websites using semantics — without writing CSS.
布尔玛令人着迷！ 我们可以使用语义设计美观而响应Swift的网站，而无需编写CSS。
最后的想法 ？ (Final thoughts ?)
The thing I love most about Bulma is that it’s a means to understand how its creator thinks without having to ask him. How do I do X? Look it up! This is a powerful idea — that we can look into a CSS guru’s mind for answers, rather than hack unideal solutions ourselves.
我最喜欢布尔玛的地方是，它是一种了解创作者的想法而无需询问他的方式。 我该怎么做X？ 查一下！ 这是一个有力的想法-我们可以研究CSS专家的思想来寻求答案，而不是自己破解不理想的解决方案。
Thanks for reading! I was hesitant to learn Bulma at first, but then came to appreciate how powerful and idiomatic it can be. So I decided that Bulma shouldn’t go unnoticed, because designing and developing websites can often be *much* harder than anticipated. Again — thanks for reading! ???
谢谢阅读！ 开始时我很犹豫，但后来开始欣赏它的强大和惯用性。 因此，我认为Bulma不应被忽视，因为设计和开发网站通常比预期的要难得多。 再次- 感谢您的阅读！ ???
像这样？ 还有两个-单击此处和此处 ！ (Like this? There’s two more — click here and here!)
考虑在Patreon上支持jgthms ！ 他决心以布尔玛为生和全职工作。 (Consider supporting jgthms on Patreon! He’s determined to make Bulma his livelihood and full-time commitment. ??)
翻译自: https://www.freecodecamp.org/news/free-course-level-up-with-bulma-css-d82dcb4b980a/
1006
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
