npm - ply-css - Versions diffs - 1.3.0 - Mend

ply-css 1.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (75) hide show

package/CLAUDE.md +176 -0
package/LICENSE +22 -0
package/PLY.md +646 -0
package/README.md +170 -0
package/dist/css/ply-core.css +6175 -0
package/dist/css/ply-core.min.css +1 -0
package/dist/css/ply-essentials.min.css +1 -0
package/dist/css/ply-helpers.min.css +1 -0
package/dist/css/ply.css +7429 -0
package/dist/css/ply.min.css +1 -0
package/dist/css/styles.css +7432 -0
package/dist/css/styles.min.css +1 -0
package/llms-full.txt +834 -0
package/llms.txt +34 -0
package/package.json +70 -0
package/ply-classes.json +2625 -0
package/snippets/accessible-drag-and-drop.html +122 -0
package/snippets/card.html +58 -0
package/snippets/contact-form.html +49 -0
package/snippets/custom-theme.html +280 -0
package/snippets/dashboard.html +77 -0
package/snippets/data-table.html +64 -0
package/snippets/login-page.html +45 -0
package/snippets/navbar-page.html +39 -0
package/snippets/notifications.html +63 -0
package/snippets/pricing-cards.html +95 -0
package/snippets/responsive-header.html +98 -0
package/snippets/starter-page.html +782 -0
package/snippets/two-column-layout.html +40 -0
package/src/scss/_ply-core-components.scss +32 -0
package/src/scss/_ply.scss +47 -0
package/src/scss/components/_accordion.scss +73 -0
package/src/scss/components/_alignments.scss +64 -0
package/src/scss/components/_autocomplete.scss +28 -0
package/src/scss/components/_blocks-responsive.scss +30 -0
package/src/scss/components/_blocks.scss +39 -0
package/src/scss/components/_buttons.scss +452 -0
package/src/scss/components/_colors.scss +447 -0
package/src/scss/components/_container-queries.scss +35 -0
package/src/scss/components/_cursors.scss +24 -0
package/src/scss/components/_dialog-patterns.scss +176 -0
package/src/scss/components/_dropdown.scss +68 -0
package/src/scss/components/_filterbox.scss +57 -0
package/src/scss/components/_flexible-embed.scss +19 -0
package/src/scss/components/_forms.scss +450 -0
package/src/scss/components/_grid.scss +210 -0
package/src/scss/components/_helpers-core.scss +357 -0
package/src/scss/components/_helpers.scss +466 -0
package/src/scss/components/_labels.scss +105 -0
package/src/scss/components/_livesearch.scss +233 -0
package/src/scss/components/_loader.scss +24 -0
package/src/scss/components/_media-queries.scss +9 -0
package/src/scss/components/_mixins.scss +387 -0
package/src/scss/components/_modal.scss +73 -0
package/src/scss/components/_multi-step-form.scss +190 -0
package/src/scss/components/_navigation-responsive.scss +63 -0
package/src/scss/components/_navigation.scss +592 -0
package/src/scss/components/_notifications.scss +185 -0
package/src/scss/components/_prettyprint.scss +86 -0
package/src/scss/components/_print.scss +74 -0
package/src/scss/components/_progress.scss +32 -0
package/src/scss/components/_reset.scss +365 -0
package/src/scss/components/_rtl.scss +213 -0
package/src/scss/components/_table-interactive.scss +110 -0
package/src/scss/components/_tables.scss +52 -0
package/src/scss/components/_themes.scss +6 -0
package/src/scss/components/_tooltip.scss +35 -0
package/src/scss/components/_typography.scss +565 -0
package/src/scss/components/_upload.scss +19 -0
package/src/scss/components/_variables.scss +129 -0
package/src/scss/ply-core.scss +1 -0
package/src/scss/ply-essentials.scss +15 -0
package/src/scss/ply-helpers.scss +11 -0
package/src/scss/ply-iso.scss +1 -0
package/src/scss/styles.scss +9 -0

package/snippets/login-page.html ADDED Viewed

@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Login - Ply</title>
+  <link rel="stylesheet" href="../dist/css/ply.min.css">
+  <style>
+    body {
+      display: flex;
+      align-items: center;
+      min-height: 100vh;
+    }
+    .login-card {
+      border: 1px solid var(--ply-border-color, #e0e0e0);
+      border-radius: 4px;
+      padding: 2rem;
+    }
+  </style>
+</head>
+<body>
+  <div class="units-container">
+    <div class="units-row centered-content">
+      <div class="unit-33 tablet-unit-66 phone-unit-100">
+        <div class="login-card">
+          <h1>Sign In</h1>
+          <form class="form" action="#" method="post" aria-label="Login form">
+            <label for="login-email">
+              Email
+              <input type="email" id="login-email" name="email" placeholder="you@example.com" required aria-required="true" autocomplete="email">
+            </label>
+            <label for="login-password">
+              Password
+              <input type="password" id="login-password" name="password" placeholder="Enter your password" required aria-required="true" autocomplete="current-password">
+            </label>
+            <button type="submit" class="btn btn-blue" style="width: 100%;">Sign In</button>
+          </form>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+</html>

package/snippets/navbar-page.html ADDED Viewed

@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Navbar Page - Ply</title>
+  <link rel="stylesheet" href="../dist/css/ply.min.css">
+</head>
+<body>
+  <a href="#main" class="skip-link">Skip to main content</a>
+  <nav class="navbar" aria-label="Main navigation">
+    <ul role="menubar">
+      <li class="active" role="none"><a href="#home" role="menuitem" aria-current="page">Home</a></li>
+      <li role="none"><a href="#about" role="menuitem">About</a></li>
+      <li role="none"><a href="#services" role="menuitem">Services</a></li>
+      <li role="none"><a href="#contact" role="menuitem">Contact</a></li>
+    </ul>
+  </nav>
+  <div class="units-container">
+    <main id="main">
+      <div class="units-row">
+        <div class="unit-100">
+          <h1>Navbar Page</h1>
+          <p>
+            The <code>.navbar</code> component provides a horizontal navigation bar
+            with a clean border-bottom accent. List items with the <code>.active</code>
+            class receive a bottom-border indicator showing the current page.
+          </p>
+          <p>
+            Pair the navbar with a <code>.units-container</code> below to constrain
+            your page content to the grid width.
+          </p>
+        </div>
+      </div>
+    </main>
+  </div>
+</body>
+</html>

package/snippets/notifications.html ADDED Viewed

@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Notifications - Ply</title>
+  <link rel="stylesheet" href="../dist/css/ply.min.css">
+</head>
+<body>
+  <div class="units-container">
+    <h1>Notification Alerts</h1>
+    <div role="alert" class="alert">
+      <div class="alert-content">
+        <strong>Default alert.</strong> This is a neutral notification with no color variant applied.
+      </div>
+      <button type="button" class="alert-dismiss" aria-label="Dismiss notification"></button>
+    </div>
+    <div role="alert" class="alert alert-blue">
+      <div class="alert-content">
+        <strong>Informational.</strong> This blue alert is used for general information messages.
+      </div>
+      <button type="button" class="alert-dismiss" aria-label="Dismiss notification"></button>
+    </div>
+    <div role="alert" class="alert alert-red">
+      <div class="alert-content">
+        <strong>Error.</strong> This red alert indicates a problem that needs attention.
+      </div>
+      <button type="button" class="alert-dismiss" aria-label="Dismiss notification"></button>
+    </div>
+    <div role="alert" class="alert alert-green">
+      <div class="alert-content">
+        <strong>Success.</strong> This green alert confirms an action completed successfully.
+      </div>
+      <button type="button" class="alert-dismiss" aria-label="Dismiss notification"></button>
+    </div>
+    <div role="alert" class="alert alert-yellow">
+      <div class="alert-content">
+        <strong>Warning.</strong> This yellow alert highlights something that may need review.
+      </div>
+      <button type="button" class="alert-dismiss" aria-label="Dismiss notification"></button>
+    </div>
+    <div role="alert" class="alert alert-outline alert-blue">
+      <div class="alert-content">
+        <strong>Outline variant.</strong> An outlined alert with a full border and tinted background.
+      </div>
+      <button type="button" class="alert-dismiss" aria-label="Dismiss notification"></button>
+    </div>
+    <div role="alert" class="alert alert-ghost alert-blue">
+      <div class="alert-content">
+        <strong>Ghost variant.</strong> A ghost alert with a transparent background and border only.
+      </div>
+      <button type="button" class="alert-dismiss" aria-label="Dismiss notification"></button>
+    </div>
+  </div>
+</body>
+</html>

package/snippets/pricing-cards.html ADDED Viewed

@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Pricing Cards - Ply</title>
+  <link rel="stylesheet" href="../dist/css/ply.min.css">
+  <style>
+    .pricing-card {
+      border: 1px solid var(--ply-border-color, #e0e0e0);
+      border-radius: 4px;
+      padding: 2rem;
+      text-align: center;
+    }
+    .pricing-card .price {
+      font-size: 2.5rem;
+      font-weight: 700;
+      line-height: 1.2;
+      margin-bottom: 0.5rem;
+    }
+    .pricing-card .price span {
+      font-size: 1rem;
+      font-weight: 400;
+      color: var(--ply-color-muted, #6f6f6f);
+    }
+    .pricing-card ul {
+      list-style: none;
+      padding: 0;
+      margin: 1.5rem 0;
+      text-align: left;
+    }
+    .pricing-card ul li {
+      padding: 0.4rem 0;
+      border-bottom: 1px solid var(--ply-border-color, #e0e0e0);
+    }
+    .pricing-card ul li:last-child {
+      border-bottom: none;
+    }
+  </style>
+</head>
+<body>
+  <div class="units-container">
+    <div class="units-row" style="text-align: center; margin-bottom: 0;">
+      <div class="unit-100">
+        <h1>Choose Your Plan</h1>
+        <p>Simple, transparent pricing for teams of every size.</p>
+      </div>
+    </div>
+    <div class="units-row">
+      <div class="unit-33 tablet-unit-100">
+        <article class="pricing-card" aria-labelledby="plan-starter">
+          <h3 id="plan-starter">Starter</h3>
+          <div class="price">$9 <span>/ month</span></div>
+          <ul>
+            <li>5 Projects</li>
+            <li>10 GB Storage</li>
+            <li>Email Support</li>
+            <li>Basic Analytics</li>
+          </ul>
+          <a href="#starter" class="btn btn-outline" role="button">Get Started</a>
+        </article>
+      </div>
+      <div class="unit-33 tablet-unit-100">
+        <article class="pricing-card" aria-labelledby="plan-pro">
+          <h3 id="plan-pro">Pro</h3>
+          <div class="price">$29 <span>/ month</span></div>
+          <ul>
+            <li>Unlimited Projects</li>
+            <li>100 GB Storage</li>
+            <li>Priority Support</li>
+            <li>Advanced Analytics</li>
+          </ul>
+          <a href="#pro" class="btn btn-blue" role="button">Get Started</a>
+        </article>
+      </div>
+      <div class="unit-33 tablet-unit-100">
+        <article class="pricing-card" aria-labelledby="plan-enterprise">
+          <h3 id="plan-enterprise">Enterprise</h3>
+          <div class="price">$99 <span>/ month</span></div>
+          <ul>
+            <li>Unlimited Everything</li>
+            <li>1 TB Storage</li>
+            <li>Dedicated Account Manager</li>
+            <li>Custom Integrations</li>
+          </ul>
+          <a href="#enterprise" class="btn btn-outline" role="button">Contact Sales</a>
+        </article>
+      </div>
+    </div>
+  </div>
+</body>
+</html>

package/snippets/responsive-header.html ADDED Viewed

@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Responsive Header — ply</title>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ply-css@1/dist/css/ply.min.css">
+  <style>
+    /* Hamburger toggle — only needed for the <details> mobile menu */
+    nav.navbar details > ul {
+      position: absolute;
+      left: 0;
+      right: 0;
+      background: var(--ply-bg-surface);
+      border-bottom: 1px solid var(--ply-border-color);
+      padding: 0.5rem 0;
+      z-index: 99;
+    }
+    nav.navbar details > ul li {
+      display: block;
+    }
+    nav.navbar details > ul li a {
+      display: block;
+      padding: 0.5rem 1rem;
+    }
+    nav.navbar details summary {
+      cursor: pointer;
+      padding: 0.5rem 1rem;
+      list-style: none;
+    }
+    nav.navbar details summary::-webkit-details-marker { display: none; }
+  </style>
+</head>
+<body>
+  <!-- Skip link — first focusable element -->
+  <a href="#main" class="skip-link">Skip to main content</a>
+  <!-- Sticky responsive header -->
+  <header class="sticky" style="top: 0; z-index: 100;">
+    <nav class="navbar" aria-label="Main navigation" style="position: relative;">
+      <!-- Desktop nav — hidden on mobile -->
+      <ul class="phone-hide">
+        <li class="active"><a href="#" aria-current="page">Home</a></li>
+        <li><a href="#">About</a></li>
+        <li><a href="#">Services</a></li>
+        <li><a href="#">Pricing</a></li>
+        <li><a href="#">Contact</a></li>
+      </ul>
+      <!-- Mobile hamburger — hidden on tablet and desktop -->
+      <details class="tablet-hide desktop-hide">
+        <summary aria-label="Menu">&#9776; Menu</summary>
+        <ul>
+          <li class="active"><a href="#" aria-current="page">Home</a></li>
+          <li><a href="#">About</a></li>
+          <li><a href="#">Services</a></li>
+          <li><a href="#">Pricing</a></li>
+          <li><a href="#">Contact</a></li>
+        </ul>
+      </details>
+    </nav>
+  </header>
+  <!-- Main content -->
+  <main id="main">
+    <div class="units-container">
+      <h1>Responsive Header Demo</h1>
+      <p>Resize the browser to see the navbar collapse into a hamburger menu on small screens. The header stays sticky on scroll.</p>
+      <h2>How It Works</h2>
+      <ul>
+        <li><strong>Desktop (≥ 768px):</strong> Standard horizontal navbar with ply's default styling.</li>
+        <li><strong>Mobile (≤ 767px):</strong> A <code>&lt;details&gt;</code>/<code>&lt;summary&gt;</code> element acts as a CSS-only hamburger toggle. No JavaScript needed.</li>
+        <li><strong>Sticky:</strong> The <code>sticky</code> class with <code>top: 0</code> keeps the header pinned on scroll.</li>
+        <li><strong>Accessible:</strong> <code>&lt;details&gt;</code> is natively keyboard-accessible (Enter/Space toggles). Skip link is provided. <code>aria-current="page"</code> marks the active page.</li>
+      </ul>
+      <!-- Spacer content to demonstrate sticky behavior -->
+      <div class="units-row margin-top-extra">
+        <div class="unit-50 tablet-unit-100">
+          <div class="border border-radius padding">
+            <h3>Feature One</h3>
+            <p>Scroll down to see the sticky header in action. The navigation stays visible at the top of the viewport.</p>
+          </div>
+        </div>
+        <div class="unit-50 tablet-unit-100">
+          <div class="border border-radius padding">
+            <h3>Feature Two</h3>
+            <p>The mobile menu uses native HTML disclosure — no JavaScript framework required, works with ply out of the box.</p>
+          </div>
+        </div>
+      </div>
+      <div style="height: 120vh;"></div>
+      <p>End of page.</p>
+    </div>
+  </main>
+</body>
+</html>