Article Page Template Protoype with Gallery Grid

Centered .articleContainer on medium screen

FYI, this prototype was developed with the zurb foundation framework.

Main functionality notes:

  • Parent container max-width 1200px to match existing AAA style
  • On Large screens, article text/copy on left half-width of row, and image on the right half of the row
  • Typography
    • Custom font sizes change via breakpoints according to AAA guidelines
    • Font Family "Proxima Nova" not included in Prototype
  • Article text/copy and image reflow into 1 column medium and small screen
    • article text/copy and image container has max width of 610px on medium and small screens
    • article text/copy and image container centered in 1 column on medium and small screens
    • in this prototype, .articleContainer created to demonstrate style
  • Images
    • Appear on right column on large screens greater than 800px wide
    • Flow to single column on 800px and less
    • Edge to edge images on screen 610px or less, when images have 610px width or greater
      • Images with less than 610px width center aligned (whitespace on side ok)
  • Gallery Grid at bottom of page
    • Height of each grid div automatically and dynamically changes height to match tallest in set
    • Utilizes Zurb Foundation Equalizer component
large 6, floated right
This image has no padding on small screens

large 6; last

.articleContainer max-width 610px

Alphabet used to aim for line lenght of 40-50 characters

abcd efgh ijkl mnop qrst uvwxyz abcd efgh ijkl mnop qrst uvwxyz abcd efgh ijkl mnop qrst uvwxyz abcd efgh ijkl mnop qrst uvwxyz abcd efgh ijkl mnop qrst uvwxyz

Aliquam volutpat dignissim dapibus. Suspendisse sed nibh lorem. Sed cursus sapien a pharetra sollicitudin. Duis fermentum nisi a sodales faucibus. Ut rhoncus mi lacus. Vivamus eget dolor eu justo consectetur sodales vel id est. Duis at risus mi.

Curabitur elit ante, viverra porttitor turpis eget, tempor consectetur nulla. Nunc in ipsum est. Sed ac arcu a lorem placerat dignissim sit amet eget velit. Donec tempus tortor dolor.

Quisque facilisis nisl a dui fermentum, sit amet convallis mauris faucibus. Maecenas vestibulum id nisl et egestas. Integer odio tortor, aliquam sit amet eleifend sed, dictum et velit. Fusce diam erat, porta et dolor vel, rutrum egestas elit.

Following image centered in "text/copy" column (not starting new row)

Quisque varius libero magna, nec luctus turpis gravida ultrices. Nulla mauris massa, elementum at tortor et, rutrum porttitor mi. Vivamus posuere odio enim, sed vulputate velit dictum eu. Suspendisse nisl ipsum, ultricies elementum scelerisque nec, condimentum vestibulum mi.

large 6, floated right
Vertical image ok, aligned center
Skinny image at 100% width has whitespace on left/right in mobile

Image on right in large screen, image above on medium and small screen

White space between rows on large screens ok

Donec pellentesque sapien eu sem rutrum, a suscipit diam consequat. Donec at arcu mattis, sodales velit at, finibus risus. Aenean tempus non justo sit amet egestas. Vestibulum maximus lacus et libero interdum, in auctor lectus facilisis. Proin tincidunt, magna ac tempus efficitur, ex mi accumsan justo, vitae iaculis sem est quis lacus.

Gallery Grid with Dynamic Heights to Match Tallest Div

4 columns large, 6 columns med

Most amount of content in this callout panel div. Other divs height will dynamically match this height with data-equalizer

4 columns large, 6 columns med

This div content is shorter, but matches tallest

4 columns large, 6 columns med

4 columns large, 6 columns med

4 columns large, 6 columns med, end

"End" class in parent div to align last div left to right