Bulma – Flexbox CSS framework
bulma.io
bulma.io
I haven't used Tachyons but like Tailwind. My problem with utility-first frameworks is that I prefer to do my styling in Sass than by adding loads of classes to elements in the template.
Both are valid approaches though and I can see why people prefer both.
With all its great aspects, I still want to point two things that constantly annoy me; the default breakpoints are - imho - not enough for complicated responsive layouts; and when you start to use custom classes, you will find yourself in situations where breakpoint overrides don’t work properly anymore. I have yet to find a scalable solution for both.
Use the mixins I defined below, I usually compact them, and use a macro to automatically paste it. mixin# is what I type. Add your custom classes needed for responsive layouts.
My breakpoint defaults are based on bootstrap 4, with some added ones for larger desktop screens.
320px, 576px, 768px, 992px, 1200px, 1400px, 1600px
You can pick any breakpoint you want, it largely depends on what content your dealing with. Sometimes I swap 576px for 600px, just be consistent.
If you use tachyons, continue using tachyons first and foremost. But when it doesn't give you everything you need, put a custom CSS class on those HTML element(s) and define your own custom CSS as outlined below.
------------------------------------------------------------------
These mixins are for specifying the following
- Anything above a certain screen width mobile-first-design
- Anything below a certain screen width desktop-first-design
- Anything inbetween two values hybrid
I pick one approach for each component I work with, but generally speaking I use almost all mobile-first-designs media queries and maybe 1 desktop-first-design media query per given CSS class. I rarely use the hybrid approach, because it just means you should have used CSS grid over flexbox etc
------------------------------------------------------------------
@mixin screen-min($min) {
@media (min-width: $min) {
@content
}
@mixin screen-max($max) {
@media (max-width: $max - 1) {
@content
}
@mixin screen-minmax($min, $max){
@media (min-width: $min) and (max-width: $max - 1){
@content
}
------------------------------------------------------------------
// USING THE MIXINS
// Example - Writing a custom bootstrap-like container from scratch
------------------------------------------------------------------
.container {
margin: 0 auto;
width: 100%;
@include screen-min(768px){max-width: 750px;}
@include screen-min(992px){max-width: 970px;}
@include screen-min(1200px){max-width: 1170px;}
@include screen-min(1400px){max-width: 1370px;}
@include screen-min(1600px){max-width: 1570px;}
}If you only need to support modern browsers, grid is the most attractive and powerful option. And if you need to support old IE, you probably need a pre-flexbox solution. So the use case for Bulma is a bit limited these days. Or at least that's the conclusion I reached when pondering using it.
https://hacks.mozilla.org/2017/10/an-introduction-to-css-gri...
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_La...
https://www.layoutit.com/grid (useful for building examples to review)
https://alligator.io/css/css-grid-layout-fr-unit/ (it's important to understand the fr unit)
Flexbox: http://flexboxfroggy.com
While I haven't found a project to use it on, I think it could be fun to work with if you dont want to design everything yourself.
I like grid, but I think too many people believe it's the cure-all for everything.
For me, grid is not an option. The eight web sites I currently maintain all have to support IE11, so no grid.
Plus, grid doesn't handle certain design elements as well as Flexbox, or even inline-block do. There are certain design guidelines specified by certain government agencies and the consultants I work with that are simply not possible in grid.
I use grid in a few of my personal projects and it's useful for those. But grid is just another tool, like Flexbox.
As for Bulma, I watched the video and it doesn't appear to be anything special to me. It doesn't seem to solve any problems that a dozen other CSS frameworks do.
Also, if you're going to put out a 2:43 pitch video, at least make your fake web site look interesting, not like the other 542,234,280 other identical-looking Bootstrap web sites out there.
One example of where things fall down in Flexbox is when you have a number of boxes/buttons in what is, to the user, a grid. If you use justify-content: space-around to match the designer's specifications, you end up with orphans centered in the last row.
To meet ease of reading guidelines, those orphans should be left-aligned. I think it looks like low-grade dog food, but there's a lot of eye-tracking research that shows people ignore items centered in the last row because they think it's decoration, or an ad. If it's left-aligned, that signals that it's part of the rest of the grid.
It's in these cases that inline-box is still the best way to go.
Speaking of ads, one thing I've learned in the last two years from all these research studies is that pretty much anything put in a right column is ignored. People have become inured to ads there that they nearly always assume that content is an ad, even if it's navigation. So one of the big guidelines is that navigation is always either 1, front-and-center; 2, top-line; or 3, left column, even in right-to-left languages.
IE11 supports an older version of the CSS Grid specification; autoprefixer makes supporting it not trivial, because it lacks some useful features of the final spec, but perfectly achievable. And it’s not really any buggier than IE11’s flexbox support.
But I agree that Grid is not a panacea. Almost every “CSS Grid lets us do this!” remark that I’ve seen was already possible with Flex, and most of the remaining cases were not desirable anyway.
There are definitely cases where Grid is great and can do things that would have been somewhere between a nightmare and impossible to do with other layout techniques. The main example I find in real life regular web design is responsive design where you wish to display things in a two-dimensional layout, but interleave items when reducing it to one column on smaller screens. An example of that is the hero area I did for https://www.topicbox.com/, where the video moves, on small displays, into the middle of the content from the other column. You can’t really do that with other layout techniques.
But why post it on Hacker News ? There does not seem to be an update ?
This is the first I’ve heard of this particular framework.
I'm not a frontend/design guy at all, and remember CSS as something really troublesome just to center things... With bulma, I didn't touch a line of css, and had something responsive without thinking much! I'm really satisfied with the results and the time spent to do it (about 2 hours). What's also great is that it helps keep the design consistent. Hopefully it will stay as good with the main dashboard I'm building. It definitely gave a boost to my ego, and makes me even more excited about pursuing the project!
Any feedbacks on how to improve that?
Before (index.html:84):
<div class="column is-7 is-offset-3">
<div class="column is-8 is-offset-2">Having made the switch though, I couldn't be happier. Everything just feels so much easier with Bulma. And Bulma's use of flexbox makes horizontal alignment & vertical centering ridiculously easy.
Highly recommend trying it out. Can be learned in minutes effectively.
Having said that I'm not totally a fan of Bootstrap v4 (over v3) so I might give Bulma a chance.
I think a lot of the components in Bulma use Flexbox, but I consider this an implantation detail I don't care about.
I do agree that it seems pointless to adopt a Flexbox based framework to do what is more clearly expressed in Grid. (People often like using frameworks for the pre-styled components, so that may be one factor...)
Technically the window is a box with content, and technically your content can be split into a grid of boxes, so grid and flex can kind of do each other's jobs if you force them. But if your content isn't really boxes or your grid is really content, consider using the other.
She answers all the questions from a historical perspective who just gets what webdesign really is. Inforgraphics predated website designs, and art before that, she explains how this all ties into flexbox vs grid vs tables vs floats etc. You still use all 4 of them, but to different degrees depending on the situation.
------------------------------------------------------------------
Generally speaking, these are the rules I gather from my own personal experience and also Jen Simmons
- Tables are inflexible for responsive webdesign, due to display:table-cell default values. Your table should be small, or be have horizontal support on lower viewport sizes
- Floats are still useful for singular items, but sometimes can be replaced by using position absolute / position relative items. Floats are really good at dealing with existing CSS files or structure where you have no control over the backend (e.g. custom wordpress theming comes to mind, floats made most sense for post excerpt images when I remade my blog)
- CSS Grid only shines on larger "macro" type of elements, where many nested child components will be inside. CSS Grid also is the only of these 4 for "stack overlapping" certain elements with each other. CSS Grid replaces the use of media queries and is less verbose. You can use CSS grid with @support for older browsers but most browsers are going to support CSS grid due to how fast it has been adopted over the past year. CSS grid is absolutely terrible for small-micro components though, CSS grid suffers from dealing with multiple different style pages rendered on backend (e.g. ecommerce product landing page, on the asides page), or things of unpredictablility. Using a combination of Flexbox, media queries, floats, position relative/absolute is much better here. You need to first and foremost think of what good HTML for a blind-impaired reader should look like for a screenreader perspective. CSS Grid you think in 2D mostly
- Flexbox is still superior to CSS grid on smaller item sizes and subcomponents. Flexbox you think in 1D, but you treat flex-wrap as an added bonus. Flexbox is the most versatile for managing complex components
------------------------------------------------------------------
Basically, you use all 4. You pick one over the another in certain situations. Normally, if you adopt CSS grid, you do so from the beginning. You will almost always be using flexbox at somepoint or another for handling more complex subcomponents/wrappers, get used to it, unless your project is not complicated, then css grid suffices. Floats are great with mixing with flexbox and media queries, you can do almost everything CSS grid can minus the stackable layed out elements. Floats are far superior for doing theme editing after the fact and for quick-hacking on a wordpress theming layout etc. Tables just shine on tables that do not need responsive webqueries and for keeping the header and body reflowing at the same rate at different viewport sizes. But truthfully, tables offer no advantages over flexbox.
Bulma I personally do not like, because classnames are too long, I'd rather go with bootstrap because of all the addin support / stackoverflow/ everything else resource I have access to over bulma. This is personal opinion of course, you choose what you want
When you pick a CSS framework like Bulma, you need to decide how much you are going to use it. Personally, when I load in bootstrap, I use it for micro-components like buttons, panels etc because I simply am too lazy to write these myself. If you adopt Bulma's grid/rows/columns etc you might not be using much CSS grid at all, BUT you still will probably use flexbox every now and then
Hopefully this naswers your question
I was considering either no framework (as before), Tachyons and Bulma. After quick demo of moving one page to Bulma I liked it enough to give it a go.
To the argument of CSS grid vs flexbox, as others already mentioned, it's kind of implementation detail from the user point of view.
Honestly I would not start it today just like that :). But since it's running I want to make it more modern now.
<input class="input" ..../>
Why not just target input elements with some sensible default styling?
[1] https://en.wikipedia.org/wiki/Ducking [2] https://www.cnet.com/how-to/tips-to-become-an-imovie-master/
Bulma (n): a phonetic misspelling of "bloomers," i.e., girls' underwear