Support for custom breakpoints

[joebentaylor]

Is there a way to add custom breakpoints?

In my current SCSS version of foundation, I just have to add another line with the name of the breakpoint and size.

Surely there is a way to do this with this component?

[joebentaylor]

Ive looked through the source files an managed to understand that breakpoints are set in the enums.js file.

However there are no pixel values. How on earth does this work?

currently in this repo your breakpoints look like: SMALL: 'small', MEDIUM: 'medium', LARGE: 'large'

Where as in Foundations SCSS files there's a pixel value like so: small: '320px', medium: '768px', large: '1024px'

Where on earth does SMALL: 'small' get defined as a pixel size????

[pavanchaudhari]

@joebentaylor hey Joe,

As I see the enum you referring to,

export const Breakpoints = { SMALL: 'small', MEDIUM: 'medium', LARGE: 'large', };

is being used just for deciding the className on the element from foundation css.

E.g. If you observe the tests, here is how the enum Breakpoints is being used (or supposed to be used)

const component = render(<ButtonGroup stackFor={Breakpoints.SMALL}/>);

and inside ButtonGroup all it does is

const className = createClassName({ 'stacked-for-small': props.stackFor === Breakpoints.SMALL,

and if we see the foundation scss file, we can find below

.button-group.stacked-for-small .button:last-child{margin-bottom:0}

so in above case it's about the size of a button, rather than specifying the actual breakpoint. For modifying the breakpoints I suppose we need to make changes to the foundation SCSS.

[hugovk]

Thanks for the report, however we are going to archive this repo because we're no longer using or maintaining it.