You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: packages/kaizen-breakpoints/README.md
+12-7Lines changed: 12 additions & 7 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -9,24 +9,29 @@
9
9
10
10
## What is this?
11
11
12
-
- This package contains some script which parses breakpoints from themename/themename.breakpoints.yml and adds them into css and javascript.
12
+
- This package contains some script which parses breakpoints from Drupal's themename/themename.breakpoints.yml and adds them into css and javascript.
13
13
14
14
## Usage
15
15
16
-
1. This package is added as a dependency for [@skilld/kaizen-tg](https://www.npmjs.com/package/@skilld/kaizen-tg)package, so normally once theme is installed - you have `kaizen-breakpoints` already under the hood.
17
-
2. 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
18
-
3. Syntax of usage in css files (`@db` btw means `drupal breakpoint`):
16
+
Once [kaizen-tg](https://www.npmjs.com/package/@skilld/kaizen-tg) is installed:
17
+
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)
18
+
2. Syntax of usage in css files (`@db` btw means `drupal breakpoint`):
19
19
-`@db l {}` <-- it is analogue of old `@drupal-breakpoint l_1x {}` we had in Kaizen v1
20
20
-`@db l_1x {}`
21
-
-`@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.
22
-
4. Syntax of usage in js files:
21
+
-`@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
22
+
3. Syntax of usage in js files:
23
23
- all breakpoints located in `window.themeBreakpoints.themeName`
24
24
25
25
## Recommendations
26
26
27
-
5. Modern example of checking if screen's width now matches one or another breakpoint:
27
+
1. Modern example of checking if screen's width now matches one or another breakpoint:
Copy file name to clipboardExpand all lines: packages/kaizen-cg/README.md
+10-9Lines changed: 10 additions & 9 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -9,23 +9,24 @@
9
9
10
10
## What is this?
11
11
12
-
- This is a component generator for kaizen
12
+
- This is a component generator for [kaizen-tg](https://www.npmjs.com/package/@skilld/kaizen-tg)
13
13
14
14
## Usage
15
15
16
-
1.`cd web/themes/custom/themename`
17
-
2.`yarn cc` and follow instructions.
16
+
Once [kaizen-tg](https://www.npmjs.com/package/@skilld/kaizen-tg) is installed, use:
17
+
1.`cd [themename_dir]`
18
+
2.`yarn cc` and follow instructions
18
19
19
20
## Recommendations
20
21
21
-
1. Please follow BEM methodology when you creating component. More about BEM's namings http://getbem.com/naming/
22
-
2. Avoid jQuery inside of component as much as possible. Try to not use external libraries with jQuery dependency. Here is a useful link how to make one or another thing without jquery on vanilla javascripthttps://github.com/nefe/You-Dont-Need-jQuery
23
-
3. Don't worry now about IE11 browser. Kaizen doesn't support it
24
-
4. Use argTypes as much as possible (if your component is not static and have different modifiers), try to avoid component's variations if it's possible to replace them by argTypes.
25
-
5. Don't hardcode content in `component-name.twig` or `component-name.stories.js` of the component, you should build re-usable components. All default content should be added into `component-name.json` file, and then this content can be modified using `args` from any other component.
22
+
1. Please follow BEM methodology when you are creating component. More about BEM's namings [here](http://getbem.com/naming/)
23
+
2. Avoid jQuery inside of component as much as possible. Try to not use external libraries with jQuery dependency. Here is a useful [link](https://github.com/nefe/You-Dont-Need-jQuery) how to make one or another thing without jQuery on vanilla javascript
24
+
3. Don't worry now about IE11 browser - [kaizen-tg](https://www.npmjs.com/package/@skilld/kaizen-tg) doesn't support it
25
+
4. Use [argTypes](https://storybook.js.org/docs/react/api/argtypes) as much as possible if your component is not static and have different modifiers, try to avoid a lot of component's variations if it's possible to replace them by argTypes
26
+
5. Don't hardcode content in `component-name.twig` or `component-name.stories.js` of the component, you should build re-usable components. All default content should be stored into `component-name.json` file, and then this content can be modified using `args` from any other component.
Copy file name to clipboardExpand all lines: packages/kaizen-core/README.md
+16-17Lines changed: 16 additions & 17 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -9,16 +9,16 @@
9
9
10
10
## What is this?
11
11
12
-
- This package several helper-components which are using on every project usually. And also it contains several css files which should be on every project neither.
12
+
- This package contains several helper's components which we are using on every project usually. And also it contains several css files which attached globally to storybook and drupal by default.
13
13
14
-
## Entity fake link helper
14
+
###Entity fake link helper
15
15
16
16
This component helps you to easily simulate link to some wrapper, based on link inside of this wrapper. For example sometimes you need a whole teaser clickable based on its title's link-field. This script requires two data attributes added to the wrapper and to the link itself.
Note that you can even skip this attribute `data-h-entity-fake-link-target` if your clickable-container contains only one link inside. The script has a fallback in that case and it will take first link in the tree if target data attribute wasn't added for the link.
Styles for this helper called globally in storybook.
38
+
Styles for this helper called globally for storybook, so you don't need to import them manually (but actually the styles of this component contains only `cursor: pointer;` for the wrapper)
39
39
40
-
In Drupal this helper is not added by default, so you have to call `@skilld/kaizen-core/helpers/entity-fake-link/entity-fake-link.css` file from `src/` folder and import also `@skilld/kaizen-core/helpers/entity-fake-link/h-entity-fake-link` javascript file and call it same way you calling this script in storybook.
40
+
In Drupal this helper is not added by default, so if you need it - you have to manually import this component in `src/` folder and call its js/css globally or using drupal's libraries.
41
41
42
-
## Focus visible helper
42
+
###Focus visible helper
43
43
44
-
This script improves focus experience for the people who don't need a visual accessibility. For example native browser's behavior when you clicking on the button - it adds focus rings automatically, but what if user doesn't have a problems with health? Browser's native focus rings creates sometimes a lot of unnecessary noise and worsens perception of the site actually. So this helper component helps to show focus ring only to the people who really needs it (for example with that helper focus ring can be shown by pressing TAB key, but it will be hidden if interactive element was focused by using mouse)
44
+
This script improves focus experience for the people who don't need a visual accessibility. For example a native browser's behavior when you clicking on the button - is to add a focus rings automatically around button, but what if user doesn't have a problems with health? Browser's native focus rings creates sometimes a lot of unnecessary noise and worsens perception of the site actually. So this helper component helps to show focus ring only to the people who really needs it (for example with that helper focus ring can be shown by pressing TAB key, but it will be hidden if interactive element was focused by using mouse's buttons)
45
45
46
46
This helper component is included globally already in storybook, when you installing [@skilld/kaizen-tg](https://www.npmjs.com/package/@skilld/kaizen-tg) theme. And also this script is included globally in `src/` folder (so Drupal have this script loaded by default too). You don't need to do anything manually with it.
47
47
48
48
You can read more about focus visible [here](https://www.npmjs.com/package/focus-visible).
49
49
50
-
## Root variables
51
-
This script adds `style="--viewport-width: ...px; --viewport-height: ...px"` attribute with two css variables inside. These css variables changes dynamically on window.resize.
50
+
###Root variables
51
+
This script adds `style="--viewport-width: ...px; --viewport-height: ...px"` attribute with two css variables inside into html tag. These css variables changes dynamically on window.resize.
52
52
53
-
This script is useful for Safari browser on iOS for example. So if you need to get width or height of the viewport - you have to use these variables.
53
+
This script is useful for Safari browser on iOS for example. So if you need to get a real width or height of the viewport - you have to use these variables.
54
54
55
55
You can use them for burger menus, dialogs, and other. Example of code:
56
56
```
@@ -65,13 +65,12 @@ Also some bad example:
65
65
height: 100vh;
66
66
}
67
67
```
68
-
This is a bad example because in Safari browser on iPhone your element can be actually less or more than `100vh` sometimes. Because Safari is hiding top/bottom panels in browser often on scroll, after click on some specific element and so on. That's why you have to use instead:
69
-
```
70
-
.full-height-element {
71
-
height: var(--viewport-height);
72
-
}
73
-
```
74
-
In that case when Safari hiding its panels, this variable will get actually the real value of viewport.
68
+
This is a bad example because in Safari browser on iPhone sometimes `100vh` is not always really 100% of the viewport's height. That's why you have to use those variables.
0 commit comments