search

The-Lab-at-OPM / Welcome-to-Telehealth-Kit

Welcome to Telehealth Kit
2 stars 2 forks source link

readme

Welcome to Telehealth Kit

This is the prototype for the Welcome to Telehealth Kit. It’s built with Middleman but can and should be built and used with a content management system. You can view the latest build on staging via anatecture.

Development

Running it locally

  1. First, ensure you have a Ruby environment with Bundler on your computer.
  2. In your terminal, cd into this directory and run bundle install.
  3. Run bundle exec middleman and go to localhost:4567 in your browser.

Building

After you have successfully run the app locally, use bundle exec middleman build to create a new build. It will be in the /build/ directory.

Where things are

The HTML is primarily split between /source/index.html.erb for the content and /source/layouts/layout.erb for everything else. The VA seal can be found in /source/partials/_va-seal.html.erb as an SVG.

Stylesheets are written in Sass and can be found at /source/stylesheets/style.css.scss.

Scripts are in /source/javascripts/script.js.

Content

URL features

This Welcome to Telehealth Kit can contain an array of content modules, not all of which are visible by default. To see a list of all content modules add /?edit to the URL and you can see all modules and customize the URL for the user.

HTML Structure and special features

The main content file is /source/index.html.erb and it contains a series of <article> elements. Each of these elements denotes a page of content and should have a unique ID. By default all modules are visible, but to make a section optional add the class class="sectionName hidden" and modify the Name part of sectionName to be a capitalized variation of the unique ID.

Within each <article> there is a <header> containing a headline <h1> and optional opening paragraph <p>.

Below the <header> is a <section> where all content can be placed.

To make a <ul> a checklist add the class checklist

Editable sections are spans withe the class editable like so: <span class="editable"></span> and adding a title attribute will add text explaining what the field is for <span class="editable" title="Date of appointment"></span>.

If you want the section to print out as a card, add the class card to the <article>. Cards are formatted with the <section> first and an <aside> after like so:

<section class="card-content">
</section>
<aside class="card-aside">
</aside>