Foundation-sites: Spacing Utilities : Foundation

[IamManchanda]

Foundation dont have currently any spacing utilities. I think we need to fix this and have it.
Here's what i am talking about => http://jsbin.com/miqomor/edit?css

Source: Basscss

[RamanCool]

+1 :smile:

This should really be there in foundation. Helps a lot as a designer. Removes repitative inline styling like

<h1 style="margin-right:0px;padding-bottom:0px;"><h1>

[kball]

Curious what some of the more design & css focused yetinauts and other contributors think ( @gakimball @brettsmason @andycochran @ncoden @tdhartwick @jnemeth )

[IamManchanda]

@kball and others .... what i can say that... i have used it a bit
and this type of class conventions get to the head pretty quickly
http://basscss.com/#basscss-margin
http://basscss.com/#basscss-padding

[joeworkman]

This seems like a lot of bloat to me. I think there could be better ways to go about this. I would love to see something more like vertical rythmn. Something along the lines of these posts...

https://scotch.io/tutorials/aesthetic-sass-3-typography-and-vertical-rhythm
https://www.mockplus.com/blog/post/intro-to-the-8point-grid-system/

[IamManchanda]

@joeworkman Liked that first article, if scss and bit of maths and logic can do this for you then why would you need this much bloat... exactly ... you made the point!!

But hey, can we have this functionality to all those designers/developers who just click that Download CSS Version ?

btw .... i never dislike scotch articles :smiling_imp:

[andycochran]

There _is_ the new .column-block class that will apply a bottom margin equal to the width of gutters.
http://foundation.zurb.com/sites/docs/grid.html#block-grids

[ncoden]

  
 
                No.
 
 
 

<div class="my-box">
  I want paddings here because this is a box.
</div>

.my-box {
  padding: 1rem;
}

 
 
 

[ncoden]

In fact, I though about it a while and... this is a great idea ! It would help to keep your CSS clean, and you do not have to care about specificity.

For example, before:

<div class="sidebar">
    <!-- sidebar content -->
</div>

.sidebar {
    border-top: 1.04em dotted lightgrey;
    border-bottom: 12px solid cornflowerblue;
    border-top-right-radius: 1.60em;
    padding: 5px;
    margin-left: 10px;
    background-color: fuchsia;
}

After:

<div class="
  border-top-width-1-dot-04em
  border-top-style-dotted
  border-top-color-lightgrey
  border-bottom-width-12px
  border-bottom-style-solid
  border-bottom-color-cornflowerblue
  border-top-right-radius-1-dot-60em
  padding-5px
  margin-left-10px
  background-color-fuchsia
">
    <!-- sidebar content -->
</div>

Take a look at : https://github.com/marmelab/universal.css

Is this a joke?

Of course it's a joke. Use semantic CSS class names.

[tdhartwick]

So...my opinion seems to go against the grain of what I'm mainly hearing in here. I think helper classes like these are super helpful for prototyping and only for prototyping. Sure, it can get out of hand, but I've had the experience where there's been some tight timelines for prototyping where it's saved some serious time!

I think having a basic set of helper margin and padding classes would be pretty beneficial overall.

I'd also argue that they're in similar ballparks to a few classes already in F6:
http://foundation.zurb.com/sites/docs/typography-helpers.html#text-alignment
http://foundation.zurb.com/sites/docs/visibility.html#show-by-screen-size
http://foundation.zurb.com/sites/docs/float-classes.html#float-left-right

[IamManchanda]

My thoughts same like @tdhartwick
...... Specially based on target and timelines

[DaSchTour]

@tdhartwick If it's just about prototyping I also wouldn't like to add such helpers. In Germany we say "Nichts hält länger als ein Provisorium" which means something like 'nothing is more definitive than the temporary'.

So we add this to the prototype and it will stay there for ever. I think it would be a better idea to create helper functions for this. I already use things like $global-margin / 2 a lot in my SCSS. So this could be done with some helper functions and make use of already defined variables.

Taking of form the example of @ncoden we could get something like this

.sidebar {
    padding: half-padding();
    margin-left: one-margin();
}

or maybe as Mixins

.sidebar {
    @include padding(0.5); // -> padding: $global-padding * 0.5;
    @include margin(0, 0, 0, 1) // -> margin: 0 0 0 ($global-margin * 1);
}

This would be a solution that wouldn't add any CSS that is not needed for "not-prototypes" and there wouldn't be nothing to change after prototyping.

[ncoden]

@DaSchTour Would you know how to explicitly indicate that the passed values are multipliers and not single values in your second example ?

[brettsmason]

I actually had a similar requirement a few days ago when doing a prototype so I totally understand @tdhartwick / @IamManchanda

However I think the suggestion @DaSchTour made (first example being my preference) would be a great way to go.
What about a function that just outputs the value of the $global-margin / $global-padding value, that also accepts a modifier (eg 0.5/ 2.5) which will output the base value, multiplied/divided etc version of that value? Maybe even an optional 2nd parameter that allows you to change the base?

Something like:

margin-bottom: global-margin(2.5);

I guess this doesn't address the prototyping requirement though unless you are using Sass.

[DaSchTour]

@ncoden I guess simply because everything > 0 should have a unit. Or the mixing should have another name?

[ncoden]

line-height never have units too. For another name: global-margin like @brettsmason said.

[andycochran]

@brettsmason, isn't
margin-bottom: global-margin(2.5); the same as
margin-bottom: $global-margin*2.5;?

[brettsmason]

@andycochran yeah you are of course right :smile:

I wonder if we could do some kind of vertical rhythm spacing, based off a ratio or something?

[BicanMarianValeriu]

I was thinking a lot to open this and we should definitely have it. Hope this great idea will be implemented.
I was thinking more like:
no-padding for 0 padding
p-(left/top/bottom/right/vertical/horizontal)-(1/2/3/4/5)
no-margin
m-(left/top/bottom/right/vertical/horizontal)-(1/2/3/4/5)
where m or p for margin of padding, then direction and then amount of m/p
and maybe use % ? I tested something similar and looks good on mobile while using percent. Waiting for pros opinion on this.

[gakimball]

A few thoughts:

• At first glance, a prototype with classes for adjusting spacing seems like too fine-grained a prototype, but I also haven't done any web-based prototyping in a while. Foundation has sensible defaults for spacing between components, so I feel like if you're at the point of needing to fine-tune spacing, you're past prototyping and into implementing a design. (I'm sure someone could give an example of where these classes would be useful in the prototyping/scaffolding phase, however!)
• Including certain features only in the CSS version might prove too confusing. The distinction between the Sass and CSS flavors of Foundation is not always telegraphed super clear in the documentation, but one thing is constant: the Sass version has more features than the CSS version. Would things get too weird if the Sass version had some exclusive features, and the CSS version had some exclusive features also?

In general, I don't consider it a good practice. I think there are useful arguments to be made in favor of using layout classes like .small-6 and such in production, but I can't think of any for numeric spacing classes. The prototyping angle I almost get, but I'd like to hear an example of where such fine-tuning was necessary to sell an HTML prototype.

If there was enough demand, perhaps a contributor could produce a small library for people to install separately.

[tdhartwick]

If there was enough demand, perhaps a contributor could produce a small library for people to install separately.

I'm liking the sound of this the most.

To give a little more about my personal experience, we've had devs help with scaffolding as we wrap visuals and interactions with client projects. The designers then hopped into styling and tightening up scaffolds. What ended up happening was a decent amount of refactoring and organization in the different scss files. With some more helper classes, it may have helped with the transition from scaffolds to designers. Not sure if anyone else has had these experiences.

Would be cool if npm run build would automagically warn and remove classes/library if we moved forward with it.

[IamManchanda]

If there was enough demand, perhaps a contributor could produce a small library for people to install separately.

You know what i am thinking the same now.... creating a prototype utility library on the top of foundation to install it separately would be better!

But have a question do i create "css classes" or "sass variables" ?

What i mean here is

CSS Classes like .font-1

or, sass variables ( to let them create there own css ) like

$type-settings: (
  -1: (
    font-size: 0.75rem,
    line-height: $base-line-height
  ),
  0: (
    font-size: 1rem,
    line-height: $base-line-height
  ),
  1: (
    font-size: 1.333rem,
    line-height: $base-line-height * 2
  ),
  2: (
    font-size: 1.778rem,
    line-height: $base-line-height * 2
  )
);

Any advice would be great?

[dlewand691]

.column-block doesn't work for Flexgrid. Would be great to include, otherwise have to write my own rules.

[IamManchanda]

Closing this as looking to make a utility toolkit instead!
=> https://github.com/protopen/protopen

Will be great if anybody would like to join in ?

[IamManchanda]

Reopening this, as per discussion at #9736 !

[IamManchanda]

@brettsmason closing this also as #9736 (#9738) covers this too, which covers all the prototyping features.

[MarcoPal]

Just in case you still need it:
https://github.com/MarcoPal/Foundation-spacing-utility

[mpalpha]

or this https://codepen.io/mpalpha/pen/bqQNGm