pdap-design-system 1.0.1 → 1.0.2

package/CONTRIBUTING.md

@@ -1,4 +1,4 @@
 # Contributing
-For PDAP staff: 
+For PDAP staff: Make changes as needed, but consider how widely this is used. Don't merge things until we test the changes.
 
 For the public: This is an internal system, but it could easily be forked and altered to meet your needs. Feel free to share potentially useful things back to us in a Pull Request.

package/README.md

@@ -2,18 +2,33 @@
 These are styling resources like CSS and templates for new PDAP microservices or branded web projects.
 
 Open `system/demo.html` to see how things look.
-`global-styles.css` are the styles used across all PDAP applications.
-`normalize.css` is used for more consistent cross-browser rendering.
+
+`system/css/global-styles.css` are the styles used across all PDAP applications.
+
+`system/css/normalize.css` is used for more consistent cross-browser rendering.
+
+`system/images` are icons and brand assets.
 
 # Usage
-```npm install pdap-design-system```
+1. In the project's directory:
+
+```
+npm install pdap-design-system
+```
+
+2. Without moving the CSS files, reference them like this:
+
+```
+  <link href="node_modules/pdap-design-system/system/css/normalize.css" rel="stylesheet" type="text/css">
+  <link href="node_modules/pdap-design-system/system/css/global-styles.css" rel="stylesheet" type="text/css">
+  ```
+
 
-# Context
-We are making tools for transparency about a serious subject. We are be focused, friendly, and open.
 
 ## Principles
 This is a first pass, so they're not etched in stone. Open to suggestions.
 
+We are making tools for transparency about a serious subject. We should be focused, friendly, and open.
 - Our design should take accessibility seriously. 
 - Keep it simple: things should not do anything they don't need to do. 
 - We should keep our users informed and in control with timely, relevant feedback.
@@ -24,4 +39,7 @@ This is a first pass, so they're not etched in stone. Open to suggestions.
 
 ## Assets
 Use these [brand assets](https://docs.pdap.io/meta/about/staff/brand-assets).
-Use this [terminology](https://docs.pdap.io/activities/terms-and-definitions).
+Use this [terminology](https://docs.pdap.io/activities/terms-and-definitions).
+
+## Other notes
+This is based on the PDAP website, which was originally created in Webflow. That might explain some of the CSS browser compatibility choices.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pdap-design-system",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Global styles for PDAP apps",
   "main": "system/css/global-styles.css",
   "directories": {

package/system/css/global-styles.css

@@ -1,6 +1,3 @@
-/* These were originally created in webflow. */
-/* Anything we needed from webflow.css was added here, so that's why there are some w- classes. */
-
 * {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
@@ -237,7 +234,6 @@ pre code {
 }
 .nav {
   position: relative;
-  background: #dddddd;
   z-index: 1000;
 }
 .nav:before,
@@ -536,19 +532,34 @@ strong {
     padding-right: 10px;
     padding-left: 10px;
   }
-
   .nav-container {
     -webkit-align-self: auto;
     -ms-flex-item-align: auto;
     -ms-grid-row-align: auto;
     align-self: auto;
   }
-
   .nav-menu {
-    padding: 20px;
+    padding: 10px;
     background-color: #bfc0c0;
+    display: none;
+    position: fixed;
+    top: 100%;
+    left: 0;
+    width: 100%; /* Full width */
+    height: calc(100% - 112px);
+    z-index: 999;
+    flex-direction: column; 
+    align-items: center;
+    justify-content: center;
+    overflow-y: auto;  /* In case the links exceed viewport height */
+    transition: transform 0.3s ease; /* Smooth transition for showing and hiding the menu */
+    transform: translateY(-100%); /* Hide the menu by default */
+  }
+  .nav-link {
+      color: white;
+      margin: 10px 0;
+      text-decoration: none;
   }
-
   .navbar {
     margin-right: -20px;
     margin-left: -20px;
@@ -620,9 +631,10 @@ strong {
     font-size: 18px;
   }
 
-  .grid-3 {
+  .layout-grid, .grid-2, .grid-3 {
     grid-column-gap: 15px;
     grid-row-gap: 15px;
+    grid-template-columns: 1fr;
     grid-auto-columns: 1fr;
     -ms-grid-columns: 1fr;
   }
@@ -678,7 +690,7 @@ strong {
     max-width: 80%;
   }
 
-  .grid, .grid-2 {
+  .layout-grid, .grid-2, .grid-3 {
     grid-column-gap: 15px;
     grid-row-gap: 15px;
     grid-auto-columns: 1fr;