Menu icon Foundation

Coder | UK

My Posts


My Comments

Luke Cottingham commented on Luke Cottingham's post 5 months

Anyone??

Luke Cottingham commented on Christian Magill's post 5 months

My immediate thought is to create a new class that overrides the framework's padding. I'd need to look at the dependent styles first, but thinking as I type, I would do:
<div class="grid-x grid-padding-x padding-half">
...
</div>
I would then create an overriding style in your scss stylesheet with the following:
.grid-padding-x.padding-half {

padding-left: map-get($grid-padding-gutters, medium) / 2;
padding-right: map-get($grid-padding-gutters, medium) / 2;

@include breakpoint (small only) {

padding-left: map-get($grid-padding-gutters, small) / 2;
padding-right: map-get($grid-padding-gutters, small) / 2;

}

}
This is assuming you are using SCSS first, and then compiling your css from that. If the override is conflicting, stick an !important in there as a last resort. Try being more specific with your selectors first though.
 
Hope this helps!

Posts Followed

  • 2
    Replies
  • XY Grid Half Size Gutters

    By Christian Magill

    xy grid

    What's the best way to allow for multiple gutter sizes with the xy grid? I want use the standard gutter sizes, but also have some areas where I need gutters to be half the size. &nbsp; Is this what I'd use xy-gutters() for or would I be better using xy... (continued)

    Last Reply by Christian Magill 5 months ago


Following

    No Content

Followers

My Posts

My Comments

You commented on Luke Cottingham's post 5 months

Anyone??

You commented on Christian Magill's post 5 months

My immediate thought is to create a new class that overrides the framework's padding. I'd need to look at the dependent styles first, but thinking as I type, I would do:
<div class="grid-x grid-padding-x padding-half">
...
</div>
I would then create an overriding style in your scss stylesheet with the following:
.grid-padding-x.padding-half {

padding-left: map-get($grid-padding-gutters, medium) / 2;
padding-right: map-get($grid-padding-gutters, medium) / 2;

@include breakpoint (small only) {

padding-left: map-get($grid-padding-gutters, small) / 2;
padding-right: map-get($grid-padding-gutters, small) / 2;

}

}
This is assuming you are using SCSS first, and then compiling your css from that. If the override is conflicting, stick an !important in there as a last resort. Try being more specific with your selectors first though.
 
Hope this helps!

Posts Followed


Following

  • No Content

Followers

  • No Content