I used to put these on the CSS and copying an already convoluted version from the HTML. Looking back at it, it was pretty dumb thing to do... Respect your time peeps!

Snippet

These snippet can be displayed in HTML by converting the symbol to their respective code like "&somecode". The & sign can be written in HTML like "&". For convenience, just use TextFX plugin in Notepad++

Jump to Top

<div class="jump-to-top"><a href="#top"></a></div>

Bottom-left Shortcut Slider

<div class="nav-shortcut"><a href="/"><img src="/favicon.png"></a></div>

Manipulatable Elements

♦ Expand paragraph - append by clicking this

♦ Expand paragraph - inline and hide the toggle, basically a one way gate for text. Mind the white space on each classes as it will affect the spacing.

Generic Tabs

Page 1 Page 2 Page 3 Page 4

Fancy Elements

Tooltip

Tooltip for something that is I like build baseinteresting enough but eats up relevant space. The hover trigger isn't painted with CSS by default so the content doesn't get the property too. Put the TITLE in another span.

Add I'M EATING ALL THESE SPACES!!!.tooltip--large if it really eats up space.

Add .container-tooltip--sign (▼) if it's a link with hoverables for the mobile user out there.

<span class="container-tooltip"><span class="tooltip">CONTENT</span>TITLE</span>

Sample with image, make sure to add lazyload, you lazy! Preview TITLE Change the tooltip class tag to href if everything is clickable.