Comments (3)
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????
from react-foundation.
@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.
from react-foundation.
Thanks for the report, however we are going to archive this repo because we're no longer using or maintaining it.
from react-foundation.
Related Issues (20)
- Update links HOT 4
- 'isDisabled' property on buttons does not disable the button HOT 1
- Incorrect grid classes HOT 1
- Can someone bump fbjs => isomorphic-fetch? (due to vulnerabilities w node-fetch) HOT 3
- Documentation website not working HOT 2
- "Components with Bit" link not working HOT 1
- XY Grid grid-x grid-margin-x and grid-margin-y HOT 1
- Abide, or more js lib import HOT 1
- GridContainer full / fluid generates render warning from React
- do not require yarn HOT 2
- prepublish scripts are deprecated HOT 2
- deprecations and outdated / insecure (peer) dependencies HOT 6
- Fix the broken README badges HOT 2
- Out of Date Docs. HOT 5
- Warning message when isColumn prop is set on Column component HOT 1
- Does this work with React Native? HOT 1
- XY grid HOT 3
- XY-Grid Cell drops FlexboxPropTypes HOT 4
- Foundation is undefined HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-foundation.