vanillaJS version, light mode

vanillaJS version, dark mode

noJS version, dark mode

noJS version, light mode

1. General Information

• Please refer to and respect my terms of use before utilizing this page.
• Preview the page: vanillaJS version | noJS version
• Get the code: Buymeacoffee | Ko-fi | Payhip

2. Features

• Combination filters.
  • with JS: Isotope combination filters.
  • no JS: Using radio buttons for filtering.
• Dark mode.
  • with JS: Toggle button, can switch between modes anytime.
  • no JS: Mode depends on user settings.
• Multiple content columns.
• Responsive layout.
• Sidebar for filters.

3. Customization

3.1 Design

To change the design of the page, right below the opening <style> tag, you find some CSS variables. The ones under :root are used for the styling of text (font family, font size, text styling) and paddings. In the sections specific to light or dark mode, you can change the colors so that they match the corresponding mode. The CSS variables are named in such a way that from the name alone their purpose is obvious.

If you want to enable the special styling for favorite works, simple add fave to the item element declaration, so instead of <div class="item filer1 filter_a"> or <div class="item" data-filter1 data-filter_a>, make it <div class="item **fave** filer1 filter_a"> or <div class="item **fave**" data-filter1 data-filter_a>, respectively.

3.2 Content

3.2.1 vanillaJS version

adding filters:

The structure looks like this:

<div class="ui-group">
    <h3>Group Name</h3>
    <div class="button-group js-radio-button-group flex wrap gap2" data-filter-group="group1">
        <button class="button is-checked" data-filter="">all</button>
        <button class="button" data-filter=".filter1">one</button>
        <button class="button" data-filter=".filter2">two</button>
    </div>
</div>