npm - vipassana-design-standards - Versions diffs - 0.0.12 → 0.0.14 - Mend

vipassana-design-standards 0.0.12 → 0.0.14

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 (88) hide show

package/HOW_TO_PUBLISH.md ADDED Viewed

@@ -0,0 +1,35 @@
+## Compile CSS
+Install compilers
+```
+npm install -g sass clean-css-cli
+```
+Install local dependecies
+```
+yarn
+```
+Compile
+```
+sass --load-path=node_modules src/stylesheets/bootstrap5-theme.scss dist/css/bootstrap5-theme.css
+sass src/stylesheets/fonts.scss dist/css/fonts.css
+sass src/stylesheets/logo.scss dist/css/logo.css
+cleancss -o dist/css/bootstrap5-theme.min.css dist/css/bootstrap5-theme.css
+cleancss -o dist/css/fonts.min.css dist/css/fonts.css
+```
+## Deploy
+Npm package: Bump version in `package.json` and run `npm publish`
+Gem : Bum version in `vipassana-design-standards.gemspec` and run
+```
+gem build vipassana-design-standards.gemspec
+gem push vipassana-design-standards-XXXX.gem
+```
+Global replace `?ver=old_version` by `?ver=new_version`
+Update https://design-standards.dhamma.org by pushing new files via FTP

package/README.md CHANGED Viewed

@@ -1,32 +1,218 @@
-# Vipassana Meditation as Taught By S.N. Goenka
-## Design Standards
+# Vipassana Meditation as Taught By S.N. Goenka - Design Standards
-Provide a simple website to download the logos in different format and variations
+This repository contains the code for https://design-standards.dhamma.org/
+It also provide files and packages to easily implement the design standards in your website
+- [Ruby Gem Package](https://rubygems.org/gems/vipassana-design-standards)
+- [NPM Package](https://www.npmjs.com/package/vipassana-design-standards)
-helper Vipassana::LogoHelper
+In the following, VDS stands for Vipassana Design Standards
-<body class="vds-body">
-  <div class="vds-header-and-content">
-    <header class="vds-header">
-      <!-- Logo vipassana_logo_svg -->
-    </header>
-    <div class="vds-page vds-container">
-      <div class="vds-sidenav">
-        <ul>
-          <li>
-            <a href="test">Test</a>
-          </li>
-        </ul>
-      </div>
+## Include the logo inside a website
+The recommended way for using the logo is either with SVG format or directly with HTML, so it's always perfectly displayed
+For this to work, you will need have the propper fonts loaded in your page, and specific css for the logo.
+If you are not using our `bootstrap5-theme` (see below), then you need to manually import those files :
+```html
+<!-- Load fonts -->
+<link rel="stylesheet" href="https://design-standards.dhamma.org/dist/css/fonts.css" />
+<!-- If you use vipassana_logo_html, load this specific file -->
+<link rel="stylesheet" href="https://design-standards.dhamma.org/dist/css/logo.css" />
+```
+### With ruby
+Install the gem
+```
+gem install vipassana-design-standard
+```
+Adds helper to your application
+```
+class ApplicationController < ActionController::Base
+  # ...
+  helper Vipassana::LogoHelper
+  # ...
+end
+```
+Use the helpers
+```html
+<!-- SVG logo -->
+<%= vipassana_logo_svg %>
+<%= vipassana_logo_svg(height: 80) %>
+<%= vipassana_logo_svg(width: 500) %>
+<%= vipassana_logo_svg(disposition: "mobile") %>
+<!-- All options -->
+<%= vipassana_logo_svg(locale: "fr", disposition: "default", tagline: true, height: 200) %>
+<!-- HTML Logo -->
+<!-- logo.css will need to be loaded, see above -->
+<%= vipassana_logo_html %>
+<%= vipassana_logo_html(size: 10) %>
+<%= vipassana_logo_html(dispositon: "mobile") %>
+<!-- All options -->
+<%= vipassana_logo_html(locale: "fr", disposition: "default", tagline: true, size: 18, dark: false) %>
+```
+### Without ruby
+Alls SVG codes are available at https://design-standards.dhamma.org/dist/logos-inline-svg.json
+### Available dispositions
+ - default
+ - mobile
+ - left-one-line
+ - left-one-line-no-tagline
+ - left-two-lines
+ - left-two-lines-no-tagline
+ - centered
+ - centered-no-tagline
+## Using our bootstrap5 theme
+The best way to implement the whole design is to use our custom `bootstrap5-theme` containing :
+ - bootstrap 5 customized
+ - fonts styles
+ - logo styles
+### Load with CDN
+```html
+<link rel="stylesheet" href="https://design-standards.dhamma.org/dist/css/bootstrap5-theme.min.css" />
+<!-- Don't forget to also include bootstrap javascript -->
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
+```
+### Install locally
+first Install npm package
+```
+npm install vipassana-design-standards
+yarn add vipassana-design-standards
+```
+Then include it
+```
+// application.scss
+@import "vipassana-design-standards/scss/bootstrap5-theme";
+```
-      <div class="vds-page-content">
-        <!-- Page content -->
+```
+// application.js
+import 'bootstrap5';
+```
+### Layout structure
+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
+```html
+<html lang="xx">
+  <body class="vds-body">
+    <div class="vds-header-and-content">
+      <!-- Header -->
+      <header class="vds-header">
+        <div class="vds-container">
+          <a href class="vds-logo-link"><!-- Logo vipassana_logo_svg --></a>
+        </div>
+      </header>
+      <!-- Page -->
+      <div class="vds-page vds-container">
+        <div class="vds-sidenav">
+          <ul>
+            <li>
+              <a href="#" class="active">Test</a>
+            </li>
+            <li>
+              <a href="#">Other</a>
+            </li>
+          </ul>
+        </div>
+        <div class="vds-page-content">
+          <!-- Page content -->
+        </div>
       </div>
     </div>
-  </div>
-  <footer class="vds-footer">
-  </footer>
-</body>
+    <!-- Footer -->
+    <footer class="vds-footer">
+      <div class="vds-container">
+      </div>
+    </footer>
+  </body>
+</html>
+```
+### Custom bootstrap utilities
+Some class helpers have been added to complement the [bootstrap utilities](https://getbootstrap.com/docs/5.3/utilities/background/)
+#### Font-family
+```html
+<div class="ff-normal">Normal font (Lato)</div>
+<div class="ff-headings">Headings font (Footlight)</div>
+```
+#### Font-size
+```
+.fs-normal
+.fs-05-rem // font-size: .5rem
+.fs-085-rem // font-size: .85rem
+.fs-11-rem // font-size: 1.1rem
+.fs-135-rem // font-size: 1.35rem
+.fs-0X-em // font-size: .Xem
+.fs-0X5-em // font-size: .X5em
+.fs-1X-em // font-size: 1.Xem
+.fs-1X5-em // font-size: 1.X5em
+```
+#### Other
+```html
+<div class="full-width-sm">
+  this section will take full horizontal space in mobile screen, overriding default body padding
+</div>
+<button class="btn-floating-sm">
+  Floating button on the bottom of the page, only for mobile
+</button>
+<div class="full-page-print">
+  This section will take the whole screen when printing the page
+</div>
+```
+## Importing only fonts in your website
+If you don't want the whole design, but just the fonts, you can do the following
+```html
+<!-- Prodive 2-letters language code in html lang attribute -->
+<html lang="fr">
+<!-- Import fonts-->
+<link rel="stylesheet" href="https://design-standards.dhamma.org/dist/css/fonts.css" />
+<!-- Use the fonts where it's needed -->
+<style>
+  body {
+    font-family: var(--vds-font-family);
+  }
+  h1, h2 {
+    font-family: var(--vds-headings-font-family);
+  }
+</style>
+```