# Vipassana Meditation as Taught By S.N. Goenka - Design Standards
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)
In the following, VDS stands for Vipassana Design Standards
## 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
```
### With ruby
Install the gem
```
gem install vipassana-design-standards
```
Adds helper to your application
```
class ApplicationController < ActionController::Base
# ...
helper Vipassana::DesignStandardsHelper
# ...
end
```
Use the helpers
```html
<%= vds_logo %> <%= vds_logo(size: 10) %> <%= vds_logo(dispositon: "mobile") %>
<%= vds_logo(locale: "fr", disposition: "default", tagline: true, size: 18, dark: false,
use_english: true) %>
```
### Without ruby
Alls SVG codes are available at https://cdn.jsdelivr.net/npm/vipassana-design-standards/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 the gem (recommended)
See a [complete example here](https://github.com/dhammaorg/design-standards/blob/master/demo/app/views/layouts/application.html.erb)
```html
<%= vds_bootstrap_theme_css_tag %> <%= vds_bootstrap_theme_js_tag %>
```
### Load with CDN
```html
```
### 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/src/stylesheets/bootstrap5-theme";
```
```
// 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
```
### 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
this section will take full horizontal space in mobile screen, overriding default body padding
This section will take the whole screen when printing the page
```
## Importing only fonts in your website
If you don't want the whole design, but just the fonts, you can do the following
```html
```
## Generate all logos as PNG
Use the UI to generate all logos (uncomment corresponding button form index.html), save same in a temp directory
Use https://compresspng.com/ to compress all logos and save save in dist/logos
Rename all the files by running
```
for file in *.png; do mv "$file" "${file%-min.png}.png";done
```
create a new archive dist/logos.zip