Warren Shea

ZERO System - A Website Builder

This project is a culimination of all the skills I've learned from a Front-end perspective. I've built a number of components as consistently, performant, and accessible as possible, keeping in mind the goal is always to move this to a CMS based system that should allow any non-technical user to build webpages.

• ZERO System

• core.css

  This CSS (SASS) framework is built under the Zero System framework, and invented by me.

  Code (source)

  Code (compiled)

• core.js

  A Revealing Module JavaScript Design Pattern.

  Code (source)

  Code (compiled)

• Accordion

  A set of various type of Accordions.

  Example

  Code: HTML / SASS / JavaScript

• Autocomplete

  An example of an accessible autocomplete form and dropdown.

  Example

  Code: HTML / JavaScript

• Carousel

  A mix of various responsive carousels and a Carousel Builder.

  Example

  Code: HTML / SASS / JavaScript

• Cross window communication

  Send messages between a window and its popup.

  Example and code

  Code: Container HTML & JS / Child HTML & JS

• Dialog

  A custom built modal component and an example of the dialog element

  Example

  Code: HTML / SASS / JavaScript

• Draggable

  A set of various Draggable examples.

  Example

  Code: HTML / JavaScript

• Form Validation

  Form input examples and validation. 0 WCAG 2.0 A and AA errors.

  Example

  Code: JavaScript

• Grid (Layout)

  A mix of various Flexbox based Grids with and without Column Gap.

  Example

  Code: HTML

• Height Equalizer

  A height equalizer function.

  Example and code

• iframe communication

  Send messages between a window and its embedded iframe.

  Example

  Code: Container HTML & JS / Inner HTML & JS

• Isotope

  A multi-option example of the Isotope library in use.

  Example

  Code: JavaScript

• Menu and Submenu

  A set of various type of Menus and Submenus.

  Example

  Code: HTML / JavaScript

• Popover

  A custom built popover component.

  Example

  Code: HTML / SASS / JavaScript

• Responsive 2D table

  Built with Flexbox.

  Example

  Code: HTML

• Responsive DOM Manipulator

  A way of moving DOM elements around at responsive breakpoints for a11y/tabbing order

  Example and code

• Show more

  Hide part of a container, only to be displayed with a show more link.

  Example

  Code: HTML / JavaScript

• Sticky Aside

  An example of a container div sticky/fixed to part of the page as the user scrolls. Uses Waypoints.

  Example

  Code: HTML

• Tabs

  A Tabs example.

  Example

  Code: HTML / SASS / JavaScript

• TinyMCE

  Examples of TinyMCE 6, a basic and advanced example as per the requirements listed

  Example

  Code: HTML / JavaScript

• Toast

  A custom built toast message component.

  Example

  Code: HTML / SASS / JavaScript

• Waypoint

  Various examples of using Waypoint library.

  Example

  Code: HTML / JavaScript