vipassana-design-standards 0.0.37 → 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (59) hide show
  1. package/README.md +46 -39
  2. package/dist/css/bootstrap5-theme.css +158 -128
  3. package/dist/css/bootstrap5-theme.css.map +1 -1
  4. package/dist/css/bootstrap5-theme.min.css +1 -1
  5. package/dist/css/bootstrap5-theme.rtl.css +158 -128
  6. package/dist/css/bootstrap5-theme.rtl.min.css +1 -1
  7. package/dist/css/fonts-ar.css +13 -5
  8. package/dist/css/fonts-fa.css +13 -5
  9. package/dist/css/fonts-gu.css +23 -11
  10. package/dist/css/fonts-he.css +23 -11
  11. package/dist/css/fonts-ja.css +2367 -473
  12. package/dist/css/fonts-km.css +23 -11
  13. package/dist/css/fonts-ko.css +1935 -471
  14. package/dist/css/fonts-or.css +23 -11
  15. package/dist/css/fonts-si.css +23 -11
  16. package/dist/css/fonts-ta.css +23 -11
  17. package/dist/css/fonts-te.css +23 -11
  18. package/dist/css/fonts-th.css +23 -11
  19. package/dist/css/fonts-zh-HANS.css +2271 -389
  20. package/dist/css/fonts-zh-HANT-HK.css +2901 -421
  21. package/dist/css/fonts-zh-HANT.css +2443 -405
  22. package/dist/css/fonts.css.map +1 -1
  23. package/dist/css/logo.css +39 -17
  24. package/dist/css/logo.css.map +1 -1
  25. package/dist/css/logo.min.css +1 -1
  26. package/dist/css/logo.rtl.css +39 -17
  27. package/dist/css/logo.rtl.min.css +1 -1
  28. package/dist/js/bootstrap5-theme.min.js +12 -12
  29. package/dist/js/helpers.js +45 -15
  30. package/dist/js/i18n.js +319 -319
  31. package/dist/js/react-helpers.jsx +106 -42
  32. package/package.json +1 -1
  33. package/src/stylesheets/bootstrap5-theme.scss +11 -11
  34. package/src/stylesheets/custom-bootstrap-utilities.scss +129 -50
  35. package/src/stylesheets/custom-bootstrap-variables.scss +40 -36
  36. package/src/stylesheets/custom-bootstrap.scss +17 -13
  37. package/src/stylesheets/fonts.scss +234 -70
  38. package/src/stylesheets/index.css +24 -22
  39. package/src/stylesheets/layout/vds-header.scss +3 -3
  40. package/src/stylesheets/layout/vds-layout.scss +6 -5
  41. package/src/stylesheets/layout/vds-mixins.scss +1 -1
  42. package/src/stylesheets/layout/vds-sidenav.scss +3 -2
  43. package/src/stylesheets/logo.scss +94 -78
  44. package/src/stylesheets/mixins.scss +2 -2
  45. package/src/stylesheets/specific-fonts/fonts-ar.css +13 -5
  46. package/src/stylesheets/specific-fonts/fonts-fa.css +13 -5
  47. package/src/stylesheets/specific-fonts/fonts-gu.css +23 -11
  48. package/src/stylesheets/specific-fonts/fonts-he.css +23 -11
  49. package/src/stylesheets/specific-fonts/fonts-ja.css +2367 -473
  50. package/src/stylesheets/specific-fonts/fonts-km.css +23 -11
  51. package/src/stylesheets/specific-fonts/fonts-ko.css +1935 -471
  52. package/src/stylesheets/specific-fonts/fonts-or.css +23 -11
  53. package/src/stylesheets/specific-fonts/fonts-si.css +23 -11
  54. package/src/stylesheets/specific-fonts/fonts-ta.css +23 -11
  55. package/src/stylesheets/specific-fonts/fonts-te.css +23 -11
  56. package/src/stylesheets/specific-fonts/fonts-th.css +23 -11
  57. package/src/stylesheets/specific-fonts/fonts-zh-HANS.css +2271 -389
  58. package/src/stylesheets/specific-fonts/fonts-zh-HANT-HK.css +2901 -421
  59. package/src/stylesheets/specific-fonts/fonts-zh-HANT.css +2443 -405
package/README.md CHANGED
@@ -3,12 +3,12 @@
3
3
  This repository contains the code for https://design-standards.dhamma.org/
4
4
 
5
5
  It also provide files and packages to easily implement the design standards in your website
6
+
6
7
  - [Ruby Gem Package](https://rubygems.org/gems/vipassana-design-standards)
7
8
  - [NPM Package](https://www.npmjs.com/package/vipassana-design-standards)
8
9
 
9
10
  In the following, VDS stands for Vipassana Design Standards
10
11
 
11
-
12
12
  ## Include the logo inside a website
13
13
 
14
14
  The recommended way for using the logo is either with SVG format or directly with HTML, so it's always perfectly displayed
@@ -28,11 +28,13 @@ If you are not using our `bootstrap5-theme` (see below), then you need to manual
28
28
  ### With ruby
29
29
 
30
30
  Install the gem
31
+
31
32
  ```
32
33
  gem install vipassana-design-standards
33
34
  ```
34
35
 
35
36
  Adds helper to your application
37
+
36
38
  ```
37
39
  class ApplicationController < ActionController::Base
38
40
  # ...
@@ -44,12 +46,11 @@ end
44
46
  ```
45
47
 
46
48
  Use the helpers
49
+
47
50
  ```html
48
51
  <!-- Logo -->
49
52
  <!-- logo.css will need to be loaded, see above -->
50
- <%= vds_logo %>
51
- <%= vds_logo(size: 10) %>
52
- <%= vds_logo(dispositon: "mobile") %>
53
+ <%= vds_logo %> <%= vds_logo(size: 10) %> <%= vds_logo(dispositon: "mobile") %>
53
54
  <!-- All options -->
54
55
  <%= vds_logo(locale: "fr", disposition: "default", tagline: true, size: 18, dark: false) %>
55
56
  ```
@@ -59,48 +60,55 @@ Use the helpers
59
60
  Alls SVG codes are available at https://design-standards.dhamma.org/dist/logos-inline-svg.json
60
61
 
61
62
  ### Available dispositions
62
- - default
63
- - mobile
64
- - left-one-line
65
- - left-one-line-no-tagline
66
- - left-two-lines
67
- - left-two-lines-no-tagline
68
- - centered
69
- - centered-no-tagline
63
+
64
+ - default
65
+ - mobile
66
+ - left-one-line
67
+ - left-one-line-no-tagline
68
+ - left-two-lines
69
+ - left-two-lines-no-tagline
70
+ - centered
71
+ - centered-no-tagline
70
72
 
71
73
  ## Using our bootstrap5 theme
72
74
 
73
75
  The best way to implement the whole design is to use our custom `bootstrap5-theme` containing :
74
- - bootstrap 5 customized
75
- - fonts styles
76
- - logo styles
76
+
77
+ - bootstrap 5 customized
78
+ - fonts styles
79
+ - logo styles
77
80
 
78
81
  ### Load with the gem (recommended)
79
82
 
80
83
  See a [complete example here](https://github.com/dhammaorg/design-standards/blob/master/demo/app/views/layouts/application.html.erb)
84
+
81
85
  ```html
82
86
  <head>
83
- <%= vds_bootstrap_theme_css_tag %>
84
- <%= vds_bootstrap_theme_js_tag %>
87
+ <%= vds_bootstrap_theme_css_tag %> <%= vds_bootstrap_theme_js_tag %>
85
88
  </head>
86
89
  ```
87
90
 
88
91
  ### Load with CDN
89
92
 
90
93
  ```html
91
- <link rel="stylesheet" href="https://design-standards.dhamma.org/dist/css/bootstrap5-theme.min.css" />
94
+ <link
95
+ rel="stylesheet"
96
+ href="https://design-standards.dhamma.org/dist/css/bootstrap5-theme.min.css"
97
+ />
92
98
  <script src="https://design-standards.dhamma.org/dist/js/bootstrap.bundle.min.js"></script>
93
99
  ```
94
100
 
95
101
  ### Install locally
96
102
 
97
103
  first Install npm package
104
+
98
105
  ```
99
106
  npm install vipassana-design-standards
100
107
  yarn add vipassana-design-standards
101
108
  ```
102
109
 
103
110
  Then include it
111
+
104
112
  ```
105
113
  // application.scss
106
114
  @import "vipassana-design-standards/src/stylesheets/bootstrap5-theme";
@@ -114,6 +122,7 @@ import 'bootstrap5';
114
122
  ### Layout structure
115
123
 
116
124
  We have made a custom layout, with basic header and sidenav. In case you want to use it, you need to align with following page structure
125
+
117
126
  ```html
118
127
  <html lang="xx" class="vds-html">
119
128
  <body class="vds-body">
@@ -145,8 +154,7 @@ We have made a custom layout, with basic header and sidenav. In case you want to
145
154
 
146
155
  <!-- Footer -->
147
156
  <footer class="vds-footer">
148
- <div class="vds-container">
149
- </div>
157
+ <div class="vds-container"></div>
150
158
  </footer>
151
159
  </body>
152
160
  </html>
@@ -187,13 +195,9 @@ Some class helpers have been added to complement the [bootstrap utilities](https
187
195
  this section will take full horizontal space in mobile screen, overriding default body padding
188
196
  </div>
189
197
 
190
- <button class="btn-floating-sm">
191
- Floating button on the bottom of the page, only for mobile
192
- </button>
198
+ <button class="btn-floating-sm">Floating button on the bottom of the page, only for mobile</button>
193
199
 
194
- <div class="full-page-print">
195
- This section will take the whole screen when printing the page
196
- </div>
200
+ <div class="full-page-print">This section will take the whole screen when printing the page</div>
197
201
 
198
202
  <button class="btn btn-with-icon btn-primary">
199
203
  <i class="fa fa-leaf"></i>
@@ -208,19 +212,20 @@ If you don't want the whole design, but just the fonts, you can do the following
208
212
  ```html
209
213
  <!-- Prodive 2-letters language code in html lang attribute -->
210
214
  <html lang="fr">
211
-
212
- <!-- Import fonts-->
213
- <link rel="stylesheet" href="https://design-standards.dhamma.org/dist/css/fonts.css" />
214
-
215
- <!-- Use the fonts where it's needed -->
216
- <style>
217
- body {
218
- font-family: var(--vds-font-family);
219
- }
220
- h1, h2 {
221
- font-family: var(--vds-headings-font-family);
222
- }
223
- </style>
215
+ <!-- Import fonts-->
216
+ <link rel="stylesheet" href="https://design-standards.dhamma.org/dist/css/fonts.css" />
217
+
218
+ <!-- Use the fonts where it's needed -->
219
+ <style>
220
+ body {
221
+ font-family: var(--vds-font-family);
222
+ }
223
+ h1,
224
+ h2 {
225
+ font-family: var(--vds-headings-font-family);
226
+ }
227
+ </style>
228
+ </html>
224
229
  ```
225
230
 
226
231
  ## Generate all logos as PNG
@@ -228,7 +233,9 @@ If you don't want the whole design, but just the fonts, you can do the following
228
233
  Use the UI to generate all logos (uncomment corresponding button form index.html), save same in a temp directory
229
234
  Use https://compresspng.com/ to compress all logos and save save in dist/logos
230
235
  Rename all the files by running
236
+
231
237
  ```
232
238
  for file in *.png; do mv "$file" "${file%-min.png}.png";done
233
239
  ```
240
+
234
241
  create a new archive dist/logos.zip