by Henrik Ståhl

通过HenrikStåhl

I recently decided to try out a CSS framework. As a journalist, I’ve been taught to work from the ground up, do things thoroughly, and never “borrow” stuff from others (in the news industry, that’s considered plagiarism). Therefore I’ve been kind of reluctant to use frameworks since starting my coding journey. Simply because I felt that it would be like cheating, if you know what I mean.

我最近决定尝试一个CSS框架。 作为一名记者，我被教导要从头开始工作，做事要彻底，绝不要从别人那里“借”东西(在新闻界，这被认为是窃)。 因此，自开始编码之旅以来，我一直不太愿意使用框架。 仅仅因为我知道，如果您知道我的意思，那就像在作弊。

I couldn’t have been more wrong.

我不可能错得更多。

First things first. After experimenting a little bit on my own with video as fullscreen background — a very fun and interesting challenge, by the way — I wanted more actual content to work with before diving head first into Bulma, a modern framework based on Flexbox created by Jeremy Thomas.

首先是第一件事。 在我自己对全屏背景视频进行了一些尝试之后(顺便说一句，这是一个非常有趣且有趣的挑战)，我想先接触更多实际内容，然后再深入研究Bulma ，这是由Jeremy Thomas创建的基于Flexbox的现代框架。

That’s why I eventually decided not to experiment with Bulma on my May The Code website.

这就是为什么我最终决定不在我的May The Code网站上尝试使用Bulma的原因。

Instead, I chose to redesign a website I created for my now defunct Swedish rock band Evangeliet (we’ve been on a hiatus since 2014).

相反，我选择重新设计了一个网站，该网站是为我现在已经不复存在的瑞典摇滚乐队Evangeliet创建的 (自2014年以来我们一直处于停滞状态)。

In this story, I will tell you why I felt bullied by PHP, how I failed and failed again despite reading through the documentation over and over, and what I finally learned by screwing everything up.

在这个故事中，我将告诉您为什么我感到被PHP欺负，尽管一遍又一遍地阅读了文档，但我又一次失败又失败了，最后通过搞砸了一切，我终于学到了什么。

新首页 (The New Front Page)

I had already implemented a first iteration of a front page with fullscreen video as background and a simple nav bar, so the first thing I did was to replace my somewhat ugly navigation bar with a Bulma navigation.

我已经用全屏视频作为背景和一个简单的导航栏实现了首页的第一次迭代，所以我要做的第一件事是用布尔玛导航代替了我难看的导航栏。

Adding the nav wasn’t particularly hard. At least not after reading the documentation a bunch of times. But the fullscreen video as background was a bit trickier. After some fruitless experimentations with different Bulma layout elements, such as .hero and .container is-fluid, I created a custom CSS to handle the fullscreen background:

添加导航并不是特别困难。 至少在阅读了很多次文档后才知道。 但是将全屏视频作为背景有点棘手。 在对不同的布尔玛布局元素(例如.hero和.container is-fluid进行了一些毫无结果的尝试之后，我创建了一个自定义CSS来处理全屏背景：

It worked! At least on desktop. As soon as I grabbed my phone to check it out on a smaller viewport, I quickly found out that I had been brutally punished by my outdated desktop-first approach:

有效！ 至少在台式机上。 当我抓住手机在较小的视口中检出手机时，我很快发现自己已经因过时的桌面优先方法而受到残酷的惩罚：

And as you can see, I accidentally put the nav bar and the fullscreen background video in separate sections in the HTML document, resulting in the former being detached from the latter.

如您所见，我不小心将导航栏和全屏背景视频放在HTML文档的不同sections中，导致前者与后者分离。

I was nevertheless motivated to move forward, so I left it the way it was for the time being.

尽管如此，我还是有前进的动力，所以我暂时保留了它。

音频页面 (The Audio Page)

Next, I wanted to create a neat audio page. The page itself is pretty straightforward: it’s composed of three album “blocks” with Spotify lists. First, I created a fluid container with an image:

接下来，我想创建一个整洁的音频页面。 该页面本身非常简单： 由三个带有Spotify列表的专辑“块” 组成 。 首先，我创建了一个带有图像的fluid container ：

<div class="container is-fluid">  <figure class="image">    <img src="/smoke.jpeg" alt="Evangeliet">  </figure></div>

Then, I scanned the Bulma documentation in the hopes of finding a component that would fit my need. I eventually settled on a card:

然后，我扫描了Bulma 文档 ，希望找到适合我需求的组件。 我最终选择了card ：

<div class="card">          <div class="card-image">            <figure class="image is-square">              <img src="/Konturen.jpeg" alt="Konturen av en dröm">            </figure>          </div>          <div class="card-content">            <div class="media">              <div class="media-left">              </div>              <div class="media-content">                <p class="title is-4">Konturen av en dröm</p>                <p class="subtitle is-6">2013</p>              </div>            </div>

I then nestled a .card-content class inside the card component:

然后，我在card组件内嵌套了一个.card-content类：

<div class="content">              <iframe src="https://open.spotify.com/embed?uri=spotify:album:2bXUzHUmEZpXpTc6mNbQgH&theme=white" width="100%" height="380" frameborder="0" allowtransparency="true"></iframe>              <br>              <small><strong>UPC:</strong> 0885014300335</small>              <small><strong>Catalog Number:</strong> RU 27130</small>              <br>              <small><strong>Release date:</strong> 18 Dec 2013</small>            </div>          </div>        </div>

To get a nice Spotify player, I fetched an embed code from the Spotify Developer docs. (I changed the width from 300px to 100%, and the theme from default black to white, which suits my design better.)

为了获得一个不错的Spotify播放器 ，我从Spotify开发人员文档中获取了一个嵌入代码。 (我将宽度从300px更改为100% ，并将主题从默认的黑色更改为白色，这更适合我的设计。)

I created three cards, added some album info, and bundled them with column elements. The result was pleasing:

我创建了三张卡片，添加了一些专辑信息，并将它们与column元素捆绑在一起。 结果令人愉悦：

图像网格 (The Image Grid)

After that, I wanted to create some sort of page containing pictures of the band. I wanted something more challenging than a standard “band member biographies” page, which wouldn’t have differed all that much from the audio page.

之后，我想创建一个包含乐队图片的页面。 与标准的“乐队成员传记”页面相比，我想要更具挑战性的东西，该页面与音频页面的差别不会太大。

I scanned the documentation once again and decided to do something with the tiles element. This element is

我再次扫描了文档 ，并决定对tiles元素执行某些操作。 这个元素是

“[a] single tile element to build 2-dimensional Metro-like, Pinterest-like, or whatever-you-like grids.”

“ [一个] 瓦片元素可构建二维类似于Metro，Pinterest或任何您喜欢的网格。”

I read and contemplated the docs over and over, and reached a conclusion: since I still consider myself a markup beginner, I needed to do some hands-on experimentation in order to wrap my head around the Bulma tiles. Because reading… well, it didn’t get me anywhere.

我反复阅读并考虑了这些文档，并得出了一个结论：由于我仍然认为自己是标记初学者，因此我需要进行一些动手实验，以便将头缠在布尔玛砖上。 因为阅读……好吧，它并没有带我去任何地方。

So I basically copy-pasted one of the examples from the docs and altered the content. I flipped stuff around, effectively breaking everything. Learning by screwing up, right? :)

因此，我基本上从文档中复制粘贴了一个示例，并更改了内容。 我翻转东西，有效地破坏了一切 。 搞砸学习吧？ :)

After messing around with the different classes, I opted for a 3 column grid structure, composed of various tile elements. Here’s an example of the markup:

在弄乱了不同的类之后，我选择了一个三列网格结构，该结构由各种图块元素组成。 这是标记的示例：

<div class="tile is-ancestor">        <div class="tile is-parent">          <article class="tile is-child box">            <figure>              <img src="/bilder/molotov.jpg">              <figcaption>                Henrik lägger mjuka riff i <strong>Molotov Studios</strong> 2010. Inspelningen rattades av Martin Karlsson.              </figcaption>            </figure>          </article>        </div>        <div class="tile is-parent">          <article class="tile is-child box">            <p class="title">Stadsmissionen&lt;/p>            <p class="subtitle">2009</p>            <figure>              <img src="/bilder/duo.jpg">              <figcaption>                På den här tiden var <strong>Evangeliet</strong> fortfarande en duo.                <br>                FOTO: Noelia Ivars Rico              </figcaption>            </figure>          </article>        </div>        <div class="tile is-parent">          <article class="tile is-child box">            <figure>              <img src="/bilder/bandbild2.jpg">              <figcaption>                Cristóbal, David, Henrik R och Henrik S i replokalen i Fruängen, januari 2011.              </figcaption>            </figure>          </article>        </div>      </div>

The example above is the three top images on the webpage. The structure of the tile boxes on the page are more or less the same as in the docs, except for the fact that I added images in all boxes except one. Also, I inserted column elements and added three images in one of the boxes.

上面的示例是网页上的前三张图片 。 除了我在除一个框外的所有框中添加了图像的事实，页面上tile boxes的结构与文档中的框基本相同。 另外，我插入了column elements并在其中一个框中添加了三个图像。

Which required a bit of patience, given the fact that:

考虑到以下事实，这需要一点耐心：

1. I still get dizzy quite easily by all the tags and end tags when nesting stuff, and
   嵌套内容时，所有标签和结束标签仍然让我很头晕，并且

2. I wasn’t aware of the visual feature in Atom highlighting opening and closing HTML tags. ??‍

   我不了解Atom突出显示打开和关闭HTML标签的视觉功能。 ?? ‍

I could have gone for either of the different structures I tested during the experimental phase, but I considered the layout provided in the Bulma docs the best fit. Why fix something that isn’t broken?

我可以选择在实验阶段测试过的两种不同结构中的任何一种，但是我认为Bulma文档中提供的布局最合适。 为什么要修复未损坏的东西？

And honestly, I like the fact that the mobile users see a few images before getting to the text chunk. That’s why I switched back to the current structure after initially mirroring the 2nd column and placing its five boxes in the top of the page, effectively positioning the tall vertical box in the top left corner on desktop.

老实说，我喜欢以下事实：移动用户在进入文本块之前会看到一些图像。 这就是为什么在最初镜像第二列并将其五个框放置在页面顶部，然后将高大的垂直框有效放置在桌面左上角之后，我又切换回当前结构的原因。

联系人页面 (The Contact Page)

Last but not least, I wanted a contact page. With an email form and everything.

最后但并非最不重要的一点是，我想要一个联系页面。 带有电子邮件表格和所有内容。

Again, the documentation provided everything I needed in terms of markup. A no-brainer. Fortunately, I had already tried to learn just a tiny bit of PHP with the sole purpose of creating an online form (for a different website though).

同样，该文档提供了我在标记方面所需的一切。 不费吹灰之力。 幸运的是，我已经尝试过只学习一点点PHP，其唯一目的是创建在线表单(尽管适用于其他网站)。

And I had failed. Hard.

我失败了。 硬。

I don’t know why other people seem to hate PHP, I guess it’s for various reasons. But I do know that personally, I dislike PHP because I felt bullied by it.

我不知道为什么其他人似乎讨厌PHP，我想这是出于各种原因。 但是我个人确实知道，我不喜欢PHP，因为我被它欺负了。

It felt like I’d tried everything. I read a bunch of blog posts and worked through the entire W3Schools tutorial. But I still didn’t grasp a fraction of PHP.

感觉就像我已经尝试了一切。 我阅读了许多博客文章，并完成了整个W3Schools教程。 但是我仍然不了解PHP的一部分。

Anyway, during my short stint as a PHP marauder, I stumbled upon Formspree, an online form service created by Rohit Datta.

无论如何，在我作为PHP抢劫者的短暂时间里，我偶然发现了由Rohit Datta创建的在线表单服务Formspree 。

As I had previously used Formspree both on the May The Code website and the Check Your Facts website with great results, I knew that it would work for my band’s website as well.

正如我之前在May The Code网站和 Check Your Facts网站取得了不错的成绩，我知道它也可以用于我的乐队的网站。

I added the field and label classes needed, as well as the required form action=”https://formspree.io/xx@xx.se" method=”POST" class — and that was it!

我添加了所需的field和label类，以及所需的form action=”https://formspree.io/xx@xx.se" method=”POST"类-就是这样！

After submitting the form and confirming my email, everything worked like a charm.

提交表格并确认我的电子邮件后，所有内容都像一个魅力。

I fixed the size of the form on desktop with a few lines of CSS in my custom stylesheet, but not until way later. The form was up and running and I was happy.

我使用自定义样式表中的几行CSS固定了桌面上表单的大小，但直到后来才固定。 表格已启动并运行，我很高兴。

怎么样呢 ？？ (What about the ??)

Now I was left with just one challenge: how can I make the hamburger menu on mobile actually work? ?

现在，我只剩下一个挑战：如何使手机上的汉堡菜单真正起作用？ ？

The Bulma documentation provided markup only. The functionality itself was up to me to fix.

Bulma文档仅提供标记。 功能本身取决于我自己修复。

Since then, Jeremy has updated the docs and replaced the old nav component with the new navbar component. Here’s an example of the old one:

从那时起，Jeremy更新了文档，并用新的navbar组件替换了旧的nav组件。 这是一个旧的例子：

<!-- This "nav-toggle" hamburger menu is only visible on mobile -->  <!-- You need JavaScript to toggle the "is-active" class on "nav-menu" -->  <span class="nav-toggle">    <span></span>    <span></span>    <span></span>  </span>  <!-- This "nav-menu" is hidden on mobile -->  <!-- Add the modifier "is-active" to display it on mobile -->  <div class="nav-right nav-menu">    <a class="nav-item">      Home    </a>    <a class="nav-item">      Documentation    </a>    <a class="nav-item">      Blog    </a>

I’ve gained a lot of ground in the few months, but I’m not yet comfortable enough with HTML and CSS to make the leap to real programming, so I really wanted to make this work without diving into the vast sea of JavaScript.

在过去的几个月中，我已经取得了很多进展，但是我对HTML和CSS还不足够满意，无法实现真正​​的编程，因此我真的想在不深入JavaScript的情况下进行这项工作。

I had no idea how.

我不知道如何。

That’s why I opted for a horizontal menu bar all the way down to the smallest viewports, after what felt like hours of investigations. All I needed to do was add the is-mobile modifier to the nav-item class:

这就是为什么在经过数小时的调查之后，我一直选择水平菜单栏一直到最小的视口。 我需要做的就是将is-mobile修饰符添加到nav-item类：

<nav class="nav has-shadow">    <div class="container">      <div class="nav-left">        <a class="nav-item is-tab is-mobile" href="/">Hem</a>        <a class="nav-item is-tab is-mobile" href="/musik">Musik</a>        &lt;a class="nav-item is-tab is-mobile" href="/bandet">Bandet</a>        <a class="nav-item is-tab is-mobile is-active" href="/kontakt">Kontakt</a>      </div>  </nav>

I could do this because my menu consisted of just four components: front page, audio page, band page, and contact page. Because of this, everything was visible — and accessible — even in smaller viewports.

我之所以可以这样做，是因为我的菜单仅包含四个部分：首页，音频页面，乐队页面和联系页面。 因此，即使在较小的视口中，所有内容都是可见的并且可以访问。

A week or so later, I stumbled upon this great thread on GitHub. The user rudedogg had the exact same problem as I did. Many different solutions are provided in the thread, such as

大约一周后，我偶然发现了GitHub上的这个很棒的线程 。 用户rudedogg遇到了与我完全相同的问题。 线程中提供了许多不同的解决方案，例如

Yeah you simply need a JS event to handle the click and “add” or “remove” the ‘.is-active’-class on ‘#nav-menu’.

是的，您只需要一个JS事件来处理单击并“添加”或“删除”＃nav-menu上的“ .is-active”类。

and

和

React snippet (w/o jQuery) on an element with className="nav-toggle" onClick={() => { let toggle = document.querySelector(".nav-toggle"); let menu = document.querySelector(".nav-menu"); toggle.classList.toggle("is-active"); menu.classList.toggle("is-active"); }}

对具有className="nav-toggle" onClick={() => { let toggle = document.querySelector(".nav-toggle"); let menu = document.querySelector(".nav-menu"); toggle.classList.toggle("is-active"); menu.classList.toggle("is-active");的元素上的代码片段(不带jQuery) className="nav-toggle" onClick={() => { let toggle = document.querySelector(".nav-toggle"); let menu = document.querySelector(".nav-menu"); toggle.classList.toggle("is-active"); menu.classList.toggle("is-active"); className="nav-toggle" onClick={() => { let toggle = document.querySelector(".nav-toggle"); let menu = document.querySelector(".nav-menu"); toggle.classList.toggle("is-active"); menu.classList.toggle("is-active"); }}

Nothing seemed to completely fill my need. Until I scrolled down and found this incredibly humble, short, and brilliant comment by shaneturner:

似乎没有什么可以完全满足我的需求。 直到我向下滚动并发现shaneturner的这一令人难以置信的谦虚，简短和出色的评论：

A bit more succinct on the nav item itself: <span class="nav-toggle" onclick="document.querySelector('.nav-menu').classList.toggle('is-active');">

导航项本身更简洁： <span class="nav-toggle" onclick="document.querySelector('.nav-menu').classList.toggle('is-active') ;”>

I’m in no position to determine if this is the best solution, neither if it’s actually better than any other suggestion in the GitHub thread. But I tried it out and it worked immediately, right out of the box.

我无处确定这是否是最佳解决方案，也无法确定它是否比GitHub线程中的任何其他建议更好。 但是我尝试了一下，它立即可用，立即可用。

迭代 (Iterations)

I was done. Mission complete.

我做完了 任务完成。

It felt so good! Not only had I been able to build an entire website using Bulma — I had also learned a great deal about HTML and CSS scanning through the documentation and experimenting with the different elements.

感觉真好！ 我不仅能够使用Bulma建立整个网站，而且还通过文档学习了HTML和CSS扫描并尝试了不同的元素，从而学到了很多。

What had first felt like a mountain to climb turned into a medium-sized hill, and here I was standing at the top.

最初感觉就像要爬山的感觉变成了一座中等大小的小山，我站在这里的顶端。

I wasn’t fully satisfied though. Now I knew how to use Bulma to build a website, but the website I’d built wasn’t anyway near perfect. Next, I wanted to climb the next hill, the higher one, and come just a little bit closer to perfection. In other words: using Bulma to build a website I’m actually proud of.

不过我并不完全满意。 现在我知道了 使用布尔玛建立网站，但我建立的网站并非完美。 接下来，我想攀登下一个更高的山丘，然后稍微接近完美。 换句话说：使用Bulma建立网站实际上让我感到自豪。

And I did.

而我做到了。

But that’s another story.

但这是另一个故事。

Henrik Ståhl is a journalist with more than 15 years of experience, recently turned Product Owner at Bonnier News, working with the digital development of Dagens industri and Dagens Nyheter. He’s also co-founder of the podcast Check Your Facts. On his spare time, he’s trying to learn programming. If you like this story, please hit the like button, and visit the Medium publication May The Code Be With Me!

HenrikStåhl是一位拥有15年以上经验的记者，最近成为Bonnier News的产品负责人，从事Dagens industri和Dagens Nyheter的数字开发工作。 他还是“ 检查您的事实 ”播客的共同创始人。 在业余时间，他正在尝试学习编程。 如果您喜欢这个故事，请按“赞”按钮，然后访问中型出版物May The Code Be Me Me ！

翻译自: https://www.freecodecamp.org/news/colorful-fundamentals-the-reward-of-building-with-bulma-7b14883317bd/