bulma.css

by ZAYDEK

由ZAYDEK

0-60 in 1.9s？ (0-60 in 1.9s ?)

如何建立一个？ 具有Bulma CSS的特斯拉响应页面 (How To Build A ? Responsive Tesla Launch Page With Bulma CSS)

加速可持续网页设计的到来 (To accelerate the advent of sustainable web design)

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开发人员提供服务的数据。 在阅读本文之前或之后，我创建了一个简短的问卷调查表以进行检查。 请检查一下-谢谢！ 现在，回到我们的常规计划编程。

您好，互联网！ (埃隆，你好！) (Hello internet! (Hi Elon!))

I’m here to disabuse you from the belief that building websites has to be hard. Furthermore, in mere minutes we mere mortals will learn how to build a beautiful and(!) responsive Tesla launch page using Bulma.

我是在这里让您不相信建立网站一定很困难的信念。 此外，在短短的几分钟内，我们这些凡人将学习如何使用布尔玛构建漂亮且响应Swift的特斯拉发布页面。

布尔玛？ Bulma是CSS框架，是@jgthms的创意。 ？ (Bulma?! Bulma is a CSS framework and brainchild of @jgthms. ?)

我还在Scrimba.com上教授了免费的布尔玛CSS全长课程，我们在其中构建这些️？ 设计。 点击此处免费注册！ ？ (I also taught a free, full-length Bulma CSS course on Scrimba.com, where we build these ️? designs. Click here to enroll for free! ?)

Scrimba.com是面向前端开发人员的下一代平台，可以将其网站记录和共享为交互式截屏视频！ ？ (Scrimba.com is a next-generation platform for front-end developers to record and share their websites as interactive screencasts! ?)

布尔玛？ ¯\ _(ツ)_ /¯ (Bulma? ¯\_(ツ)_/¯)

Bulma solves a lot of problems — a lot. Whether you need a visual component, or you want to understand how a component might be codified, with best practices and best-in-class documentation, Bulma’s here to help! ?‍?

布尔玛解决了很多问题-很多。 无论您是需要视觉组件，还是想了解如何使用最佳实践和一流的文档来编写组件 ，布尔玛都将在这里为您提供帮助！ ‍

Bulma’s not even version 1.0, and has major adoption with 150K+ downloads a month and 26K+ stars on GitHub. Think of Bulma as a competitor to Bootstrap, despite the fact that it’s *just* CSS. ? Look ma, no YavaScript!

Bulma的版本甚至不是1.0，并且已被广泛采用，每月有150K +的下载量 ，在GitHub上有26K +的星级 。 尽管Bulma只是CSS，但可以将Bulma视为Bootstrap的竞争对手。 ？ 看吧，没有Y avaScript！

布尔玛如何运作？ (How does Bulma work?)

Bulma uses several techniques to create a cohesive interface for developers. We need just be concerned with describing our website’s design using semantic classes — not elements — or in other words, idiomatic templates.

Bulma使用多种技术来为开发人员创建一个紧密的接口。 我们只需要关心使用语义类(而不是元素)或惯用模板来描述我们网站的设计。

These semantic templates can be thought of as interconnecting building-blocks we use to build websites fast! ⚡️ These components are also responsive out-of-the-box, meaning we can focus more on our content than the code.

这些语义模板可以被认为是我们用来快速构建网站的相互联系的构建模块！ ⚡️这些组件也具有开箱即用的响应能力，这意味着我们可以比代码更专注于我们的内容。

困惑？ 开始吗？ ^ h 埃雷首先学习布尔玛的基本面。 (Confused? Start ? here to first learn the fundamentals of Bulma.)

那个怎么样 ？ 设计？ (What about that ? design?)

This design can be better understood as three parts:

此设计可以更好地理解为三个部分 ：

☝️Responsive background✌️ Bulma components + modifiers? CSS Grid

☝️ 响应式背景 ✌️ 布尔玛组件+修饰符 ？ C SS网格

Look a littttle closer…see something? The background isn’t continuous! ? This isn’t a mistake; the Tesla team optimized for desktop, tablet, and mobile. With that as our base, we’ll add Bulma components and modifiers, then use CSS Grid to achieve the intricate responsive design for the specs.

仔细看一下……看到什么了吗？ 背景不是连续的！ ？ 这不是错误； Tesla团队针对台式机，平板电脑和移动设备进行了优化。 在此基础上，我们将添加Bulma组件和修饰符，然后使用C SS Grid实现规格的复杂响应设计。

☝️响应式背景 (☝️ Responsive background)

These are the actual background images I ??????? from tesla.com! ?‍☠️ Sooo…how do we build a responsive background? Using media queries, obvs! Media queries allow us to, given certain circumstances, override CSS.

这些是实际的背景图像I ??????? 来自tesla.c om！ ☠️Sooo ...我们如何建立快速响应的背景？ 使用媒体查询，观察！ 在某些情况下，媒体查询使我们能够覆盖CSS。

And media queries are powerful; we can override CSS depending on the website’s rendered aspect ratio, the device’s aspect ratio, or simple-and-plain: the website’s rendered width. Yeah — let’s go with that.

媒体查询功能强大； 我们可以根据网站的渲染长宽比，设备的长宽比或简单的方式(网站的渲染宽度)覆盖CSS。 是的-让我们一起去吧。

First, we start with one of Bulma’s components, .hero, and use one of its modifiers, is-fullheight, to create a fullscreen section. Then, we assign various backgrounds for common widths using media queries:

首先，我们从布尔玛的一个组件.hero ，并使用其修饰符之一is-fullheight创建一个全屏部分。 然后，我们使用媒体查询为通用宽度分配各种背景：

Great — so now our website swaps backgrounds at 1024px and 768px. Sometimes when this happens, there’s a flash of white, so black conceals it. And center and cover just help align and focus the image.

太好了-现在我们的网站将背景1024px和768px 。 有时，当这种情况发生时，会有白色闪烁，因此black将其隐藏。 center和cover仅有助于对齐和聚焦图像。

Believe it or not, background is shorthand for 8 CSS properties: ?

信不信由你， background是8个CSS属性的简写 ：

1.️ background-clip2. background-color3. background-image4. background-origin5. background-position6. background-repeat7. background-size8. background-attachment

1.️background background-clip 2. background-color 3. background-image 4. background-origin 5. background-position 6. background-repeat 7. background-size 8. background-attachment

We made use of -color, -image, -position, and -size!

我们利用了-color ， -image ， -position和-size ！

B️布尔玛组件+修饰符 (✌️ Bulma components + modifiers)

This is where Bulma gets interesting. Which one is the real launch page?!

这是布尔玛变得有趣的地方。 真正的启动页面是哪一个？

…

…

…

…

…

…

The left one is authentic! ٩(;ʘ¿ʘ;)۶ Wait…how can Bulma be so versatile? Well — remember modifiers? Yeah so, with enough modifiers at our disposal, we can create a varied aesthetic, even without editing Bulma’s source.

左一个是正品 ！ ۶(;ʘ¿ʘ;)۶等等...布尔玛怎么会如此多才多艺？ 好吧-还记得修饰符吗？ 是的，即使没有编辑布尔玛的资料，我们只要拥有足够的修饰符，就可以创造出多种美感。

Now, without further ado, I present the launch page as ASCII art! ??

现在，事不宜迟，我将启动页面显示为ASCII艺术！ ??

You can ignore the IDs wrapped with parentheses for now. Other than that, these are a few of the available Bulma components. And imagine this, ? Bulma’s components are responsive, too! Whoa.

您现在可以忽略用括号括起来的ID。 除此之外，还有一些可用的布尔玛组件 。 想象一下， Bulma的组件也具有响应能力！ 哇

Bear in mind, this is far less terse than the actual implementation, see here. I’m obfuscating modifiers and extraneous HTML to show how Bulma works; we link components together, just like LEGO, but to design a webpage!

请记住，这比实际的实现要简洁得多， 请参见此处 。 我混淆了修饰符和无关HTML，以显示布尔玛的工作方式； 我们将各个组件链接在一起，就像乐高游戏一样，只是设计一个网页！

And modifiers are how we can achieve a Tesla-like aesthetic, despite that Bulma has nothing to do with Tesla. Throughout the code, notice the *extensive* use of has-* and is-*; this is what gives us a varied aesthetic.

尽管布尔玛与特斯拉无关，但修饰符是我们如何实现特斯拉式美学的方式。 在整个代码中 ，请注意has-*和is-*的*广泛使用； 这就是给我们带来多样化美学的原因。

您可以点击？ ^ h 埃雷更多地了解布尔玛的组件。 (You can click ? here to learn more about Bulma’s components.)

？ CSS网格 (? CSS Grid)

Do we need CSS Grid? I’m not sure, (>﹏<) but I found programming the responsive design for the specs much easier than I anticipated using grid than some other technique. So, here’s where those IDs come into focus:

我们需要CSS网格吗？ 我不确定(>﹏<)，但是我发现为规范编写响应式设计要比使用网格预期的要容易得多。 因此，以下是这些ID的重点：

Hehehe…so we have IDs #a through #e, with #a being some marketing, and #e being the “Reserve Now” button. The desired effect is that on mobile we sneak the “Reserve Now” button under #b, #c, and #d.

呵呵……所以我们有ID #a到#e ，其中#a是一些营销， #a #e是“立即预订”按钮。 理想的效果是在移动设备上，我们在#b ， #b #c和#d下潜入了“立即预订”按钮。

3…

3…

2…

2…

1… ?

1…？

In the first slide, we assign identifiers to each of the IDs using grid-area. Then, we communicate to #grid the *shape* of our grid using ASCII art! ? This is the default grid; for desktop and tablet.

在第一张幻灯片中，我们使用grid-area将标识符分配给每个ID。 然后，我们使用ASCII艺术与#grid的* shape *通信！ ？ 这是默认网格； 用于台式机和平板电脑。

Last — remember media queries? YAS! All we need to do is to communicate the shape of our grid for mobile. Imagine this…we write a single media query to override the shape of our grid for mobile. ?⚡️

最后-还记得媒体查询吗？ 是的！ 我们需要做的就是传达移动网格的形状。 想象一下……我们编写了一个媒体查询来覆盖移动电话网格的形状。 ⚡️

布尔玛课程提供完整的交互式代码？ 嗯 (The full interactive code is available in the Bulma course ? here.)

还是……保时捷怎么样？！？ ？ (Or…HOW ABOUT PORSCHE?!!? ?)

Nikita Rudenko @rdnkta, who is new to #100DaysOfCode(!), created this after finishing the course, and shared it with me! Cheers! ?

＃100DaysOfCode(！)的新用户Nikita Rudenko @rdnkta ，在完成课程后创建了此文件，并与我分享了！ 干杯! ？

恭喜！ 谢谢阅读！ 6(^ω^)9 (Congratz! Thanks for reading! 6(^ω^)9)

Now is a phenomenal time like no other to get into front-end development. With the introduction of CSS specs like Flexbox and CSS Grid, and frameworks like Bulma, building for the web has never been more accessible!

现在是进入前端开发的绝佳时机。 随着诸如Flexbox和CSS Grid之类CSS规范的引入，以及诸如Bulma之类的框架的引入，为网络构建提供了前所未有的便利！

喜欢这篇文章吗？ 就像这样还有另一篇文章！ 点击？ e！ (Like this article?! There’s one more article just like it! Click ? here!)

翻译自: https://www.freecodecamp.org/news/how-to-build-a-responsive-tesla-launch-page-with-bulma-css-2bf484057349/

bulma.css