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
  1. package/CLAUDE.md +176 -0
  2. package/LICENSE +22 -0
  3. package/PLY.md +646 -0
  4. package/README.md +170 -0
  5. package/dist/css/ply-core.css +6175 -0
  6. package/dist/css/ply-core.min.css +1 -0
  7. package/dist/css/ply-essentials.min.css +1 -0
  8. package/dist/css/ply-helpers.min.css +1 -0
  9. package/dist/css/ply.css +7429 -0
  10. package/dist/css/ply.min.css +1 -0
  11. package/dist/css/styles.css +7432 -0
  12. package/dist/css/styles.min.css +1 -0
  13. package/llms-full.txt +834 -0
  14. package/llms.txt +34 -0
  15. package/package.json +70 -0
  16. package/ply-classes.json +2625 -0
  17. package/snippets/accessible-drag-and-drop.html +122 -0
  18. package/snippets/card.html +58 -0
  19. package/snippets/contact-form.html +49 -0
  20. package/snippets/custom-theme.html +280 -0
  21. package/snippets/dashboard.html +77 -0
  22. package/snippets/data-table.html +64 -0
  23. package/snippets/login-page.html +45 -0
  24. package/snippets/navbar-page.html +39 -0
  25. package/snippets/notifications.html +63 -0
  26. package/snippets/pricing-cards.html +95 -0
  27. package/snippets/responsive-header.html +98 -0
  28. package/snippets/starter-page.html +782 -0
  29. package/snippets/two-column-layout.html +40 -0
  30. package/src/scss/_ply-core-components.scss +32 -0
  31. package/src/scss/_ply.scss +47 -0
  32. package/src/scss/components/_accordion.scss +73 -0
  33. package/src/scss/components/_alignments.scss +64 -0
  34. package/src/scss/components/_autocomplete.scss +28 -0
  35. package/src/scss/components/_blocks-responsive.scss +30 -0
  36. package/src/scss/components/_blocks.scss +39 -0
  37. package/src/scss/components/_buttons.scss +452 -0
  38. package/src/scss/components/_colors.scss +447 -0
  39. package/src/scss/components/_container-queries.scss +35 -0
  40. package/src/scss/components/_cursors.scss +24 -0
  41. package/src/scss/components/_dialog-patterns.scss +176 -0
  42. package/src/scss/components/_dropdown.scss +68 -0
  43. package/src/scss/components/_filterbox.scss +57 -0
  44. package/src/scss/components/_flexible-embed.scss +19 -0
  45. package/src/scss/components/_forms.scss +450 -0
  46. package/src/scss/components/_grid.scss +210 -0
  47. package/src/scss/components/_helpers-core.scss +357 -0
  48. package/src/scss/components/_helpers.scss +466 -0
  49. package/src/scss/components/_labels.scss +105 -0
  50. package/src/scss/components/_livesearch.scss +233 -0
  51. package/src/scss/components/_loader.scss +24 -0
  52. package/src/scss/components/_media-queries.scss +9 -0
  53. package/src/scss/components/_mixins.scss +387 -0
  54. package/src/scss/components/_modal.scss +73 -0
  55. package/src/scss/components/_multi-step-form.scss +190 -0
  56. package/src/scss/components/_navigation-responsive.scss +63 -0
  57. package/src/scss/components/_navigation.scss +592 -0
  58. package/src/scss/components/_notifications.scss +185 -0
  59. package/src/scss/components/_prettyprint.scss +86 -0
  60. package/src/scss/components/_print.scss +74 -0
  61. package/src/scss/components/_progress.scss +32 -0
  62. package/src/scss/components/_reset.scss +365 -0
  63. package/src/scss/components/_rtl.scss +213 -0
  64. package/src/scss/components/_table-interactive.scss +110 -0
  65. package/src/scss/components/_tables.scss +52 -0
  66. package/src/scss/components/_themes.scss +6 -0
  67. package/src/scss/components/_tooltip.scss +35 -0
  68. package/src/scss/components/_typography.scss +565 -0
  69. package/src/scss/components/_upload.scss +19 -0
  70. package/src/scss/components/_variables.scss +129 -0
  71. package/src/scss/ply-core.scss +1 -0
  72. package/src/scss/ply-essentials.scss +15 -0
  73. package/src/scss/ply-helpers.scss +11 -0
  74. package/src/scss/ply-iso.scss +1 -0
  75. package/src/scss/styles.scss +9 -0
package/snippets/two-column-layout.html ADDED
@@ -0,0 +1,40 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Two-Column Layout - Ply</title>
7
+ <link rel="stylesheet" href="../dist/css/ply.min.css">
8
+ </head>
9
+ <body>
10
+ <div class="units-container">
11
+ <div class="units-row">
12
+ <aside class="unit-25 tablet-unit-100" aria-label="Sidebar">
13
+ <h2>Sidebar</h2>
14
+ <nav class="nav-stacked" aria-label="Sidebar navigation">
15
+ <ul>
16
+ <li class="active"><a href="#overview">Overview</a></li>
17
+ <li><a href="#reports">Reports</a></li>
18
+ <li><a href="#settings">Settings</a></li>
19
+ <li><a href="#help">Help</a></li>
20
+ </ul>
21
+ </nav>
22
+ </aside>
23
+
24
+ <main class="unit-75 tablet-unit-100">
25
+ <h1>Main Content</h1>
26
+ <p>
27
+ This two-column layout uses <code>unit-25</code> for the sidebar and
28
+ <code>unit-75</code> for the content area. On tablet-sized screens and
29
+ below, both columns stack to full width using <code>tablet-unit-100</code>.
30
+ </p>
31
+ <p>
32
+ The grid is built on flexbox with a <code>units-row</code> wrapper.
33
+ Units automatically collapse to 100% width at the tablet breakpoint
34
+ unless overridden with responsive classes.
35
+ </p>
36
+ </main>
37
+ </div>
38
+ </div>
39
+ </body>
40
+ </html>
package/src/scss/_ply-core-components.scss ADDED
@@ -0,0 +1,32 @@
1
+ /*
2
+ ply-core 1.0
3
+ CSS Framework: ply :: https://github.com/thatgibbyguy/ply
4
+ Framework Author: @thatgibbyguy
5
+
6
+ Lean bundle for AI-generated prototypes.
7
+ Includes: reset, colors, variables, typography, full responsive grid,
8
+ buttons, forms, navigation, notifications, tables, and essential helpers.
9
+ */
10
+
11
+ @use 'components/reset';
12
+ @forward 'components/colors';
13
+ @forward 'components/variables';
14
+ @forward 'components/media-queries';
15
+ @forward 'components/mixins';
16
+ @use 'components/helpers-core';
17
+
18
+ @use 'components/typography';
19
+
20
+ @use 'components/grid';
21
+ @use 'components/alignments';
22
+
23
+ @use 'components/tables';
24
+ @use 'components/forms';
25
+
26
+ @use 'components/navigation';
27
+ @use 'components/buttons';
28
+
29
+ @use 'components/notifications';
30
+ @use 'components/themes';
31
+
32
+ @use 'components/container-queries';
package/src/scss/_ply.scss ADDED
@@ -0,0 +1,47 @@
1
+ /*
2
+ ply 0.7.^
3
+ CSS Framework: ply :: https://github.com/thatgibbyguy/ply
4
+ Framework Author: @thatgibbyguy
5
+ */
6
+
7
+ @use 'components/reset';
8
+ @forward 'components/colors';
9
+ @forward 'components/variables';
10
+ @forward 'components/media-queries';
11
+ @forward 'components/mixins';
12
+ @use 'components/helpers';
13
+
14
+ @use 'components/typography';
15
+
16
+ @use 'components/grid';
17
+ @use 'components/alignments';
18
+ @use 'components/blocks';
19
+
20
+ @use 'components/tables';
21
+ @use 'components/forms';
22
+
23
+ @use 'components/navigation';
24
+ @use 'components/buttons';
25
+
26
+ @use 'components/notifications';
27
+ @use 'components/labels';
28
+ @use 'components/themes';
29
+
30
+
31
+ @use 'components/dropdown';
32
+ @use 'components/livesearch';
33
+ @use 'components/loader';
34
+ @use 'components/flexible-embed';
35
+
36
+ @use 'components/prettyprint';
37
+
38
+ @use 'components/blocks-responsive';
39
+ @use 'components/navigation-responsive';
40
+
41
+ @use 'components/table-interactive';
42
+ @use 'components/multi-step-form';
43
+ @use 'components/dialog-patterns';
44
+ @use 'components/container-queries';
45
+ @use 'components/rtl';
46
+
47
+ @use 'components/print';
package/src/scss/components/_accordion.scss ADDED
@@ -0,0 +1,73 @@
1
+ /* =Accordion
2
+ -----------------------------------------------------------------------------*/
3
+ .accordion-title {
4
+ position: relative;
5
+ display: block;
6
+ margin: 0;
7
+ margin-bottom: 2px;
8
+ padding: 12px 50px 12px 18px;
9
+ color: #000;
10
+ text-decoration: none;
11
+ font-weight: normal;
12
+ font-size: $font-size-base;
13
+ line-height: 1,4em;
14
+ background: $color-gray-pastel;
15
+ cursor: pointer;
16
+
17
+ -webkit-touch-callout: none;
18
+ -webkit-user-select: none;
19
+ -moz-user-select: none;
20
+ user-select: none;
21
+
22
+ &.accordion-title-opened {
23
+ margin-bottom: 0;
24
+ font-weight: bold;
25
+ background: $color-gray-light;
26
+ }
27
+ & a,
28
+ &:hover {
29
+ color: #000;
30
+ text-decoration: none;
31
+ }
32
+ &:focus-visible {
33
+ outline: 2px solid var(--ply-color-focus, #0f62fe);
34
+ outline-offset: -2px;
35
+ }
36
+ }
37
+ .accordion-panel {
38
+ padding: $base-line;
39
+ margin-bottom: 10px;
40
+ }
41
+ .accordion-toggle {
42
+ position: absolute;
43
+ top: 50%;
44
+ margin-top: -8px;
45
+ right: 20px;
46
+ padding: 0;
47
+ font-size: 0;
48
+ line-height: 1;
49
+ }
50
+ .accordion-toggle-closed {
51
+ background: #000;
52
+ width: 1px;
53
+ height: 15px;
54
+ margin-left: 1px;
55
+ &:before {
56
+ position: absolute;
57
+ top: 7px;
58
+ left: -7px;
59
+ content: "";
60
+ width: 15px;
61
+ height: 1px;
62
+ background: #000;
63
+ }
64
+ }
65
+ .accordion-toggle-opened:before {
66
+ position: absolute;
67
+ top: 7px;
68
+ left: -8px;
69
+ content: "";
70
+ width: 15px;
71
+ height: 1px;
72
+ background: #000;
73
+ }
package/src/scss/components/_alignments.scss ADDED
@@ -0,0 +1,64 @@
1
+ /* =Alignments
2
+ -----------------------------------------------------------------------------*/
3
+ .fully-centered {
4
+ align-items: center;
5
+ justify-content: center;
6
+ text-align: center;
7
+ }
8
+
9
+ .vertically-centered-space-between {
10
+ align-items: center;
11
+ justify-content: space-between;
12
+ }
13
+
14
+ .justify-center,
15
+ .horizontally-centered {
16
+ justify-content: center;
17
+ text-align: center;
18
+ }
19
+
20
+ .justify-flex-end,
21
+ .align-end {
22
+ justify-content: flex-end;
23
+ }
24
+
25
+ .justify-flex-start,
26
+ .align-beginning {
27
+ justify-content: flex-start;
28
+ }
29
+
30
+ .justify-space-around {
31
+ justify-content: space-around;
32
+ }
33
+
34
+ .justify-space-between {
35
+ justify-content: space-between;
36
+ }
37
+
38
+ .align-baseline {
39
+ align-items: baseline;
40
+ }
41
+
42
+ .align-center {
43
+ align-items: center;
44
+ text-align: center;
45
+ }
46
+
47
+ .align-middle {
48
+ align-items: center;
49
+ }
50
+
51
+ .align-flex-end,
52
+ .vertical-bottom {
53
+ align-items: flex-end;
54
+ }
55
+
56
+ .align-flex-start,
57
+ .vertical-top {
58
+ align-items: flex-start;
59
+ }
60
+
61
+ .align-stretch,
62
+ .fill-height {
63
+ align-items: stretch;
64
+ }
package/src/scss/components/_autocomplete.scss ADDED
@@ -0,0 +1,28 @@
1
+ /* =Autocomplete
2
+ -----------------------------------------------------------------------------*/
3
+ .autocomplete {
4
+ position: absolute;
5
+ z-index: 1000;
6
+ left: 0;
7
+ display: none;
8
+ margin: 0;
9
+ list-style: none;
10
+ background: #fff;
11
+ width: 250px;
12
+ box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
13
+ max-height: 250px;
14
+ overflow: auto;
15
+ & a {
16
+ padding: 4px 10px;
17
+ color: #000;
18
+ display: block;
19
+ text-decoration: none;
20
+ &:hover {
21
+ background: $color-gray-light;
22
+ }
23
+ &.active {
24
+ background: $color-blue;
25
+ color: #fff;
26
+ }
27
+ }
28
+ }
package/src/scss/components/_blocks-responsive.scss ADDED
@@ -0,0 +1,30 @@
1
+ @use "variables";
2
+
3
+ /* =Blocks Responsive
4
+ -----------------------------------------------------------------------------*/
5
+ @media only screen and (max-width: 767px) {
6
+
7
+ .blocks-2,
8
+ .blocks-3,
9
+ .blocks-4,
10
+ .blocks-5,
11
+ .blocks-6 {
12
+ margin-bottom: variables.$base-line;
13
+ }
14
+
15
+ .blocks-2 > li,
16
+ .blocks-3 > li,
17
+ .blocks-4 > li,
18
+ .blocks-5 > li,
19
+ .blocks-6 > li {
20
+ flex: 0 0 100%;
21
+ }
22
+
23
+ .blocks-mobile-50 > li {
24
+ flex: 0 0 calc(50% - variables.$grid-gutter-width * 0.5);
25
+ }
26
+ .blocks-mobile-33 > li {
27
+ flex: 0 0 calc(33.333% - variables.$grid-gutter-width * 2 / 3);
28
+ }
29
+
30
+ }
package/src/scss/components/_blocks.scss ADDED
@@ -0,0 +1,39 @@
1
+ @use "variables";
2
+
3
+ /* =Blocks
4
+ -----------------------------------------------------------------------------*/
5
+ .blocks-2,
6
+ .blocks-3,
7
+ .blocks-4,
8
+ .blocks-5,
9
+ .blocks-6 {
10
+ padding-left: 0;
11
+ margin: 0;
12
+ list-style: none;
13
+ display: flex;
14
+ flex-wrap: wrap;
15
+ gap: variables.$base-line variables.$grid-gutter-width;
16
+
17
+ & > li {
18
+ height: auto;
19
+ & ul {
20
+ list-style-type: disc;
21
+ }
22
+ & ul ul {
23
+ list-style-type: circle;
24
+ }
25
+ & li {
26
+ margin: 0;
27
+ }
28
+ }
29
+ }
30
+
31
+ .blocks-2 > li { flex: 0 0 calc(50% - variables.$grid-gutter-width * 0.5); }
32
+ .blocks-3 > li { flex: 0 0 calc(33.333% - variables.$grid-gutter-width * 2 / 3); }
33
+ .blocks-4 > li { flex: 0 0 calc(25% - variables.$grid-gutter-width * 0.75); }
34
+ .blocks-5 > li { flex: 0 0 calc(20% - variables.$grid-gutter-width * 0.8); }
35
+ .blocks-6 > li { flex: 0 0 calc(16.666% - variables.$grid-gutter-width * 5 / 6); }
36
+
37
+ .block-first {
38
+ // Kept for backward compatibility (no-op with flexbox)
39
+ }