SLANTED LINES

The slanted lines design element is elegant and like most elegant things it is difficult and painstaking to make (at least to me, at the time it was). Slanted lines add the feeling of movement to a website. A User Experience motif that is very useful in breaking up the boring boxy look of some websites.

The issue : Naturally html DIVs are square. The image assets themselves are also square (which is needed for the site to be responsive). (The div tag is nothing more than a container unit that encapsulates other page elements and divides the HTML document into sections. Web developers use div elements to group together HTML elements and apply CSS styles to many elements at once.)

The fix : After many hours of banging my head against a wall, googling slanted divs, and much soul searching I stumbled upon a fix that could satisfy the design element as well as keep the functionality of a site that can scale from desktop to mobile without breaking the layout. I created a html figure element and put the slant on it using transform css element and skew(-3deg). Which then slanted everything inside the figure including the image. I then added the transform element to the image and reversed the skew(3deg) and increased the image size to over 100% to fill the figure. In doing this the figure holding the image is slanted while the image inside of it is not. *seen below

Here is an example of the code :

Here is an example of the finished product :

EXPRESSIONENGINE TEMPLATE GRID

ExpressionEngine has an incredible grid functionality built into that helped managing the Employee page. Here is a simplified version of the grid that I made which allowed us to create new entries easily.

In this code snippet, I open with the employee grid. Then create a employee row that spans 12 columns. Then there is an h2 which will hold our employee department. Next I create a panel that will hold all of the employees. Inside the panel I call all of the employee info; their image, name and position which was all inserted into the back end of the site. The backend then looks like the image below when inserting employees and departments.

Create a row for the Department, then select all Employees from the relationship grid.

I could go on and on about the excellent things I learned on this project but I will keep it concise. Thanks for reading!