Webbits Web Widgets

Introduction

Webbits is a collection of useful pieces for building webapps and web pages.

Boilerplate

Boilerplate for new pages. Remove cache control if necessary i.e. for production.


				<!DOCTYPE html>

				<html xmlns="http://www.w3.org/1999/xhtml">

				<head>

				    <meta http-equiv="cache-control" content="private">

				    <meta http-equiv="cache-control" content="max-age=0" />

				    <meta http-equiv="cache-control" content="no-cache" />

				    <meta http-equiv="cache-control" content="no-store">

				    <meta http-equiv="pragma" content="no-cache" />

				

				    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0, user-scalable=yes">

				    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">

				    <meta content="utf-8" http-equiv="encoding">

				    <link href="style.css" rel="stylesheet">

				    <script src="script.js"></script>

				    <title></title>

				</head>

				<body>

				    

				</body>

Usage

Add the relevant files.


				<link href="webbits.css" rel="stylesheet">

				<script src="webbits.js"></script>

The CSS library contains

Slider toggles for checkboxes.
Non-JS Hamburger Menu.

Inputs

Toggle Switch.

No JS, but requires some extra HTML fluff.

Switch 1


				<label class="wb wb-switch">

				    <span>Switch 1</span>

				    <input type="checkbox" /><span class="wb"></span>

				</label>

Custom Radios and Checkboxes

Checkbox 1 Checkbox 2 Radio 1 Radio 2


				<label class="wb wb-check">

				    <span>Checkbox 1</span>

				    <input type="checkbox" /><span class="wb"></span>

				</label>

				<label class="wb wb-check">

				    <span>Checkbox 2</span>

				    <input type="checkbox" /><span class="wb"></span>

				</label>

				<label class="wb wb-radio">

				    <span>Radio 1</span>

				    <input type="radio" name="radio-group" /><span class="wb"></span>

				</label>

				<label class="wb wb-radio">

				    <span>Radio 2</span>

				    <input type="radio" name="radio-group" /><span class="wb"></span>

				</label>

Hamburger Menu

Pure CSS.


				<nav class="wb wb-nav">

				    <label class="wb">

				        <input type="checkbox" />

				        <span class="wb-burger-icon"></span>

				        <section>

				        <h3>Navigation</h3>

				        <ul>

				            <li><a href="#">Nav 1</a></li>

				            <li><a href="#">Nav 2</a></li>

				            <li><a href="#">Nav 3</a></li>

				        </ul>

				        </section>

				    </label>

				</nav>

Modal

Still no Javascript. Be sure to set the ID's properly, especially for the modal close action.


				<div class="wb-modal" id="wb_modal">

				    <section class="wb-modal-content">

				        <a href="#" class="wb-closebtn"></a>

				        <p>High quality content here!</p>

				    </section>

				    <a class="wb-modal-overlay" href="#"></a>

				</div>

HTML Formatter

Convert raw HTML into something somewhat displayable. Mind the whitespacing/tabbing.

Manually add non-breaking spaces for tabs where needed:

Result

Notes

This is still an early version. Possible future refactoring. Modification of CSS variables is recommended but unfortunately, media queries need to be manually modified. Not tested in a production site yet