Lucille Kenney for DGMD E-27

Responsive Typography & Design
Two pages: Home and About.
Others were added to demonstrate nav split into 2 columns from the stackoverflow demonstration, using even and odd nth-children.

Technology used:
Twelve column custom grid, Mobile First Responsive using custom media queries: minimum width 320px, maximum width 1200px. Beyond 1200px, the page will will center.

Used css background to swap out larger logo image for wider screens without downloading it to smaller devices. Not for IE 8 and under. (See Tim Kadlec's "Media Query & Asseet Downloading Results", Test Five: Background Image Where Desktop Image is Set with Min-Width)

Scott Jehl's Picturefill, "...supports most versions of IE but IE9 needs a hack." It uses the video element wrapper around the source elements in the picture tag. (See )

Ben Howdle's Easy Peasy Equal Heights using HTML5 tag data-key=”sameHeights”. Solves the problem of columns floating to the right with nothing on the left because of a longer element above it. This works in IE9 and above. (See

Used push and pull to swap columns on the About page.
The "Article" appears before the "Aside" in the html so will appear first in the default mobile width. Normally it would appear on the left for the wider views. By my using push and pull, I forced (pushed) the article over to the right and pulled the aside to the left thereby keeping the HTML semantic while positioning the Aside on the left for wider screens.

Use of two contrasting fonts selected from Google Fonts, Lato san serif for headlines and Lora serif for text blocks. Styled type scaled across devices.
Prototype 2:
Sass and Compass
Sass and Compass
Two pages: Home and About.
Reworked Prototype1 to use Sass and Compass.

Variables, mixins, extend, nesting, math, built-in functions, etc.
Used variables whenever values are repeated and commented and stored in various partials filemanagement > variables and various other partials as commented.
USED (to name a few):
/* COLOR VARIABLES STORED IN utilities > settings */
$primary-color: #86d3de; $secondary-color: #22758d; $accent-color: #49AFCC;
/* FONT VARIABLES STORED IN utilities > settings */
$serif: 'Merriweather', Georgia, serif; $sans-serif: 'Meriweather', Arial, Geneva, sans-serif;

Created custom-coded mixin and commented the section where the mixins are stored.
/* CUSTOM MIXIN with A VARIABLE AND NESTING */ ... @mixin std-heading in filemanagement > variables
/* USING A MIXIN with PARAMETERS */... @mixin navstyle ... filemanagement > mixins
/* PASSING COLOR PARAMETERS TO A GRADIENT MIXIN */...@mixin gradient ... utilities > settings

Demonstrated proper use of extend in at least 1 instance and placed a comment where the extend exists.
/* USING EXTEND ON H1 FOR THE HEADINGS */ ... USED extend a style: @extend h1;
/* EXTEND-ONLY CLASS */... USED extend-only class %color
/* EXTEND AN EXISTING STYLE */... Used extend-only and chained extend styles %box .box-primary .box-secondary

Demonstrated nesting to 2 levels in at least one instance and commented the area where the nesting exists.
USED nav{ ul { li{} a{&:hover {}} } }

Incorporated at least 2 instances of built-in Sass functions listed at the Sass website: and commented where the Sass function was used.
USED: Built in math function, random and built in color function, lighten.

Demonstrated the use of if/else in at least one instance and commented on the instance of if/else.
/* IF ELSE MIXIN WITH DEFAULT TO RIGHT STORED IN "filemanagement/mixins" */

Used several partial files in SASS file management. Inspired by Jonathan Path's Simple CSS Framework,
Added Compass Mixins
Incorporated 3 Compass mixins with comments where those mixins occur.
1) @import "compass/css3/border-radius" // see styles
@include border-radius(3px); // Compass framework mixin, see: sass > modules > _btn.scss... Used on Home page 'Add to Cart' and aside boxes on About page
2) @import "compass/css3/box-shadow"; // see styles
@include box-shadow(0 2px 5px rgba(0, 0, 0, .4) inset); // Compass framework mixin, see theme > theme ... used under the nav bar in header
3) @import "compass/utilities/sprites"; // Compass framework mixin... modules > icons ... see paypal basket in header.
Prototype 3-A:
Foundation Framework Site
Leveraging Foundation Framework

The three pages to be graded are Home, About and Contact. Use of the same html pages provided consistent variables which allowed me to demonstrate the benefits and ease of swapping out organized, modular partials while keeping my focus on the technology at hand.

Other pages were created to demonstrate foundation nav elements and to experiment and test demos provided in the Foundation docs and are not intended for grading as it does include Lorem Ipsum. The idea here was to focus on and test the technology and not content. The pages to be graded are complete with my own content.


Used the Foundation default grid layout.
Special grid feature include:
incomplete row on 'main'
combined column/row on footer tag,

responsive navigation bar with hamburger button
dropdown for medium and large grids and drilldown for small devices
Actual links under dropdown are demonstrative only to show how the dropdown and drilldown work. The content on those pages is used as a platform to experiment with and test demos provided in the Foundation docs and are not intended for grading.

Styling: Incorporate 3 instances of styled items in your pages.
buttons on the Home page: small button expanded
callout on the About page: warning large callout used on the blockquote
styled icons in the header and footer

Form: form field types on the Contact page are appropriate to data collected and validates using Abide

JavaScript-based data-interchange widget for images:
Interchange was incorporated in two instances on the index/home page in the header and main areas:
For instance, the logo in the header previously used as a css background image in Prototype 1 and 2 are now controlled and swapped out with img interchange: iHeart Logo
And the workspace image in the 'main' area controlled with picturefill in previous prototypes is now controlled with data-interchange: workspace

JavaScript-based widgets:
From the list provided, I used:
Sticky in the header. I don't particularly like it there but I wanted to demonstrate it.
Drilldown in the nav bar as mentioned above on the smaller grid: (class="vertical medium-horizontal menu" data-responsive-menu="drilldown medium-dropdown" style="width: 300px;")
Dropdown and Equalizer, covered in class.

Change at least sass 3 variables
changes primary color in _settings Since I had created a modular, custom framework inspired by Johathan Path ( in my previous prototype2 project for sass and Compass, I simply stripped out my styles stored in partials and started over.
I did however, reused some partials but most of what I've done has changed. I'm using Foundations icons in the footer in prototype3 in place of Fontawesome used in prototype2. The Foundation cart icon also replaced the previously used shopping cart sprite used in the header for prototype2. The cart is restyled using icon fonts that are resized with breakpoints
I had created most of my styles with compass mixins, etc for prototyp2 but since I'm not using compass in prototype3, I removed them which was simple enough to do since I had them all organized in partials.

custom mixin grid styles for the About page combines several classes into one shortens the grid definition to one class, i.e., 'sidebar' instead of 'small-4 small-pull-8 columns about' /* use the row styles on the container leveraging the power of foundation grid*/ /* used mixins from the foundation grid with custom markup */ /* mixed in breakpoints to change grid columns */
Prototype 3-B:
Zurb Foundation Email

Prototype 4 Part 1-A:
Flexbox Froggy Screenshot
URL for the Assignment 4 Part 1-A Flexbox Froggy Screenshot.
Flexbox Froggy Screenshot

Per the requirement, I took a screeshot of the final stage of the Flexbox Froggy Game as evidence that I've completed this part of the assignment.
Prototype 4 Part 1-B:
Flexbox Grid
URL for the Assignment 4 Part 1-B Flexbox Grid Layout. Flexbox Grid

Built this page using Flexbox Grid Layout with media queries and Sass using the latest version of Chrome for Mac. Flexbox Grid has it's own css page linked at the top of the flexbox-grid.html:
Prototype 4 Part 2:
CSS4 Grid
URL for the Assignment 4 Part 2, CSS 4 Grid. CSS 4 Grid
I rebuilt pages from Assignment 2, CSS3 and HTML5 custom built grid with Sass and media queries into custom build CSS4 and HTML5 grid with Sass. Grid reordering takes place on the about page for wider screens where the aside is appears after the main section in the html but reorders to the left on wider screens.
This page can only be viewed properly in Chrome browser configured with experiment features. To enable experimental features in Chrome: chrome://flags/#enable-experimental-web-platform-features

Prototype 4 Part 3:
Assignment 4 Part 3 Animation.

1) A 3D css keyframe animation transformation on individual letters within a single svg (using perspective)

2) A CSS Animation Transition on Hover over an SVG graphic. The element gradually transitions over 1 second without any sharp jumps from one state to the other on hover. The css is imbedded at the top of the html page.

3) @keyframe animation. This animation uses percentage values instead of "from-to" values in the animation syntax. My goal for this animation was to make it resemble TV text where the text comes in from the margin quickly, then slows and continues to move ever so slowly just before it reaches it's mark. Then the play and pause are used to scale and color the heart on hover to suggest a heart beat. The css is imbedded at the top of the html page and commented out code demonstrates how the animation evolved.

4) On hover of the entire SVG, only the heart will scale and change color while leaving the other parts of the logo unaffected. Lucille Kenney Logo The css is imbedded at the top of the html page.