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" />
<link
    rel="stylesheet"
    href="https://sourceforge.net/p/whakerexa/code/ci/master/tree/statics/css/layout.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.

layout.css is a CSS framework based on wexa.css, allowing you to manage layouts of HTML elements. It includes the possibility to add content that looks like a card. At this time, it is provided as-is, offering a streamlined selection of customization solutions.

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

The containers

Simple panel

Scrolled panel

Flex panel

Grid panel

Collapsible panel

Cards panel

layout.css provides a container allowing to organize cards: cards-panel. See the demos for details.

A card

The class card can be added to any HTML element which can be used as a container. Preferably, you should use either <section> or <article> element, instead of the nonsensical <div>. Any of then will be displayed the same way, but screen readers interpret a section or an articlein a more appropriate manner, unlike a div!

Example

Result

<article class="card">
    <main>
        <h2>card title</h2>
        <p>multi-line card content... the text wraps when needed!</p>
        <a href="#somewhere">Convinced!</a>
    </main>
</article>

card title

multi-line card content... the text wraps when needed!

Convinced!

Classically, the card can be divided into: a header, a main and a footer:

<article class="card">
    <header>
        <h2>card title</h2>
    </header>
    <main>
        <p>multi-line card content... the text wraps when needed!</p>
    </main>
    <footer>
        <a role="button" href="#somewhere">Footer link!</a>
    </footer>
</article>

card title

multi-line card content into 'main'... the text wraps when needed!

The variables

cards.css is allowing to set the following four variables:

card-max-width, not efficient if full-cards-panel
card-border-width is '2px' by default
card-border-radius is '8px' by default
card-box-shadow

In the following example, the max width and the border width of a card are both increased, and the border radius and shadow are canceled:

<style>
    :root {
        --card-max-width: 15rem;
        --card-border-width: 4px;
        --card-border-radius: 0;
        --card-box-shadow: none;
    }

Demos

Cards

Create cards in a section with article elements

SPPAS card instance

An amazing software tool.

A card

Le read more ci-dessous est un lien avec role button.

Header

Another card instance

Cupidatat tempor sint mollit in tempor ut fugiat excepteur laborum labore.

Not implemented yet: horizontal card -- any help is welcome!

Horizontal card

with dark and high contrast

Create cards in a full-cards-panel

SPPAS offers open source cross-platform, customizable automatic annotation and analysis solutions for audio and video media.

SPPAS was awarded by the French Ministry of Higher Education, Research and Innovation at the 2022 Open Source Research Software Competition.