PUXL is a free and open-source and eco-friendly library to create front-end Web interfaces. It helps you build accessible and responsive sites with lightweight HTML.
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
css
docs/v1-beta
font/open_dyslexic
img
js/puxl-js
.gitignore
LICENSE
README.md
html-starter-template.html
thanks.txt

README.md

Puxl framework

Puxl (ˈpʌksl) is an accessibility-first, eco-friendly open source front-end library for the modern Web. It helps you create accessible, responsive Web User Interfaces with lightweight HTML.

Check out the Docs (v0.1-βeta)

Thanks

We would like to thank a lot of people, organizations and initiatives, big and small around the globe for making their contributions to the open accessible Web. You are so many we had to make a thanks.txt file!

Thanks to Firefox developer Edition for making such a powerful browser!

Thanks to BrowserStack for providing the infrastructure that allows us to test in real browsers!


Thanks everyone for knowledge, dedication, hard work and inspiration. This project stands on the shoulders of giants.

This application uses Open Source components. You can find the source code of their open source projects along with license information below. Thank you very much and a big applause to these creators for their contributions to open source. They helped this project happen.

Thank you the W3C, Adobe and:

https://24ways.org/2006/compose-to-a-vertical-rhythm

http://www.456bereastreet.com/archive/201211/accessible_custom_checkboxes_and_radio_buttons/

http://accessible-colors.com/

http://adobe-accessibility.github.io/Accessible-Mega-Menu

https://ajy.co/the-simplest-sass-flexbox-grid-ever

https://alistapart.com/article/color-accessibility-workflows

https://alistapart.com/article/fluidgrids

https://alistapart.com/article/learning-from-lego-a-step-forward-in-modular-web-design

https://alistapart.com/article/sensibleforms

https://alistapart.com/article/settingtypeontheweb

https://alistapart.com/article/web-typography-tables

https://bitsofco.de/ios-safari-and-shrink-to-fit/

https://codepen.io/chrisburnell/pen/rLxjBz

https://codepen.io/chriscoyier/pen/Hwcxp

https://codepen.io/chriscoyier/pen/uCwfB

https://codepen.io/collection/CrgJj/

https://codepen.io/danwilson/pen/BpbYmZ

https://codepen.io/danwilson/pen/bqxRgj

https://codepen.io/davidhalford/pen/wlDxL

https://codepen.io/dennisdegoede/pen/iLwhn

https://codepen.io/dennisdegoede/pen/wbqEd

https://codepen.io/dodozhang21/pen/WxGjpz

https://codepen.io/giana/project/full/ZWbGzD/

https://codepen.io/jeryj/pen/xZNeXp

https://codepen.io/KatieK2/pen/tejhz

https://codepen.io/Keale2/pen/zqeYmg

https://codepen.io/magnificode/post/understanding-grid-display-tracks-and-the-new-fr-unit

https://codepen.io/MrKanuel/pens/loved

https://codepen.io/NathanPJF/pen/GJObGm

https://codepen.io/Nice2MeatU/pen/WXWvBP

https://codepen.io/noahblon/pen/OyajvN

https://codepen.io/rachelandrew/pen/mPvboy

https://codepen.io/scottnix/pen/Hidvz

https://codepen.io/SitePoint/pen/euKgi

https://codepen.io/tigt/post/meta-viewport-for-2015

https://codepen.io/tallys/pen/NOrpMO

https://codepen.io/tigt/post/optimizing-svgs-in-data-uris

https://codepen.io/tompere/post/css-input-checkbox-custom-style

https://codepen.io/Topcoat/pen/BskEn

https://codepen.io/yoksel/pen/JDqvs

https://codepen.io/webandapp/pen/JXmaWp?editors=1100

http://colorsupplyyy.com/app/

http://colorsafe.co/

http://contrast-finder.tanaguru.com/result.html

http://contrastchecker.com/

http://www.creativebloq.com/web-design/create-flexible-grids-using-sass-9134524

https://creativecommons.org/

http://www.cssscript.com/creating-accessible-switch-controls-with-pure-css-scss/

https://css-tricks.com/accessible-svgs/

https://css-tricks.com/almanac/properties/d/direction/

https://css-tricks.com/css-custom-properties-theming/

https://css-tricks.com/dangers-stopping-event-propagation/

https://css-tricks.com/form-validation-ux-html-css/

https://css-tricks.com/gotchas-on-getting-svg-into-production/

https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/

https://css-tricks.com/sass-style-guide/

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

https://css-tricks.com/snippets/css/using-font-face/

https://css-tricks.com/snippets/jquery/target-only-external-links/

https://css-tricks.com/snippets/sass/power-function/

https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/

https://css-tricks.com/svg-fragment-identifiers-work/

https://csswizardry.com/2013/05/the-flag-object/

https://davidwalsh.name/external-links-css

https://davidwalsh.name/html5-boilerplate

https://www.deque.com/axe/

https://www.deque.com/blog/aria-modal-alert-dialogs-a11y-support-series-part-2/

https://design.google.com/

https://dev.webonomic.nl/unleash-the-power-of-svg-sprites

https://developer.mozilla.org

https://developer.paciellogroup.com/blog/2013/12/using-aria-enhance-svg-accessibility/

http://ejohn.org/blog/sub-pixel-problems-in-css/

https://www.elegantthemes.com/blog/resources/how-to-create-an-animated-logo-with-svg-and-css

https://ffoodd.github.io/a11y.css/

http://flexboxplayground.catchmyfame.com/

https://foundation.zurb.com/

https://getbootstrap.com/

https://gist.github.com/sgomes/9c03a58976b90e00f4172a510b9807fa

https://gist.github.com/softpunch/7d56fc6ec3348fa2f69a8e0d5f6793d4

https://gist.github.com/voxpelli/6304812

https://gist.github.com/webtobesocial/aefd6e25064c08e0cc9a

https://github.com/gillesbertaux/andy/blob/master/andy.scss

https://github.com/Heydon/REVENGE.CSS

https://github.com/jonathantneal/svg4everybody

https://github.com/necolas/normalize.css

https://github.com/voxpelli/sass-color-helpers/blob/master/stylesheets/color-helpers/_contrast.scss

https://github.com/xi/sass-planifolia/blob/master/sass/contrast.scss

http://gmazzocato.altervista.org/colorwheel/wheel.php

https://gomakethings.com/getting-an-elements-css-attributes-with-vanilla-javascript/

https://html5boilerplate.com/

http://html5doctor.com/

http://htmldog.com/guides/html/advanced/links

https://inclusive-components.design/

https://jakearchibald.github.io/svgomg/

http://jaydenseric.com/blog/forget-normalize-or-resets-lay-your-own-css-foundation

http://kevingutowski.github.io/color.html

http://khan.github.io/tota11y/

http://krasimirtsonev.com/blog/article/SASS-mixin-for-grid-generation

https://kyusuf.com/post/completely-css-custom-checkbox-radio-buttons-and-select-boxes

http://lynn.ru/examples/svg/en.html

https://www.madebymike.com.au/writing/accessible-contrast-with-less-and-sass/

https://make.wordpress.org/accessibility/useful-tools/

https://make.wordpress.org/core/handbook/best-practices/coding-standards/accessibility-coding-standards/

https://www.marcozehe.de/2015/12/14/the-web-accessibility-basics/

https://material.google.com/usability/accessibility.html

https://medium.com/dev-channel/using-sass-to-automatically-pick-text-colors-4ba7645d2796

https://medium.com/developing-with-sass/creating-a-dead-simple-sass-mixin-to-handle-responsive-breakpoints-889927b37740

https://medium.com/developing-with-sass/refactoring-my-simple-sass-breakpoint-mixin-71205dd6badd

https://medium.com/@matuzo/writing-css-with-accessibility-in-mind-8514a0007939

https://meyerweb.com/eric/tools/dencoder/

http://michelf.ca/projects/sim-daltonism/

https://miketaylr.com/code/input-type-attr.html

https://necolas.github.io/normalize.css/

http://nicolasgallagher.com/micro-clearfix-hack/

http://opendyslexic.org

https://opensource.guide/

http://outlinenone.com/

http://www.paulirish.com/2012/box-sizing-border-box-ftw/

https://www.predix-ui.com/

https://rachelandrew.co.uk/archives/2015/02/04/css-grid-layout-creating-complex-grids/

https://www.rtl-this.com/tutorial/rtling-hello-world-webpage-rtling

https://sarasoueidan.com/articles/

https://www.sassmeister.com/gist/ccc72f71137fe29039c92c0a9fe9b657

http://sass-lang.com/documentation/

http://simplyaccessible.com/article/danger-aria-tabs/

https://www.sitepoint.com/creative-grid-system-sass-calc/

https://www.sitepoint.com/extra-map-functions-sass/

https://www.sitepoint.com/theming-form-elements-sass/

https://www.sitepoint.com/tips-accessible-svg/

https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/

https://www.smashingmagazine.com/2017/11/building-accessible-menu-systems/

http://snook.ca/archives/html_and_css/hiding-content-for-accessibility

http://springmeier.org/www/contrastcalculator/index.php

https://stackoverflow.com/questions/11704828/how-to-allow-keyboard-focus-of-links-in-firefox

https://stackoverflow.com/questions/38503797/javascript-check-if-element-is-child

http://stevefaulkner.github.io/html-mapping-tests/

http://terrillthompson.com/blog/474

http://www.the-art-of-web.com/html/html5-checkbox-required/

http://thesassway.com/intermediate/dynamically-change-text-color-based-on-its-background-with-sass

http://www.thinkui.co.uk/2017/02/high-contrast-colours/

https://tink.uk/using-the-aria-current-attribute/

http://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/

http://tympanus.net/Development/CreativeButtons/

http://unicorn-ui.com/

https://www.w3.org/

https://www.w3.org/International/questions/qa-html-dir

https://www.w3.org/TR/2018/PR-WCAG21-20180424/#dfn-relative-luminance

https://www.w3.org/TR/html-aria/

https://www.w3.org/TR/WCAG20/#contrast-ratiodef

https://www.w3.org/TR/WCAG20-TECHS/

https://www.w3.org/TR/WCAG21/

https://www.w3.org/WAI/ER/tools/

https://www.w3.org/WAI/tutorials/

http://www.w3schools.com

https://webdesign.tutsplus.com/tutorials/bring-your-forms-up-to-date-with-css3-and-html5-validation--webdesign-4738

http://whatsock.com/training/

https://www.wuhcag.com/wcag-checklist/

A Xavier Crespo, Jean Zozaya, Julen Lizaso, Urko Larrañaga, Ceinpro, Laura Fernández.

"A quien lo necesita, a quien me ha acompañado y animado, a quien no me ha molestado ni desalentado, a quien no lo entiende, a mi familia y amistades, a Mati, y a la peña #Estróper de La Sozi!".


Credits:

Normalize.css - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Project: Normalize.css

Project URLs: https://necolas.github.io/normalize.css/ https://github.com/necolas/normalize.css

Authors: Nicolas Gallagher Jonathan Neal

Author URLs: http://nicolasgallagher.com/ http://jonathantneal.com/

Copyright: Copyright © Nicolas Gallagher and Jonathan Neal

License: The MIT License (MIT) https://github.com/necolas/normalize.css/blob/master/LICENSE.md

Micro Clearfix Hack - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Project: Micro Clearfix Hack

Project URL: http://nicolasgallagher.com/micro-clearfix-hack/

Author: Nicolas Gallagher

Author URL: http://nicolasgallagher.com/

Copyright: Nicolas Gallagher

License: ?

Bootstrap Reboot - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Resources: https://getbootstrap.com/docs/4.1/content/reboot/

Project: Bootstrap

Project URL: https://getbootstrap.com/

Copyright: Copyright (c) 2011-2018 Twitter, Inc. Copyright (c) 2011-2018 The Bootstrap Authors

License: The MIT License (MIT) https://github.com/twbs/bootstrap/blob/v4-dev/LICENSE

SASS Color Helpers - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Resources: https://github.com/voxpelli/sass-color-helpers

SASS Color Helpers: Math - - - - - - - - - - - - - - - - - - - - - - - - - - -

Resources: https://github.com/voxpelli/sass-color-helpers/blob/master/stylesheets/color-helpers/_math.scss

Author: Pelle Wessman

Author URL: http://kodfabrik.se/

Copyright: Copyright © 2018 Pelle Wessman pelle@kodfabrik.se

License: The MIT License (MIT) https://voxpelli.mit-license.org/

Strip unit - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Resource URL: https://hugogiraudel.com/2013/08/12/sass-functions/

Author: Hugo Giraudel

Author URL: https://hugogiraudel.com/

License: Public

Open Dyslexic Font - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Project: OpenDyslexic

Project URLs: https://www.opendyslexic.org/ https://github.com/antijingoist/open-dyslexic

Copyright: Copyright (c) 2003 by Bitstream, Inc. All Rights Reserved. Bitstream Vera is a trademark of Bitstream, Inc.

License: Bitstream License https://github.com/antijingoist/open-dyslexic#license

Accessible icon - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Project: The Accessible Icon Project

Project URL: http://accessibleicon.org/

Author: The Accessible Icon Project Team

License: Public

Puxl icons - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Project: Puxl Icons

Project URL: https://puxl.io/puxl-icons/

Author: Iñigo Garcia (@MrKanuel)

Copyright: Copyright © 2018 Puxl

License: The MIT License (MIT) https://github.com/puxl/puxl-icons/blob/master/LICENSE

Authors

Puxl is created by @MrKanuel, and brought by The Puxl Clan with love from Basque Country.

Copyright and license

Code released under the MIT License. Docs released under Creative Commons.