Reference_F-Style_Guide_for_Template_A_and_B.pdf

PDF 16 MB Posted Apr 4, 2018

Attached to: Ongoing and/or Intermittend Museum Specialist Services Federal contract opportunity
Solicitation number: NIHLM201800044-UHP
Issued by: Department of Health and Human Services National Institutes of Health National Library of Medicine

About this file

From the source

Museum Specialist - Reference F

View the file

Other files for this federal contract opportunity

Other files attached to Ongoing and/or Intermittend Museum Specialist Services, newest first.
File	Type	Posted
Q&As.pdf	PDF	Apr 20, 2018
Q&As.docx	DOCX document	Apr 16, 2018
Revised_Museum_Specialist_Business_Proposal_Template.xlsx	XLSX spreadsheet	Apr 16, 2018
Reference_C-Traveling_Banner_Script_Template.pdf	PDF	Apr 4, 2018
Task_Educator.pdf	PDF	Apr 4, 2018
Task_Registrarial_Services.pdf	PDF	Apr 4, 2018
Reference_A-Museum_Specialist_Lesson_Plan_Template.pdf	PDF	Apr 4, 2018
Quality-Assurance-Surveillance-Plan_4-4-2018.pdf	PDF	Apr 4, 2018
Reference_E-Digital_Filing_System.pdf	PDF	Apr 4, 2018
Reference_H-Fair_Use_Final_Version.pdf	PDF	Apr 4, 2018
Reference_G-Style_Guide_for_Orange_Site_Template.pdf	PDF	Apr 4, 2018
Reference_D-V5_Traveling_Exhibition_Services_Standard_Operating_Procedures.pdf	PDF	Apr 4, 2018
NLM(RC)-Rights_in_Data_-_Special_Works.pdf	PDF	Apr 4, 2018
Task_Guest_Curator.pdf	PDF	Apr 4, 2018
Task_Traveling_Exhibition_Services.pdf	PDF	Apr 4, 2018
Reference_B-Museum_Specialist_University_Module_Outline.pdf	PDF	Apr 4, 2018
Task_Exhibition_Coordination.pdf	PDF	Apr 4, 2018
Museum_Specialist_PWS_4-4-2018.pdf	PDF	Apr 4, 2018
Museum_Specialist_Business_Proposal_Template.xlsx	XLSX spreadsheet	Apr 4, 2018

Show all 19

On GovTribe

Work with this file on GovTribe

Download the original file
Contacts named in this file
Similar government files
Ask GovTribe AI about this file

Try for free Login

Text version

The file's text, extracted by GovTribe without its formatting.

Solicitation for Web Services Exhibition Program National Library of Medicine

Attachment A: Style Guide For Template A and B

Attachment A: Style Guide for Template A and B

Contents

Web Style Guide………………………………………………………………………………………………………………………………………………………………………………………………………………………

Template A | Template B…………………………………………………………………………………………………………………………………………………………………………………………………

1.0 Universal NLM Wrapper……………………………………………………………………………………………………………………………………………………………………………………………………………………………………………..9

1.1 Overview……………………………………………………………………………………………………………………………………………………………………………………………………………………

1.2 Code Changes……………………………………………………………………………………………………………………………………………………………………………………………………………………………………………..10

1.3 Notes………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………..11

2.0 Universal File Structure…………………………………………………………………………………………………………………………………………………………………………………………………………………………………………….12

2.1 Overview of Directory Structure………………………………………………………………………………………………………………………………………………………………………………………………………………………….12

2.2 common/css………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………..13

2.3 common/javascript………………………………………………………………………………………………………………………………………………………………………………………………………

2.4 |exhibitionname|/css……………………………………………………………………………………………………………………………………………………………………………………………………………………………………….15

3.0 Universal Footer…………………………………………………………………………………………………………………………………………………………………………………………………………………

4.0 Main Navigation……………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………..17

4.1 Universal Section Heading Names……………………………………………………………………………………………………………………………………………………………………………………

4.2 Horizontal Bar……………………………………………………………………………………………………………………………………………………………………………………………………………

4.2.1 Template A…………………………………………………………………………………………………………………………………………………………………………………………………………………………………….18

4.2.2 Template B…………………………………………………………………………………………………………………………………………………………………………………………………………………………………….19

4.3 Universal Dropdown Menus……………………………………………………………………………………………………………………………………………………………………………………………

4.4 Universal Icon Links……………………………………………………………………………………………………………………………………………………………………………………………………………………………………….21

4.5 Universal Floating Back to the Top……………………………………………………………………………………………………………………………………………………………………………………

5.0 Home Page………………………………………………………………………………………………………………………………………………………………………………………………………………………

5.1 Home Page- Template A………………………………………………………………………………………………………………………………………………………………………………………………………………………………….22

5.1.1 Overview……………………………………………………………………………………………………………………………………………………………………………………………………………………………………….22

5.1.2 Left Area……………………………………………………………………………………………………………………………………………………………………………………………………………………………………….24

5.1.2.1 Exhibition Logo………………………………………………………………………………………………………………………………………………………………………………………………………………….24

5.1.2.2 Introduction………………………………………………………………………………………………………………………………………………………………………………………………………………………25

5.1.2.3 Explore Menu……………………………………………………………………………………………………………………………………………………………………………………………………………………25

5.1.3 See the Digital Gallery- Home page 1……………………………………………………………………………………………………………………………………………………………………………………………………...25

5.1.3.1 Collage……………………………………………………………………………………………………………………………………………………………………………………………

5.1.4 See the Digital Gallery- Home page 2……………………………………………………………………………………………………………………………………………………………………………………………………...26

5.1.5 Find Educational Resources………………………………………………………………………………………………………………………………………………………………………………………………………………...26

5.1.6 Book the Traveling Exhibition………………………………………………………………………………………………………………………………………………………………………………

5.1.7 Background……………………………………………………………………………………………………………………………………………………………………………………………………………………………………27

5.1.8 Explore Menu Expanded……………………………………………………………………………………………………………………………………………………………………………………

5.1.9 Explore Menu Right Content………………………………………………………………………………………………………………………………………………………………………………………………………………...28

5.2 Home Page- Template B………………………………………………………………………………………………………………………………………………………………………………………………………………………………….29

5.2.1 Overview……………………………………………………………………………………………………………………………………………………………………………………………………………………………………….29

5.2.2 Top Area……………………………………………………………………………………………………………………………………………………………………………………………………………………………………….30

5.2.2.1 Exhibition Logo………………………………………………………………………………………………………………………………………………………………………………………………………………….30

5.2.2.2 Introduction/Theme Text……………………………………………………………………………………………………………………………………………………………………………………………………….30

5.2.2.3 Slider Area……………………………………………………………………………………………………………………………………………………………………………………………………………………….30

5.2.3 LEARN more…………………………………………………………………………………………………………………………………………………………………………………………………

5.2.4 SEE the digital gallery………………………………………………………………………………………………………………………………………………………………………………………………………………………..31

5.2.5 BOOK the traveling exhibition……………………………………………………………………………………………………………………………………………………………………………………………………………….32

6.0 Title Page…………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………….33

6.1 Page Title- Template A Overview………………………………………………………………………………………………………………………………………………………………………………………………………………………..33

6.2 Page Title- Template B Overview………………………………………………………………………………………………………………………………………………………………………………………………………………………..34

7.0 Left Navigation………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………36

7.1 Universal Elements………………………………………………………………………………………………………………………………………………………………………………………………………………………………………..37

7.1.1 Exhibition Logo………………………………………………………………………………………………………………………………………………………………………………………………………………………………..37

7.1.2 Menu Design…………………………………………………………………………………………………………………………………………………………………………………………………

7.1.3 Menu Expansion………………………………………………………………………………………………………………………………………………………………………………………………………………………………38

7.2 Exhibition Page…………………………………………………………………………………………………………………………………………………………………………………………………………………………………………….41

7.2.1 Overview………………………………………………………………………………………………………………………………………………………………………………………………………………………………………41

7.2.2 Menu Text……………………………………………………………………………………………………………………………………………………………………………………………………………………………………..42

7.2.3 From the Digital Gallery……………………………………………………………………………………………………………………………………………………………………………………………………………………...45

7.2.4 Exhibition Landing Page……………………………………………………………………………………………………………………………………………………………………………………………………………………..47

7.3 Education Page…………………………………………………………………………………………………………………………………………………………………………………………………………………………………………….48

7.3.1 Overview……………………………………………………………………………………………………………………………………………………………………………………………………………………………………….48

7.3.2 Menu Text……………………………………………………………………………………………………………………………………………………………………………………………………………………………………..49

7.3.3 Related Resources…………………………………………………………………………………………………………………………………………………………………………………………………………………………...52

7.3.4 Education Landing Page……………………………………………………………………………………………………………………………………………………………………………………

8.0 Exhibition Pages…………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………….54

8.1 Overview of Features……………………………………………………………………………………………………………………………………………………………………………………………………………………………………...56

8.2 Exhibition page- Template A……………………………………………………………………………………………………………………………………………………………………………………………………………………………..57

8.2.1 Overview- Template A………………………………………………………………………………………………………………………………………………………………………………………

8.2.2 Page Title Area………………………………………………………………………………………………………………………………………………………………………………………………

8.2.3 Left Navigation………………………………………………………………………………………………………………………………………………………………………………………………………………………………..58

8.2.3.1 Exhibition Logo………………………………………………………………………………………………………………………………………………………………………………………………………………….58

8.2.3.2 Menu Text………………………………………………………………………………………………………………………………………………………………………………………………………………………..58

8.2.3.3 Menu Design…………………………………………………………………………………………………………………………………………………………………………………………………………………….59

8.2.3.4 From the Digital Gallery…………………………………………………………………………………………………………………………………………………………………………

8.2.4 Theme Introduction…………………………………………………………………………………………………………………………………………………………………………………………………………………………...59

8.2.5 Asset Area……………………………………………………………………………………………………………………………………………………………………………………………………

8.2.5.1 Container………………………………………………………………………………………………………………………………………………………………………………………………………………………...60

8.2.5.2 Image…………………………………………………………………………………………………………………………………………………………………………………………………………………………….60

8.2.5.3 Navigation and Button Icons……………………………………………………………………………………………………………………………………………………………………

8.2.5.4 Enlarge Image Lightbox………………………………………………………………………………………………………………………………………………………………………………………………………..63

8.2.5.5 Title……………………………………………………………………………………………………………………………………………………………………………………………………………………………….64

8.2.5.6 Author…………………………………………………………………………………………………………………………………………………………………………………………………………………………….64

8.2.5.7 Credits……………………………………………………………………………………………………………………………………………………………………………………………………………………………64

8.2.5.8 Content……………………………………………………………………………………………………………………………………………………………………………………………

8.2.5.9 Linking to an Asset………………………………………………………………………………………………………………………………………………………………………………

8.3 Exhibition Page- Template B……………………………………………………………………………………………………………………………………………………………………………………………………………………………..65

8.3.1 Overview……………………………………………………………………………………………………………………………………………………………………………………………………………………………………….66

8.3.2 Page Title Area………………………………………………………………………………………………………………………………………………………………………………………………

8.3.3 Left Navigation………………………………………………………………………………………………………………………………………………………………………………………………………………………………..67

8.3.3.1 Exhibition Logo………………………………………………………………………………………………………………………………………………………………………………………………………………….68

8.3.3.2 Menu Text………………………………………………………………………………………………………………………………………………………………………………………………………………………..68

8.3.3.3 Menu Design…………………………………………………………………………………………………………………………………………………………………………………………………………………….68

8.3.3.4 From the Digital Gallery…………………………………………………………………………………………………………………………………………………………………………

8.3.4 Landing Page………………………………………………………………………………………………………………………………………………………………………………………………………………………………….69

8.3.5 Exhibition Detail Page..…………………………………………………………………………………………………………………………………………………………………………

8.3.6 Theme Introduction…………………………………………………………………………………………………………………………………………………………………………………………

8.3.7 Asset Area……………………………………………………………………………………………………………………………………………………………………………………………………

8.3.7.1 Image…………………..…………………………………………………………………………………………………………………………………………………………………………

8.3.7.2 Image Navigation and Button Icons.………………………………..…………………………………………………………………………………………………………………………

8.3.7.3 Enlarge Image Lightbox. ………………………………………………………………………………………………………………………………………………………………………………………………………77

8.3.7.4 Image Preview Rotator. ………………………………………………………………………………………………………………………………………………………………………………………………………..78

8.3.7.5 Title. …………………………………………………………………………………………………………………………………………………………………………

8.3.7.6 Author, Date. …………………………………………………………………………………………………………………………………………………………………………

8.3.7.7 Credits/Image Identification. …………………………………………………………………………………………………………………………………………………………………………………………………..80

8.3.7.8 Content. …………………………………………………………………………………………………………………………………………………………………………

8.3.7.9 Linking to an Asset. …………………………………………………………………………………………………………………………………………………………………………

9.0 Education Pages……………………………………..…………………………………………………………………………………………………………………………………………………………………………

9.1 Education Landing Page…………………………………………………………………………………………………………………………………………………………………………………

9.1.1 Introduction…………………………………………………………………………………………………………………………………………………………………………

9.1.2 Navigation Links…………………………………………………………………………………………………………………………………………………………………………

9.1.3 Content…………………………………………………………………………………………………………………………………………………………………………

9.2 Page Title Area…………………………………………………………………………………………………………………………………………………………………………

9.3 Left Navigation…………………………………………………………………………………………………………………………………………………………………………

9.3.1 Exhibition Logo…………………………………………………………………………………………………………………………………………………………………………

9.3.2 Menu Text…………………………………………………………………………………………………………………………………………………………………………

9.3.3 Menu Design…………………………………………………………………………………………………………………………………………………………………………

9.4 Lesson Plans…………………………………………………………………………………………………………………………………………………………………………

9.4.1 Text…………………………………………………………………………………………………………………………………………………………………………

9.4.2 Accordions…………………………………………………………………………………………………………………………………………………………………………

9.5 Higher Education…………………………………………………………………………………………………………………………………………………………………………

9.5.1 Landing Page…………………………………………………………………………………………………………………………………………………………………………

9.5.2 Details Page…………………………………………………………………………………………………………………………………………………………………………

9.6 Online Activities…………………………………………………………………………………………………………………………………………………………………………

9.7 Other Resources…………………………………………………………………………………………………………………………………………………………………………

9.7.1 Content…………………………………………………………………………………………………………………………………………………………………………

9.7.2 Icons…………………………………………………………………………………………………………………………………………………………………………

9.8 Related Resources at NLM…………………………………………………………………………………………………………………………………………………………………………

9.8.1 Vertical Headings…………………………………………………………………………………………………………………………………………………………………………

9.8.2 Image…………………………………………………………………………………………………………………………………………………………………………

9.8.3 Content Format …………………………………………………………………………………………………………………………………………………………………………

9.8.4 Icons…………………………………………………………………………………………………………………………………………………………………………

10.0 Credits Page…………………………………………………………………………………………………………………………………………………………………………

10.1 Page Title Area…………………………………………………………………………………………………………………………………………………………………………

10.2 Left Area…………………………………………………………………………………………………………………………………………………………………………

10.2.1 Exhibition Logo…………………………………………………………………………………………………………………………………………………………………………

10.2.2 Image…………………………………………………………………………………………………………………………………………………………………………

10.3 Content Format…………………………………………………………………………………………………………………………………………………………………………

11.0 Digital Gallery………………………………………………………………………………………………………………………………………………………………………………………………………………

11.1 Landing Page…………………………………………………………………………………………………………………………………………………………………………

11.1.1 Page Title Area…………………………………………………………………………………………………………………………………………………………………………

11.1.2 Digital Gallery Navigation…………………………………………………………………………………………………………………………………………………………………………

11.1.3 Welcome Text…………………………………………………………………………………………………………………………………………………………………………

11.1.4 Introduction Text…………………………………………………………………………………………………………………………………………………………………………

11.1.5 Browse & Explore Text…………………………………………………………………………………………………………………………………………………………………………

11.2 Browse Page…………………………………………………………………………………………………………………………………………………………………………

11.3 Browse Page Asset Format…………………………………………………………………………………………………………………………………………………………………………

11.4 Browse Page Navigation…………………………………………………………………………………………………………………………………………………………………………

11.4.1 By Title…………………………………………………………………………………………………………………………………………………………………………

11.4.2 Topic…………………………………………………………………………………………………………………………………………………………………………

11.4.3 By Creator…………………………………………………………………………………………………………………………………………………………………………

11.4.4 By Publisher…………………………………………………………………………………………………………………………………………………………………………

11.4.5 By Date…………………………………………………………………………………………………………………………………………………………………………

11.5 Browse Detail Page…………………………………………………………………………………………………………………………………………………………………………

11.6 Explore Page…………………………………………………………………………………………………………………………………………………………………………

12.0 Icon Glossary…………………………………………………………………………………………………………………………………………………………………………

13.0 Interactive Options…………………………………………………………………………………………………………………………………………………………………………

13.1 Overview…………………………………………………………………………………………………………………………………………………………………………

13.2 Carousel…………………………………………………………………………………………………………………………………………………………………………

13.2.1 Main Page…………………………………………………………………………………………………………………………………………………………………………

13.2.2 Main Page – Non-JS Version…………………………………………………………………………………………………………………………………………………………………………

13.2.3 Details Page…………………………………………………………………………………………………………………………………………………………………………

13.2.4 Details Page – Non-JS Version…………………………………………………………………………………………………………………………………………………………………………

13.3 Image Magnification…………………………………………………………………………………………………………………………………………………………………………

13.3.1 Overview…………………………………………………………………………………………………………………………………………………………………………

13.3.2 Container…………………………………………………………………………………………………………………………………………………………………………

13.3.3 Image…………………………………………………………………………………………………………………………………………………………………………

13.3.4 Content…………………………………………………………………………………………………………………………………………………………………………

13.3.5 Enlargement Lightbox…………………………………………………………………………………………………………………………………………………………………………

13.3.6 Non-JS Version…………………………………………………………………………………………………………………………………………………………………………

13.4 Hot Spots…………………………………………………………………………………………………………………………………………………………………………

13.4.1 Overview…………………………………………………………………………………………………………………………………………………………………………

13.4.2 Non-JS Version…………………………………………………………………………………………………………………………………………………………………………

13.5 Collage…………………………………………………………………………………………………………………………………………………………………………

13.5.1 Overview…………………………………………………………………………………………………………………………………………………………………………

13.5.2 Collage Enlargement/PreviewLightbox……………………………………………………………………………………………..…………………………………………………………………

13.5.3 Non-JS Version…………………………………………………………………………………………………………………………………………………………………………

13.6 3D Issue…………………………………………………………………………………………………………………………………………………………………………

13.6.1 Overview…………………………………………………………………………………………………………………………………………………………………………

13.6.2 Non-JS Version…………………………………………………………………………………………………………………………………………………………………………

13.7 Assets on a Map…………………………………………………………………………………………………………………………………………………………………………

13.7.1 Overview…………………………………………………………………………………………………………………………………………………………………………

13.7.2 Dropdown Menu…………………………………………………………………………………………………………………………………………………………………………

13.7.3 Details View…………………………………………………………………………………………………………………………………………………………………………

13.7.4 Enlargement Lightbox…………………………………………………………………………………………………………………………………………………………………………

13.7.5 Non-JS Version…………………………………………………………………………………………………………………………………………………………………………

13.8 Take a Close Look…………………………………………………………………………………………………………………………………………………………………………

13.8.1 Overview…………………………………………………………………………………………………………………………………………………………………………

13.8.2 Non-JS Version…………………………………………………………………………………………………………………………………………………………………………

Web Style Guide

Template A | Template B

Templates A and B have been developed for the National Library of Medicine, Exhibition Program online exhibitions. The online exhibitions reflect the spirit of the physical exhibitions that have been created. The online adaptation includes additional functionality and assets to enhance the user experience and to capitalize on the lack of physical constraints.

There are two home page options for Template A.

Template A - Home Page 1 Template A - Home Page 2 Template B - Home Page

Template A - Home Page 1 is ideal for an exhibition that focuses on a collection of common assets and may not necessarily identify itself with a specific image, asset or person. The following are examples of how this template has been utilized.

Template A - Home Page 2 may be ideal for an exhibition that focuses on a particular person or asset or has a strong image that the exhibition identifies with. The following are examples of how this template has been utilized.

Template B - Home Page has a different layout and HTML structure than Template A. The home page showcases the different themes of the exhibition upfront. This may be ideal for an exhibition where the focus is on the various perspectives or timeline. The following are examples of how this template has been utilized.

Pictures of Nursing

Frankenstein

Confronting Violence http://www.nlm.nih.gov/exhibition/picturesofnursing/ https://www.nlm.nih.gov/frankenstein/ https://www.nlm.nih.gov/confrontingviolence/

Template A - Home Page 1 Template A - Home Page 2 Template B - Home Page

Surviving & Thriving

Note: This site was created before the templating process.

George Washington

From DNA to Beer http://www.nlm.nih.gov/exhibition/survivingandthriving/ http://www.nlm.nih.gov/georgewashington/ https://www.nlm.nih.gov/fromdnatobeer/

For All the People

Pick Your Poison https://www.nlm.nih.gov/forallthepeople/ https://www.nlm.nih.gov/pickyourpoison/

Template A - Home Page 2 may be ideal for an exhibition that focuses on a particular person or asset or has a strong image that the exhibition identifies with.

The following are examples of how this template has been utilized.

A Voyage to Health https://www.nlm.nih.gov/avoyagetohealth/

1.0 Universal NLM Wrapper

1.1 Overview

1.2 Code Changes

1.3 Notes

1.1 Overview

ALL templates exist within the official NLM Wrapper. Therefore, the color choices should consider the context in which they will be displayed.

The wrapper is only modified to pull in the unique assets of the exhibition program.

1.2 Code Changes

Key lines that will need to be changed before beginning an exhibition template file:

Line 26:

Change to select the layout template (Template A uses layout-one.css | Template B uses layout-two.css)

Line 27:

Change the folder name to reflect the exhibition (in this case picturesofnursing)

Line 31:

Do not change this line, it references the common functions of the exhibition program.

Line 32:

This references the corresponding layout javascript functions. If you are using layout-one.css, this should be layout-one.js

Line 33:

This references the exhibition specific javascript functions file. Change the folder name to reflect the exhibition (in this case picturesofnursing)

Line 138:

This sets the main wrapper for the exhibition program content. The class x_w should always be present but the class after are modifying classes depending on which template the page uses. In this case the page is using the credits class.

Line 143:

This is the beginning of the content wrapper. The majority of code will be placed within this tag.

Line 149-163:

These lines are the common exhibition footer. It shouldn't be changed.

1.3 Notes

If an exhibition doesn't have exhibition specific javascript, create the reference anyways for future use.

The class 'x_w' and 'c_w' were used to ensure the styles for the exhibition program wouldn't override the main NLM styles and vice versa.

2.0 Universal File Structure

2.1 Overview of the Directory Structure

2.2 common/css

2.3 common/javascript

2.4 |exhibitionname|/css

2.1 Overview of the Directory Structure

The directory structure for the exhibitions follows a path of using as many common elements to control the layout and functionality as possible and the individual exhibitions overriding the base functions particularly in visual styles. In general if the modification or addition that needs to be made should affect all exhibitions, the modifications should go in the common folder. On the other hand if the change is only for that particular exhibition it should go in the individual exhibition folder.

Below is the basic directory structure with explanations on each folder:

/exhibition

- common

- - css

- - - fonts

- - - img

- - js

- {exhibitionname}

- - css

- - - img

- - js

- - img

Common Folder

This folder contains all the common and base files for an exhibition. When creating a new exhibition and choosing a base layout, the exhibition will be fully functional. Currently there is only one layout, layout-one which has a corresponding layout-one-css file and layout-one.js file When new layouts are introduced they will follow the same pattern.

Common CSS - This folder contains the css files (as well as subfolders for images and fonts) that control the layout and visual functionality of the exhibitions. The key file is layout-one.css. This file controls the layout of the exhibition templates and the basic styles. It will reference the img subfolder for UI elements and fonts for the web friendly fonts.

Common JS - This folder contains the javascript files for the exhibitions. The key file is layout-one.js which contains all the functionality of the layout-one templates. Likewise there is a file called common.js which holds all the common javascript functions. Since there is only one layout currently this file is underutilized, after another layout is introduced functions will move to this file. Also in this folder are third party javascript plugins.

In general its best to reference as many files from here as possible for code maintenance and performance. For example if a copy of a font file or plugin is loaded into the exhibition folder, the user will need to reload these files.

Likewise having one set of files will streamline support work.

Exhibition Folder

This folder contains all the HTML files and specific files for a particular exhibition Modifications to these files should only be to affect this exhibition.

CSS - This folder contains a file called main.css which is used to override the styles in the selected layout css file (for example layout-one.css). Most styles should be visual in nature, ie colors and UI control styles. The subfolder img stores the UI control override images.

JS - This is the exhibition specific folder for javascript. Most exhibitions won't need this unless they use a one off javascript function or something unique that will not be used elsewhere.

IMG - This folder stores the graphical assets for the exhibition. It's not meant to store UI controls (those referenced in CSS) and instead is for display photos relating to the exhibition.

2.2 common/css

The files under this directory are meant to be used across exhibitions. Most files are in house but there are some third party css files that shouldn't be edited. You will see files with a .less extension that can be edited if you have the proper parser.

/common/css/fonts

This folder holds the font files for the exhibition program. It doesn't include the css files.

/common/css/img

This folder holds the common UI images referenced in the css. Any changes to the images here will cascade across all exhibitions (unless overridden by the exhibition specific css)

/common/css/font-*.css

These are font specific css files used to create the font classes referenced in the css files. Each font has a corresponding css file.

/common/css/gridster.css

This is css for the gridster javascript functionality. Generally shouldn't be modified and only loaded when the gridster functionality is needed.

/common/css/gridster-print.css

This is css for printing gridster layouts. Same usage as above.

/common/css/layout-[name].css

CSS for Template A is "layout-one.css" CSS for Template B is "layout-two.css"

The layout files will be edited the most heavily when adding new functionality to the site and/or troubleshooting. The majority of the css that controls the exhibition layout and appearance is here.

/common/css/main-print.css

This is the print stylesheet for all the exhibitions. Printing styles are very basic, meant to print the content.

2.3 common/javascript

Similar to common/css, the files under this directory are meant to be used across exhibitions. Some are third party plugins and shouldn't be edited while others are in house and can be (although care should be taken since any changes will cascade across all exhibitions)

/common/js/cloud-carousel.1.0.5.min.js

This file is for the cloud carousel functionality (seen with the Education templates). It's a third party javascript file and shouldn't be edited.

/common/js/common.js

This file is for common functionality across exhibitions. Since there is only one exhibition template set currently, this file is a placeholder in anticipation of other layouts.

/common/js/digitalgallery-map.js

For the Digital Gallery Map template.

/common/js/gomap.js

This is a third party javascript function used in conjunction with Google maps and any NLM functions that need to communicate with it. Should not be edited.

/common/js/jcookie.js

This is a third party javascript function used to set and read cookies. It shouldn't be edited. It is used for maintaining the page state of accordions and other UI objects on certain templates.

/common/js/jquery.elevateZoom.min.js

This is a third party javascript function used to add zoom functionality to images. It shouldn't be edited.

/common/js/kb-slide.js

This is a third party javascript function used as a slider. It shouldn't be edited.

/common/js/layout-[name].js

This is the core functionality for either layout.

When layout-one.css (Template A) is used, this corresponding js file should be added. It controls all of the functionality of the pages.

When layout-two.css (Template B) is used, this corresponding js file should be added. It controls all of the functionality of the pages.

/common/js/taffy-min.js

This is a third party javascript function used as a client side database. Its used on pages where a large amount of data needs to be refreshed based on user input. It shouldn't be edited.

2.4 |exhibitionname|/css

These files are for styling individual exhibitions. Most of the changes here will be for colors and referencing new UI control images.

|exhibitionnanme|/css/img

This folder contains the specific UI control images to override the base images in the layout file. The filenames should be the same as what is in layout-|name|.css, for example if in layout-one.css an img is called 'icon-eye.png' the override file here should be named the same. Exhibition specific assets shouldn't be stored here.

|exhibitionnanme|/css/main.css

This css files is used to override styles in the layout css files.

|exhibitionname|/img

This folder is used to store photo and image assets for the exhibition. It shouldn't be used to store UI controls or background images.

|exhibitionname|/js/main.js

This is exhibition specific javascript. Not every exhibition will have unique javascript functions but the file should be created in case future revisions require it.

3.0 Universal Footer

The footer remains consistent throughout the online exhibition web sites.

The footer consists of the following parts after the word "EXPLORE," in the following order:

Description/Text Functionality Appearance

MORE EXHIBITIONS Links to NLM Exhibition Program's "Exhibitions" page NOT editable*

MORE EDUCATIONAL RESOURCES Links to NLM Exhibition Program's "Education Services: Online Resources" page NOT editable*

"Search Exhibition Program" search box Search box NOT editable*

*If these pieces were to be edited it would require a global change to all exhibition sites.

http://www.nlm.nih.gov/hmd/about/exhibition/exhibitions.html http://www.nlm.nih.gov/hmd/about/exhibition/education-resources-all.html

4.0 Main Navigation

4.1 Universal Section Heading Names

4.2 Horizontal Bar

o 4.2.1 Template A o 4.2.2 Template B

4.3 Universal Dropdown Menus

4.4 Universal Icon Links

4.5 Universal Floating Back to Top

4.1 Universal Section Heading Names

Both templates A and B have a consistent horizontal main navigation bar from where the user can access the main sections of the site. From left to right, in the following order, these sections include:

Home

Exhibition

Education

Digital Gallery

Credits

These names should not change from exhibition to exhibition. The naming convention should be consistent to provide familiar navigation and consistent organization for the user. The fonts should not change because the varying width of other fonts may adversely affect the structure of the layout and require consistent font changes throughout the site that will begin a cascade of unintended consequences for the layout.

Section Text Font Font Color Dropdown Menu

Home NOT editable

NOT editable

Font: KyrialSansProSemiBoldCond

Editable None

Exhibition NOT editable

NOT editable

Font: KyrialSansProSemiBoldCond

Editable Yes

Education NOT editable

NOT editable

Font: KyrialSansProSemiBoldCond

Editable Yes

Digital Gallery NOT editable

NOT editable

Font: KyrialSansProSemiBoldCond

Editable None

Credits NOT editable

NOT editable

Font: KyrialSansProSemiBoldCond

Editable None

The difference between the horizontal main navigation is in the location and appearance.

4.2 Horizontal Bar

4.2.1 Template A

Description Width Height Color

For Template A, the main horizontal bar starts out as a solid color and fades to 0% opacity before it reaches the icons on the right.

The location of the main navigation bar is at the top of the layout on all pages.

NOT editable Created to appear to extend with of the page

NOT

editable

Editable The color chosen should be of light or medium value so that the text color can be brighter and the dropdown darker. It should also be a color that is brighter than the background of that page and the NLM wrapper breadcrumb above so that it visually comes forward on the page.

Pipe lines between section headers File name: bg-nav-li.png Location: [exhibition-name]/css/img

NOT editable 1px

NOT

editable 25px

Editable The color should be provide distinction between the section headers but the contrast should not be so stark that it becomes the main focus of the bar.

Section indicator - the arrow that appear above the section the user is on

NOT editable

NOT

editable

NOT editable The set color is intended to blend in with the NLM wrapper breadcrumb navigation above.

4.2.2 Template B

Location on Home Page Location on Secondary Page

Description Width Height Color

For Template B, the main horizontal bar stays a consistent solid color.

On the home page, the location of the main horizontal bar is under the main graphic sliders.

On all other pages, the main horizontal bar appears under the page title near the top of the pages.

NOT

editable Created to appear to extend with of the page

NOT editable

Editable The color chosen can be of light, medium, or dark value. It should also be a color that stands out from the background of that page so that it visually comes forward on the page.

Circular disks between section headers.

File name: bg-nav-li.png Location: [exhibition-name]/css/img

NOT

editable 6px

NOT editable 6px

Editable The color should be provide distinction between the section headers but the contrast should not be so stark that it becomes the main focus of the bar.

Section indicator - the arrow that appear above the section the user is on

NOT

editable

NOT editable

Editable The color should have enough contrast from the background color of main navigation so that it stands out .

4.3 Universal Dropdown Menus

Whether Template A or B is used, the parameters for the dropdown menus remains the same.

Template A Template B

Section Text Font Font Color Hover Color Background Color Hover Background

Color Lines Between Subsections Width

Height of Subsections

Exhibitio n

Editable

The first subsection is always "Introduction" followed by the name of each theme. The name of the themes should be consistent with the names used in the left navigation and title area of the "Exhibition" pages.

Character count recommendation (with spaces): Less than 65 The character count considers the width of the dropdown, restricting the page title to one line, the left navigation to no more than three lines and the home page "Explore" menu to no more than two lines.

NOT editable

Font:

KyrialSansProSemiBoldCond

Editable Editable

Editable

The background color should be darker than the main horizontal navigation bar so that it recedes visually.

Editable

The background color should be brighter than both the dropdown and the main navigation bar so that it comes forward visually.

Editable

The color should be brighter than the background color so that it stands out enough to provide the visual division between subsections.

Width extends to accommodate the text on 1 line

The subsections for Education should be consistent from exhibition to exhibition. The subsection names are as follows in this order:

Lesson Plans

Higher Education

NOT editable

Font:

KyrialSansProSemiBoldCond

Same as above

Same as above Same as above Same as above Same as above

Online Activities

Other Resources

Related Resources at NLM

4.4 Universal Icon Links

The icon links that appear on the right side of the main navigation should be consistent from exhibition to exhibition and template to template in appearance, functionality and order.

Description Functionality Position Image

Add This Module Provides menu of different ways for the user to share the page NOT editable NOT editable

Facebook Links to NLMExhibitions Facebook page NOT editable NOT editable

Exhibition Program Links to main NLM Exhibition Program page NOT editable NOT editable

4.5 Universal Floating Back to Top

All pages and both templates have a floating "Back to Top" button that take the users to the top of the page. The designs can be unique from exhibition to exhibition.

Web Site Width Height Design Notes

Exhibition Program Site 30px 27px

*Future enhancement could include having a hover state

Template A

30px 27px

*Future enhancement could include having a hover state

Template B

34px 31px or 62px total

Hover color is the bottom part of the image https://www.facebook.com/NLMExhibitions http://www.nlm.nih.gov/hmd/about/exhibition/index.html https://www.nlm.nih.gov/exhibition/picturesofnursing/index.html https://www.nlm.nih.gov/exhibition/confrontingviolence/index.html

5.0 Home Page

Home Page - Template A | Home Page - Template B https://www.nlm.nih.gov/frankenstein/ https://www.nlm.nih.gov/confrontingviolence/

5.1 Home Page - Template A

5.1.1 Overview

5.1.2 Left Area

o 5.1.2.1 Exhibition Logo o 5.1.2.2 Introduction o 5.1.2.3 Explore Menu

5.1.3 See the Digital Gallery - Home page 1

o 5.1.3.1 Collage

5.1.4 See the Digital Gallery - Home page 2

5.1.5 Find Educational Resources

5.1.6 Book the Traveling Exhibition

5.1.7 Background

5.1.8 Explore Menu Expanded

5.1.9 Explore Menu Right Content

5.1.1 Overview

The home page consists of three main areas and one optional area.

1. Left Area: Exhibition Logo, Introduction, Explore Menu

2. See the Digital Gallery

3. Find Educational Resources

4. Book a Traveling Exhibition (Optional: used when appropriate)

Template A - Home Page 1 Template A - Home Page 2

5.1.2 Left Area

5.1.2.1 Exhibition Logo

The online exhibition logo is based on the logo created for the physical exhibition. There are times that the logo for the physical exhibition needs to be adapted to better fit the online environment. This may entail a more suitable dimension, a more legible online font or a slight color adjustment.

Width Height

Not editable 345px

Flexible There is a wiggle room depending on the length of the "Introduction" text. Even though it is built to be flexible, the overall height of the left area ideally should not exceed 438px.

https://www.nlm.nih.gov/exhibition/frankenstein/index.html

5.1.2.2 Introduction

Text Font Font Color Background

Editable Recommended character count (with spaces) is: 165-220. This may be dependent on how much space the logo needs.

Not editable For consistency throughout the site, it is not recommended to change the font.

Font: KyrialSansProRegularCond

Editable

Font:

KyrialSansProRegularCond

Editable The background behind the text is the same background that is within the entire left area. The background needs to be appear seamless as it transitions to the open "Explore" menu. Details such as the photo corners used in Pictures of Nursing are additional background images. Backgrounds, that do not appear rectangular are illusions created by the image.

5.1.2.3 Explore Menu

Text Font Font Color Background

Editable Recommended character count (with spaces) is: Less than 65. The theme titles should be consistent with the titles used in the main navigation drop down and left navigation bar and page header in the "Exhibition" section.

Not editable For consistency throughout the site, changing the font is not recommended.

Font: KyrialSansProRegularCond

Editable

Same as Introduction text

Editable The background needs to be appear seamless as it transitions to the open "Explore" menu.

Details such as the photo corners used in Pictures of Nursing are additional background images. Backgrounds, that do not appear rectangular are illusions created by the image.

"EXPLORE THIS EXHIBITION"

Not editable For consistency throughout the site, it is not recommended to change the font.

Font: DroidSansBold

Editable

"CLOSE" button at the bottom of the menu.

Not editable For consistency throughout the site, it is not recommended to change the font.

Font: KyrialSansProSemiBoldCond

Editable

5.1.3 See the Digital Gallery - Home page 1

This layout (i.e. Pictures of Nursing) may be ideal for a highlighting collection of assets where there may not necessarily be a central figure or asset you want to focus on. The scrolling collage layout is unique to each exhibition due to the varying sizes and dimensions of the assets. Keeping the download time in mind, there should not be more than 45 assets. Each asset is represented by a thumbnail which is rectangular/square in shape.

The code is also manually coded for each exhibition. Each thumbnail links to the related digital gallery page.

5.1.3.1 Collage

Width Height Number of Thumbnails Thumbnail Border Thickness Thumbnail Border Color

Flexible Dependent on custom layout of assets

Flexible Can not exceed 375px

Flexible Can not exceed 45

Not editable For consistency, 3px is recommended

Editable

Text Font Font Color

Not editable

"SEE THE DIGITAL GALLERY"

Not editable

Font for "SEE THE": DroidSansRegular

Font for "DIGITAL GALLERY": DroidSansBold

Editable http://www.nlm.nih.gov/exhibition/picturesofnursing http://www.nlm.nih.gov/exhibition/picturesofnursing http://www.nlm.nih.gov/exhibition/picturesofnursing http://www.nlm.nih.gov/exhibition/picturesofnursing

5.1.4 See the Digital Gallery - Home page 2

This layout (i.e. Frankenstein) uses one image to represent the Digital Gallery. Only one image is used so that the main focus is the background image that highlights a central figure or asset.

Width Height Border Color

Flexible Should not exceed 477px

Flexible Should not exceed 273 px

Editable Should be consistent with "Find Educational Resources" and "Book the Traveling Exhibition" borders.

Text Font Font Color

Not editable

"SEE THE DIGITAL

GALLERY"

Not editable

Font for "SEE THE": DroidSansRegular

Font for "DIGITAL GALLERY": DroidSansBold

Editable

Has hover state

5.1.5 Find Educational Resources

The wording "Find Educational Resources" and placement of the graphic should be consistent from exhibition to exhibition.

Text Font Font Color Background Color Hover Color Border Color Image Image Width Image Height

Not editable

"FIND EDUCATIONAL RESOURCES"

Not editable

ALL CAPS

Font: DroidSansBold

Editable

Has hover state

Editable

Has hover state

Editable Editable Should be consistent with "Digital Gallery" and "Book the Traveling Exhibition" borders.

Editable Not editable 283px

93px

5.1.6 Book the Traveling Exhibition

The wording "Book the Traveling Exhibition" and placement of the graphic should be consistent from exhibition to exhibition.

Text Font Font Color Background

Color Hover Color

Border Color Icon Color Box Width Box

Height

Not editable

"FIND EDUCATIONAL

RESOURCES"

Not editable

ALL CAPS

Font: DroidSansBold

Editable

Has hover state

Editable

Has hover state

Editable Editable Should be consistent with "Digital Gallery" and "Find Educational Resources" borders.

Editable However, icon itself should not change.

Not editable

5.1.7 Background

The design of the home page utilizes a background image. This background image has a gradation on the left, right and bottom so that it blends into the background color fairly seamlessly.

Image Image Width Image Height Background Color

Editable Not editable 1015px

Not editable 890px

Editable

5.1.8 Explore Menu Expanded

Typically, an exhibition has an "Introduction" and five themes for a total of six sections/links. When the user clicks on the "Explore" menu, the menu expands which then allows the user to learn a little about each theme by selecting one of the choices. When the user clicks on a section title or the accompanying thumbnail, content about that section appears to the right side of the page.

Theme Titles Font Font Color & Hover Color Thumbnail Thumbnails Width &

Height Thumbnail Border Color &

Border Hover Color

Editable Not editable

Editable Editable

Not editable 71px x 46px

ALL CAPS

Font: DroidSansBold

Has hover state

Close Button

Not editable Including icon for consistency between exhibitions

Not editable

Editable

ALL CAPS

Font: KyrialSansProSemiBoldCond

N/A N/A N/A

5.1.9 Explore Menu Right Content

Width x Height Border Color

Text Font Font Color

Link Color

Image

556px x 311px Height is flexible but dependent on amount of text underneath.

The above height is the ideal. A consistent height will also minimize visual shifts as the user explores each menu item.

Flexible N/A N/A N/A N/A

Caption N/A N/A Flexible Typically the caption is about 1 line or no more than 105 characters (with spaces)

Not editable

Font: KyrialSansProSemiBoldCond

Flexible Flexible

Content N/A N/A

Flexible Dependent on the height of the image and length of the caption. Typically one line of text is about 95 characters (with spaces). With the standard image height and 1 line caption, there is room for up to 8 lines of text. However, 3 to 4 lines followed by an ellipsis is ideal.

The source of the text used is the introduction for each theme.

Not editable

Font: KyrialSansProRegularCond

Flexible Flexible

Continue Link

N/A N/A Flexible Format is to use the wording "Continue to" followed by the title of the next theme in ALL CAPS.

Not editable

Font: KyrialSansProRegularCond

Flexible Flexible

5.2 Home Page - Template B

5.2.1 Overview

5.2.2 Top Area

o 5.2.2.1 Exhibition Logo o 5.2.2.2 Introduction/Theme Text o 5.2.2.3 Slider Area

5.2.3 LEARN more

5.2.4 SEE the digital gallery

5.2.5. BOOK the traveling exhibition

5.2.1 Overview

The home page consists of three main areas and one optional area.

1. Top Area: Exhibition Logo, Introduction/Theme Text, Slider Area

2. See the Digital Gallery

3. LEARN more

4. SEE the digital gallery

5. BOOK a Traveling Exhibition

Template B - Home Page

5.2.2 Top Area

5.2.2.1 Exhibition Logo

Width Height

Flexible up to 517px There is a wiggle room depending on the length of the logo.

Not editable 85px

5.2.2.2 Introduction/Theme Text

Text Font Font Color

Background

Editable Recommended character count (with spaces) is: up to 230.

A call to action to "CONTINUE to [THEME NAME]" follows the above text. The hyperlink is underlined.

Not editable For consistency throughout the site, changing the font is not recommended.

Font for Copy:

Georgia Regular

Font for Call to Action Link:

KyrialSansProSemiBoldCond

Editable Editable The background behind the text can be an image or solid color.

5.2.2.3 Slider Area

Image Width Height

Editable An image to represent each theme including the Introduction is chosen.

Not editable 570px

316px

Menu Text and Font Image Color

Explore Not editable Not editable Color of the text, circles and hover state are editable.

5.2.3 LEARN more

The area under the home page navigation highlights three areas of the site. The first is "LEARN more." The image is typically selected from the Education section (usually "Online Activities") and is featured along with a short blurb to engage the audience. The heading, image and "FIND OUT" button takes the user directly to the online activity or education section.

Width x Height

Border Color Text Font Font Color

Link Color

Heading N/A N/A

"LEARN more"

Text editable

Not editable

Font for "LEARN":

KyrialSansProBoldCond

Font for "more":

KyrialSansProSemiBoldCond

Flexible

N/A

Hover state is text underlined

Image 281 x 115px Flexible Flexible N/A N/A N/A

Image Inside Border

1px thick

Not…

This is the start of the file's text. The full file is on GovTribe.

File details come from the government source that posted it.