finnhvman / matter Goto Github PK
View Code? Open in Web Editor NEWMaterial Design Components in Pure CSS. Materializing HTML at just one class per component ๐ฐ
License: MIT License
Material Design Components in Pure CSS. Materializing HTML at just one class per component ๐ฐ
License: MIT License
The manner in which these tooltip are created results in unexpected verbosity and announcements with screen readers.
Testing with VoiceOver on macOS, and NVDA & JAWS + Firefox, each test announces "small help" twice. Once as an accessible name for the content they're applied to, a second time as the content the :after
pseudo element adds to the DOM.
Additionally, JAWS and NVDA interpret the label of the input to just be "small help", as aria-label
is overwriting the input's intended accessible name from the label
element's text.
VoiceOver on macOS promotes the elements which have aria-label
s to group
s, resulting in unexpected VO focus stops.
For more information on how these tooltips could be revised to be more accessible, see this article on tooltips / toggle tips.
Thanks!
Have you heard of Surface CSS-only Material Design framework. Why don't you combine it with Matter and base your missing components on Surface?
@finnhvman Are you planning on implementing Unelevated Buttons as per https://material.io/design/components/buttons.html#
I ask because the drop-shadow used with contained buttons
is an issue if the element the button is inside of, doesn't have sufficient margins to display the box shadow, causing it to be clipped as shown here.
In this particular use case an unelevated button would be better UX IMO.
I made some changes in CSS to make it RTL.
But I have a problem with browsers.
CSS File:
matter-rtl.css.zip
I have this problem with firefox too.
Hello, is there any preview of the select element and input size as bootstrap .input-lg, .input-sm, .col-lg- *, and .col-sm- *
Hi,
This is great work.
Can you add support for the list and the table, please?
The rule at .matter-switch > input:disabled + span
only applies an alpha channel when the var --matter-onsurface-rgb isn't defined, which looks like a mistake, and I think the alpha part is intended to always apply.
I gather this project is on pause, just leaving this quick note in case it applies to Matter 2, or any other derivatives.
It would be great if Matter could be published in the npm registry, so that we could also install it using the package manager rather than downloading it manually to include it in the project
Using the version hosted in cloudinary is not an option for me, as I'm building a tool aimed at big companies which regularly enforce a whitelist for access to domains so limiting the use of third-party assets is a must for such case. And downloading manually again each time there is an update is more work than having it part of the yarn upgrade
.
Please include slider to bundle.
This is a great library, but it's useful to have a demo which shows all the options and example source to generate them, it would be great to include one and link it from README.md.
Until there's an official one, I threw together https://codepen.io/arantius/full/eYJgpjV which I think covers all the features, based on the *.spec.html
files in the source.
The pages on the Google DNS website use Matter.
@finnhvman You say
Components can be resized fluidly to match layout needs, otherwise they take up the size necessary.
Can you write up some guidelines how how we should actually do resizing.
For example matter buttons have min-width
, height
and line-height
specified. So they don't actually take up the size necessary. Should we override all three of these.
Some css libs offer small, large etc. style overrides. Is this something you might add to a future release?
Please can you add cards component ?
https://lh3.googleusercontent.com/Q0IBZ9UnqG16so-3Y9lhU_fJBm33fuoovX3N2FdhX9pR2_fAGGIDP2z2944TmLMn8rwpBQn8kTd-z6UDysPQKrsIWo13rNSDpO2tAw=w1064-v0
I think the disabling effect here is deviating from the google design material
You can use now.sh with Github integration to automatically get free and updated website. Or something else, but an interactive demo would be really welcome :)
Hi,
A very good library thank you. I am using webpack and I can't include the library as usage of var
in your css.
Would you be able to create a sass (scss) version of this library? I believe it will make the library even more popular.
@finnhvman matter buttons correctly include text-transform: uppercase;
which matches the MD spec.
However after checking a variety of Google apps that supposedly implement MD, few if any buttons use upper case text.
Desktop apps I checked include GMail, Drive, Photos etc. On Google's Mobile apps buttons are scarce.
My "personal preference" is not to force upper case, and of course I can add another class to override this, however I'm curious as to your thoughts.
Add cards component ex-https://codepen.io/DiEH/pen/jOPPzLV
When I have a matter-switch
without any <span>_text_</span>
the vertical position of the switch is moved way up as shown below.
Using a Space for text doesn't fix this and
displays
I was actually trying to put the switch inside the button when I first saw this.
I assume checkbox's etc. have the same issue.
Is this project alive?
The circular progress with class matter-progress-circular
, seems to be working fine.
<progress class="matter-progress-circular"></progress>
But with specified values, it doesn't work as expected:
<progress class="matter-progress-circular" value="60" max="100"></progress>
Can you please guide?
@finnhvman I've just realized that both checkbox and radio buttons use the user agent stylesheet for their unchecked/unset state which doesn't seem right to me. I would have thought they'd use --matter-helper-theme
which is what the checked and indeterminate states use. ie.
.matter-checkbox > input[type="checkbox" i] {
border-color: rgb(var(--matter-helper-theme));
}
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.