Feature 1
Subtitle
Description
Styles used on my website
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.
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
.
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.
Some language switching options I developed prior to putting this into the navigation:
Sprache wechselnSwitch language
Just the wrapper without any specific style applied.
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.
All font awesome icons so that I can find an icon easily in case I need an icon:
Text size icon:
Extra large icon:
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 |
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 |
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.
When using an image to fit the whole page width, make sure that is has sufficient resolution.
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.
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.
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.
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
. 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>
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.
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.
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.
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.
Subtitle
Description
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.
Subtitle
Description
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.
This style avoids page break during print inside the whole section. Apart from this, no further styles are added. Use with caution.
Has secondary background color applied.
Actually a redundant style as this does not define anything useful except the same background color like the wrapper has defined already. Consider changing.
Transparent background, no border, no left and right padding.
Rounded corners, some padding.
Makes the background transparent and adds a border. has some padding left and right so it doesn't require a container inside.
Adding "compact" to the section class reduces padding.