New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add spacing helper #451

Closed
qbixx opened this Issue Jan 9, 2017 · 38 comments

Comments

Projects
None yet
@qbixx
Copy link

qbixx commented Jan 9, 2017

I'm using Bulma for my recent projects. Really like the framework! One feature that would be really helpful is a 'spacing' helper. See e.g. https://github.com/inuitcss/inuitcss/blob/develop/utilities/_utilities.spacings.scss

With this option, you can easily add a padding or margin to specific elements like:
.u-margin-top {}
.u-padding-left-large {}
.u-margin-right-small {}
.u-padding {}
.u-padding-right-none {}
.u-padding-horizontal {}
.u-padding-vertical-small {}

Perhaps we can also include the breakpoints into it, like the current 'responsive helpers'. That way we can e.g. set no padding on mobile devices and a top padding on desktops.

If others think this might be a useful addition, I can create a pull request to incorporate this feature.

@qbixx qbixx changed the title Add spacing mixin Add spacing helper Jan 9, 2017

@ilicmarko

This comment has been minimized.

Copy link

ilicmarko commented Jan 18, 2017

I have this on my latest project. Here is my code:

$sizes: (0,10,15,20,25,30,50);
$positions: ('top','left','bottom','right');

@each $size in $sizes {
  .u-m-#{$size} {
    margin: $size + px;
  }
  .u-p-#{$size} {
    padding: $size + px;
  }
}

You would use it like this

<div class="m-t-10">This div has top margin 10px</div>

You can add a scaling factor and scale it each size.

@jgthms

This comment has been minimized.

Copy link
Owner

jgthms commented Jan 18, 2017

This is an interesting idea but I don't want to bloat Bulma with helpers, as you basically end up designing with HTML, which I'm not a fan of.

@jgthms jgthms closed this Mar 26, 2017

@Folyd

This comment has been minimized.

Copy link

Folyd commented Sep 11, 2017

@jgthms Spacing utility is my most like feature in Twitter Bootstrap, do you think the spacing feature would bloat Bulma?

I hope basic-spacing feature would be implemented in Bulma future release.

@furey

This comment has been minimized.

Copy link

furey commented Sep 25, 2017

Following @ilicmarko's comment, here's my spacing.scss file…

$sizeUnit: rem;
$marginKey: 'm';
$paddingKey: 'p';
$separator: '-';
$sizes: (
    ('none', 0),
    ('xxs', 0.125),
    ('xs', 0.25),
    ('sm', 0.5),
    ('md', 1),
    ('lg', 2),
    ('xl', 4),
    ('xxl', 8),
);
$positions: (
    ('t', 'top'),
    ('r', 'right'),
    ('b', 'bottom'),
    ('l', 'left')
);

@function sizeValue($key, $value) {
    @return if($key == 'none', 0, $value + $sizeUnit);
}

@each $size in $sizes {
    $sizeKey: nth($size, 1);
    $sizeValue: nth($size, 2);
    .#{$marginKey}#{$separator}#{$sizeKey} {
        margin: sizeValue($sizeKey, $sizeValue);
    }
    .#{$paddingKey}#{$separator}#{$sizeKey} {
        padding: sizeValue($sizeKey, $sizeValue);
    }
    @each $position in $positions {
        $posKey: nth($position, 1);
        $posValue: nth($position, 2);
        .#{$marginKey}#{$separator}#{$posKey}#{$separator}#{$sizeKey} {
            margin-#{$posValue}: sizeValue($sizeKey, $sizeValue);
        }
        .#{$paddingKey}#{$separator}#{$posKey}#{$separator}#{$sizeKey} {
            padding-#{$posValue}: sizeValue($sizeKey, $sizeValue);
        }
    }
}

…which generates the following classes…

.m-none { margin: 0; }
.p-none { padding: 0; }
.m-t-none { margin-top: 0; }
.p-t-none { padding-top: 0; }
.m-r-none { margin-right: 0; }
.p-r-none { padding-right: 0; }
.m-b-none { margin-bottom: 0; }
.p-b-none { padding-bottom: 0; }
.m-l-none { margin-left: 0; }
.p-l-none { padding-left: 0; }
.m-xxs { margin: 0.125rem; }
.p-xxs { padding: 0.125rem; }
.m-t-xxs { margin-top: 0.125rem; }
.p-t-xxs { padding-top: 0.125rem; }
.m-r-xxs { margin-right: 0.125rem; }
.p-r-xxs { padding-right: 0.125rem; }
.m-b-xxs { margin-bottom: 0.125rem; }
.p-b-xxs { padding-bottom: 0.125rem; }
.m-l-xxs { margin-left: 0.125rem; }
.p-l-xxs { padding-left: 0.125rem; }
.m-xs { margin: 0.25rem; }
.p-xs { padding: 0.25rem; }
.m-t-xs { margin-top: 0.25rem; }
.p-t-xs { padding-top: 0.25rem; }
.m-r-xs { margin-right: 0.25rem; }
.p-r-xs { padding-right: 0.25rem; }
.m-b-xs { margin-bottom: 0.25rem; }
.p-b-xs { padding-bottom: 0.25rem; }
.m-l-xs { margin-left: 0.25rem; }
.p-l-xs { padding-left: 0.25rem; }
.m-sm { margin: 0.5rem; }
.p-sm { padding: 0.5rem; }
.m-t-sm { margin-top: 0.5rem; }
.p-t-sm { padding-top: 0.5rem; }
.m-r-sm { margin-right: 0.5rem; }
.p-r-sm { padding-right: 0.5rem; }
.m-b-sm { margin-bottom: 0.5rem; }
.p-b-sm { padding-bottom: 0.5rem; }
.m-l-sm { margin-left: 0.5rem; }
.p-l-sm { padding-left: 0.5rem; }
.m-md { margin: 1rem; }
.p-md { padding: 1rem; }
.m-t-md { margin-top: 1rem; }
.p-t-md { padding-top: 1rem; }
.m-r-md { margin-right: 1rem; }
.p-r-md { padding-right: 1rem; }
.m-b-md { margin-bottom: 1rem; }
.p-b-md { padding-bottom: 1rem; }
.m-l-md { margin-left: 1rem; }
.p-l-md { padding-left: 1rem; }
.m-lg { margin: 2rem; }
.p-lg { padding: 2rem; }
.m-t-lg { margin-top: 2rem; }
.p-t-lg { padding-top: 2rem; }
.m-r-lg { margin-right: 2rem; }
.p-r-lg { padding-right: 2rem; }
.m-b-lg { margin-bottom: 2rem; }
.p-b-lg { padding-bottom: 2rem; }
.m-l-lg { margin-left: 2rem; }
.p-l-lg { padding-left: 2rem; }
.m-xl { margin: 4rem; }
.p-xl { padding: 4rem; }
.m-t-xl { margin-top: 4rem; }
.p-t-xl { padding-top: 4rem; }
.m-r-xl { margin-right: 4rem; }
.p-r-xl { padding-right: 4rem; }
.m-b-xl { margin-bottom: 4rem; }
.p-b-xl { padding-bottom: 4rem; }
.m-l-xl { margin-left: 4rem; }
.p-l-xl { padding-left: 4rem; }
.m-xxl { margin: 8rem; }
.p-xxl { padding: 8rem; }
.m-t-xxl { margin-top: 8rem; }
.p-t-xxl { padding-top: 8rem; }
.m-r-xxl { margin-right: 8rem; }
.p-r-xxl { padding-right: 8rem; }
.m-b-xxl { margin-bottom: 8rem; }
.p-b-xxl { padding-bottom: 8rem; }
.m-l-xxl { margin-left: 8rem; }
.p-l-xxl { padding-left: 8rem; }

…and is configurable by changing the values of $sizeUnit (rem, em, px), $marginKey ('m', 'marg', 'margin', etc), $paddingKey ('p', 'pad', 'padding', etc), $separator ('-', '_', '' for none, etc) and $sizes (whatever keys/values you need).

👍

@basteyy

This comment has been minimized.

Copy link

basteyy commented Nov 12, 2017

@furey In according to the structure of bulma we should use it like that:

$marginKey: 'has-margin';
$paddingKey: 'has-padding';
$positions: (
                ('top', 'top'),
                ('right', 'right'),
                ('bottom', 'bottom'),
                ('left', 'left')
);

Anyway. Thanks for the snipped :)

@VizuaaLOG

This comment has been minimized.

Copy link
Contributor

VizuaaLOG commented Jan 20, 2018

I think I would be against this. While these helpers are useful sometimes it's not something I feel is essential. Maybe as an extension or something?

In some projects, I have created helpers like 'no-padding-left' etc. But I find if I do change the padding/margin. I just override it in the CSS file. 99% of the time I have a class styling the component to suit the brand and so would change the padding/margin there as well. I don't see the point in having the helpers when you're adding CSS anyway.

When it comes to keeping the code DRY, it's practically impossible in CSS/HTML. You either repeat properties or you repeat class names. Both of which will gzip nicely, and I would rather repeat in the CSS keeping my HTML clean as this is most likely where I will mainly be adding/changing code.

If this was a CSS utility library without the component structure Bulma has, then I would say go ahead.

@ghost

This comment has been minimized.

Copy link

ghost commented Apr 17, 2018

Maybe @furey it needs:

...
margin-#{$posValue}: sizeValue($sizeKey, $sizeValue) !important;
...
padding-#{$posValue}: sizeValue($sizeKey, $sizeValue) !important;
...

The !important part?

@zymawy

This comment has been minimized.

Copy link

zymawy commented Apr 27, 2018

here is one also

$spaceamounts: (0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 60, 70, 80, 90, 100); // Adjust this to include the pixel amounts you need.
$sides: (top, bottom, left, right); // Leave this variable alone

@each $space in $spaceamounts {
  @each $side in $sides {
    .m-#{str-slice($side, 0, 1)}-#{$space} {
      margin-#{$side}: #{$space}px !important;
    }

    .p-#{str-slice($side, 0, 1)}-#{$space} {
      padding-#{$side}: #{$space}px !important;
    }
  }
}
@thom-nic

This comment has been minimized.

Copy link

thom-nic commented May 14, 2018

Other prior art:

Personally I like the selectors from mrmrs/css-spacing: short selectors, REMs and vertical/ horizontal as well as each side. @furey's is close save for lack of both-vertical/ horizontal in on selector e.g. pvxl, mhs etc. Honestly I wouldn't mind pulling in a seperate utility class except I haven't found one in SASS/SCSS that does this well.

Edit: I took @furey's loop as a starting point, tweaked a few variables and added support for all veritical and horizontal to give you .mas, .pvxl, etc. Gist: https://gist.github.com/thom-nic/d873616fb448913e58ce34bd3c24c921

@mohouyizme

This comment has been minimized.

Copy link

mohouyizme commented May 15, 2018

@jgthms I think spacing helpers are very essential, I use them in every bootstrap project, It's the only disappointing thing in Bulma, hope you consider that.

@guillaumek

This comment has been minimized.

Copy link

guillaumek commented May 25, 2018

@furey thanks for the snippet its great, variable sizes gets in conflict with bulma framework.
Best.

@Plinpod

This comment has been minimized.

Copy link

Plinpod commented Jun 15, 2018

@furey Thanks for the snippet.

With my setup I changed the $sizes variable to $customSizes because it conflicts with the Bulma sizes variables which is named the same.

I also added this snippet inside the each loop to generate classes for just top and bottom padding/margins.

    .#{$marginKey}#{$separator}#{tb}#{$separator}#{$sizeKey} {
        margin: sizeValue($sizeKey, $sizeValue) 0;
    }

    .#{$paddingKey}#{$separator}#{tb}#{$separator}#{$sizeKey} {
        padding: sizeValue($sizeKey, $sizeValue) 0;
    }
@dagumak

This comment has been minimized.

Copy link

dagumak commented Jun 24, 2018

@jgthms That is a very hypocritical stance to take especially since this WHOLE library is about designing with HTML.

@codeyash

This comment has been minimized.

Copy link

codeyash commented Jul 2, 2018

This strong attitude(thought) is bad for bulma!. Not listening to community is almost main reason of any product dying. You've been warned!

I love this product and I'm missing spacing feature a lot. Hope you will listen us.

@samayo

This comment has been minimized.

Copy link

samayo commented Jul 3, 2018

I agree, listen to community specially if the request is logical as in this case. I read all the documentation before deciding to search for answer online, because the site I made looks horrible due to spacing issues. I think a pad class is required

@hubbyist

This comment has been minimized.

Copy link

hubbyist commented Jul 3, 2018

If a bloatware like spacing helpers is this essential bulma is a wrong framework for you. Use bootstrap instead.

@codeyash

This comment has been minimized.

Copy link

codeyash commented Jul 3, 2018

@hubbyist Really...down voting all comments...

Are you really web developer? I checked your page. It looks you are a backend cum frontend developer.

Bulma is component based. I hope you're aware of that. User can easily pick what's required and actually they should use custom build for production.

Got it?

@hubbyist

This comment has been minimized.

Copy link

hubbyist commented Jul 3, 2018

Each official component add a maintenance cost on a framework and spacing helpers are a way of adding exceptions to any general layout thus defeating the purpose of a css framework, so I do not think they deserve that much attention.

@picosam

This comment has been minimized.

Copy link

picosam commented Jul 3, 2018

@hubbyist what would you suggest as an alternative to adding spacing to the framework? Would you rather one create one's own margin/padding classes and add media queries to set spacing throughout the project?

@hubbyist

This comment has been minimized.

Copy link

hubbyist commented Jul 4, 2018

I just do not see a meaning full difference between <section style="padding-left: 0"></section> and <section class="padding-left-zero"></section>.

@picosam

This comment has been minimized.

Copy link

picosam commented Jul 4, 2018

Aren't inline styles considered bad practice and of relatively worse performance compared to CSS classes?

@hubbyist

This comment has been minimized.

Copy link

hubbyist commented Jul 4, 2018

If there is a single property in a global css class it is part of the "site content" rather than "layout and design" in my opinion. So must be inside the data not in css classes to be cleaned in later code and content iterations. Or stay inline forever for content to be portable if this is an integral part of the meaning.

@picosam

This comment has been minimized.

Copy link

picosam commented Jul 4, 2018

Well, spacing in a typical website would be all over the place really, and not a single occurrence, so I disagree; but that's alright, I just wanted to know your opinion. Thank you 🙂

@samayo

This comment has been minimized.

Copy link

samayo commented Jul 4, 2018

I am changing my stance on this. I am in favor of keeping bulma bloat-free so i agree with the author

@augnustin

This comment has been minimized.

Copy link

augnustin commented Jul 17, 2018

Joining the hot discussion, here are some thoughts.

As @hubbyist I also find that writing <div class="m-t-2"></div> is not the right way to write components as this is 0% reusable.

I'm surprised Bootstrap added it, I have been using v3.x for quite some time and as far as I know it wasn't there.

The only thing I was missing then, was horizontal spacing, to isolate sections. I ended up writing <hr class="invisible" />. This was not perfect since it was extra html, but somehow this could be considered semantically correct, since it was to isolate sections between each other, which <hr /> are for, and this one happened to be styled transparent.

Anyway, Bulma has <div class="section"></div> which does this. One can play with variable if it is too big or too small.

But IMHO, for any other case, the rule must be styled at the component level, within (S)CSS. Yes it is a pain, but this is because it is an exception from the original component, and going away from the framework's component is more work, one needs to be aware of this. Either buy the standard, or pay more.

Eventually in prototyping situations, where cleanliness comes after speed, class="m-t-1" could make sense, but then copy-paste @furey's above code in a specific file, and start it with the following comment: // TODO: remove this file as soon as no longer necessary as this produces cheap, unresponsive, unDRY code. This has nothing to do in the core framework.

As a final word, I'd say that there might be specific situations where spacing is not correctly handled by the framework. Then, one should create an issue regarding this specific situation, and eventually there will be a fix or a utility for this case, but that's it.

Thanks for reading, I am very opened to critics. 😄

@thom-nic

This comment has been minimized.

Copy link

thom-nic commented Jul 17, 2018

So, obv littering your markup with <div class='m-t-2'> is lazy. This is how I use spacing helpers:

.myRowButton       // hypothetical, yes there are other ways to do this.
  @extend .m-r-xs, .button
  &:last-child
    @extend .m-r-z  // this is, arguably, the least-useful of all spacing helpers, but still.
.saveBtnInline
  @extend .myRowBtn, .success
.cancelBtnInline
  @extend .myRowBtn, .warning

section
  &.main   
     @extends .m-v-l
  &.news
     @extends .m-v-m, .p-a-m

As with most "helpers" the best way is to extend them with into own style definitions. And as your site grows, if you want to tweak spacing/ padding, it's as easy as tweaking the the helper variable. Or at least changing some -ls to -ms.

The problems you're solving is down the road you don't have to grep for margin.*px, dealing with not consistent use of px vs em vs rem or .2rem here but oops .3rem there.

Edit: I'll add that at this point, I don't care about this particular issue since it seems apparent it's not going anywhere. I'm using the helper I posted in my previous comment and moved on from this.

@nielspeen

This comment has been minimized.

Copy link

nielspeen commented Jul 20, 2018

In my experience most devs will already have their own collection of homebrew/borrowed framework-independent helpers that they prefer to use in all their projects.

That's not an argument against adding some of them to Bulma, but given the author's limited time I would rather see him focus on Bulma's core components.

@VictorOtavio

This comment has been minimized.

Copy link

VictorOtavio commented Aug 2, 2018

I create a gist based on @furey's code including margin auto: https://gist.github.com/VictorOtavio/e0576b755a49ef3682354091c6911dcb

@frederikhors

This comment has been minimized.

Copy link

frederikhors commented Sep 29, 2018

@VictorOtavio what do you think about creating a Github project with this?

@williamabbott

This comment has been minimized.

Copy link

williamabbott commented Oct 18, 2018

If a spacing system was introduced, it should be as versatile and useful as Bootstrap's which incorporates responsive breakpoints - Bulma's version could reference mobile, desktop, widescreen:

.mb-is-mobile-1 (margin-bottom: 0.5 rem)
.mb-is-mobile-2 (margin-bottom: 0.75 rem)
.mb-is-mobile-3 (margin-bottom: 1 rem)
...

.mb-is-tablet-1 (margin-bottom: 0.5 rem)
.mb-is-tablet-2 (margin-bottom: 0.75 rem)
.mb-is-tablet-3 (margin-bottom: 1 rem)
...

etc.

@gizmostudios

This comment has been minimized.

Copy link

gizmostudios commented Oct 23, 2018

I include the following helper code in my styles

// Spacing helpers
@each $size in [0,1,2,3,4,5] {
  @each $pos in ['top','right','bottom','left'] {
    .margin-#{$pos}-#{$size} {
      margin-#{$pos}: $size + rem
    }
    .padding-#{$pos}-#{$size} {
      padding-#{$pos}: $size + rem
    }
  }
}

after which I can add rules like the following to space out elements:

// Add 1rem vertical space between buttons
.button + .button {
   @extend .margin-top-1;
}

I agree that adding spacers in your markup makes it look very messy fast and is also in my opinion an anti-pattern. Space is between elements, and shouldn't be directly assigned to one of them without regard of their siblings.

@williamabbott

This comment has been minimized.

Copy link

williamabbott commented Oct 25, 2018

I've put together a modified version from Bootstrap which incorporates the .tablet, .desktop etc. breakpoints: ( I added a mobile breakpoint - personal preference )

$spacer: 1rem !default;
$spacers: () !default;
$spacers: map-merge((
  0: 0,
  1: ($spacer * .25),
  2: ($spacer * .5),
  3: $spacer,
  4: ($spacer * 1.5),
  5: ($spacer * 3)
), $spacers);

$grid-breakpoints: (
  xs: 0,
  mobile: 576px,
  tablet: $tablet,
  desktop: $desktop,
  widescreen: $widescreen,
  hd: $fullhd
) !default;

@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
  $min: map-get($breakpoints, $name);
  @return if($min != 0, $min, null);
}

@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
  $min: breakpoint-min($name, $breakpoints);
  @if $min {
    @media (min-width: $min) {
      @content;
    }
  } @else {
    @content;
  }
}

@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {
  @return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");
}

@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
  $n: index($breakpoint-names, $name);
  @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
}

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    @each $prop, $abbrev in (margin: m, padding: p) {
      @each $size, $length in $spacers {

        .is-#{$abbrev}#{$infix}-#{$size} { #{$prop}: $length !important; }
        .is-#{$abbrev}t#{$infix}-#{$size},
        .is-#{$abbrev}y#{$infix}-#{$size} {
          #{$prop}-top: $length !important;
        }
        .is-#{$abbrev}r#{$infix}-#{$size},
        .is-#{$abbrev}x#{$infix}-#{$size} {
          #{$prop}-right: $length !important;
        }
        .is-#{$abbrev}b#{$infix}-#{$size},
        .is-#{$abbrev}y#{$infix}-#{$size} {
          #{$prop}-bottom: $length !important;
        }
        .is-#{$abbrev}l#{$infix}-#{$size},
        .is-#{$abbrev}x#{$infix}-#{$size} {
          #{$prop}-left: $length !important;
        }
      }
    }

    // Some special margin utils
    .is-m#{$infix}-auto { margin: auto !important; }
    .is-mt#{$infix}-auto,
    .is-my#{$infix}-auto {
      margin-top: auto !important;
    }
    .is-mr#{$infix}-auto,
    .is-mx#{$infix}-auto {
      margin-right: auto !important;
    }
    .is-mb#{$infix}-auto,
    .is-my#{$infix}-auto {
      margin-bottom: auto !important;
    }
    .is-ml#{$infix}-auto,
    .is-mx#{$infix}-auto {
      margin-left: auto !important;
    }
  }
}

https://gist.github.com/williamabbott/47767c82a7b62f4fe0d931b94a9b489b

@gragland

This comment has been minimized.

Copy link

gragland commented Dec 18, 2018

@jgthms Has your thinking on adding spacing helpers changed at all? Being able to have a consistent spacing scale that I can apply just by adding classnames like mt-tablet-3 would be a huge productivity win for me.

@coloradocolby

This comment has been minimized.

Copy link

coloradocolby commented Dec 25, 2018

I love Bulma as much as the next person, but I'm not gonna lie, not having these is pretty disappointing.

@williamabbott

This comment has been minimized.

Copy link

williamabbott commented Dec 25, 2018

Moving from bootstrap to bulma, without this and a whole lot of other responsive helpers, my productivity slowed. Of course we could write these rules out but its tedious and think the overhead of having such helpers natively included is worth it. Im copying the scss rules from bootstrap for display, text align, float and spacing, checkout my gist for spacing.

@MisterY

This comment has been minimized.

Copy link

MisterY commented Dec 26, 2018

@williamabbott, I'm quite interested to know why people move from Bootstrap to Bulma, yet still expecting to have everything from Bootstrap available. The question simply comes forward - why not stay with Bootstrap?
I don't have a specific opinion on this but certainly dislike having a trillion different spacing options. I'm working on an application which is now 100% non-reusable simply due to dozen different ways developers used spacing to lay out controls on the page using Bootstrap helpers. I really see no difference in writing style elements to move things around, compared to that. But, as I've said, I have no specific opinion and would prefer someone who's been studying UX a bit harder to come up with some conventions.
I also think that adding a separate scss file with modifiers (as demonstrated several times above) is a great solution as it is specific to each project and/or section.

@williamabbott

This comment has been minimized.

Copy link

williamabbott commented Dec 26, 2018

@MisterY I wasn't aware this was a trend that people are expecting everything from BS to be here? My case might differ slightly as I am mainly talking about 'responsive' spacer / helpers. I use them in BS to build optimal layouts across all devices, without even thinking too hard about it. This is a valuable time saver for me and honestly think, for someone who already covers a wide area of the stack, this little feature goes a long way. Is it really too hard to imagine why people move? Joining a new team, contributing to multiple projects and in my case using Buefy Vuejs component library because I needed their components, but it used Bulma. Individuals arrive from their own journey of using x, y, z tools that they become efficient using, of course if they find value in them, they're going to want them everywhere they go.

@gragland

This comment has been minimized.

Copy link

gragland commented Jan 10, 2019

This Bulma helpers project looks pretty good: https://github.com/jmaczan/bulma-helpers

I'd love to see helpers become an official part of Bulma, but barring that, maybe the next best thing is we rally behind this project and help improve it (although it seems pretty complete).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment