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

CSSUI

CSSUI is a Github repository containing a collection of CSS user interface components that can be used to build modern and responsive web applications.

Getting Started

To get started with using the components in this repository, you can download or clone the repository to your local machine. Once you have the files, you can copy the desired CSS code and paste it into your project's CSS file.

Demo and documentation available here.

Components

Accordion
Dropdown
Fullpage
Modal
Range
Slideout
Tabs
Toggle
Tooltip

Each component has its own CSS file that contains the styles for that component. You can use the components individually or combine them to create more complex user interfaces.

Installation

Use npm to install CSSUI in your project:

npm install css-ui-lib

Usage

The library includes:

cssui.css, a global stylesheet which contains the CSS variables used by all components.
components folder list

Each component folder includes two files:

HTML template file
CSS stylesheet.

You can use template files as partial or copy/paste the code into the project's files according to your needs.

Customization

All the CSS code in this repository is fully customizable, so you can modify the styles to fit your specific design needs. You can also add your own custom styles to the components to further personalize them.

Contributing

If you would like to contribute to this repository, please submit a pull request with your changes. All contributions are welcome and appreciated.

Support

Open an issue here on Github to share feedback, report bug or ask help.

License

MIT License

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

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

Add support for dark mode

Each component should works in dark mode.

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

Sass/SCSS component files

Add SCSS/Sass stylesheets for each component.

Integrate a Sass compiler to automatically generate the CSS.

Modal doesn't close when the escape key is pressed

Modal doesn't close when the escape key is pressed. Here's why it should: https://accessibility.18f.gov/keyboard/

This should probably apply to the slider and several other components as well.

Complete components docs

Things to do:

review content
add browser support
add component variables
fix errors

[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.

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

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.

[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:

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.

Investigate Datepicker

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

Homepage content

Write down content for homepage blocks.

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.

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/

Download Link not functioning

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

[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.

DEVOPS: Configure prettier and stylelint

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

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.

Test component templates accessible via direct URL

Currently, to test a component it's necessary to use the Documentation page.

For development reasons, it is instead necessary to be able to test the component accessing the .html file inside /lib/ folder

[Component] Carousel

Create the Carousel component using scroll-snap CSS feature.

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.

[Component] Datalist

Autocomplete text input

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

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

Fix dark mode bugs

The website in dark mode presents some layout bugs.

We should fix them before the launch.

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 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.