ffoodd / sseeeedd Goto Github PK

To toggle aria-* attributes?

Useful or not? Could I implement a basic van11y thing?

See EditorConfig website.

Would something like:

@media screen and (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

ever be helpful?

S’inspirer librement de TinyTypo.

Is there any reason to not use mask-image for pie charts, instead of <dd role="presentation"> which oversize markup?

Test and document current support for those two functions, that will (in the future) allow to use CSS generated values and avoid style attribute to handle variables datas.

Something like:

body:hover [tabindex="-1"]:focus {
    outline-color: transparent;
}

See Heydon's tweet and Amelia Bellamy-Royds'.

Elle n’est plus tout à fait au gout du jour, à en croire Yahoo! : https://developer.yahoo.com/blogs/ydn/clip-hidden-content-better-accessibility-53456.html

Drag'n drop feature would be useful in a few cases: advanced forms (eg. admin screens), live card sorting, grid items positions…

Should probably wait for #39 to be done :)

Drag'n drop a11y is kinda hard. Dragon Drop seems good and lightweight, definetely worth a try.

Bar charts are way improvable: by declaring all values as custom properties on <dl>, we should be able to calc() each starting point by additioning every previous values; thus creating a waterfall chart.

How cool would this eb?

We could run a single command to copy dist folder onto a gh-page branch.

And voilà.

Here is Gulp-atomizer.
I don't know if this si relevant: maybe I should just write Atomic CSS by hand?

Needs to have a look!

By using custom properties, we may ease contextual variants for components. An example: sizing a component in em would be muc, much easier with things like font-size: calc( 1em * var(--size) );.
We should also keep in mind currentColor and inherit values!

And it'll ease theming too :)

Ce sont seulement des artefacts de l’utilisation dans un thème WordPress.

Basic <dl> styles shouldn't be reset without being sure we'll make something better!

Based on Scott O'Hara's work, we might add a customized range input along with switch buttons et all.

It's becoming way too heavy!

Right after #49, we'd be able to test RWD again and probably improve it by only overriding basic <dl> styles on a minimum viewport width.

Could we lint:

• sass
• css
• JS
• HTML (using Validator)
• Prettier
• Hook on npm / Git / Travis

I love the idea of humans.txt: Read more about humans.txt initiative.

Also have a look at (old) ffeeeedd--racine WP project. Some WordPress thinggies to clean up but should be almost usable as is.

Also be sure to check H5BP's Apache config project.

Tons of ideas are coming up next to sseeeedd, based on it: but how on Earth will I maintain their foundations if they're forking sseeeedd?

There're probably plenty of solutions, but IMHO the best would be to allow sseeeedd to be used and customized as a dependency. Make it configurable and installable through NPM would be a good start.

Although it would need to allow:

• to unhook some SCSS imports;
• to unhook some JS vendors;
• to define if it needs Nunjucks for templating;
• the way to handle SVG: spriting it using symbols, inlining it, using it as img src, or maybe even generating an icon font from it…
• etc.

I have no idea on the way to handle this!

Maybe splitting sseeeedd would do the job?

Useful for svg inside button or a in Chrome…
And in some cases, probably.

Might be very useful.

:focus:not(:focus-visible) { 
    /* here, and only here, you may remove the outline */
}

Some reading: ":focus-visible and backwards compatibility" by Patrick H. Lauke on The Paciello Group's blog.

And there's some inspirations in Fiancial Times mixins.

Using formage as a dependency does not seem to be efficient: let's try to include it right away.

It'll also make customization easier.

Some complementary reading: Advanced CSS form styling…

Might we improve UI by using some animations on charts?

Kinda useless, it also prevents local scripts and styles to be served outside browsersync.

Or am I missing something?

Ana Tudor wrote a nice SVG gauge example, which could easily be integrated into sseeeedd.

This would only mean alowwing SVG usage instead of CSS only thinggies :)

Using outline-color: currentColor, aiming to pass WCAG 2.1 non text contrast new criteria.

We should use flex-basis + padding instead of width + margin.

As of progressive enhancement, this is soft and useful: scroll-behavior: smooth;.

Read Evil Martians' post about scrolling for more info.

Pretty useful. Best example explained by Jonathan Snook.

Made by @jonathantneal, the focus-within polyfill is lightweight and could be opted-in according to Autoprefixer's setting.

Some basics curves should improve feeling:

• 🚪 Enter: cubic-bezier(0, .5, .5, 1)
• 👋 Exit: cubic-bezier(.5, 0, 1, .5)
• 🌊 Move: cubic-bezier(.5, 0, .5, 1)

See David K. Piano's tweet

Un peu de lecture sur css-tricks.

Instead of having darken / lighten variant of each color in palette, we might follow @Una's suggestion to use filter: brightness().

Worth a try :)

Try gulp-svg-store or gulp-svg-sprite to combine SVG into a single sprite using <symbol>.

Letting users define datas through a simple HTML form, we should be able to store values in localStorage.

I’d love to find a way to directly write datas to a JSON file, too…

Sources:

• Update CSS custom properties with JS, listening to form inputs by Wes Bos;
• localStorage on MDN
• Live Interface Theming by Jonathan Harrel

Usages:

• Theming, obviously;
• Data customization: grid positions (like for maps, wedding's seating plan, etc.), card values (like in planning poker cards, or card sorting datas)…

Should be reusable and pretty fun to do :)

Just meant to make the whole thing clearer :)

@Heydon made a great post on Inclusive Components about card.

There should be room for improvement in my own card component.

Allow any static project built upon sseeeedd to be a PWA.

Reference links:

• How to turn your website intyo a PWA by Max Böck;
• PWA Builder
• References on MDN
• Progressive Web Apps core guide on Mozilla Hacks.

At least in charts, display: contents might ease layout. See "More accessible markup with display: contents" written by Hidde de Vries.

That'd be simple enough, following PurgeCSS documentation.

Using CSS custom properties and localStorage, we can easliy make colors, fonts et all customizable.

See Inclusive components' theme switcher as an example.

I see it more like an assistive tool for users (increase or decreases contrasts and font sizes, at least) as well as a wonderful crash-tester for sseeeedd :D

Including it in every staticwork would be very, very valuable.

Designing focus state instead of doing nothing is the best way to not hear "Wait, what's the ugly outline?".

So I highly recommend to play a bit with focus state design:

• transition or animation;
• outline offset;
• background, shadows;
• transform,
• etc.

:focus-visible and :focus-within might enhance the interactions 😊

L'attribut summary présent sur le tableau de données est obsolète, lui préférer un <caption>. Élément que tu as mis en place dans tous les cas :)

Présent sur sseeeedd.html

Source : a11y.css

This is a very clever trick by @MadeByMike on CodePen: a CSS only scroll indicator.

As useless as charts et all, but defintely in the tone of sseeeedd :)

Would something like KSS be useful?

There's a lot to try here:

• read the Content Slider post on Inclusive Components by @Heydon;
• more about CSS s croll snap point on MDN;
• also a more recent post about Practical CSS scroll snapping on Smashing Magazine;
• Markus Oberlehner wrote "super simple progressively enhanced carousel with CSS scroll-snaps".

Also consider using overscroll-behavior (link to MDN) at some point.

Specificially charts and forms, I guess.

Some reading:

• How to use -ms-high-contrast by Greg Whitworth;
• The limited utility of -ms-high-contrast by Patrick H. Lauke on The Paciello's Group's blog;
• System Color test.