Web Hexagon Builder


A JavaScript based project to build and export HTML/CSS hexagon shapes

About this project:


Web HTML/CSS Hexagon Builder

This project is an attempt to automate the process of building hexagons for web design purposes. Hexagons are relatively straight forward objects on the surface, but have a fair number of moving parts and become rather finicky to work with as attributes are added. This tool lets you set up your hexagon how you'd like, and then copy the HTML and CSS to put onto your own site.

Currently the code output is based around IDs, but it's easy enough to switch the ID names over to class names if you need more than one hexagon on your page.

Technologies used:


HTML: The hexagon is built purely in HTML from one anchor element and two divs (in depth explanation of everything in the Technical Talk section); three rectangles rotated to form the hexagon shape.

CSS: CSS dictates everything else in the hexagon outside of the existence of the three initial rectangles. CSS, with extensive use of the calc() function and pseudo-elements create a self scaling hexagon with no hidden changes to the CSS. Everything is based off properties of the parent element, which makes it super easy to manually adjust stuff if you want to get weird with your hexagons after they've been put in another site.

JavaScript: The project itself is built primarily in JavaScript to allow users to enter the information they want in the appropriate fields. This is added to the hexagon object being built on the screen, and the code is then outputted below, so their shape can be copy and pasted into other sites.

Technical Talk:


The HTML

The HTML for the project consists mainly of three main sections. One at the top for holding input fields, one at the bottom for holding spots for the code output to be set, and the center hexagon. The hexagon itself consists of a container div for spacing and positioning, an anchor tag, a div containing a p tag, and the two rotated divs that form the rest of the hexagon. The anchor tag forms the central horizontal bar of the hexagon shape, and wraps the rest of the contents, so that it may be used as a link.

The CSS

The CSS for the hexagon starts out by setting the size of the central anchor rectangle, the other divs are wrapped and can be set as 100% for both height and width, so they scale easily. The other divs are then rotated at 60° and -60° and positioned absolutely. Their background is set to inherit, which takes in both background colors and allows for seamless coverage of background images, which I'll discuss later.

Actually, I'll discuss the background images now. Background images, when applied to rotated objects, are also rotated. The workaround to this is to create a pseudo-element ::before, force it maintain a size a bit larger than the hexagon, and inherit the background of it's parent (goes back to the original a tag). I then could rotate the ::before element opposite to that of it's parent, and repositioned it so that the pseudo-element was centered on top of the hexagon. I did this for both of the rotated divs, set their overflow to hidden, and ended up with a set of elements that shared/ spanned a background image seamlessly.

Box shadows unfortunately do not work with stacked elements like a hexagon (they shadow all over each other), but the filter: drop-shadow function in CSS sure does. The nature of the drop-shadow mirroring the alpha channel of the hexagon allows it to work as one would hope it would, rather than dropping a shadow on the elements immediately below it.

The JavaScript

The JavaScript in this project pertains entirely to the hexagon builder site project application itself, as the hexagon has no JavaScript in it.

Almost universally across the top section of the page, JavaScript is used to check the states of check boxes, and to take entered values and apply them to the hexagon element. Regular Expressions are used occasionally to force checks on entries that are less obvious when they fail (http:// in <a> links).

The pick a color section tool comes from the Eyecon ColorPicker JQuery Plugin. It's responsive nature and customizable options made it a natural choice for the project.

The code output below is done via a mutation observer watching for changes in the HTML. When the JavaScript makes an update to the hexagon elements, the outerHTML is scooped up and updated in the lower code section. This is organized by some light RegEx patterns on the outerHTML string to mirror halfway decent looking code.

The CSS is grabbed via looping stylesheet.cssRules[i] across the hexagon's css rule range (within the stylesheet) and outputting it below. Light RegEx Patterns are used to style this as well.