Here's a situation. We've got an ES6 module that we use for helper functions and constants across various other modules in the project. Within this module, I export an object literal that defines our breakpoints. So far, all is clear (however, if you see a possible improvement, please do let me know.
/**
* # OurProject Helpers File
*
* This file should contain any js small script that helps other files.
*
* @module Helper
* @since 1.0.0
*/
...
/**
* Exports object literal with breakpoints matching those set in
* `/library/scss/utils/_variables.scss` in the Rupture section. The values
* represent screen width in pixels:
*
* @constant
* @type {Object}
* @default
* @example
* const breakPoints = {
* xs: 576,
* sm: 768,
* md: 992,
* lg: 1200,
* xl: 1400,
* };
*/
export const breakPoints = {
xs: 576,
sm: 768,
md: 992,
lg: 1200,
xl: 1400,
};
Then I've got another ES6 module. Let's call it ScrollSlider. In this module, I need to import a couple of things from the Helper module. And use them. Amongst them is a couple of breakpoints. I define these within the module's scope and then use them in the class.
'use strict';
import { getOffsetTop, breakPoints } from './Helper';
/**
* Parallax-like step-by-step slider used for example at `/app-builder`.
*
* @module ScrollSlider
*/
/**
* ???? HOW WOULD YOU DOCUMENT THIS ????
*/
const { sm, md } = breakPoints;
/**
* Used for creating instances of the scrolling slider.
*/
class ScrollSlider { ... }
Now the questions:
- Is this a good way of defining the breakpoints within the
ScrollSlidermodule? - I'd like the breakpoints to be mentioned on the ScrollSlider module documentation page, how do I get them there?
Top comments (0)