关于卜马

Bulma是一个流行的开源CSS框架, 轻量而易用; 基于Flexbox的现代CSS框架, 具有响应式、模块化、可定制等诸多亮点, 而且语法简单, 轻量易用。本文档介绍了基本概念与特性, 创建页面布局, 组件如何工作, 如何设计具体的UI元素, 如何嵌入JavaScript, 如何与流行的前端框架React、Angular和Vue集成, 等等。

作为广受赞誉的开源杰作, 拥有丰富的组件和文档, 对初学者十分友好, 即便不会编写CSS, 也能轻松创建出美观的网页, 帮助前端开发者用更少的CSS代码实现更多功能!

作者简介

• 杰里米·托马斯从事网页设计逾10年。他曾在法国学习平面设计, 在一堂无障碍设计课上接触到了CSS, 对其一见钟情并决定以此为职业。他曾任职于索尼、微软、路易威登以及科技初创企业, 也做过自由职业者和培训讲师。 2016年初, 他开发了一个小型框架作为开发项目的脚手架, 并将该框架的代码开源, Bulma由此诞生。之后他一直活跃于开源社区, 发布了MarkSheet、CSS指南、HTML指南和Web设计的4分钟系列教程。他的目标是不断分享他从日常工作中获得的知识。

合著者和贡献者

• 奥列克西·波切辛是一位专业的Web开发人员, 有9年多的跨平台交互界面设计和开发经验。他曾与沃尔沃、斯堪尼亚、大众、雷诺、约翰 · 刘易斯合伙公司、汤森路透等公司合作过。2017年, 他迷上了Bulma, 因为它功能完备, 能为任何类型的项目构建现代UI。

• 米科·劳哈卡里热衷于创建Web, 是个Web迷。自第一轮互联网泡沫破灭后, 他一直对Web充满热情。他曾在瑞典卡尔马尔大学学习网络编程, 拥有丰富的编程语言知识。

• 阿斯拉姆·沙是Risk.Ident公司的高级JavaScript开发人员, 在为中小型企业开发前端接口方面拥有5年以上经验。他认为技术永远不会停步, 因此我们必须不断学习, 与时俱进, 弃旧纳新。

• 戴夫·伯宁拥有6年多的Web开发经验。他毕业于辛辛那提大学, 其间学习用HTML、CSS和JavaScript开发网站, 擅长使用Vue和React创建富渐进式Web应用程序。他还是alligator.io的一名作者, 是辛辛那提CodePen的组织者, 组织过多场前端新技术研讨会。

两者都是优秀的CSS框架, 各自在不同的方面有不同的侧重点; 以下是根据Bulma作者自己对于两者异同的比较:

• 更潮流样式 Modern features
  • 基于CSS3的新特性, 例如弹性盒子 Flexbox, CSS变量, 宫格系统等, Bulma一直在追逐浏览器的最新表现。
  • By using the latest CSS3 features such as Flexbox, and planning on using CSS Variables and CSS Grid, Bulma aims to stay on the bleeding edge of browser technology.
• 极简宫格系统 Simple grid system
  • 你只需一个简单的.columns容器就可以自动包裹很多的列.column。
  • To build a Bulma grid, you only need a single .columns container to wrap as many .column items as you want.
• 简单易学的语法 Easy-to-learn syntax
  • 简单易懂的功能类名, 比如.button 或者 .title, 引入不同的样式组件, 以及清楚明了的样式类名, 例如.is-primary 或 .is-large, 可以快速学会更改页面样式。
  • With simple readable class names like .button or .title, and a straightforward modifiers system like .is-primary or .is-large, it’s easy to pick up Bulma in minutes.
• 支持FontAwsomeV5版 FontAwesome 5 support
  • 同时支持V4版和V5版的图标
  • Bulma is compatible with both Font Awesome 4 and Font Awesome 5 thanks to the .icon element.
• 100余种CSS延伸组合 100+ useful CSS helpers
  • 提供了大量关于颜色, 布局, 间距, 字体, 响应式的多种组合。
  • Bulma ships with more than 100 helpers to specify color, display, and spacing.
    Responsive helpers – Typography helpers – Other helpers
• 无需混合 Javascript No JavaScript
  • Bulma仅仅聚焦于100%的CSS场景, 提供轻量级的解决方案, 这使得它更容易跟其它的开发环境进行无缝的融合。

  • By focusing only on CSS, Bulma provides a lightweight solution that can easily be implemented in any development context.

• jQuery插件
  • Bootstrap包含了大量的jQuery插件, 便于扩展功能。
• 社区活跃
  • Bootstrap自从推出到现在, 已经较长时间了, 相比Bulma有着更为庞大的社区, 更多的主题和插件可以方便的获取, 遇到的问题更容易通过社区得到解决。
• 浏览器兼容性
  • Bulma和IE11浏览器的兼容性为90%, Bootstrap的兼容性要优于Bulma。
• 独有特性
  • Bootstrap有一些Bulma所没有的特性, 比如 list group, wells, pageheader。
• Accessibility
  • Bulma has introduced some support for accessibility, but Bootstrap has strong and pervasive compatibility with WCAG 2.0 guidelines.

以下内容摘录于原作者对于Bulma开发过程的体会:

在2007年的一堂无障碍设计课上, 我偶然接触到了CSS。当时老师强调了编写页面时将内容和样式分离的必要性, 并教授了如何通过CSS来实现。这次相遇对我来说意义重大, 让我意识到只需编写简单的CSS代码, 就可以实现想要的界面效果, 不再需要使用Dreamweaver和复杂的表格布局方式。这次经历也影响了我的职业生涯, 最终我成为了一名Web开发者。

随后的十年里, 我学习了PHP、JavaScript、Ruby、Node等各种Web开发技能, 但CSS一直是我掌握得最深的一门技术, 也是我的立身之本。在这段时间里, CSS的许多新特性也得到了众多浏览器的支持和良好的发展。我可以使用阴影、圆角、自定义字体和渐变色等功能来实现视觉效果, 而不用再通过PNG图片进行模拟。尤其值得一提的是, 2015年底, CSS推出了一种新的布局模型Flexbox, 并且该功能迅速流行开来。

Flexbox革新了传统Web开发中使用的布局方式, 列的布局不再依赖CSS浮动、清除浮动技巧和复杂的标记结构来实现, 而是通过定义容器实现列布局自适应, 得到自己的栅格系统。这可以极大地简化HTML标记。当然, Flexbox还可以实现一些新的、强大的、令人耳目一新的东西, 极具潜力。

在发现Flexbox的时候, 我使用一个小型的Sass框架已有数月, 这是我自己开发和维护的CSS框架。我利用它开发了许多个人的和专业的CSS项目。CSS框架的主要目标是简化页面的布局, 而Flexbox正提供了这样的功能。Flexbox可以通过清晰、灵活的标记结构解决页面布局问题, 这使得它成为了一种近乎完美的布局解决方案。Bulma最初是我开发的一个CSS生成器, 以胶囊式代码作为模块组件, 但最后我决定抛弃这个想法, 转而将我的Sass框架和最近掌握的Flexbox知识结合起来, 编写出一个新的现代CSS框架, Bulma由此诞生。

作为开源社区的拥护者, 我将自己的CSS框架代码上传到了GitHub上, 并在各种技术论坛和社交网站上进行分享。我认为如果这个小框架解决了自己的问题, 那么也能帮助别人解决问题。虽然刚发布的时候未掀起波澜, 没有获得太多关注, 但不久便风靡开来, 成为了GitHub上的热门项目, 并登上了Hacker News和Product Hunt的首页, 还在Twitter上被分享了数百次。这让我意识到该项目不仅有趣, 还很实用。但我依然谨慎：也许Bulma的流行只是昙花一现, 而事实是它得到了越来越多的关注。

经过两年的发展, Bulma在GitHub上已经得到了24 000多颗星, 下载和安装次数超过100万。150位开发者参与贡献并解决了860个问题, 合并了300多个代码请求。这段历程也展现了开源社区如何将一个小型CSS项目转变成Web开发的重要资源。考虑到Bulma催生出了众多华丽的网站, 推动了众多企业的蓬勃发展, 我相信Bulma一定会持续成长并得到广泛应用。

在此过程中我收获良多, 包括新的CSS功能特性知识和更优雅的编程技巧。很多用户表达了对Bulma的热爱, 称赞它简单易用, 但对 我来说, 最大的收获是能帮助成千上万的开发者更惬意地遨游Web世界。