Current:

Theme:

Theme:

Theme:

Theme:

Theme:

Theme:

Dark mode detected

Light mode detected

Vertical orientation detected

Horizontal orientation detected

Java Script is on, but only on page load

Java Script is enabled

Java Script is disabled

Apr 4

Should YOU learn Python?

This is just an example. What are the benefits of learning Python?

Apr 4

Resources for programmers

Your programming guide - resources that might become handy when (learning) programming.

Resources for programmers

Your programming guide - resources that might become handy when (learning) programming.

Basic Typography

#example #test

This page is a demonstration of the elements that can be formatted using LilaCSS. Each section includes a code block on how to include it in your site's design.

Hello there

This is an example text as a placeholder..

Bootstrap icons work fine, too!

All the typography of LilaCSS uses rem for sizing. This means that accessibility is maintained for those who change their browser font size. The body element has a size of 1.15rem which makes all the standard font sizes slightly larger. This equates to 18.4px for paragraph text, instead of the standard 16px.

The heading elements also have an increased top margin in order to break blocks of text up better.

Heading 1 3rem

Heading 2 2.6rem

Heading 3 2rem

Heading 4 1.44rem

Heading 5 1.15rem

Heading 6 0.96rem

Links & Buttons

Links are formatted very simply on LilaCSS (shock horror). They use the accent CSS variable and are underlined. There is a :hover effect that removes the underline.

Buttons use the same accent CSS variable for their colour. When hovering, there is an opacity effect.

I'm a hyperlink

Other typography elements

There are a number of other typography elements that you can use with LilaCSS. Some of the common ones are:

• All the standard stuff, like bold, italic and underlined text.
• Highlighting text using the mark element.
• Adding inline code using the code element.
• Displaying keyboard commands like ALT+F4 using the kbd element.

Lists

We all love a good list, right?

• Item 1
• Item 2
• Item 3

1. Do this thing
2. Do that thing
3. Do the other thing

Blockquotes

Sometimes you may want to quote someone else in your HTML. For this we use the blockquote element. Here's what a quote looks like with LilaCSS:

Friends don't spy; true friendship is about privacy, too.

– Stephen King

Code blocks

Code blocks are different from the inline code element. Code blocks are used when you want to display a block of code, like this:

print("This is an example code block")

while True:
    print(input())

Navigation

The nav menu is deliberately designed to be extremely simple so that you can improve on it as you see fit. Or, just leave it as is to have a good looking, functional navigation menu.

There's no JavaScript or checkbox CSS hacks here. It's just a collection of simple “buttons” that wrap to the given width of the page:

The nav menu will also adapt to smaller screens automatically so that it doesn't take up too much space.

To add a nav menu, just add the following to the <header> section of your site:

Images

In LilaCSS, images within the main element are always full width and have rounded edges to them. The figcaption element is also formatted in LilaCSS. Here are examples of images with and without a caption:

Accordions

Accordions are cool to play with. They're especially useful when it comes to things like FAQ pages. Many people invoke JavaScript, or div for life when they use accordions. I don't really understand why that is when it's available in plain old HTML:

Tables

Like lists, sometimes you may need to add a table to your webpage. In LilaCSS tables automatically highlight every other row to make reading easier. Table header text is also bold. Here's what they look like:

Forms

Forms are useful for all kinds of things on webpages. Contact forms, newsletter sign ups etc. Forms also look pretty good on LilaCSS:

New articles

This is an example article

Lorem ipsum dolor sit amet, consectetur adipis lac consetetur sad et.

Learn more...

This is an example article

Lorem ipsum dolor sit amet, consectetur adipis lac consetetur sad et.

Learn more...

This is an example article

Lorem ipsum dolor sit amet, consectetur adipis lac consetetur sad et.

Learn more...

(there is actually no chat whatsoever, it's just a demo!)