wexa.css

A CSS framework to make the web easy and accessible

"The Web is fundamentally designed to work for all people, whatever their hardware, software, language, location, or ability." -- W3C

Description

This page shows how a website looks like if this code is added to the <head>:

<link
    rel="stylesheet"
    href="https://sourceforge.net/p/whakerexa/code/ci/master/tree/statics/css/wexa.css?format=raw"
    media="all" />

Overview

wexa.css is a CSS framework intended to be as simple as possible to make accessible web content, and to minimize the use of CSS classes for enhancing the readability of HTML code, like it should always be! wexa.css is the main CSS framework of Whakerexa.

It was designed to be easily customizable, allowing users to adjust properties such as fonts, colors, borders, etc., effortlessly. Most of the properties are stored into variables which makes possible to re-define them, then to obtain a custom different style. Fonts, colors, borders, etc., can be overridden by re-defining the corresponding variables, enabling users to achieve a unique style.

Not convinced? Take a look at the source code of this page!

The custom classes

When using standard HTML5, accessibility is increased. Actually, only three significant classes are introduced in wexa.css, specifically for accessibility:

  1. dark
  2. contrast
  3. external-link

The other classes allows changing the font or the font-weight of any element:

The 'dark' class

As said in its name, the dark class turns the content into dark colors. Only colors are changed.

Dark blockquote example

Made by me!

The 'contrast' class

This is a high contrast section. Font, font weight, font size, spacing and a few other properties are changed to make it easier to read. A link is slightly colored differently.

Contrast blockquote example

The 'external-link' class

When specified to <a> tag, external-link adds a small picture to visibly indicate the link is redirecting to an external page. For example, this text: "You can find Whakerexa, a solution to create dynamic accessible HTML content, in which wexa.css is developed." is written:

You can find <a class="external-link" href="https://whakerexa.sf.net/">Whakerexa</a>
a solution to create dynamic accessible HTML content, in which <code>wexa.css</code>
is developed.

The variables

Examples of use:

The following example shows how to re-set variables in your HTML file. You have to create a <style> element in the <head>. It must be placed after the link to wexa.css to ensure proper execution.

<style>
    :root {
        /* if you like very large borders! */
        --border-width: 10px;
        --focus-border-width: 10px;
        /* to control header animation: */
        --header-slidein: slideInFromBottom;
    }
    .contrast {
        --border-width: 20px;
        --focus-border-width: 20px;
        --header-slidein: animDisabled;
    }
</style>

A color change can be applied to either the default version, the dark version, or both, as shown below:

<style>
    :root {
        --bg-color: rgb(250, 250, 240);
    }
    .contrast {
        --bg-color: rgb(40, 30, 52);
    }
</style>

Animations

A few ready-to-use animations are available:

Full list of variables

Variable name Default value Value in contrast view Value in dark view
size-divisor depends on screen width
fontsize-divisor depends on screen width
screen-width 1024px / size-divisor
header-height 60vh
footer-height 20vh
header-slidein slideInFromBottom slideInDisabled
footer-slidein slideInDisabled slideInDisabled
transition 0.4s ease-in-out
Fonts and typography
Variable name Default value Value in contrast view Value in dark view
font-weight-thin 200 300
font-weight-semithin 300 400
font-weight-normal 400 500
font-weight-semibold 500 600
font-weight-bold 600 750
font-weight-black 750 800
font-size 14px / fontsize-divisor 16px / fontsize-divisor
external-link-icon url()
input-search-icon url()
outline-focus-style outset
outline-hover-style inset
line-height 1.2 1.5
typography-spacing-vertical 1.2rem 2rem
typography-spacing-horizontal 0.8rem 1.6rem
letter-spacing 0.04rem 0.12rem
word-spacing 0.06rem 0.16rem
Borders
Variable name Default value Value in contrast view Value in dark view
border-width 1px 3px
border-radius 2px 6px
table-border-width 1px 3px
outline-size 2px 3px
Main colors
Variable name Default value Value in contrast view Value in dark view
bg-color rgb(250, 250, 252) rgb(24, 28, 38)
bg-color-alt rgb(240, 240, 240) rgba(38, 42, 54)
fg-color rgb(0, 5, 10) rgb(255, 255, 255)
fg-color-alt rgb(28, 28, 28) rgb(255, 255, 255)
border-color rgb(60, 60, 90) rgb(228, 228, 228)
border-color-alt rgba(28, 28, 28, 0.5 rgba(228, 228, 228, 0.5)
outline-color rgba(0, 191, 255, 0.8) rgba(0, 191, 255, 0.8)
Background colors
Variable name Default value Value in contrast view Value in dark view
header-bg-color radial-gradient(circle, rgba(14, 18, 48, 0.9), rgb(24, 28, 38)) rgb(167, 187, 207)
nav-bg-color rgba(14, 18, 48, 0.7) rgba(167, 187, 207, 0.7)
footer-bg-color rgb(24, 28, 38) rgb(167, 187, 207)
buttons-bg-color rgb(225, 225, 220) rgb(80, 80, 70)
progress-bg-color rgb(49, 47, 85) rgb(67, 77, 97)
mark-bg-color rgba(255, 250, 100, 0.5)
Foreground colors
Variable name Default value Value in contrast view Value in dark view
header-fg-color rgb(241, 241, 245) rgb(41, 41, 45)
nav-fg-color rgb(231, 231, 235) rgb(31, 31, 35)
footer-fg-color rgb(241, 241, 245) rgb(41, 41, 45)
progress-fg-color rgb(20, 25, 30) rgb(226, 226, 248)
buttons-fg-color rgb(20, 25, 30) rgb(225, 225, 215)
mark-fg-color rgb(20, 25, 30)
h1-color rgb(20, 25, 30) rgb(190, 204, 255)
h2-color rgb(30, 35, 45) rgb(190, 204, 223)
h3-color rgb(40, 45, 60) rgb(174, 190, 208)
h4-color rgb(40, 45, 60) rgb(174, 190, 208)
h5-color rgb(50, 55, 75) rgb(170, 180, 208)
h6-color rgb(60, 65, 90) rgb(180, 190, 218)
Table colors
Variable name Default value Value in contrast view Value in dark view
table-border-color rgba(110, 120, 140, 0.8) rgb(184, 203, 208)
table-row-stripped-bg-color rgba(210, 212, 222, 0.4) rgba(184, 203, 208, 0.28)
table-head-bg-color rgb(204, 202, 212) rgb(12, 22, 14)
table-head-fg-color rgb(14, 12, 22) rgb(204, 202, 212)
table-caption-bg-color rgb(24, 28, 38) rgb(210, 221, 252)
table-caption-fg-color rgb(210, 222, 252) rgb(167, 187, 207)
Other colors
Variable name Default value Value in contrast view Value in dark view
a-color rgb(0, 150, 200) rgb(10, 80, 120) if not dark rgb(25, 195, 255)
ins-color rgba(20, 200, 20, 0.8)
del-color rgba(240, 40, 40, 0.8)
s-color rgb(100, 100, 100) rgb(180, 180, 180)
blockquote-border-color rgb(80, 25, 40) rgb(200, 180, 200)
blockquote-footer-color rgb(80, 25, 40) rgb(200, 180, 200)
li-color rgb(140, 40, 40)
shadow-color rgba(110, 120, 140, 0.8)
Alert colors
Variable name Default value Value in contrast view Value in dark view
question-color rgba(180, 80, 220, 0.5) rgb(180, 80, 220)
question-bg-color rgba(180, 80, 220, 0.1) rgba(180, 80, 220, 0.1)
tips-color rgba(220, 180, 80, 0.5) rgb(230, 200, 100)
tips-bg-color rgba(180, 180, 80, 0.1) rgba(230, 200, 70, 0.1)
success-color rgba(0, 150, 0, 0.5) rgb(140, 200, 150)
success-bg-color rgba(0, 150, 0, 0.1) rgba(100, 200, 150, 0.1)
info-color rgba(0, 0, 255, 0.5) rgb(100, 130, 200)
info-bg-color rgba(0, 0, 255, 0.1) rgba(70, 100, 200, 0.1)
warning-color rgba(220, 80, 0, 0.5) rgb(220, 80, 0)
warning-bg-color rgba(220, 80, 0, 0.1) rgba(220, 80, 0, 0.1)
error-color rgba(225, 0, 0, 0.5) rgb(225, 0, 0)
error-bg-color rgba(225, 0, 0, 0.1) rgba(225, 0, 0, 0.1)

Demo: what's possible with wexa.css?

Example of Heading 1

This is paragraph text. Lorem ipsum dolor sit amet consectetur adipisicing elit.

Example of Heading 2

This is paragraph text. Lorem ipsum dolor sit amet consectetur adipisicing elit.

Example of Heading 3

This is paragraph text. Lorem ipsum dolor sit amet consectetur adipisicing elit.

Example of Heading 4

This is paragraph text. Lorem ipsum dolor sit amet consectetur adipisicing elit.

Example of Heading 5

This is paragraph text. Lorem ipsum dolor sit amet consectetur adipisicing elit.

Example of Heading 6

This is paragraph text. Lorem ipsum dolor sit amet consectetur adipisicing elit.

Example of Heading 1

Example of Heading 2

Example of Heading 3

Available fonts for a text

No specific class applied except the font choice

Sans

This is a short text embedded into a p tag with no specific class. This is then the default font style, padding and margin, etc. This is then the bold default font style. This is then the italic default font style. Anyone is free to copy, modify, publish, use, compile, sell, or distribute this file, either in source code form or as a compiled binary, for any purpose, commercial or non-commercial, and by any means.

Serif

This is a short text embedded into a p tag with no serif class. This is the serif font style, with default padding and margin, etc. This is the bold font style. This is the italic font style. Anyone is free to copy, modify, publish, use, compile, sell, or distribute this file, either in source code form or as a compiled binary, for any purpose, commercial or non-commercial, and by any means.

Mono

This is a short text embedded into a p tag with no serif class. This is the mono font style, with default padding and margin, etc. This is the bold font style. This is the italic font style. Anyone is free to copy, modify, publish, use, compile, sell, or distribute this file, either in source code form or as a compiled binary, for any purpose, commercial or non-commercial, and by any means.

Pre

This is a short text embedded into a p tag with no serif class. This is the pre font style, with default padding and margin, etc. This is the bold font style. This is the italic font style. Anyone is free to copy, modify, publish, use, compile, sell, or distribute this file, either in source code form or as a compiled binary, for any purpose, commercial or non-commercial, and by any means.

With contrast specific class applied and dark mode

Sans

This is a short text embedded into a p tag with no specific class. This is then the default font style, padding and margin, etc. This is then the bold default font style. This is then the italic default font style. Anyone is free to copy, modify, publish, use, compile, sell, or distribute this file, either in source code form or as a compiled binary, for any purpose, commercial or non-commercial, and by any means.

Serif

This is a short text embedded into a p tag with no serif class. This is the serif font style, with default padding and margin, etc. This is the bold font style. This is the italic font style. Anyone is free to copy, modify, publish, use, compile, sell, or distribute this file, either in source code form or as a compiled binary, for any purpose, commercial or non-commercial, and by any means.

Mono

This is a short text embedded into a p tag with no serif class. This is the mono font style, with default padding and margin, etc. This is the bold font style. This is the italic font style. Anyone is free to copy, modify, publish, use, compile, sell, or distribute this file, either in source code form or as a compiled binary, for any purpose, commercial or non-commercial, and by any means.

Pre

This is a short text embedded into a p tag with no serif class. This is the pre font style, with default padding and margin, etc. This is the bold font style. This is the italic font style. Anyone is free to copy, modify, publish, use, compile, sell, or distribute this file, either in source code form or as a compiled binary, for any purpose, commercial or non-commercial, and by any means.

With weight-specific classes applied

Sans Font Normal view

This is Sans Font with weight-thin.

This is Sans Font with weight-normal.

This is Sans Font with weight-bold.

This is Sans Font with weight-black.

Sans Font Contrast view

This is Sans Font with contrast weight-thin.

This is Sans Font with contrast weight-normal.

This is Sans Font with contrast weight-bold.

This is Sans Font with contrast weight-black.

Serif Font Normal view

This is Serif Font with weight-thin.

This is Serif Font with weight-normal.

This is Serif Font with weight-bold.

This is Serif Font with weight-black.

Serif Font Contrast view

This is Serif Font with contrast weight-thin.

This is Serif Font with contrast weight-normal.

This is Serif Font with contrast weight-bold.

This is Serif Font with contrast weight-black.

Dialog

Greetings, one and all!

I'm a dialog element with "open" attribute, I override some content when I'm opened...

This is an alert message!

This modal dialog has a custom backdrop!

I'm a dialog element with "autofocus" attribute, I override some content when I'm opened...

Javascript is required to open and to close me. Add this after the dialog: 

     <script>
        const dialog = document.querySelector("#dialog-autofocus");
        const showButton = document.querySelector("#dialog-autofocus + button");
        const closeButton = document.querySelector("#dialog-autofocus button");

        // "Show the dialog" button opens the dialog modally
        showButton.addEventListener("click", () => {
            dialog.showModal();
        });

        // "Close" button closes the dialog
        closeButton.addEventListener("click", () => {
        dialog.close();
        });
    </script>

HTML tags for embed text

So, this is a text with a Primary link inside...

Bold Italic Underline Deleted Inserted Strikethrough Small Text Sub Text Sup Abbr. Kbd+x Highlighted

Blockquote

La règle d'or de la conduite est la tolérance mutuelle, car nous ne penserons jamais tous de la même façon, nous ne verrons qu'une partie de la vérité et sous des angles différents. — Ghandi

Lists

Simply use the standard ul, ol or dt HTML elements.

An ul list
An ol list
  1. This is the 1st item.
  2. then the second one.
  3. For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
  4. And the last li tag.
A dt list
This is the 1st item
Some item in a first line.
And a second item.
Then the second one
A item related to the second.
And the last dt tag.
with the last dd tag.

Designed HTML elements:

Buttons

Normal view

Contrast view

Tables

Normal view

Table 1: A caption of the table in this normal view.
# Heading Heading Heading Heading Heading Heading Heading
1 Cell Cell Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell Cell Cell

Contrast view

# Heading Heading Heading Heading Heading Heading Heading
1 Cell Cell Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell Cell Cell
Table 2: A caption of the table: with contrast view.

Dark theme

# Heading Heading Heading Heading Heading Heading Heading
1 Cell Cell Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell Cell Cell
Table 3: A caption of the table in dark theme.

Forms

Here is a form with <fieldset>:

This is a form without <fieldset>:

Others...

Accordion

Who is Sarah Connor?

Sarah Jeanette Connor is a fictional character and the main protagonist of the Terminator franchise. Sarah was portrayed by Linda Hamilton in The Terminator, Terminator 2: Judgment Day, T2-3D: Battle Across Time, and Terminator: Dark Fate

I have keys but no doors. I have space but no room. You can enter but can’t leave. What am I?

A keyboard

A more complex one... add buttons in the summary:

A summary text. link
...an header in details...

Some text in the main part of the details element.

Some text in the main part of the details element.

Some text in the main part of the details element.

...a footer in details...

A more complex one... add buttons in the summary in contrast view:

A summary text. link
...an header in details...

Some text in the main part of the details element.

Some text in the main part of the details element.

Some text in the main part of the details element.

...a footer in details...

aside

This is the main content related to the side one.

Progress bar

70%