PUXL framework

Build the accessible Web.
Save energy.

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.

  • Live accessibility errors detection: mark the elements that fail and include the solution ready to copy, paste and solve.
  • Automatically calculates the perfect color tone that passes the accessible contrast tests.
  • Simple and short class names to build Webs intuitively and with less HTML and divitis.
Download v1-beta (ZIP - 2.4MB) Documentation
PUXL framework

ACCESSIBILITY FIRST TOUR 2019

Features

Accessibility prevention

As you build your interfaces, it guides you and prevents common accessibility errors. It is fully customizable (including the appearance of select and checkbox) and perfect for heavily loaded HTML sites.
PUXL detects accessibility errors automatically and shows them in the browser, describing the error and providing a solution in a copy-paste-solve way.

Automatic color contrast

Load the colors you want in the palette, compile and let PUXL handle the heavy work in colors for buttons, backgrounds, text, borders... all over your site.
Achieving an accessible color contrast will no longer be a problem thanks to the integrated color algorithms.

Easy to use

Class names use industry conventions so you can start using PUXL in no time. We have detached ourselves from the names of long classes and unnecessarily nested nodes that overpopulate HTML.
A simple and semantic structure improves search engine indexing and makes your SEO easier.

Minimum

PUXL elements are written with the minimum necessary code. Compounds that use JavaScript do not require external libraries to function.
You can compress your styles and SVG icons in a single CSS stylesheet, and avoid having to load an entire font.

Save energy

The less code your sites have, the lower the load for your servers and the lower their consumption. People can also navigate using less data.
Reduce the cost of data and electricity bills for the pocket and our Mother Earth.

The latest Web technologies

Dynamic layouts with calc(), CSS custom properties (or CSS variables, they get along really well with JavaScript!), flexbox, grid, animation and many others have come to stay.
We also wanted to include support for ltr/rtl and PUXL icons. We could not leave them out of the party.

Modular and extensible

PUXL is written in SASS and pure JavaScript. Its modular architecture allows you to select just the code you need for your Webs, and not one more byte. Choose which elements and compounds to load with _setup.scss for your next project or create your own extensions.

Introducing Omnibus Prime (v1-beta) for WordPress

Omnibus in latin means for all. Prime because is our first theme for WordPress.

A classic blog starter theme made with PUXL framework, tailor-fitted for WordPress. Have your stories accessible, WCAG 2.1 AA compliant with zero effort; color-contrasted, responsive, customizable, human and eco-friendly.

Download Omnibus Prime v1-beta (ZIP - 2.3MB)
Screenshot of Omnibus Prime WordPress theme
Go to demo page. Omnibus Prime WordPress tags: HTML5, CSS3, semantic, rtl-language-support, accessible, WCAG 2.1 AA, WCAG contrast, responsive, microformats, microformats2, blog, two-columns, right-sidebar, custom-menu, featured-images, align-wide, custom-logo, post-formats, post-thumbnails, sticky-post, and translation-ready.