GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → cehfisher → A11y Style Guide

cehfisher / A11y Style Guide

Licence: mit
Accessibility (A11Y) Style Guide

Labels

scsssassaccessibilitystyleguidetwiga11ystyle-guidepatternspattern-library

Projects that are alternatives of or similar to A11y Style Guide

Sscss
Light Sass lib for managing your font-size, margin, padding, and position values across breakpoints.
Stars: ✭ 119 (-75.86%)
Mutual labels:  styleguide, style-guide, scss, sass
Sass A11ycolor
🌈 Generate the nearest accessible color with Sass.
Stars: ✭ 24 (-95.13%)
Mutual labels:  accessibility, a11y, scss, sass
A11y.css
This CSS file intends to warn developers about possible risks and mistakes that exist in HTML code. It can also be used to roughly evaluate a site's quality by simply including it as an external stylesheet.
Stars: ✭ 1,277 (+159.03%)
Mutual labels:  accessibility, scss, sass
Accessible components
Listing of accessible components & patterns
Stars: ✭ 393 (-20.28%)
Mutual labels:  patterns, accessibility, a11y
Gulp Frontnote
スタイルガイドジェネレーターFrontNoteのGulpプラグイン
Stars: ✭ 7 (-98.58%)
Mutual labels:  styleguide, scss, sass
Livingstyleguide
Easily create front-end style guides with Markdown and Sass/SCSS.
Stars: ✭ 874 (+77.28%)
Mutual labels:  styleguide, style-guide, sass
Axiom React
Axiom - Brandwatch design system and React pattern library
Stars: ✭ 41 (-91.68%)
Mutual labels:  styleguide, style-guide, pattern-library
Css
The CSS design system that powers GitHub
Stars: ✭ 10,670 (+2064.3%)
Mutual labels:  styleguide, scss, sass
Frontnote
Node.jsを使ったスタイルガイドジェネレーター
Stars: ✭ 73 (-85.19%)
Mutual labels:  styleguide, scss, sass
Generator Baukasten
Awesome!
Stars: ✭ 50 (-89.86%)
Mutual labels:  twig, scss, sass
Css
Believe in Better CSS
Stars: ✭ 262 (-46.86%)
Mutual labels:  styleguide, scss, sass
Sass Loader
Compiles Sass to CSS
Stars: ✭ 3,718 (+654.16%)
Mutual labels:  scss, sass
Clojure Style Guide
A community coding style guide for the Clojure programming language
Stars: ✭ 3,740 (+658.62%)
Mutual labels:  styleguide, style-guide
Magento2 Theme Blank Sass
SASS based version of Magento 2 Blank theme
Stars: ✭ 373 (-24.34%)
Mutual labels:  scss, sass
Elixir style guide
This is community style guide for the Elixir programming language. Please feel free to make pull requests and suggestions, and be a part of Elixir's vibrant community.
Stars: ✭ 3,870 (+684.99%)
Mutual labels:  styleguide, style-guide
Css Style Guide Audit
Audit the CSS on a page to see what elements are using styles from the style guide and which styles are overriding them
Stars: ✭ 353 (-28.4%)
Mutual labels:  styleguide, style-guide
Axe Core
Accessibility engine for automated Web UI testing
Stars: ✭ 4,293 (+770.79%)
Mutual labels:  accessibility, a11y
Typesettings
A Sass or Stylus toolkit that sets type in Ems based on modular scale, vertical rhythm, and responsive ratio based headlines.
Stars: ✭ 380 (-22.92%)
Mutual labels:  scss, sass
Motherplate
A bare bones responsive SCSS boilerplate for web designers
Stars: ✭ 392 (-20.49%)
Mutual labels:  scss, sass
Uiengine
Workbench for UI-driven development
Stars: ✭ 349 (-29.21%)
Mutual labels:  styleguide, pattern-library
View All Similar Projects ➔

A11Y Style Guide

This application is a living style guide or pattern library, generated from KSS documented styles...with an accessibility twist. No matter your level of development or accessibility expertise, there are ways to help contribute to the a11y style guide.

See a live demo of the style guide.

Why did this project start?

We wear a lot of hats as front-end developers. Depending on the client or company you work for, you may be the designer, UX/UI specialist, site-builder, QA tester, and developer all rolled into one. How can we possibly add the accessibility hat on top of all that? What accessible pieces should we even include? Which pieces are easy wins vs. impossible juggernauts? How do we implement inclusive design and development when a project does not have a lot of time or budget to include that piece?

One way we can tackle these issues is by using an accessible component driven approach. By thinking about inclusiveness from the start, we can get a head start on accessibility while still building the required site components.

The A11Y style guide comes with pre-populated accessible components that include helpful links to related tools, articles, and WCAG guidelines to make your site more inclusive. These components also serve as a guide for both HTML markup and SCSS/CSS code, to inform designers, front-end and back-end developers at every stage of the website’s creation.

How do you use this tool?

  • As a reference.
  • As a base for your own style guide.
  • As a base for creating your own accessible components.
  • As a base for a new accessible theme.
  • Contribute to the style guide and make it better.

Really? What can't you do with it is an easier question?

How can you contribute?

Please see the Contributing Guide for more information.

How did you get here?

Maybe you are a total beginner and wondering where to start? That's cool...welcome! Learning accessibility can feel a bit like drinking out of a firehose, so here are some tips to follow on your journey toward accessibility: Getting Started with Website Accessibility or check out the Resources page. For more information on my past articles, conference talks, or to see some accessible SVGs in action, check out my personal website cariefisher.com

Thanks!

Last but not least, this project would not be possible without the people who have contributed to it! Muchas gracias! A special shout-out to the A11y Style Guide co-developer/co-maintainer Scott O'Hara who selflessly writes code, reviews PRs, and is an overall great person who supports his friends and their wacky ideas. He is an inspiration to all who are lucky enough to know him.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].