caCSSade

I'm an article

Since articles are self contained compositions within a page with a possibilities of many instances with a page I (Codieum and I) decided to style it as such.

Text Elements

This is a paragraph. Strong text, emphasized text, marked text, small text, ~~deleted text~~, inserted text, _subscript, ^superscript,idiomatic text (something different about it), text brought to attention (but of no real importance or significance).

HTML is the standard markup language for creating webpages.

While CaCSScade is a CSS framework library made to make HTML look good.


code::before{
    content: attr(lang);
    color: var(--text);
    background-color: var(--shade);
    font-size: 0.5em;
    font-weight: bold;
}
TIP: highlight codeblocks with highlight.js

Use a pre
to maintain line breaks
and preservation of prose structure.
This is pro.

- CSC530

Alt + F4 make your computer go brrrr. - CSC530

Written by csc530.
Visit us at:
cacssade.ca
Box 564, File Island
Digital World

September 7, 2024

Lists

Unordered list item 1
I got some content a p and codes
- oh and another list with items
- 1. with even more lists :)
  2. 🙈
  3. 🙉
  4. 🙊

don't usually see order lists out in the wild do you?
Ordered list item 2
Ordered list item 3

Definition Term 1: Definition Description 1
Definition lists: a niche and unused HTML tags for defining terms, concepts, or phrases (glossary)

Menu item 1

Edit

View

Semantically equivalent to <ul>

Tables

this is a table's caption; and ironically are `display` *block* elements and not table for (*what I hope are obviously*) stylistic reasons
Abbreviation	File format	MIME type	File extension(s)	Summary
APNG	Animated Portable Network Graphics	`image/apng`	`.apng`, `.png`	Good choice for lossless animation sequences (GIF is less performant). AVIF and WebP have better performance but less broad browser support. Support: Chrome, Edge, Firefox, Opera, Safari.
AVIF	AV1 Image File Format	`image/avif`	`.avif`	Good choice for both images and animated images due to high performance and royalty free image format. It offers much better compression than PNG or JPEG with support for higher color depths, animated frames, transparency, etc. Note that when using AVIF, you should include fallbacks to formats with better browser support (i.e. using the `<picture>` element). Support: Chrome, Edge, Firefox, Opera, Safari.
GIF	Graphics Interchange Format	`image/gif`	`.gif`	Good choice for simple images and animations. Prefer PNG for lossless and indexed still images, and consider WebP, AVIF or APNG for animation sequences. Support: Chrome, Edge, Firefox, IE, Opera, Safari.
JPEG	Joint Photographic Expert Group image	`image/jpeg`	`.jpg`, `.jpeg`, `.jfif`, `.pjpeg`, `.pjp`	Good choice for lossy compression of still images (currently the most popular). Prefer PNG when more precise reproduction of the image is required, or WebP/AVIF if both better reproduction and higher compression are required. Support: Chrome, Edge, Firefox, IE, Opera, Safari.
PNG	Portable Network Graphics	`image/png`	`.png`	PNG is preferred over JPEG for more precise reproduction of source images, or when transparency is needed. WebP/AVIF provide even better compression and reproduction, but browser support is more limited. Support: Chrome, Edge, Firefox, IE, Opera, Safari.
SVG	Scalable Vector Graphics	`image/svg+xml`	`.svg`	Vector image format; ideal for user interface elements, icons, diagrams, etc., that must be drawn accurately at different sizes. Support: Chrome, Edge, Firefox, IE, Opera, Safari.
WebP	Web Picture format	`image/webp`	`.webp`	Excellent choice for both images and animated images. WebP offers much better compression than PNG or JPEG with support for higher color depths, animated frames, transparency etc. AVIF offers slightly better compression, but is not quite as well-supported in browsers and does not support progressive rendering. Support: Chrome, Edge, Firefox, Opera, Safari

Forms

Input: Name:
Email:
Password:
Date:
Color:
Range:
Number:
Search:
Telephone:
URL:
File:
Label:

Fieldset's legend Nested reverse input Radio button
Nested input
label first then radio-button

Select:
Nested select:
Multi-Select:
Textarea:
Nested textarea:
Nested Checkbox Checkbox Nested reverse checkbox: Label before checkbox:
Datetime-local:
Week:
Month:
Time:
Datetime:

Media

Below we got some ultra high-def large images coming from unsplash.com and kaboompics.com. You can expect some page jumps; you should be using the width and height attributes to prevent this.

Notice the image above and below are very large but will always be contained within the viewport and maintain their aspect ratio 😊.

Placeholder — The image above is in a `figure` (and this is a `figcaption`). This make the image visually centered otherwise the will be aligned to the reading direction.

Below is an svg image that has an intrinsic width and height (of 512px) so it will grow to that dimension even without the width and height attributes being set.

However the below svg does not have an a set width and height so it will always grow to the size of the screen and needs a width and height.

images are still "inline" elements so if space permits they will be displayed side by side + notice those lovely squircle corners🥵

However if you place an image inside a text tag such as <p> it will float left or right if it's odd or even respectively. The thought process is that image complements the text but shouldn't break the reader's flow. So if you want an image to be sequential to the text you should use <figure> or place the img after the text tag (as which has been done😉).

if you're wondering why there's so much page jumps is because most of the images don't have their dimensions specified, the way it iis for most images in the wild 🥲. Don't do that; this is only for illustrative purposes to show caCSScade's effectiveness with realistic (though bad) HTML: not only on optimal and best practices code like yours, obviously.

Not much I did with the audio element

Plus everything applicable from images applies to the video tag too

Interactive Elements

More Info

This is additional information.

60% 70%