Charles Boury

Video Game Art Director

CSS Showcase of this website

This is a page to show all the style elements available. You're currently reading a <p> element. The title above is a <H1> element. Don't forget to check the responsive behaviour! In fact, this is the sole purpose of the current article: to test the building blocks of this website. Have fun looking at my handmade html/css/js corner of the internet :)

This website uses semantic html. It means that the reader view of any browser or RSS client will extract the content and display it correctly. CSS is only for presentation, not content.

Normal text Bold text <b> monospace <code> link <a> .button .role .tag [11:25] .timestamp

Big heading <H2>

<H2> is used when the heading must be as loud as the surrounding pictures. It is mainly used on project pages, where the main content is group of pictures. It is almost as big as <H1> and has big margins, so on text articles, I prefer to use <H3> to better differentiate from the page title, and avoid jaring splits.

Heading <H3>

The main heading used on articles. It doesn't split the flow of text as much as <H2>, and can be long while remaining easy to read.

Tiny heading <H4>

Used as a sub-heading, <H4> has the same font-size as a paragraph. It's very similar to any bold text <b>. It is used to title a negligible section. I don't use <H5> nor <H6>.

This is another simple paragraph, to look at the margins between a list and a paragraph. Most of the content in an article is written inside paragraphs, so this block of text is relevant. Yes, it is!

  1. Are you still reading this?
  2. Can anybody hear me?
  3. Am I stuck in a neatly ordered list?

This is a <blockquote>, mainly used to cite cool people who said cool stuff. For example this one sentence by Edward Tufte: Confusion and clutter are failures of design, not attributes of information.

Source with link

A .card class can highlight any block, like this paragraph. The article: id Software Principles is a good example of how it is used.

Ok so now let's look at pretty pictures. You've come to this website with this goal in mind, haven't you? Next is a <figure> element with an <img> inside.

A <figure> can also contain a <video> or a <canvas>, have multiple children, and end with an optional <figcaption>.

optional figcaption

The layout can be different. Each row can be composed of up to 4 elements. The layout only applies on wide enough screens. Layout can be preserved on narrow screens with the class .forceLayout.

class="grid ofTwo", class="grid ofThree", etc.

By default, a figure takes the same width as the text elements. To put emphasis on visuals, there are 2 options to have wider figures: overflow and big.

Obviously, you need to look at the page with a wide screen to benefit from these options. On a phone held vertically, everything will look similar. On a tablet, overflow and big will appear similar. The purpose of big is to make use of all available space on PC screens.

class="overflow"
class="big"

To stay structured, a page should not mix different widths too much. Use overflow with visuals lacking a clear frame, or if there's no text around.

The layout options can be combined with the width options. Here is an example of a big grid of two pictures.

class="big grid ofTwo"

By default, elements that don't take the full page width are zoomable, by clicking on them. Zoom is disabled when it wouldn't result in a bigger display. So no zoom on narrow screens, nor on single big elements. However, elements in a big grid layout are zoomable, because they don't take the full page width. Try zooming on the figures above!

The zoom feature can be disabled on each element with the noZoom class. Use it rarely, only for elements that wouldn't benefit from it.

click-to-zoom is disabled

The above element is also set to a specific width by setting the css property directly: style="max-width: 10em".

By default, tall imgs and videos are scaled down if they don't fit the window vertically, to prevent them being out of frame. To counter this, use the noFit class on an element (If you don't see a difference between the 2 pictures above, try resizing your window to a wider ratio).

left is default, right is .noFit

If you thought the previous css class was weird, look at this one: overlay reveals another picture on hover.

hover on the figure to reveal another one

Is it useful, you ask? Hardly. It's a gimmick, I know. I may improve it later, because for now, it only works with a mouse, and not with a touch screen (and any input lacking a hover state).

  1. More on lists

    Haven't we look at lists already? Yes.

    But list items can also be containers to other blocks. And I didn't show it before. So it's possible to have multiple paragraphs, and even figures inside a numbered li container.

    and even figcaptions

    This way, an article can be structured more strongly. For a use case, have a look at Playing with code, an article using an ordered list to present a sequence of steps.

  2. By the way, this is an H4 heading

    All the content inside a list item is indented. Compare this paragraph with the next one.

We're back to the root of the article. You'll notice that I didn't use a single lorem ipsum since the begining of this article. And I am quite proud of it. But if you want some, I can nourish your appetite! Can you read lorem ipsum? I can't. So maybe I won't unleash the dark powers of the lorem... yet.

What was this? A subtle and thin line gracefully separating content? Is that a hr element? Yes it is!

And what was this? A breath of fresh air, empty as a clear sky, creating space at will, to ease our eyes? Simply put, a div.space.

And that's it! End of the CSS showcase. These are all the common blocks, but the website is filled with custom stuff. I like playing with css and js, so I often set custom styles for elements. If I ever need to use it more than once, I then extract the logic, and put it here.

Are you curious to look at some of the custom elements I made?