Almond.CSS

Almond.CSS is a collection of CSS styles to make simple websites look nicer and better.

On this demo page, we will go through the main components from this lightweight CSS library. Then we will also add the extended classed styles.

Typography

Block and Inline Elements

Paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent placerat velit lorem, feugiat congue lacus laoreet quis. Praesent maximus ex nec justo iaculis, in euismod eros dictum. Cras ac lorem sit amet purus malesuada blandit. Mauris gravida augue non urna sodales porttitor. Etiam ullamcorper luctus ullamcorper. In lobortis consequat ante.

This is a paragraph with multiple inline elements. The span is not styled, but you may have some links with the a tag; also you can add emphasis with em or also with i; Highlight the words by using strong or just bring attention with the b tag; of course, you can strikethrough text (or the deprecated tag in HTML5 strike), and the <u> tag now stands for unarticullated-text instead of underline; abbreviations are great, as you may have TMA; inline code is cool too; You can also add line breask with br...
Highlight text with mark or display a Key. You can also have inline quotes with q, or results from an operation with samp or a variable, or an output, also there's small text, text withsuperscript, or text withsubscript... not to mention you can have time too. For example, this paragraph was originally written in . Not to forget about definitions! Also del was deleted and ins was inserted.

Integer viverra elit sed tincidunt dignissim. Donec luctus malesuada posuere. Sed pulvinar pulvinar augue. Aenean id ligula justo. Curabitur egestas sed augue vel vulputate. Ut tempor sem sit amet diam molestie, id tincidunt lorem vulputate. Duis eu consectetur turpis, sit amet lobortis magna.

—Cicero, De finibus bonorum et malorum
Alvaro Montoro wrote this document.

Fancy links

Some links may be special depending on their href or their rel:

Link to alvaromontoro@gmail.com
Link to a number (call)
Link to a number (message)
Link to a file
Link to download a file
Link to an external site
Link to bookmark

Those special links will work inline too! Email me! or see an Link to an external site.

Headings

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5
Heading Level 6

Heading level 2 within hgroup

Heading level 3 within hgroup

Lists

  1. Ordered list item 1
  2. Ordered list item 2
    1. Ordered list sub-item 1
    2. Ordered list sub-item 2
  3. Ordered list item 3
  4. Ordered list item 4

Form & Controls

Inputs & Textareas






Input with type="hidden" ;)










Input States





Buttons

Button with button tag

Disabled button






Radios & Checkboxes






Other Form Controls






Elements in-line

Other HTML Elements

Table

Demo Table
Column 1 Column 2 Column 3 Column 4
Row 1 Value 1 Row 1 Value 2 Row 1 Value 3 Row 1 Value 4
Row 2 Value 1 Row 2 Value 2 Row 2 Value 3 Row 2 Value 4
Row 3 Value 1 Row 3 Value 2 Row 3 Value 3 Row 3 Value 4
Total 1 Total 2 Total 3 Total 4

Horizontal Rule

Images

Img

Cartoon

Figure & Figcaption

Cartoon
Picture of a person

SVG

Details

Details/Summary example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent placerat velit lorem, feugiat congue lacus laoreet quis. Praesent maximus ex nec justo iaculis, in euismod eros dictum. Cras ac lorem sit amet purus malesuada blandit. Mauris gravida augue non urna sodales porttitor. Etiam ullamcorper luctus ullamcorper. In lobortis consequat ante.

Stacked details ("Accordion style")

Accordion 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Accordion 2

Praesent placerat velit lorem, feugiat congue lacus laoreet quis.

Accordion 3

Praesent maximus ex nec justo iaculis, in euismod eros dictum.

Dialog

This is a test dialog

Dialog with heading

This is a test dialog

This is a test dialog with a long text.

This is a test dialog with a long text.

This is a test dialog with a long text.

This is a test dialog with a long text.

This is a test dialog with a long text.

This is a test dialog with a long text.

This is a test dialog with a long text.

This is a test dialog with a long text.

This is a test dialog with a long text.

This is a test dialog with a long text.

This is a test dialog with a long text.

This is a test dialog with a long text.

This is a test dialog with a long text.

This is a test dialog with a long text.

This is a test dialog with a long text.

This is a test dialog with a long text.

This is a test dialog with a long text.

This is a test dialog with a long text.

This is a test dialog with a long text.

Progress

70%
70%

Definition Lists

Term 1
Definition for term 1.
Term 2
Definition for term 2.
Term 3
Definition for term 3.

Pre

This is a test
            using
pre
    with different 
  indentations

Pre with Code

#include <stdio.h>

// this is a line with really long text to show that now the gray background goes all the way, instead of limiting to the wisth of the main.
int main(void) {
  printf("Hello World");
  return 0;
}

Multimedia

Audio

Audio credit: "Notification Sound" by SoundsForYou on Pixabay

Video

Video credit: "Hearbeat" by conolan on Pixabay

Widgets

An accessible collection of class-less widgets, based on attributes and roles. Widgets are not available in the lite version of the library.

Progress bar

To create a circular progress bar, add role="progressbar" to an HTML element. Also, inline add a CSS variable with the target value: style="--value: 66".

To make it more accessible, add some ARIA attributes:

  • aria-valuenow: The value of the progress bar.
  • aria-valuemin: The minimum value of the progress bar.
  • aria-valuemax: The maximum value of the progress bar.

You can specify how the thickness of the progress bar by setting the --thickness custom property to one of these values: var(--thick), var(--medium) (default), or var(--thin).

Code example and demos

<div role="progressbar" aria-valuenow="33" aria-valuemin="0" aria-valuemax="100" style="--value: 33"></div>
<div role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="--value: 50; --thickness: var(--thick)"></div>
<div role="progressbar" aria-valuenow="66" aria-valuemin="0" aria-valuemax="100" style="--value: 66; --thickness: var(--medium)"></div>
<div role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="--value: 90; --thickness: var(--thin)"></div>