Menu icon Foundation

Coder | UK

My Posts


My Comments

Luke Cottingham commented on Luke Cottingham's post 10 months

Anyone??

Luke Cottingham commented on Christian Magill's post 10 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 10 months ago


Following

    No Content

Followers

My Posts

My Comments

You commented on Luke Cottingham's post 10 months

Anyone??

You commented on Christian Magill's post 10 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