Gadgetz

Some predefined widgets for web.

Horizontal scrollable

For customization purposes, contents inside do not have any pre-defined styles.

For devices with a mouse: Shift + wheel to scroll horizontally

Category1 Category2 Category3 Category4 Category5 Category6 Category7 Category8 Category9 Category10 
<div class="hScroll">
    <!-- Any items: -->
    <a href="#">Category1 </a>
    <a href="#">Category2 </a>
    <a href="#">Category3 </a>
    <!-- ... More items ...-->
</div>

With faded sides

Category1 Category2 Category3 Category4 Category5 Category6 Category7 Category8 Category9 Category10 
<div class="hScrollFaded">
    <!-- Any items: -->
    <a href="#">Category1 </a>
    <a href="#">Category2 </a>
    <a href="#">Category3 </a>
    <!-- ... More items ...-->
</div>

Accordion

Parameters

, when not specified, aligned at left.

Markers styles




Click me
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem commodi impedit fugiat nesciunt quo harum, quaerat porro dolorum placeat eius ullam animi dolores sapiente fugit cumque. Porro unde eos quae, culpa doloremque recusandae commodi dicta ut aperiam, excepturi pariatur voluptas, in reiciendis delectus nihil quibusdam fuga voluptates! Quidem error quis, reiciendis ratione culpa expedita accusantium perspiciatis maiores sunt quasi porro possimus eveniet obcaecati est esse consectetur cum iusto nobis tenetur nostrum tempore. Voluptatum quos dolor sapiente quam nihil eos incidunt culpa cum dicta, reiciendis officiis in obcaecati. Porro nulla dolorem repellat repellendus optio ratione harum iure, distinctio libero. Minima, ducimus! 
<details class="
">
    <summary class="
 
narrow
">
    Click me
    </summary>
    <div>
    <!-- contents-->
    </div>
</details>

Notes

Notes can be used to notify the user about something special. Use the universal color code for theme of the notes. in this syntax: 

<div class="note-${code}">
</div>

Predefined parameters

Use !important or inline style to override.

This is a tips.

Use color code g for green.

This is a warning.

Use color code y for yellow.

This is an error.

Use color code r for red.


This is an info.

Use color code b for blue.

More themes

We dont know what do these color represent, but they are available for use.

This is an note of some kind.

Use color code e for grey.

This is an note of some kind.

Use color code k for black.

This is an note of some kind.

Use color code o for orange.

This is an note of some kind.

Use color code p for pink.

This is an note of some kind.

Use color code u for purple.