Test page

Styles used on my website

Abstract

This page contains most styles and elements that I use on my website in order to have an overview and proper documentation without cluttering the CSS, JS or any other sheets. This page is also a useful template to copy and paste from. Also, the ability to test everything on different operating systems and browsers is helpful.

Browser support

Below information is gathered by media queries:

The screen width is below 480px.

The screen width is above 480px and below 736px.

The screen width is above 736px and below 980px.

The screen width is above 980px and below 1024px.

The screen width is above 1024px and below 1280px.

The screen width is above 1280px and below 1680px.

The screen width is above 1680px and below 2560px.

The screen width is above 2560px and below 3840px.

The screen width is above 3840px.

Text in English language is shown.

Text in German language is shown.

This browser supports the @supports query.

This browser supports the @supports query and reports to support display: grid.

Elements

Container borders are red. The container restricts horizontally.

Row elements and some other objects have a blue border.

This section is a three column layout. The leftmost column is generated by java script and contains a table of contents based on the headings of the page. The script crawls the page and lists all headings from h3 to h6 in the TOC. The TOC is only shown on wide screens and hidden on smaller ones and not shown during print. The rightmost column is only for filling up unused space, varies in width and is hidden on smaller screens. Usually ads would be placed there.

Alternate language switching buttons

Some language switching options I developed prior to putting this into the navigation:

Sprache wechseln

Switch language

Wrapper

Wrapper description

Just the wrapper without any specific style applied.

Text

This is bold and this is strong. This is italic and this is emphasized. This is superscript text and this is subscript text. This is underlined and this is code: for (;;) { ... }. Finally, this is a link.

Text above <hr> element.

Text below <hr> element.

Fringilla nisl. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan faucibus. Vestibulum ante ipsum primis in faucibus lorem ipsum dolor sit amet nullam adipiscing eu felis. 
This
is
a
block
of
code.

Heading h3

Heading h4

Heading h5
Heading h6

Lists

Unordered list

  • Dolor pulvinar etiam magna etiam.
  • Sagittis adipiscing lorem eleifend.
  • Felis enim feugiat dolore viverra.

Unordered list alternate

  • Dolor pulvinar etiam magna etiam.
  • Sagittis adipiscing lorem eleifend.
  • Felis enim feugiat dolore viverra.

Ordered list

  1. Dolor pulvinar etiam magna etiam.
  2. Etiam vel felis at lorem sed viverra.
  3. Felis enim feugiat dolore viverra.
  4. Dolor pulvinar etiam magna etiam.
  5. Etiam vel felis at lorem sed viverra.
  6. Felis enim feugiat dolore viverra.

Icons

All font awesome icons so that I can find an icon easily in case I need an icon:

Brands
Solid
Regular

Text size icon:

Extra large icon:

Actions

Buttons

  • Disabled Special
  • Disabled Default
  • Disabled Alternate

Table default style

Name Description Price
Item 1 Ante turpis integer aliquet porttitor. 29.99
Item 2 Vis ac commodo adipiscing arcu aliquet. 19.99
Item 3 Morbi faucibus arcu accumsan lorem. 29.99
Item 4 Vitae integer tempus condimentum. 19.99
Item 5 Ante turpis integer aliquet porttitor. 29.99
100.00

Table alternate style

Name Description Price
Item 1 Ante turpis integer aliquet porttitor. 29.99
Item 2 Vis ac commodo adipiscing arcu aliquet. 19.99
Item 3 Morbi faucibus arcu accumsan lorem. 29.99
Item 4 Vitae integer tempus condimentum. 19.99
Item 5 Ante turpis integer aliquet porttitor. 29.99
100.00

Form

Centered items

Centered items and text with last line centered (which is by default also justified). Extra large icon.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Fringilla nisl. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan faucibus. Vestibulum ante ipsum primis in faucibus lorem ipsum dolor sit amet nullam adipiscing eu felis.

Image Left

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Image Right

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

It is possible to let the left and right elements flow into each other for a more dense layout:

Image Left

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Image Right

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Image Fit

When using an image to fit the whole page width, make sure that is has sufficient resolution.

Hexagon Grid

Hexagons look futuristic and scientific. Daniel has perfected this hexagon grid I use here under Apache-2.0 license. It works great on browsers that support CSS grid. On browsers that do not support CSS grid, content styled this way will still show as hexagons in a single column on top of each other.

Grid layout

Fancy layout using CSS grid that allows each item in the grid to span a defined number of grid columns and rows. Adapts to different screen widths. The order of elements is strongly dependent on the number of columns, that varies with screen width. So it is a kind of ordered mess. It may have a masonry like appearance, but is still strongly bound to the grid. On smaller screens, the grid collapses to blocks that span the entire screen width. This is also the fallback in case CSS display: grid is not supported.

item 1
item 2
item 3
item 4
item 5
item 6
item 7
item 8
item 9
item 10
item 11
item 12
item 13
item 14
item 15
item 16
item 17
item 18
item 19
item 20
item 21
item 22
item 23
item 24
item 25
item 26
item 27
item 28
item 29
item 30
item 31
item 32
item 33
item 34
item 35
item 36
item 37
item 38
item 39
item 40
item 41
item 42
item 43
item 44
item 45
item 46
item 47
item 48
item 49
item 50

This is my photo gallery featuring auto placement of images and a lightbox. Images are placed in three columns and column break is done automatically so that each column has roughly the same height. Reading order is from top to bottom in each column. I would prefer a left to right reading order, but this cannot be implemented using CSS alone and I don't want to use JS. The photo gallery looks similar to the one that came with the template from TEMPLATED, but the one from TEMPLATED requires manually breaking the columns, which I found inconvenient.

Note that images here are lazy loaded only once they are scrolled into the view port. This causes issues in case a page is printed prior to the images being scrolled into the view port. For pages that are likely being printed, better avoid lazy loading images.

Column layout

This used the grid layout that came with the template from TEMPLATED. Just like most of the stuff made by TEMPLATED; this layout is very robust and backwards compatible as it does not use CSS display: grid or any other modern techniques. There are 12 columns and any number of columns inside should be feasible and each of the columns defined may span any number within the 12 columns. In case the screen width is below a certain value, the items inside the columns are stacked above each other. The value where the columns break is defined in the bracket right of the column width and placement definition. Values may be xsmall, small, medium, large and xlarge. Note the percent value next to the row class. I don't really know what this does. Here is the code example for two columns: 

<div class="row 200%">
	<div class="6u 12u$(small)">
		<!-- Left item -->
	</div>
	<div class="6u$ 12u$(small)">
		<!-- Right item -->
	</div>
</div>

Two columns example

Subtitle subtitle subtitle subtitle

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Three columns example

This example uses images inside the columns. Actually almost anything can be placed inside. There is also a lightbox implemented for the images. Note that each of the below examples break at different screen width.

xsmall
small
medium
large

Four columns example

Same same as the three column example, but using four columns instead. Item size in this example is set to xsmall so that the items stay in four columns even on small screens.

Three columns example non-responsive

Feature Grid

This is a nice and clever style from TEMPLATED. I changed the style to CSS grid because the original solution broke badly once too much content was placed inside. I added support for the grid variant of MS Internet Explorer 11. There is also a fallback for browsers that do not support CSS grid, but in this case overloading may break appearance just like it was in the first place.

Feature 1

Subtitle

Description

Feature 2

Subtitle

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Feature 3

Subtitle

Description

Feature 4

Subtitle

Description

A gallery that allows the visitor to filter the content. Implemented using display: grid to change the number of columns between one and five dependent on the screen width. In case CSS grid is not supported, there is a fallback to three columns fixed independent of screen width. The content should have similar dimensions in order to avoid unequal gaps between.

Heading

Heading

Heading

Heading

Heading

Heading

Heading

Heading

wrapper style1

Description

This style avoids page break during print inside the whole section. Apart from this, no further styles are added. Use with caution.

wrapper style2

Description

Has secondary background color applied.

wrapper style3

Description

Actually a redundant style as this does not define anything useful except the same background color like the wrapper has defined already. Consider changing.

wrapper style4

Description

Transparent background, no border, no left and right padding.

wrapper style5

Description

Rounded corners, some padding.

wrapper style5 transparent

Description

Makes the background transparent and adds a border. has some padding left and right so it doesn't require a container inside.

wrapper style5 transparent compact

Description

Adding "compact" to the section class reduces padding.

wrapper style5 transparent compact clickable-background

Description

Used to define a large area inside the <a> as hyperlink.