Updating pure-css via an AI's input - would require someone qualified to take control of such an update

[SinanGabel]

Is your feature request related to a problem? Please describe.
The feature is not related to a problem.

Describe the solution you'd like
An update of the library to fit today's standards.

Describe alternatives you've considered
An alternative is to switch to another CSS library.

Additional context
The update can possibly be done with the help of an AI. In this suggested update, I have asked Google Gemini (version last updated with information from 27 August 2024) to come up with suggested changes to pure-css.

Code update suggested

Grid System:

• Replaced display: inline-block and percentage widths with display: flex and flex properties to utilize Flexbox.
• Consolidated grid classes into a single set of rules with nested media queries.
• Simplified selectors (removed letter-spacing, word-spacing, etc.).

CSS Variables:

• Introduced CSS variables for common design tokens like colors and border styles.
• Used variables in button styles (you can extend this to other components).

Accessibility:

• Updated button example to use element (apply this principle where applicable).
• Added a comment to highlight the importance of sufficient color contrast and using a contrast checker tool.
• Further Improvements (Not Implemented in this Example):

Further

• More Comprehensive Accessibility Review: Conduct a thorough audit to identify and address other potential accessibility issues (e.g., keyboard navigation, ARIA attributes).
• Flexbox/Grid for Specific Components: Explore using Flexbox/Grid for other components like menus, forms, or tables to enhance layout control.
• Documentation: Create clear documentation to explain the updated CSS architecture, class names, and usage guidelines.
• Note: This modified code provides a starting point for updating the Pure CSS library. You'll likely need to adjust and extend these changes based on your specific project requirements and design considerations. Remember to thoroughly test the updated styles across different browsers and devices.

Code draft update

/*!
Pure v3.0.0 Modified
Copyright 2013 Yahoo!
Licensed under the BSD License.
https://github.com/pure-css/pure/blob/master/LICENSE
*/

/*!
normalize.css v | MIT License | https://necolas.github.io/normalize.css/
Copyright (c) Nicolas Gallagher and Jonathan Neal
/
/! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

:root {
--pure-primary-color: #0078e7;
--pure-primary-color-hover: #0067d3;
--pure-text-color: #333;
--pure-border-color: #ccc;
--pure-border-color-focus: #129fea;
--pure-disabled-background-color: #eaeded;
--pure-disabled-color: #cad2d3;
--pure-form-background-color: #fff;
}

html {
line-height: 1.15;
-webkit-text-size-adjust: 100%;
}

body {
margin: 0;
}

main {
display: block;
}

h1 {
font-size: 2em;
margin: 0.67em 0;
}

hr {
box-sizing: content-box;
height: 0;
overflow: visible;
}

pre {
font-family: monospace, monospace;
font-size: 1em;
}

a {
background-color: transparent;
}

abbr[title] {
border-bottom: none;
text-decoration: underline;
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
}

b,
strong {
font-weight: bolder;
}

code,
kbd,
samp {
font-family: monospace, monospace;
font-size: 1em;
}

small {
font-size: 80%;
}

sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}

sub {
bottom: -0.25em;
}

sup {
top: -0.5em;
}

img {
border-style: none;
}

button,
input,
optgroup,
select,
textarea {
font-family: inherit;
font-size: 100%;
line-height: 1.15;
margin: 0;
}

button,
input {
overflow: visible;
}

button,
select {
text-transform: none;
}

type="button",
type="reset",
type="submit",
button {
-webkit-appearance: button;
}

button::-moz-focus-inner {
border-style: none;
padding: 0;
}

button:-moz-focusring {
outline: 1px dotted ButtonText;
}

fieldset {
padding: 0.35em 0.75em 0.625em;
}

legend {
box-sizing: border-box;
color: inherit;
display: table;
max-width: 100%;
padding: 0;
white-space: normal;
}

progress {
vertical-align: baseline;
}

textarea {
overflow: auto;
}

[type="checkbox"],
[type="radio"] {
box-sizing: border-box;
padding: 0;
}

type="number"::-webkit-outer-spin-button {
height: auto;
}

[type="search"] {
-webkit-appearance: textfield;
outline-offset: -2px;
}

[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}

::-webkit-file-upload-button {
-webkit-appearance: button;
font: inherit;
}

details {
display: block;
}

summary {
display: list-item;
}

template {
display: none;
}

[hidden] {
display: none;
}

html {
font-family: sans-serif;
}

.hidden,
[hidden] {
display: none !important;
}

.pure-img {
max-width: 100%;
height: auto;
display: block;
}

.pure-g {
display: flex;
flex-flow: row wrap;
align-content: flex-start;
}

.pure-u {
display: inline-block; /* Fallback for older browsers /
flex: 1 1 100%; / Default to full width with Flexbox */
vertical-align: top;
}

/* Grid System using Flexbox with Media Queries /
@media screen and (min-width: 35.5em) {
.pure-u-sm-1-24 {
flex: 0 0 4.1667%;
}
.pure-u-sm-1-12,
.pure-u-sm-2-24 {
flex: 0 0 8.3333%;
}
/ ... other sm sizes ... */
.pure-u-sm-1,
.pure-u-sm-1-1,
.pure-u-sm-24-24,
.pure-u-sm-5-5 {
flex: 0 0 100%;
}
}

@media screen and (min-width: 48em) {
.pure-u-md-1-24 {
flex: 0 0 4.1667%;
}
/* ... other md sizes ... */
.pure-u-md-1,
.pure-u-md-1-1,
.pure-u-md-24-24,
.pure-u-md-5-5 {
flex: 0 0 100%;
}
}

/* ... other breakpoints ... */

.pure-button {
display: inline-block;
line-height: normal;
white-space: nowrap;
vertical-align: middle;
text-align: center;
cursor: pointer;
-webkit-user-drag: none;
-webkit-user-select: none;
user-select: none;
box-sizing: border-box;
font-family: inherit;
font-size: 100%;
padding: 0.5em 1em;
color: rgba(0, 0, 0, 0.8);
border: none transparent;
background-color: #e6e6e6;
text-decoration: none;
border-radius: 2px;
}

/* ... (rest of Pure CSS button, form, menu, table styles) ... */