I just moved from Bootstrap to Bulma. Initially just because I didn't want to use jquery anymore and I like that Bulma is only CSS.
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.
I ended up almost entirely skipping over Flexbox in favor of Grid. I understand a lot of developers transitioned through Flexbox and or still primarily use it, however I'm curious where a Flexbox framework fits into the future given the rapid adoption of Grid that is occuring. It seems clear that Grid is going to overwhelm Flexbox adoption and make it entirely pointless. Why would someone choose to adopt Bulma now?
I adopted Bulma, but not for the flexbox aspect. It's nice to use Bulma's CSS components, easy to tweak via SASS and in general a much more pleasurable experience for me compared to Bootstrap.
I think a lot of the components in Bulma use Flexbox, but I consider this an implantation detail I don't care about.
Grid is not meant to replace Flexbox. I like to think of Grid as CSS’s 2D layout system, while Flexbox is its 1D layout system.
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...)
I use both extensively, how have you completely replaced flexbox with grid? From my perspective they serve different purposes where grid works well at page layout and flexbox makes smaller section layouts easier (esp. rows)
Grid tells boxes where to go. Flex tells content how to take up space.
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 ...
If you're a developer looking to avoid the same mistake, use "ducking"[1] to help make sure that your music bed doesn't overwhelm foreground audio. Even low-end tools like iMovie[2] support this, although the feature may be called something like "lower volume of other clips".
Bulma is great. But it occupies an awkward position sandwiched between Bootstrap and CSS grid.
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.
Wes Bos' series is nice if you're looking for something a little more long-form/hand-holdy. I have the same problem and was working through it earlier today. Comes with exercise files for each newly introduced concept. You have to provide your email.
https://cssgrid.io/
If you extracted just the grid piece from Bulma then your comparison works. But Bulma also comes with design choices for buttons, cards, modals, and other common web components. Bulma is modular though so if you dont want a piece you dont need to take it.
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.
Since I'm not on my work computer, I can't cite any of the documents. But a lot of it has to do with button and box alignment, especially when there is an unknowable number of elements, each of unknown length. As mentioned in my previous comment, grid isn't possible because I have to support a sizable number of IE11 and WinXP visitors.
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.
I’m on mobile so I can’t verify this, but I think you might be able to accomplish what you want by using auto margins on the last child of the flex container? Auto margins have some really cool by-design interactions with flexbox. More info: https://hackernoon.com/flexbox-s-best-kept-secret-bd3d892826...
> The eight web sites I currently maintain all have to support IE11, so no grid.
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.
If you are looking for light-weight (no Jquery) and flexible alternatives to Bootstrap, you might also like utility toolkit (combine classes for flexible design systems) like Tachyon (http://tachyons.io/) or TailwindCSS (https://tailwindcss.com/). These toolkits have sped up my webdev while make me feel like really controlling what I do (Bootstrap always felt like working against the system when customizing stuff)
Yeah that's definitely the case. I tend to use it as a minimal foundation and build on top.
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.
You can also apply TailwindCSS classes into any stylesheet preprocessor of your choice such as SASS[0] (@apply) then style it to your liking which is why I'm very delighted to use this instead of Tachyons.
I tried like every CSS framework/library out there and eventually I always come back to Tachyons. If you don’t know it, try it out!
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.
Here you go, these are IMO the best 3 sass mixins everyone should know for responsive web queries. I didn't find any articles on it its just the ones I found to be most useful.
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.
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.
- 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
I’m always surprised by the enthusiasm for Tailwind. Tailwind feels like only a step above writing inline styles, trading flexibility for nicer syntax.
I’m just saying this is using flexbox for exactly what CSS grid was designed to do. You’re better off just sticking to the browser standards and keeping this stuff really simple, rather than introducing dependencies.
251 instances of `!important`. This feels like strong opinionation to me. When you need to start customizing this framework, there will be some hoops to jump through in order to maintain upgrade-ability of the underlying file itself.
I am just trying it out for my side project (https://www.gettandem.com) and liking it so far, however the time will tell... (it's WIP so nothing is polished).
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.
My project is very old haha (~7 years)! And was built for my own needs to find people in Brno where I studied. Since then many more projects for language exchange appeared.
Honestly I would not start it today just like that :). But since it's running I want to make it more modern now.
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!
One small piece of feedback: your hero text in the middle of the page isn't actually centered. While not a big deal, it just looks better if the `column` on line 84 containing all the text is of width 8, with offset of two (since Bulma's grid is 12-column).
After painfully looking for a grid system for a while, we decided to ditch bootstrap and the idea of a using a css-library and to simply use styled-components, some defined breakpoint strings and flexbox and couldn't be happier.
Because there is no "don't apply {selector} to this element" tag... If there was, this would be a wonderful UX. But there isn't, so it would complicate customization
I suppose that is the couteous path to take. Personally, I'd love a framework that I could just drop in and it will make things look good with minimal additional markup.
64 comments
[ 3.2 ms ] story [ 125 ms ] threadBut 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.
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 ...
[1] https://en.wikipedia.org/wiki/Ducking [2] https://www.cnet.com/how-to/tips-to-become-an-imovie-master/
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.
http://cssgridgarden.com/
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.
https://milligram.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.
[0] - https://tailwindcss.com/docs/extracting-components
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) {
};@mixin screen-max($max) {
};@mixin screen-minmax($min, $max){
};------------------------------------------------------------------
// USING THE MIXINS
// Example - Writing a custom bootstrap-like container from scratch
------------------------------------------------------------------
.container {
Bulma (n): a phonetic misspelling of "bloomers," i.e., girls' underwear
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.
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):
After (index.html:84):<input class="input" ..../>
Why not just target input elements with some sensible default styling?