vipassana-design-standards

v1.1.1

Published

18 days ago

Vipassana design standards materials

Downloads

167

0High
0Medium
0Low

seballot

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

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 :

<!-- Load fonts -->
<link rel="stylesheet" href="https://design-standards.dhamma.org/dist/css/fonts.css" />

<!-- If you use vds_logo, 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-standards

Adds helper to your application

class ApplicationController < ActionController::Base
  # ...

  helper Vipassana::DesignStandardsHelper

  # ...
end

Use the helpers

<!-- Logo -->
<!-- logo.css will need to be loaded, see above -->
<%= vds_logo %> <%= vds_logo(size: 10) %> <%= vds_logo(dispositon: "mobile") %>
<!-- All options -->
<%= vds_logo(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 the gem (recommended)

See a complete example here

<head>
  <%= vds_bootstrap_theme_css_tag %> <%= vds_bootstrap_theme_js_tag %>
</head>

Load with CDN

<link
  rel="stylesheet"
  href="https://design-standards.dhamma.org/dist/css/bootstrap5-theme.min.css"
/>
<script src="https://design-standards.dhamma.org/dist/js/bootstrap.bundle.min.js"></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/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 lang="xx" class="vds-html">
  <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 vds_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>

    <!-- 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

Font-family

<div class="ff-normal">Normal font (Noto Sans)</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

<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>

<button class="btn btn-with-icon btn-primary">
  <i class="fa fa-leaf"></i>
  Click me
</button>

Importing only fonts in your website

If you don't want the whole design, but just the fonts, you can do the following

<!-- 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>
</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