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 bold with the b tag; of course, you can underline or strikethrough text; 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, 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!

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

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.

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>

int main(void) {
  printf("Hello World");
  return 0;
}