zetareticoli / cssui Goto Github PK

View Code? Open in Web Editor NEW

308.0 7.0 14.0 32.33 MB

A collection of interactive UI components in pure CSS

Home Page: https://www.cssui.dev

License: MIT License

JavaScript 9.48% SCSS 47.24% HTML 43.28%

css components-library no-js purecss pure-css pure-css-components library css3

cssui's Introduction

Hi, I'm Francesco

I am currently employed as a Senior Product Designer at @teamdigitale, Italy's Department for Digital Transformation.

My role involves curating the Italian Government Design System and designing services to improve the citizen experience.

Over the past 15 years, I have acted as a digital designer for diverse companies, from large organizations to small startups, leading teams and projects. In 2010, I co-founded Robodomain, a software company that develops tools and apps for domain management.

With a passion for design and coding, I am always eager to embrace new challenges and create something truly extraordinary.

🚀 Products

Design Tokens Manager — Effortless design tokens management in Notion

Design Tokens Pro — A digital course to master design tokens

📮 Newsletters

Design Tokens Pills

Designabile 🇮🇹

🙌 How to reach me

Blog - X - CodePen - DEV - Medium

⚡️ Sponsors

@reubenwalker64

cssui's People

Contributors

Stargazers

Watchers

Forkers

schum123 davgit hamidionline simon-i1-h alolalo meesvandongen rickdoesburg uiforks jkalio52 bluecommunitysustainability bolohori hananils mendozalz itpreneur

cssui's Issues

[Component] Range Slider

Create a range slider by using <input type="range">

References:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range

Examples:

Tabs: Missing accessibility features

Comparing the current implementation of Tabs to the one described on this MDN page, there are a couple of issues related to accessibility.

Things we are missing are:

Elements with the role tab must either be a child of an element with the tablist role, or have their id part of the aria-owns property of a tablist.
They should contain the aria-controls property identifying an element with the tabpanel role.
When working with elements with the tab role, when they are selected or active, they should have their aria-selected attribute set to true, otherwise it should be set to false.
When a tab is selected or active, its controlled tabpanel should have its aria-expanded attribute set to true and its hidden attribute set to false, otherwise the reverse.
It is recommended to use a button element with the role tab for their built-in functional and accessible features instead, as opposed to needing to add them yourself. For controlling tab key functionality for elements with the role tab, it is recommended to set all non-active elements to tabindex=-1, and to set the active element to tabindex=0.

Also, I would highlight this sentence on the same MDN page:

While there are ways to build tab-like functionality without JavaScript, there are no substitute combination of HTML and CSS only that will provide the same set of functionality that's required above for accessible tabs with content.

We should decide how to approach this.

I was thinking to provide a separate package containing JS file for each component which provides accessibility improvements.

[Component] Carousel

Create the Carousel component using scroll-snap CSS feature.

Add support for dark mode

Each component should works in dark mode.

Add support for both a class on <body> and prefers-color-scheme

[Component] Fullpage Slider

The fullPage slider creates a full-width, scrollable section. The user could set-up the slider direction (x o y).

Investigate Datepicker

Do some research on datepicker components learning more on interactions, accessibility and javascript requirements

Homepage content

Write down content for homepage blocks.

Fix dark mode bugs

The website in dark mode presents some layout bugs.

We should fix them before the launch.

Tabs: can't navigate to the next tab using the keyboard

The user is not able to switch between tabs by using the tab key followed by enter. The elements which represent the tabs (<label>) are not focusable.

Add support for prefers-reduced-motion

In browsers/environments that allow the user to specify their preference for reduced motion, the CSS transition effect will be disabled.

Test animation in such context.

Complete components docs

Things to do:

review content
add browser support
add component variables
fix errors

Download Link not functioning

@zetareticoli the download it link on the introduction page triggers no download but refreshes the page.

[Component] Datalist

Autocomplete text input

https://stackoverflow.com/questions/13568609/autocomplete-text-input/19779010#19779010

https://demo.agektmr.com/datalist/

Complete Intro documentation

Add information about:

general introduction
translate Customize
browser support
add Contribute
add Issue or problems with link to GitHub
remove HELP Section

Prevent text selection on Accordion headings / labels

Visually, the Accordion headings appear as buttons, yet unlike buttons they allow the heading text / labels to be selected. Would have expected that to be prevented.

https://developer.mozilla.org/en-US/docs/Web/CSS/user-select

Accordion: no focus feedback on the expanded element

When the user clicks on the tab header of the accordion, there's no focus feedback.

This happens because the focus is captured from the hidden checkbox which stores the state of the tab (expanded/collapsed).

Accordion item label keyboard focus not visualized on FF and Safari

Hi @zetareticoli, first of all nice work!

The accordion item label focus outline, using keyboard navigation, is not displaying properly on Firefox and Safari.
I'm using latest versions on MacOS, but i´m sure the issue persists on Windows too.
The problem seems to be the overflow: hidden here:

[data-accordion-item] {
  width: 100%;
  overflow: hidden;
}

Removing overflow: hidden fixes this issue. I'm not sure why you are using overflow here.
Can you confirm this?
Thanks.

DEVOPS: Configure prettier and stylelint

We should configure prettier and stylelint to consistently format the code cross-IDE and cross-contributor.

[Component] Progress bar

We'd consider adding the progress bar component based on this inspiring solution:
https://codepen.io/t_afif/pen/dyzgwOa

Accordion: focus on closed panel child element

When a panel of the accordion has a focusable child element, it gains focus even if the panel is not opened. This happens because the closed panel has max-height: 0 instead of display: none or the hidden attribute.

When evaluating a solution, consider that display can't be used in animation which probably is the main reason for which max-height has been used.

Sass/SCSS component files

Add SCSS/Sass stylesheets for each component.

Integrate a Sass compiler to automatically generate the CSS.

Scroll Position on a page

Indicate scrolled sections in a pure HTML/CSS solution.

Here an interesting demo: https://css-tricks.com/indicating-scroll-position-on-a-page-with-css/

Modal: Missing focus trap

When the user clicks on a button that triggers the modal opening, he's still able to move the focus around the page using the tab key.

Instead, the focus should be trapped inside the modal and its controls.

[Documentation] [Bug] h2 headings too big

The headings of the docs are too big, preventing clicking the 4th accordion item on mobile.

Here a screenshot:

This is due to a :before element, which has

height: 6rem;
margin-top: -6rem;

which is a bit on the generous side perhaps.

Note that this issue only applies to the div (whitespace) surrounding the label inside the 4th accordion item; the label itself (and everything inside) is still clickable and will open/close the accordion.

Also note the existence of scroll margin top which may be a better way to do what the code aims to do.

Documentation for contributors

We should add documentation to contribute to this project, including but not limited to:

branching strategy
naming conventions;
- branches;
- PR titles;
how to run the project on a local machine;
how to test components;
which parts of the projects should be updated when submitting changes (e.g. changes to the .md files);
how to handle components' behavior which can only be implemented with JS.

Before working on that, we should have a more exhaustive list.