SimplyWCAG.css logo

SimplyWCAG.css Lite

This is lite, low-class level version of SimplyWCAG.css framework. You just need to follow HTML 5 document structure with very little CSS classes.

When using this stylesheet: remember to put in the website script with the code at the bottom of every HTML document.

For documentation use F12 (page inspection). Copy templates from this file to create website with SimplyWCAG.css Lite.
Files to download:

...or instead of downloading css file use jsdelivr.net to apply SimplyWCAG.css: 

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/y4ch0/SimplyWCAG.css-Lite/files/simplywcagcss-lite.min.css">
</head>
Remember: Don't forget to add <meta name="viewport" content="width=device-width, initial-scale=1.0"> to head section for responsive layout.

Article with single section

This is article with single section

Article with multiple sections

This is article with multiple sections

This is article with multiple sections

This is article with multiple sections

Article with section and aside

This is article with section and aside

Lorem, ipsum dolor sit amet consectetur adipisicing elit.

Heading

This is h1

This is h2

This is h3

This is h4

This is h5
This is h6

<pre> and <code> tag

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ut assumenda deleniti, temporibus, magni porro fuga beatae architecto natus atque laudantium, illum quos. Quod placeat nostrum corrupti commodi porro eligendi quibusdam quisquam dicta cumque deserunt asperiores, dolorum cupiditate voluptatum itaque blanditiis quos explicabo laborum totam vel debitis expedita ea aliquam et ab! Possimus labore nostrum tempore libero accusamus sit voluptatibus commodi illum numquam quidem quod error, repellat itaque atque aspernatur suscipit fugit minima sint. Corrupti, commodi. Consequatur a libero id accusamus quae vel! Labore obcaecati deleniti esse ratione ipsum recusandae aperiam, quasi sint at nihil. Dicta quia alias illum soluta adipisci.

Example of code tag.

Link

Paragraph with link.

Banana
A yellow fruit that is easy to peel.
Which also grows on a tree.
Cashew
A tan nut without a peel.
Cherry
A red fruit that is hard to peel.

Blockqoute

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat debitis culpa odit adipisci eaque dicta sint dolores error beatae repellendus veniam corrupti provident ex voluptate labore cum laudantium cupiditate odio, nemo non doloremque veritatis? Error quidem ipsa, temporibus, omnis numquam tempora voluptatum adipisci veniam, explicabo quisquam fugit sint eveniet dolorum?
- Author, source

Cite

Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae eius tempore doloribus sit sint possimus quod. Accusamus minima est corrupti.

Buttons

Button as a link Button as a link

To make link <a></a> look like a button add role="button".

Fieldset

Test

To tag required input add <b> tag to the label with "*" character.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ea, magni.

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minima in maiores nobis facilis, laboriosam dignissimos beatae expedita. Deleniti, at architecto dolorem placeat quasi quos rem suscipit quaerat debitis mollitia nostrum ratione voluptates voluptas libero totam error dolor. Nemo numquam esse doloremque. Cumque atque, officiis sint repellat nesciunt eos deleniti nam officia! Quidem excepturi tempore ullam earum explicabo! Maiores modi eum, perspiciatis voluptas ea asperiores odio ex debitis doloremque exercitationem veniam deleniti dolor iure tempora harum architecto veritatis saepe accusamus sunt, quas esse nostrum itaque iste! Modi, in, natus nam dicta molestias illo alias laborum incidunt qui totam, hic accusantium facere.

Coffee
Black hot drink
Milk
White cold drink

Lists

  • Lorem ipsum dolor sit amet.
  • Lorem ipsum dolor sit amet.
  • Lorem ipsum dolor sit amet.
    1. Lorem ipsum dolor sit amet.
    2. Lorem ipsum dolor sit amet.
  • Lorem ipsum dolor sit amet.
  • Lorem ipsum dolor sit amet.
  1. Lorem ipsum dolor sit amet.
  2. Lorem ipsum dolor sit amet.
    1. Lorem ipsum dolor sit amet.
    2. Lorem ipsum dolor sit amet.
  3. Lorem ipsum dolor sit amet.
    • Lorem, ipsum dolor.
    • Lorem, ipsum dolor.

Mark text

Lorem ipsum dolor sit amet consectetur adipisicing elit. A vitae veniam molestiae corrupti exercitationem voluptatibus tempore facilis minus harum sequi?

Label with checkbox/radio

Table

Put <table> inside <div> container to make it responsive (overflow will be scrollable).

Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor
Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor

Keyboard shortcuts

CTRL + Alt

Dialog

Rulebreak: Simple <dialog> code using one class, id, and data HTML tags.

When using this component: remember to put in the website script with the code at the bottom of this HTML document.

Dialog with id 1

Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda, fuga.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias totam atque aut error quos consequatur recusandae. Dolore cum assumenda iste, praesentium et non nisi error deserunt quae eius nam, necessitatibus debitis sit alias! Repellat debitis libero, dolores, corrupti sed minima delectus odit, incidunt illum ducimus excepturi nostrum quidem. Perferendis magni totam delectus dignissimos. Repellat, porro reprehenderit eligendi officia beatae sit obcaecati commodi quaerat quas! Vitae est sequi deserunt voluptate iste provident numquam ipsa saepe quam, maxime officia minima accusamus obcaecati odit ratione incidunt, vel quaerat porro inventore dolor doloremque aliquid eligendi, sunt quo? Accusantium animi repellat quos laudantium mollitia ea, excepturi eveniet voluptatum dignissimos nulla, soluta dolor! Delectus esse velit iusto numquam ducimus repellat culpa, recusandae debitis natus impedit ex, corrupti consequatur! Doloremque ipsum harum, sapiente obcaecati voluptate odio vero necessitatibus asperiores, amet veniam eaque aliquid quam, nisi molestias consectetur commodi alias. Nulla praesentium facilis temporibus! Sequi temporibus consequuntur voluptas expedita iure quasi obcaecati nihil repudiandae placeat voluptatibus, laudantium tempore voluptates quia hic iste quis error facere adipisci? Ratione, eum consectetur nam magni placeat ipsum, iusto quo impedit eos, reiciendis fugiat pariatur corrupti debitis earum natus cum! Animi molestiae cumque qui veritatis dolorem, vero neque asperiores provident expedita, itaque amet?

Dropdown menu

It uses one class toggler for <a> element to allow javascript detect dropdown menu.

Dropdown toggler