2.0.0-beta.0 • Published 1 year ago
@skilld/kaizen-breakpoints v2.0.0-beta.0
kaizen-breakpoints
_/ _/
_/ _/ _/_/_/ _/_/_/_/ _/_/ _/_/_/
_/_/ _/ _/ _/ _/ _/_/_/_/ _/ _/
_/ _/ _/ _/ _/ _/ _/ _/ _/
_/ _/ _/_/_/ _/ _/_/_/_/ _/_/_/ _/ _/
What is it?
- The goal of this package is to re-use
themename.breakpoints.yml
for providing same breakpoints into css and js
Usage
Once kaizen-tg is installed:
1. To see the list of all available breakpoints and its names which you can use in your css and js files - you can run storybook and find it here /?path=/story/globals-variables--breakpoints
(It is Globals / Variables / Breakpoints path in storybook)
2. Syntax of usage in css files (@db
btw means drupal breakpoint
):
@db l {}
<-- it is analogue of old@drupal-breakpoint l_1x {}
we had in Kaizen v1@db l_1x {}
@db l_2x {}
<-- this is 2x multiplier for retina screens. We don't use usually it in css files, but this breakpoint needed for Drupal's responsive image groups, for 2x increased image styles
- Syntax of usage in js files:
- all breakpoints located in
window.themeBreakpoints.themeName
- all breakpoints located in
Recommendations
- Modern example of checking if screen's width now matches one or another breakpoint:
if (window.matchMedia(window.themeBreakpoints.themeName.breakpointName).matches) {}
Other kaizen's packages
License
This project is licensed under the MIT open source license.
2.0.0-beta.0
1 year ago
2.0.0-alpha.3
2 years ago
2.0.0-alpha.1
2 years ago
2.0.0-alpha.2
2 years ago
2.0.0-alpha.0
2 years ago
1.0.1
2 years ago
1.0.0
4 years ago
0.0.2
4 years ago
0.0.1
4 years ago